UI overhaul

[NeoTheThird]

The UI code is terribly bloated. Might be easiest to burn the whole thing to the ground and start anew. Seriously, what the fuck is this.

[NeoTheThird]

We might also have to replace pug entirely, because it's not compatible with newer versions of electron :(

[pajlow]

@NeoTheThird Hi, what are your thoughts on Svelte? I think it is pretty simple to pick up and provides nice templating possibilities? Although you probably have Vue in mind. :)

[NeoTheThird]

@pajlow yeah, i was planning using vue, as i have never used svelte. But i'll be happy to have my mind changed if someone were to contribute wink wink nudge nudge

[pajlow]

@NeoTheThird I will start to set some things up and implement routing and a reusable component for all the modals. Should I open a pull request for insights after that?

[NeoTheThird]

Sure, that'd be great! I should add a disclaimer that i can't promise that we'll go with that approach, so don't pour in too much work upfront. Feel free to open a PR early, if it demonstrates that the approach is good, so i can take a look at it. :)

[NeoTheThird]

@pajlow I checked out some Svelte code the other day, i have to say, i actually rather like it! Looking forward to seeing what you'll come up with. I just wanted to give you a heads up that i've just merged #1425 to upgrade us to electron 10, i hope that doesn't create too much extra hassle for you.

[pajlow]

@NeoTheThird Glad to hear. While it is not that difficult to get svelte working with electron, combining messages (ipcMain) gives me some headache. Should the logic stay inside main.js and be called from the components?
No worries about the upgrade. :)

[NeoTheThird]

@pajlow

Should the logic stay inside main.js and be called from the components?

Back in the olden days, all logic resided in the rendering process, which wasn't great. When i separated that, i had the idea to keep the UI optional, and also offer a cli-only mode (#696). I still think that'd be a nice thing to have, but if it creates too much additional work, it's also ok to leave it. I would however prefer to not do stuff like call an adb command directly from the renderer. I think there's currently too much stuff in the file main.js, and it needs more modularization. But i think keeping the logic in the main process has done us good.

[NeoTheThird]

Did you manage to send messages back and forth at all? If you want, maybe you can try setting the whole thing up without the backend logic first, and just listen to the appropriate signals from main, so we treat the ipc messages as an interface, which is what it's supposed to be. I'm also happy to re-define some of the messages. Sky's the limit! It's supposed to be an overhaul of the UI after all, so i'm happy to change (and improve!) fundamental things.

[pajlow]

I will try your suggested approach. I have some more time next week. So far I just set up svelte and some dependencies etc. I will let you know when I have some more progress. :)

[NeoTheThird]

Awesome, looking forward. Good luck!

[pajlow]

Small update: I am switching all pug templates to svelte components. So far I replaced waiting-for-device, working and the device selection modal. I updated bootstrap and recognized that a lot of styles are overwritten by the global css file. I changed the absolute positioning of the overall layout (Header - Page/Route - Footer) to a flexbox layout. At the moment I am figuring out when which signal is needed and listen or send them in specific components.

[NeoTheThird]

Awesome, looking forward to seeing it! Thanks for the update. Let me know if you have any questions or anything that you need from me.