feat: enable custom sections

[sircharlo]

To do:

• Create dialog to show existing custom sections and allow adding new ones
• Set random color when creating new section
• Add color picker
• Modify logic to include custom sections in the media list
• Allow sorting of custom sections
• Allow drag-dropping to and from custom sections
• Properly persist drag/drop reordering and list changing for custom sections
• Show media items in standard "additional" section if the referenced section doesn't exist anymore
• Add new section button to bottom of media list
• Allow renaming the standard "additional" section, changing its color and reordering it

Unsure:

• Allow sorting sections in main media list
• Remove dialog if unneeded
• Enable heading/section import from jwpub file

[ux-git]

@sircharlo if you'll need any other graphics, colors, states, icons, windows, etc – just ping me.

[sircharlo]

@ux-git Any thoughts about this build?

I think for the sake of simplicity and consistency, it might be best to fold the color/delete/reorder buttons that are currently in the section headers into an 'edit' or 'more' button. This button would open the dialog where users could do all those things.

I'm not decided yet though. I see this going a few potential ways. I want a mix of customization possibilities with simplicity for non-power users.

[ux-git]

@sircharlo very good so far!

Some thoughts:
0. All the media for the special events are 'Extra media' basically, since there are no standard media. What about renaming the 'Extra media' into something more generic like 'Added media' or 'Imported media'?

1. Color picker:
   a) RGB and HEX top tabs are not really necessary I believe. Since we have the bottom tabs with different options, moreover RGB vs HEX currently changes nothing besides color code input. I'm not even sure if users will benefit from seeing the color codes.
   b) RGB sliders can be simply removed – it's one of the most unpredictable way of selecting a color 😄😅 HEX palette and presets grid covers literally all the cases that I can imagine.
   c) This area in the middle of the palette is an eye-burning-sector. I personally would remove it if possible for the sake of not being able to make the app look bad. Other than those, there are more than 50 other colors which is more than enough.
   
   
   d) The color icon would be nice to change to something like in Figma, e.g. palette, color droplet, color picker, or something else. Right now the dot is colored in the same way as other icons do, so it doesn't communicate its purpose right away.

2. New section button (in the reorder 'Edit sections' modal as well) needs an alternate fill and hover color for the dark theme:
   
   

3. Adding media to a specific section (by using the + icon) still adds the media to "Extra media" section and requires manual drag-n-drop sorting.

4. Would it be possible to rename sections by double clicking on the name? It would be a great addition to the global sorting modal window.

5. Renaming the sections is quite slow, perhaps because of the real-time update.

6. Section reordering:
   a) Currently, every section has the same button which opens the modal window with global reorder settings. Maybe this could be replaced with the 'Reorder' button in the blue top bar? One button for all sections make more sense than many buttons for each section that are doing the same thing.
   b) If we remove the sorting shortcut, we can actually place separate 'up' and 'down' buttons there to quickly move the section one step higher or lower with just one click. For reordering something for huge set of sections global reorder window is the way to go, but for quick small edits this might save a couple of clicks for users.
   c) The drag handle can be a bit more intuitive for non-power users by showing up/down arrows on it to let visually know that it can be dragged and that's not an additional menu. You can find this and some other icons in Figma. If others are needed, don't hesitate to request some:
   
   

7. Regarding the 'More' button... I see many users requesting 'one-click-away' solutions, and I can see the existing set of buttons as a nice additional color indicator for the right side of each section. However, hiding all the buttons inside the ... menu is an attractive idea for me personally. Perhaps I would leave only the ADD MEDIA button to make it easily accessible.

8. I don't know if it's a macOS only thing, or just a temporary state of code, but there are code snippets all over the place (on the normal meetings profile as well), just want to let you know:

9. Why are you unsure about the 'Enable heading/section import from jwpub file'?
   
10. What do you think about an option of adding subheadings into each section? Those would serve as dividers and can drastically multiply the number of covered use cases. For instance, I can see a section as a 'Pioneer school: Part 7B' and subheadings inside can indicate the topics discussed with related media. Alternatively, for a theoretical assembly use case it's 'Morning session' and 'Afternoon session' sections with public talks listed as subheadings. It's just an add-on idea to make the whole system more flexible and with more precise fine-tuning possibilities. Many jwpub files have similar structure: [Sub]heading + media list, then divider and next [sub]heading + media list within one file (e.g. Pioneer schooling playlist, CO visit playlist, I'm sure I've seen some others too).
11. But of course, you're the one to decide whether it is worth trying, or better to start with MVP and then keep this idea for later in case if users really request something like this.
    
12. Also, what about Repeat feature for the whole section? For cases where multiple videos must be played in a loop. Not even necessarily for a convention/assembly which come first to my mind, from my experience this is often done for funeral talk/event to display videos after the program until all the people leave.