Sidebar scratch

[ghost]

Hi

I created new pull request due to a particularly murky rebase process I had to do to work on up to date project. Besides, the name tabbed_scratch doesn't have much in common with what's going on in this branch ;) I'm aware that creating second pull request is a pain but rebase was really nasty as it is with rebasing between two different repos. Maybe a link in each request to the other one would help.

Changelog

What's Done

• Changed ionicons to react-bytesize-icons as suggested
• Changed Roboto to Fira but it looked just bad so reverted
• Reworked whole sidebar layout to flexbox so it's robust and resizing ready, I don't know how to implement the latter though
• Made default workspace part of the list (first item)
• Removed header altogether, added 'new project' button to default workspace item
• Removed sidebar toggle handle, bound sidebar toggling to ctrl+b shortcut
• With toggle handle gone, text area is properly centered again
• Adjusted sidebar colors -> sidebar has darker shade of background instead of gradient border, active scratch just has the same color ar scratch background
• 'Calmed down' hover animations
• Aligned sidebar scrollbar behavior with default scrollbar
• Removed unnecessary text
• Reworked prompts so that they appear instead of the edited item or in place of new-item-to-be
• Reworked app rendering to have single react root
• Move theme management to top level component, sidebar supports light theme
• Replaced custom signalEmitter with ipcRenderer, eliminated memory leaks
• Moving default scratch should work, the rest of projects hierarchy is relative to it (tested)

Need help with

• Sidebar drag resize - I don't know how to bite that, I gather you don't want to include any full-blown library just for that and you mentioned you have some experience with that.

Todo

• keyboard support for items management and navigation

Todo just for you ;)

• clicking outside of the sidebar should close it
• no roboto
• single parsed text file storage
• automatic naming based on first word of the scratch
• last scratch -> new scratch, persist on content
• remove empty scratch that lost focus
• moving to a different scratch closes the sidebar

[ghost]

Added one more super useful feature :)

• sidebar icontains (project / scratch) search, togglable by ctrl+h (or by search icon in default workspace item)
• collapse all projects (by button same as above or ctrl+u)

[Kilian]

I haven't forgotten you @Brachacz, just haven't gotten around to it yet!

[ghost]

Sure, no frills ;)

[Kilian]

Good improvement, UI is much better but it will take a lot of work before this can land.

• Still has the project/scratch hierarchy, it should be a flat list
• I think all the text finagling should happen in the render env, not the main env (main env just stores and retrieves from a single file) On disk there should be a single content file with all contents in it (with some smart unicode to split the different scratches). Having all this code in the main env complicates things a lot.
• the way mainapp.jsx, fromscratch.jsx and sidebar.jsx now work together adds a layer of indirection that I'm not comfortable with, as it circumvents "The React Way". Can you make it so that fromscratch.jsx just has a <Sidebar /> element? (And I would expect it to have props currentScratch and scratchList as well as function props setcurrentScratch, addScratch, updateScratch and deleteScratch, from which it builds its state, with the project management done in the Fromscratch component.
• Please use rems for sizing. Check the height of the search (ctrl + F) or update bar to see how this works. I'd like all rows to be the same both inside the sidebar and in the text area. everywhere you use 26px, it sohuld be 2 rems
• Any text input, such as create/edit/search should visually look the same as the search bar to create a coherent UI

Other smaller ui things:

• sidebar is pretty wide (would be nice to have it be a percentage of the width with a reasonable min/max)
• there's some horizontal overflow/scroll issues when your sidebar is higher than the page and you scroll horizontally
• text search overlaps sidebar

If you want me to set up some sort of skeleton code wise, let me know.