Reusable Components + New UI

[hacdias]

THIS IS A WIP

WebUI's interface should be similar to Desktop's in a way the user has a seamless experience when transitioning.

Before reading the description, notice that:

• A lot of files were deleted, but that doesn't mean they aren't supposed to be used (such as translations). They will be recovered in a need basis.

Related:

• Initial Issue: Restructuring WebUI #616
• IPFS Desktop PR: Fixes Bunch ipfs-desktop#596
• ipfs-react-components - common React Components that are used on WebUI and Desktop.

Goals

• Normalize Names with Desktop (e.g.: peers vs connections)
• Use the same React Components as Desktop
• Redesign WebUI
• Make this work with JS-IPFS
• Make codebase similar to Desktop's
• Node Info (more info than before)
• File Manager
• Peers List
• Peers Map/Globe?
• Peer Detail
• Translations
• DAG Explorer¹
• Edit Config¹

---

1. Will do a basic version like what we had before... in the future, in a separate PR, we can improve this too.

[hacdias]

@olizilla @diasdavid I need your help to list the features WebUI had before and add them under "Re-build other features WebUI already had:" on Goals, please. 😄 Could you do me that favour?

[daviddias]

Hi @hacdias o/

Cool to see that you got started in improving the WebUI. It seems that you decided to take the hard route of rewritting the WebUI from scratch which although a noble endeavour, it might make your quest a difficult one to attain.

The best way to start such project is to first ask "What are we looking to do" and "How does success look like", once you have those two figured out then you can start outlining the path. In CS and complex system in general, it is pretty much always better to have incremental improvements than destructive refactors.

@olizilla @diasdavid I need your help to list the features WebUI had before and add them under "Re-build other features WebUI already had:" on Goals, please. 😄 Could you do me that favour?

Me an @olizilla are always happy to help but this task should be your responsibility as the owner of this endeavour.

WebUI is the augmented version of Desktop.

This is not an accurate description.

Let's bring this to the next IPFS in Web Browsers sync up, I'm sure @olizilla @lidel and others will have thoughts too :)

[hacdias]

@diasdavid sure! Btw, when is the next sync up? The event disappeared from my calendar!

[hacdias]

@diasdavid

It seems that you decided to take the hard route of rewritting the WebUI from scratch which although a noble endeavour, it might make your quest a difficult one to attain.

It doesn't seem to be that hard to do. 😄

Edit: although it is built from scratch, I'll be taking ideas and code from the previous version.

This is not an accurate description.

Let's say then... "WebUI interface should be like an augmented version of Desktop with more functionality and administrative stuff"?

[hacdias]

A very rough idea of the File Manager. It would use the available screen space to open the directories to the right. What do you think? 😄

[hacdias]

I'm now now investigating the possibility of finishing #229, rebasing into master, merge (with the approval or everyone) and then use the Reusable Components.

Edit: the version from #229 doesn't work here as-is.

[olizilla]

Is there a list of the main things we don't like about the current web-ui? I think that'd really help me get a handle on how to approach a rewrite.

The best way to start such project is to first ask "What are we looking to do" and "How does success look like"

That's a good point! For me, success would include

• Build a team of people around Desktop, Dashboard, Companion, who feel invested in the code and will keep it maintained and have capacity to onboard new developers and encourage and engage with PRs from the wider community
• A focus on accessibility, ARIA and calm UX so the work can be enjoyed by as wide an audience as possible

I'd like to focus on making Desktop as good as it can be. When we have one app that we agree is an example of a really great IPFS user experience, we'd be in a good position to start extracting patterns and components that are worth reusing... once they've been tested out by a bunch of users and gone through a few iterations and experiments.

[hacdias]

Good points @olizilla. What do you think about the interface? Do you think it should be relatively similar across Desktop and WebUI?

What is keeping me from continuing this PR with the reusable components if the following:

1. Should the interfaces be that similar? If so, we should use the common components, but we shall not forget that what makes a good Desktop app doesn't make a good web app and vice-versa. Users expect different things from both.
2. If the interface is not that similar, what's the point on using the same components if they're going to be styled differently? Or should we just add a different style sheet to modify specific details?

Success would include:

1. A beautiful, full featured WebUI
2. A good transition between applications

It makes me a bit confused whether I should start by trying to improve the existent features or to start building the new design.

[hacdias]

Btw, I think this is a very nice lib for in-app notifications 😄 [Noty]

[lidel]

@olizilla thank you for mentioning accessibility! It should always be on our mind. I created ipfs/ipfs-gui#28 to track it across all UIs (feel free to update the list of tasks or add relevant reading material etc)

@hacdias it is expected that our existing apps will look different for some time as we work in Q1, but if something new needs to be designed try to get loose inspiration from initial work at ipfs-inactive/ipfs-ui-style-guide#3 :)

We will be dogfooding our Style Guide so if you you stumble uppon unknowns, or would like to propose how to solve a design problem, raise questions/proposals as actionable issues in ipfs-ui-style-guide.

ps . indeed, Noty looks nicer than Toastr :)

[hacdias]

@lidel right now I'm going with a Desktop like design for WebUI but then we can tweak it better to feel like a better web app. I'll put some screenshots here today.

As for the Style Guide, I think we should take a look at Desktop's and WebUI's color scheme and make it look more like the ones we have on Style Guide.

Right now, Desktop's basically offers a Light and a Dark mode, being the Dark one the default. My suggestion is the following:

• A "default" color scheme based on the main colors of IPFS
• A dark theme
• A light theme

[hacdias]

Another point is: @dignifiedquire suggested using Preact (previous discussion here: #255), which is a very similar framework to React, but much tiny. I just have some questions regarding its compatibility with React router and other react plugins we're using.

[hacdias]

So, @olizilla @dignifiedquire and I talked a bit and decided for me to focus now on IPFS Desktop PR ( ipfs/ipfs-desktop#596) because:

1. Needs less new features.
2. It's more robust in terms of UI and UX.
3. It's faster to finish.

Then, after having Desktop with a nice UI for everyone, we could start porting those components to WebUI through this PR. Focusing on only one thing right now enables me to make it awesome (I hope) and I can keep using the ipfs-react-components to use here later.

[hacdias]

I'll be closing this for now, but will not delete the branch until I feel it is necessary. When my focus moves to WebUI, I'll open a new PR or reiterate this one.