File browser polishing

[olizilla]

• Ignore common system files when adding directories. Specifically .DS_Store files on osx. If you know of an similar windows os metadata files that should generally be ignored, then those too. (5610655)

• Sort by name should only sort by name. We can sort by kind (folders first then files) by default, but if the user selects sort by name it should do that regardless of their kind. We may need to introduce a "kind" column so that the user can return the sort to "by kind" if they want, but I'd love to find a less redundant way. Skip for now. See File browser polishing #748 (comment)

• fix breadcrumb position jumping up a few pixels when navigating to a file preview page. (acdd1dd)

• Display cumulative sizes for directories (9218fea)

• focus the first item in the file list and add a focus state. (95ea3c7 - just click arrow up or down when nothing is focused).

• add keyboard navigation for up and down arrow keys to navigate up and down the list, and enter to drill down into a folder or file. Meta key + down should also drill down. (95ea3c7)

• replace "Root" in breadcrumb with a home icon (like https://icon.now.sh/home) (39b5de0)

• Add a quick slide-in from bottom animation to the multi select actions bar when it appears (e95d95f)

• When previewing images and videos, don't show the media larger than it's natural resolution. Use max-width:100%. Right now they always take up the full width, which looks neat, but small images get super distorted, and most images and videos end up much taller than the available screen height, on my laptop screen at least. (333eb88)

• match breadcrumb underline color to the dag-pb color. See: Extract multicodec names, shortnames and colors to a module ipld/explore.ipld.io#27 (81e5802)

[olizilla]

@hacdias let me know if any of this isn't doable or you have other ideas.

[hacdias]

Ignore common system files when adding directories. Specifically .DS_Store files on osx. If you know of an similar windows os metadata files that should generally be ignored, then those too.

And what if the user wants to upload them even if it's unusual? This is easy to do though: just have a list and filter by name.

Sort by name should only sort by name. We can sort by kind (folders first then files) by default, but if the user selects sort by name it should do that regardless of their kind. We may need to introduce a "kind" column so that the user can return the sort to "by kind" if they want, but I'd love to find a less redundant way.

Windows Explorer, Google Drive, Dropbox, all separate folders from files and do it the way we're doing. Windows Explorer and Dropbox put the folders in the bottom when ordering in a descending way.

I think we should leave that as it is or just put the in the bottom when ordering in a descending way. I believe it makes sense to separate folders from files because they're different things and usually the user knows what he's/she's looking for.

[olizilla]

I have never wanted to upload a .DS_Store file. I'm happy to make the call that the webui should ignore them. If someone really wants to add the .DS_Store files, then we can direct them to the CLI for now.

Dropbox (on there web ui, for me at least) and OSX finder sort items by name. Google drive and Windows Explorer sorts by kind then by name. I find it confusing when sort by name doesn't sort things by name particularly I have more than a screen height full of directories, so the file I'm looking for is below the fold, and not next to things that start with the same letter.

[hacdias]

Apparently, as we've seen, Dropbox sorts the mac way on mac and separates files from folders on the other platforms. I suggest we do the same for now, and in the future we can add more sorting options (8949da5).

[hacdias]

@olizilla I think we can close this issue and tick the first item on #749!

[olizilla]

Getting really good now! A couple of things from using the new fancy files:

• Now we've tightened up the file list, it feels like there is a little too much space at the top of the page. I don't have specific suggestions there, but what do you think?
• The home icon with the underline seems a little to "strong" when we're at the root. It's all on it's own on the left and really dark and underlined, but it's not interesting until we start drilling down into the folders and files. Perhaps we should hide it or make it less visually distracting when we're at the root.
• There are a few little gaps in the clickable areas on the file items. I keep managing to click right between the filename and the cid, and it's not part of the hit area so nothing happens. The is another between the icon and the file name/cid. Would be nicer to have that whole part of the box be clickable.

[olizilla]

Done!