feat: navigate files in the wild 🦌

[hacdias]

Requires:

• feat: new folder icon ipfs-shipyard/ipfs-css#34

[hacdias]

So, this PR is kind of working and here are some screenshots of what is is right now. For more background on this PR, please read #1025 first.

So, right now, we can already navigate /ipfs, /ipns and MFS namespaces.

• On /ipfs, the user can see their direct and recursive pins listed.
• On /ipns, we can navigate to paths such as /ipns/ipfs.io, but we can't go to the root.
• On /mfs, we get access to user's "home". We should really change /mfs to something like Home or an Home icon.

We also have a top bar, like GitHub's (on the repository) with some statistics: right now we have the number of blocks (clicking leads to nowhere), the number of pins (clicking leads to /ipfs) and a "MFS" button. We were thinking about adding the space occupied by the repository and a comparison between the current occupied space and the limit the user has set in the configuration.

I'm pinging you here, @ericronne, so you could give me feedback on this. What do you think we could do to make this look better? Would you change the navigation? If so, why and how? How'd you improve the top/stats bar?

[fsdiogo]

This is awesome @hacdias 🙌

Some thoughts about the UI:

We should do some minor tweaks here, as it feels weird the pins and files being clickable, but not the blocks. Do you think it would help adding the "Pin" logo here to go along with the home? And then find a way to add the number of peers there too.

Why the "...More"? Will it be a new feature? If not, we should just keep the + Add but disabled as it is.

Should we add the Pin/Unpin feature in the bottom bar?

I feel the breadcrumbs are way to large, we should try to lower the font-size and/or the font-weight. Why not hide the CID below the breadcrumbs, and only show it on hover?

[hacdias]

Hey @fsdiogo! Thanks for the feedback!

Do you think it would help adding the "Pin" logo here to go along with the home? And then find a way to add the number of peers there too.

I presume you meant pins. Yeah, I personally wouldn't mind. We could even drop the number of pins. But I believe there are a lot of people that like numbers. If we find a good way to have both, it'd perhaps be nice. /cc @olizilla @ericronne

Why the "...More"? Will it be a new feature? If not, we should just keep the + Add but disabled as it is.

The more is just the current .... It works on single files only and some folders. Just try it and you'll see. Basically it shows the context menu for the current page.

Should we add the Pin/Unpin feature in the bottom bar?

Perhaps... yes! Do we have space for that?

I feel the breadcrumbs are way to large, we should try to lower the font-size and/or the font-weight. Why not hide the CID below the breadcrumbs, and only show it on hover?

I can try tomorrow. I agree with the font size reduction. I didn't want to remove/hide the CID, but if we reduce the font size I think we should so we're not giving it the same importance as the breadcrumbs themselves. 😃 /cc @ericronne @olizilla

[hacdias]

Just tweaked the breadcrumbs:

[hacdias]

@olizilla CI is failing due to commit 7b176a9. I took a look but I can't figure out which titles are wrong and causing this. They all look good!

[olizilla]

• What happens when the breadcrumb text is long, and it takes up more horizontal space than is available?
• Let's remve the label CID:, so it's more similar to the files list.
• The breadcrumbs are just a hint, they are not the most important thing, so they should be presented more softly... it's context for the user, but in general, you are clicking around in your files, so you mainly know where you are. The breadcrumbs are a reminder if you forgot, or are coming back to this page later. As a starting point it the breadcrumbs here should match the size, color and position of those in the ipld explore section.

[hacdias]

From now on, this happens when the breadcrumbs overflow:

(Fades out on the left)

Current state:

[hacdias]

Ping @olizilla

[hacdias]

@olizilla @fsdiogo I'm merging this now (it's been exactly 3 months since this PR was opened!). The tests are passing and everything seems to be working well. Other changes can be done afterwards in smaller, separate PRs.

I ask you all to try anything you think that should be tested to make sure if it's working correctly. If so, please let me know and I'll fix it!