feat: Implement novel Preferences UI

[nathanlesage]

Description

This PR implements a set of layout and design changes that @sensologica and me have been developing over the course of 2023. We have had many meetings, adjusting how the preferences look, and how users would interact with them.

At this point, I would already like to thank Artem for helping the project out with such indispensable resources in the Open Source space such as UI/UX design! 🎉

The main goal was to create a design that would tick a set of boxes:

• Ergonomic to use
• Preferences are at correct, logical positions
• Users can quickly navigate to the preferences they care about
• We have ample space to include more settings in the future, without having to worry about tab space, etc.
• The new design aligns the preferences window back with how the preference dialogs look like on both macOS and Windows 11. But don't worry, on macOS you can horizontally resize the dialog; and on Windows you won't waste any screen real estate with the window ;)

The New Design

This is what the whole thing will look like when the PR is finished:

Thanks to Artem for all this work!

Changes

The set of changes are fairly quick to go over:

1. The tabs have been moved to the left side into a SelectableList
2. The layout of the SelectableList has been adapted (still some way to go)
3. Added a search field that will immediately show only the matching settings (read: a filter)
4. Reorganized the preferences; moved many of them around; removed a few categories we didn't need anymore, and added new ones
5. Enable a more elaborate way of building the form with additional information such as a fieldset title, a help string, and others

Additional information

In addition to these changes, I took the liberty to streamline how the form is being built, and tried to get rid of some technical debt. In addition, I found a few settings that have been added after the design has been finalized; we may need to move them around a bit.

To-Dos

There are a few things still todo:

• Adapt the layout of the individual form elements (specifically: column-layout for longer arrays of settings + the image sliders, quotes, and dark mode schedule times)
• Final touch for Windows + Linux
• When searching, implement category titles + icons
• Implement IDs for the help icons & hide them (for now)
• Adapt proper Padding & Spacing (coming from Artem)

Tested on: macOS Sonoma 14.1.1

[nathanlesage]

It's slowly coming together …

[sensologica]

Hello! As discussed, here are the padding measurements in pixels:

Please let me know if you need any other measurements. Alternatively, this page describes how to inspect the design files in detail using the Inspect tab in the web version of Sketch. (It didn't work during our call earlier because the layers were locked, but I unlocked them now.)

[nathanlesage]

I will now merge this PR so that I can continue working on various other issues that riddle the app. We'll fix anything that comes up during the 3.1.0 beta cycle.