feat: implement theme changing

quick settings are now properly implemented

src/lib/QuickSettings.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+ import QuickSetting from "./QuickSetting.svelte";
+ import { globalMode, themes, theme, type Theme } from "./settings";
+ import { faEarthEurope, faPaintRoller, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+ import type { ComponentProps } from "svelte";
+ import { writable } from "svelte/store";
+
+ export let rows = 2;
+ export let cols = 2;
+
+ let showMenus = writable(Array.from(Array(rows*cols).keys()).map(() => false));
+
+ // TODO: figure out how deep object reactivity works, this doesn't feel clean
+ let settings: (ComponentProps<QuickSetting> & Record<string, any>)[];
+ $: {
+     settings = [
+	 {
+	     title: "Global Mode",
+	     subtitle: $globalMode ? 'Enabled' : 'Disabled',
+	     enabled: $globalMode,
+	     icon: faEarthEurope,
+	     click: () => $globalMode = !$globalMode,
+	 },
+	 {
+	     title: "Theme",
+	     subtitle: $theme,
+	     enabled: true,
+	     icon: faPaintRoller,
+	     chevron: faChevronRight,
+	     showMenu: $showMenus[1],
+	     click: () => $showMenus[1] = !$showMenus[1],
+	     menu: {
+		 title: "Theme",
+		 items: themes.map(t => ({
+		     value: t,
+		     enabled: $theme === t,
+		 }))
+	     },
+	     menuClick: (theme: CustomEvent<Theme>) => $theme = theme.detail
+	 },
+	 {
+	     title: "",
+	     subtitle: '',
+	 },
+	 {
+	     title: "",
+	     subtitle: '',
+	 }
+     ];
+ }
+
+</script>
+
+<div class="quick-settings h-100 w-100"
+     style:--rows="{rows}"
+     style:--cols="{cols}">
+    {#each settings as setting, i}
+	<QuickSetting
+	    row="{Math.floor(i / rows) + 1}"
+	    column="{(i % rows) + 1}"
+	    enabled="{setting.enabled}"
+	    icon="{setting.icon}"
+	    chevron="{setting.chevron}"
+	    title="{setting.title}"
+	    bind:showMenu="{$showMenus[i]}"
+	    menu="{setting.menu}"
+	    subtitle="{setting.subtitle}"
+	    on:click="{setting.click}"
+	    on:menu:click="{setting.menuClick}" />
+    {/each}
+</div>
+
+<style lang="scss">
+ .quick-settings {
+     display: grid;
+     grid-template-rows: repeat(var(--rows), calc(100% / var(--rows)));
+     grid-template-columns: repeat(var(--cols), calc(100% / var(--cols)));
+ }
+</style>