Design

[hacdias]

This is revamp's main entry point for design ideas. See #661 (comment).

[lidel]

• Found some background on the differences between electron-forge and electron-builder: Question: What's the difference with electron-forge? electron-userland/electron-builder#1193

• The only ask I have is to plan on having auto-update mechanism from the start.
  It could be github-release-based for now, but we should make sure people will follow us on the journey and won't get stuck with old dev version :)

[hacdias]

@lidel so far it seems that Electron Builder can better fulfill our needs since its more customizable. We also have to take in account it supports code signing and auto updates.

I've started to create a boilerplate with the new electron version and electron builder but I haven't pushed it yet.

@olizilla @lidel do you think it's better to push it to an orphan branch or just branch out master and clean up the files?

[lidel]

IMO I think its ok to work in PR against master.

Desktop is not as popular/mature as old webui, so we probably don't have to do revamp branch dance and just develop in master.

@olizilla any thoughts on this?

[hacdias]

I now remember why I haven't used Electron Builder before: I had an issue with electron-prebuilt-compile I couldn't solve at that time. Now I'm committed to solve this issue: electron-userland/electron-builder#3344

[hacdias]

[Playing a bit on https://github.com/ipfs-shipyard/ipfs-desktop/tree/new]

[hacdias]

Some more thinking: I believe we should have three main screens:

• Welcome Screen: welcome, bienvenue, Bem-vindo, where we show what IPFS is, how it works and what IPFS Desktop can do for you. This shouldn't ask for data to connect to an instance yet.
• Menubar: well, our main feature, the menubar! If the user doesn't have a 'favorite' connection or no settings to connect, we have to ask him to set them or to run one with IPFS Desktop itself.
• WebUI: WebUI screen! Still don't know how to 'import' it. RIght now, I'm just opening 'webui.ipfs.io' on new branch.

[hacdias]

@olizilla I'd really like to hear your thoughts.

[olizilla]

❤️ I like where this i going!

My guiding principle for this iteration is that we trim the Desktop specific codebase down to just enough code to show a menubar item, and open the Web UI.

We really want a good welcome screen, and I think some of that will be improving the one in Web UI. If we really need a Desktop specific one, then that's ok, but we should share as much as possible with the Web UI.

As for branches, we probably want a dev branch to lay the ground work, and get it all running again with the major upgrades, but I'd fold it back into master as soon as it compiles and runs and shows anything useful. The revamp branch went on way too long, and I don't think desktop has many dependant projects. As long as the README super clearly points people to the last stable release, and that master is unstable, we're fine.

We should focus on automated pre-releases soon after we pull the new branch into master.

I haven't used either of the Electron-* toolchains so it's great that you are doing the research on it. Can you add screenshots and pros and cons here, or arrange a call for us to go through it?

[hacdias]

@olizilla yesss!

It would be awesome if we could have the Welcome Screen on WebUI!! A global variable could tell WebUI if it was inside Desktop so we could add some info about Desktop if needed.

Yes, I need to research a bit more about the Electron Builder issue with prebuilt-compile but so far it seemed to me the easiest to use and it compiles a bit faster on my machine.

As soon as I've more info, I'll dump it here or schedule a call.

The code I wrote as for now, already injects window.ipfs, opens the WebUI, creates the menubar, etc. Does not have any visuals nor connects to IPFS, but it's a start. I could dump the Welcome screen if we're going to use it through WebUI (just open a screen to webuiURL#/welcome).

[olizilla]

Great. the goal for us on this issue is to define what we want the next version of desktop to look like, and have a bullet point plan for this iteration, that we can break out into issues so we can all jump in and help deliver it as we have time.

One thing that didn't work so well on the Web UI revamp was that a lot of the plan was in my head or was just not defined until the last minute, so it felt like a lot of time I had my head in the code and then had to context switch out to thinking about project management stuff, and all the while I couldn't really give other teams a clear idea of what was left to do to release it.

Lets do a chunk of project management planning up front, so that we don't get too lot later on when we are deep in the code.

[hacdias]

See #661 (comment)

[hacdias]

Two Screens

• Web UI: used for welcome screen, files, and all the other features of Web UI.
• Menubar: the masterpiece little window.

Tree structure

Please take a look at src on new branch.

Features

• Add different IPFS conn configurations
• Ability to turn on, turn off, and connect/start to/a different daemon
• Ability to open Web UI directly on each page
• Which features should the menubar screen itself have?
• Should the menubar screen use Redux? is it needed? Or do we have so few actions that we don't need it?

Asking for feedback 😄 Would like to start tackling this tonight and get it more boilerplated so we can just start developing it.

(PS: Will be off until this night)

/cc @ipfs-shipyard/gui

[hacdias]

[I have been working on the main process code related to the configurations and multiple connection options. Haven't touched the UI, just moving pieces from the old to the new version that will be helpful. Then we just need to put them together with the UI]

[hacdias]

It can run JS-IPFS, GO-IPFS nodes and connect via an API address and inject them to the WebUI. Now I think we just need an interface and make sure that shortcuts (download hash, take screenshot and others are working as they were before).

[hacdias]

Shortcuts are working well.

[PaulCombal]

Since it looks like Desktop will get a revamp, can anyone remind me of the goal of this GUI? Is it aimed at beginners -- eg: the IPFS daemon will start with the UI automatically, fancy UI controls and everything --, or is it aimed at developers?

I'm making a website about IPFS and wondering if I should recommend this to beginners, that's why I'd like to know that.

Also, will the new version support the ipfs:// URI scheme?

Thanks

[hacdias]

@PaulCombal IPFS Desktop is intended for everyone and in our vision, it should be the entry point for new users since you get get the most without the command line. This new version will also incorporate the newest release of WebUI, support js-ipfs, multiple daemons and such.

Also, will the new version support the ipfs:// URI scheme?

I think IPFS Companion, the web extension, has that in the works. That's still a feature we have to handle.

[hacdias]

@ipfs-shipyard/gui some ideas:

[lidel]

I like the use of On/Off and Settings icons: we use the same in Companion, which makes UIs feel consistent 👌

The part I am unsure of is the bottom "dial".
Right now it basically copies items present in current Web UI without place to grow.
What will happen when we want to add a new item there? Will we just add another row?

[hacdias]

@lidel that's a good question! I think we should have an header (similar to Companion's), an overview of the current connected node, and shortcuts to Web UI's most used pages.

And I agree with you: the most thing I'm unsure about is those Web UI shortcuts: how to place them!?

[fsdiogo]

I too like the on/off switch, settings and the node stats.

I get why we'd want the shortcuts, but I think we could live without them. The WebUI will be the primary focus if a user wants to interact more deeply with the app, so one click more to won't really make a difference. Instead of the shortcuts we can just have a button to open the WebUI no?

[hacdias]

Note and FYI, Web UI embedded into Electron doesn't work with File Uploads because Electron sends a different file type to the event! We have to fix this

[fsdiogo]

Here are some mac app menu bar apps that perhaps we can take some ideas from:

Tripmode	Dropzone	Bitdock

Unknown	Fastlane	Guardsense

[hacdias]

@fsdiogo thanks for those examples. I really like the blurred background, but I believe it would be a bit difficult to do cross-platform - it is actually something we've talked about in the past.

Here's the current state:

[fsdiogo]

Yeah, I really like it too, but you're right, cross-platform don't know if it works!

I like it. I would change two tings though:

• I would put the Open Web UI button with full width like in the Fastlane example above
• I'd try to have the arrow and box like the most apps above to make it feel like a floating bar app, instead of just having the rectangle hanging there

What do you think?

[hacdias]

@fsdiogo agree with the floating+arrow thingy. I'll see if I can find a way to do it.

Just unsure about the button with full width, but we might try it!

[olizilla]

full width button looks great, but it also looks a lot less clickable... I vote we keep it looking like a regular button.

[hacdias]

Let's continue this discussion on ipfs/ipfs-gui#44