Improve asset filters

[jimafisk]

Currently we convert nest folders inside the "assets" dir into filters that CMS users can use to narrow results in the media browser.

There's a small bug at the moment where the top level assets filter is being displayed:

Assets Dir Screenshot

This needs to be parsed out because it exactly displays all the files which happens by default and will never narrow any results.

We should also double check that full asset paths are appropriately being check and not just the top level folder. For example if we have files located at assets/thing1/abc/test.jpg and assets/thing2/abc/test.jpg applying the abc filter should only correspond to either the parent thing1 or thing2 folder.

I also want to improve the filters in general so they are not only more clear what the actual filepath is, but also so they are more useful when uploading or swapping files as well. I imagine it would function something like this:

1. Initially only display the top-level folders that sit directly in the "assets" folder
2. When you click one of the top-level folders, it will expand out the next level of folders nested within that specific folder (only its direct children folders, not grandchildren). The parent and children folders should be grouped visually to signify the relationship distinguish from other top level folders.
3. Clicking on subsequent child folders repeats the process of step 2.
4. Clicking an already selected parent anywhere in the chain should close all children, no matter how nested.
5. Potentially there should be a visual indicator of how nested a particular child in (e.g. > = one level deep and >> = two levels)

Here's a rough sketch of what this may look like:

Improved Filters Screenshot

These filters should be available when uploading files so editors can place them in the correct folder structure (bulk uploads will all need to go in the same folder).

When swapping a file, the filters should be applied by default (on gallery and upload) so similar images styles can be grouped together logically.

[jimafisk]

I've been working on grouping filters by their full filepath:

• 1195a38
• 33bb4c1
• 62fecff

I have an assets folder in my project that looks like this:

abc/
  - suba1/
    - subsuba1/
    - subsuba2/
  - suba2/
  - suba3/
dogs/

Currently looks like this:

Grouped filters screenshot

And if you select common root folders it highlights them in each group automatically:

Highlighted common root filter

Since these groups have common roots, I was playing with combining them further like mockup in the original post of this ticket and adding a separate > that determines which level of nesting the folder is at:

{#each filterGroup as filter, i}
  <div on:click={() => toggleFilter(filter)} class="filter{enabledFilters.includes(filter) ? ' active' : ''}">{">".repeat(i)} {filter}</div>
{/each}

I feel like this might be getting too complicated visually, even though it's more concise:

Mockup of combined groups

[jimafisk]

Was sketching out some other ideas around "revealing" filters:

Filters sketch

Basically the idea is we'd only show the top level folder and as you click into it, the next level nested layer would appear. Then you could click into the newly revealed nested layer to reveal the next level and so on. This sounds great at first, but it starts to work a lot like traditional folders instead of filters and introduces several questions:

• Once you've clicked on folders in a nested pathway, what happens if you click on a nested folder in a different pathway (e.g. suba1 is selected currently then you click on suba2)? Should you toggle the other filter off? Does that take too much control away from the user?
• Which files do you actually show at every level? When clicking on a nested item, its parent folders are also selected (that's how the nested item was revealed in the first place), should we show the files at all levels in the path? Would you be able to effectively narrow results that way?

It seems like you're either stuck with a confusing experience where control is taken away from the user, or an experience where the more filters you apply the more broad the results are. Both seem like a losing strategy. To make the top level reveal work you either need to show only files directly in the last selected filter (works exactly like traditional filters and you lose the ability to combine filters) or show all the files in the path which makes your results expand as filters are added.

Proposal:

1. Display all filters grouped by their path (like we have now, duplicating the common root)
2. Whenever a filter is clicked, show only files directly in that folder
3. When a common filter is click, automatically highlight it in every group that uses it

[jimafisk]

These updates are largely included in v0.5.11 but not all, some of them will have to wait until following release.