[Redesign] Settings

[ebkr]

Redesigning Settings

A complete reimplementation of settings

Why?

Previously our Settings screen had the following flaws:

• Everything looked indentical.
• The way it was built meant we had to have a constant timer refresh for values.
• Lots of entries.

How does this fix it?

We can now have:

• More than one action per row.
• Better constraints (EG: enable/disable all mods having a debounce).
• Components to visualise states rather than plain text (EG: switches).
• Individual settings can re-bind their values to a ref, allowing them to now be reactive even when the underlying source isn't reactive, meaning we also no longer require the refresh timer.

Extras

• Conditional displays no longer need to be appended to the list in a weird onMounted flow. They can be directly referenced inline via <template v-if...>.
  • I've dropped the weird array settings handling so that SettingsView.vue can take a layout approach rather than being the driver of everything.
• Better searching (keywords/phrases) and searching by value for text related fields.
• Massive cleanup of Manager.vue - No more business logic.
• The remaining modals in Manager.vue have been ported to actual modal components.

Caveats

• Each settings component now holds the searching logic (albeit small)
• Additional boilerplate per setting (although I think the tradeoff is worth it)

Screenshots

All view

Section filtered view