From c6d1299a101731f824f8dc9a98c3787df02ba95c Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Fri, 21 Jun 2024 17:04:20 +0200
Subject: [PATCH 01/18] Start on settings manager

---
 packages/safelight/src/App.vue                |   5 +
 .../src/components/Menu/Settings/Settings.vue |  23 +++
 .../Menu/Settings/SettingsNamespaceItem.vue   |  30 ++++
 packages/safelight/src/main.ts                |   2 +
 .../safelight/src/views/Editor/Editor.vue     |  33 +++-
 .../shared/src/Settings/SettingsManager.ts    | 165 ++++++++++++++++++
 6 files changed, 256 insertions(+), 2 deletions(-)
 create mode 100644 packages/safelight/src/components/Menu/Settings/Settings.vue
 create mode 100644 packages/safelight/src/components/Menu/Settings/SettingsNamespaceItem.vue
 create mode 100644 packages/shared/src/Settings/SettingsManager.ts

diff --git a/packages/safelight/src/App.vue b/packages/safelight/src/App.vue
index d1ca8fa6..1a2524d1 100644
--- a/packages/safelight/src/App.vue
+++ b/packages/safelight/src/App.vue
@@ -1,10 +1,13 @@
 <template>
     <RouterView />
+    <DynamicDialog />
     <NotificationManager />
 </template>
 
 <script setup lang="ts">
+import DynamicDialog from 'primevue/dynamicdialog';
 import { router } from './main';
+import { SettingsManager } from '@safelight/shared/Settings/SettingsManager';
 
 const pageTitle = useTitle();
 watchEffect(() => {
@@ -20,4 +23,6 @@ watchEffect(() => {
         pageTitle.value = 'Safelight';
     }
 });
+
+SettingsManager.createDefaultNamespaces();
 </script>
diff --git a/packages/safelight/src/components/Menu/Settings/Settings.vue b/packages/safelight/src/components/Menu/Settings/Settings.vue
new file mode 100644
index 00000000..c7164230
--- /dev/null
+++ b/packages/safelight/src/components/Menu/Settings/Settings.vue
@@ -0,0 +1,23 @@
+<template>
+    <Tree :value="tree" />
+    <SettingsNamespaceItem />
+</template>
+
+<script setup lang="ts">
+import { SettingsManager, SettingsNamespace } from '@safelight/shared/Settings/SettingsManager';
+import type { TreeNode } from 'primevue/treenode';
+
+const tree = computed(() => {
+    return (Array.from(SettingsManager.settingsDefinition.values()) as SettingsNamespace[])
+        .filter((ns) => ns.path.length <= 1)
+        .map((ns) => mapSettingsNs(ns));
+});
+
+function mapSettingsNs(ns: SettingsNamespace): TreeNode {
+    return {
+        key: ns.path.join('.'),
+        label: ns.title,
+        children: ns.childNamespaces?.map(mapSettingsNs)
+    } as TreeNode;
+}
+</script>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsNamespaceItem.vue b/packages/safelight/src/components/Menu/Settings/SettingsNamespaceItem.vue
new file mode 100644
index 00000000..0e305b25
--- /dev/null
+++ b/packages/safelight/src/components/Menu/Settings/SettingsNamespaceItem.vue
@@ -0,0 +1,30 @@
+<template>
+    <li>
+        <pre>{{ currentLevelNamespaces }}</pre>
+        <template v-for="ns in currentLevelNamespaces" :key="ns.path.join('.')">
+            {{ index }} {{ ns.path.join('.') }}:
+            <SettingsNamespaceComp :path="ns.path" :index="index + 1" />
+        </template>
+    </li>
+</template>
+
+<script setup lang="ts">
+import { SettingsManager, SettingsNamespace } from '@safelight/shared/Settings/SettingsManager';
+import SettingsNamespaceItem from './SettingsNamespaceItem.vue';
+
+const props = withDefaults(defineProps<{ path: string[]; index: number }>(), {
+    path: () => [],
+    index: () => 0
+});
+
+const currentLevelNamespaces = computed(() => {
+    if (props.path.length > 0) {
+        return (SettingsManager.settingsDefinition.get(props.path)?.childNamespaces ??
+            []) as SettingsNamespace[];
+    } else {
+        return Array.from(SettingsManager.settingsDefinition.values()).filter(
+            (ns) => ns.path.length <= 1
+        ) as SettingsNamespace[];
+    }
+});
+</script>
diff --git a/packages/safelight/src/main.ts b/packages/safelight/src/main.ts
index 551cb9d7..f5e87a67 100644
--- a/packages/safelight/src/main.ts
+++ b/packages/safelight/src/main.ts
@@ -5,6 +5,7 @@ import App from './App.vue';
 
 import PrimeVue, { type PrimeVueConfiguration } from 'primevue/config';
 import ConfirmationService from 'primevue/confirmationservice';
+import DialogService from 'primevue/dialogservice';
 import 'primevue/resources/primevue.min.css';
 import 'primevue/resources/themes/aura-dark-amber/theme.css';
 import Tooltip from 'primevue/tooltip';
@@ -27,6 +28,7 @@ app.use(PrimeVue, {
     ripple: false
 } as PrimeVueConfiguration);
 app.use(ConfirmationService);
+app.use(DialogService);
 
 // Phosphor icons
 app.provide('size', 18);
diff --git a/packages/safelight/src/views/Editor/Editor.vue b/packages/safelight/src/views/Editor/Editor.vue
index 898f830d..8a5b1743 100644
--- a/packages/safelight/src/views/Editor/Editor.vue
+++ b/packages/safelight/src/views/Editor/Editor.vue
@@ -8,7 +8,10 @@
             }"
         >
             <template #start>
-                <Menubar :pt="{ root: { class: 'border-none' } }" :model="menuItems">
+                <Menubar
+                    :pt="{ root: { class: 'border-none' }, submenu: { class: 'z-50' } }"
+                    :model="menuItems"
+                >
                     <template #itemicon="{ item: { icon } }">
                         <component :is="icon" v-if="icon" class="pr-1" />
                     </template>
@@ -34,10 +37,11 @@
 
 <script setup lang="ts">
 import { router } from '@/main';
-import { PhFile } from '@phosphor-icons/vue';
+import { PhFile, PhGear, PhSignOut } from '@phosphor-icons/vue';
 import ConfirmDialog from 'primevue/confirmdialog';
 import type { MenuItem } from 'primevue/menuitem';
 import { useConfirm } from 'primevue/useconfirm';
+import { useDialog } from 'primevue/usedialog';
 
 const project = useProject();
 const editor = useEditor();
@@ -45,14 +49,39 @@ const editor = useEditor();
 editor.AddDefaultPanels();
 
 const projectErrorDialog = useConfirm();
+const dialog = useDialog();
 
 const menuItems: MenuItem[] = [
     {
         label: 'File',
         icon: PhFile as any,
         items: [
+            {
+                label: 'Settings',
+                icon: PhGear as any,
+                disabled: false,
+                command: async () => {
+                    const settingsComponent = defineAsyncComponent(
+                        () => import('@/components/Menu/Settings/Settings.vue')
+                    );
+                    dialog.open(settingsComponent, {
+                        props: {
+                            header: 'Settings',
+                            style: {
+                                width: '75vw'
+                            },
+                            breakpoints: {
+                                '960px': '80vw',
+                                '640px': '90vw'
+                            },
+                            modal: true
+                        }
+                    });
+                }
+            },
             {
                 label: 'Exit',
+                icon: PhSignOut as any,
                 disabled: false,
                 command: async () => {
                     await CurrentProject.beforeExit();
diff --git a/packages/shared/src/Settings/SettingsManager.ts b/packages/shared/src/Settings/SettingsManager.ts
new file mode 100644
index 00000000..5fb36664
--- /dev/null
+++ b/packages/shared/src/Settings/SettingsManager.ts
@@ -0,0 +1,165 @@
+import { reactive } from 'vue';
+
+export class SettingsManager {
+    private static defaultNamespaces: SettingsNamespaceDefinition[] = [
+        {
+            name: 'general',
+            title: 'General',
+            childNamespaces: []
+        },
+        {
+            name: 'editor',
+            title: 'Editor',
+            childNamespaces: [
+                {
+                    name: 'playback',
+                    title: 'Playback',
+                    settings: []
+                },
+                {
+                    name: 'timeline',
+                    title: 'Timeline',
+                    settings: []
+                },
+                {
+                    name: 'media',
+                    title: 'Media',
+                    settings: []
+                }
+            ]
+        },
+        {
+            name: 'keyboard',
+            title: 'Keyboard',
+            childNamespaces: [
+                {
+                    name: 'hotkeys',
+                    title: 'Hotkeys'
+                }
+            ]
+        }
+    ];
+
+    public static settingsDefinition = reactive(new Map<string[], SettingsNamespace>());
+
+    private static defaultsCreated = false;
+
+    public static createDefaultNamespaces(namespace = this.defaultNamespaces, path: string[] = []) {
+        if (this.defaultsCreated && path.length == 0) {
+            this.defaultsCreated = true;
+            return [];
+        }
+
+        const newNamespaces: SettingsNamespace[] = [];
+
+        namespace.forEach((curNamespace) => {
+            const curPath = [...path, curNamespace.name];
+
+            const newNS = this.createNamespace(curPath, curNamespace);
+            newNamespaces.push(newNS);
+
+            if (curNamespace.childNamespaces) {
+                const children = this.createDefaultNamespaces(
+                    curNamespace.childNamespaces,
+                    curPath
+                );
+                newNS.childNamespaces = children;
+            }
+        });
+        return newNamespaces;
+    }
+
+    public static createNamespace(path: string[], namespace: SettingsNamespaceDefinition) {
+        const newNamespace = new SettingsNamespace(path, namespace);
+        this.settingsDefinition.set(path, newNamespace);
+
+        return newNamespace;
+    }
+}
+
+export class SettingsNamespace {
+    public childNamespaces!: SettingsNamespace[];
+    public title: string;
+    public name: string;
+    public settings: SettingsPropertyDefinition[];
+    constructor(
+        public path: string[],
+        private definition: SettingsNamespaceDefinition
+    ) {
+        this.title = definition.title;
+        this.name = definition.name;
+        this.settings = definition.settings ?? [];
+    }
+}
+
+export interface SettingsNamespaceDefinition {
+    name: string;
+    title: string;
+    settings?: SettingsPropertyDefinition[];
+    childNamespaces?: SettingsNamespaceDefinition[];
+}
+
+export type SettingsPropertyDefinition =
+    | SettingsGroup
+    | SettingsArrayProperty
+    | SettingsNumberProperty
+    | SettingsStringProperty
+    | SettingsDictionaryProperty
+    | SettingsEnumProperty
+    | SettingsBoolProperty;
+
+interface DefaultSettingsProperty {
+    type: string;
+    name: string;
+    description?: string;
+}
+
+interface SettingsBoolProperty extends DefaultSettingsProperty {
+    type: 'boolean';
+    default?: boolean;
+}
+
+interface SettingsStringProperty extends DefaultSettingsProperty {
+    type: 'string';
+    default?: string;
+    pattern?: RegExp;
+    minLength?: number;
+    maxLength?: number;
+    autoTrim?: boolean;
+    multiline?: boolean;
+}
+
+interface SettingsNumberProperty extends DefaultSettingsProperty {
+    type: 'number';
+    default?: number;
+    min?: number;
+    max?: number;
+    decimals?: number | false;
+}
+
+interface SettingsArrayProperty extends DefaultSettingsProperty {
+    type: 'array';
+    default?: string[];
+    minItems?: number;
+    maxItems?: number;
+}
+
+interface SettingsDictionaryProperty extends DefaultSettingsProperty {
+    type: 'dictionary';
+    default?: { [key: string]: string };
+}
+
+interface SettingsEnumProperty extends DefaultSettingsProperty {
+    type: 'enum';
+    options: any[];
+    valueKey?: string;
+    labelKey?: string;
+    default?: any;
+}
+
+interface SettingsGroup {
+    type: 'group';
+    name: string;
+    description?: string;
+    settings: SettingsPropertyDefinition[];
+}

From 41d70a5e1ac9f5c27f5c1a4b3f76041d888b069d Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Sat, 22 Jun 2024 00:39:54 +0200
Subject: [PATCH 02/18] Began on implementing different settings types

---
 .../Menu/Settings/NamespaceSettings.vue       |  27 ++
 .../src/components/Menu/Settings/Settings.vue |  40 ++-
 .../Menu/Settings/SettingsNamespaceItem.vue   |  30 --
 .../SettingsProperties/ArraySetting.vue       |   3 +
 .../SettingsProperties/BooleanSetting.vue     |  11 +
 .../SettingsProperties/DictionarySetting.vue  |   3 +
 .../SettingsProperties/EnumSetting.vue        |   3 +
 .../SettingsProperties/NumberSetting.vue      |   3 +
 .../SettingsProperties/SettingsGroup.vue      |  35 +++
 .../SettingsProperties/StringSetting.vue      |   3 +
 .../safelight/src/views/Editor/Editor.vue     |   7 +-
 packages/safelight/vite.config.ts             |   2 +
 .../shared/src/Settings/SettingsManager.ts    | 273 +++++++++++++++++-
 13 files changed, 391 insertions(+), 49 deletions(-)
 create mode 100644 packages/safelight/src/components/Menu/Settings/NamespaceSettings.vue
 delete mode 100644 packages/safelight/src/components/Menu/Settings/SettingsNamespaceItem.vue
 create mode 100644 packages/safelight/src/components/Menu/Settings/SettingsProperties/ArraySetting.vue
 create mode 100644 packages/safelight/src/components/Menu/Settings/SettingsProperties/BooleanSetting.vue
 create mode 100644 packages/safelight/src/components/Menu/Settings/SettingsProperties/DictionarySetting.vue
 create mode 100644 packages/safelight/src/components/Menu/Settings/SettingsProperties/EnumSetting.vue
 create mode 100644 packages/safelight/src/components/Menu/Settings/SettingsProperties/NumberSetting.vue
 create mode 100644 packages/safelight/src/components/Menu/Settings/SettingsProperties/SettingsGroup.vue
 create mode 100644 packages/safelight/src/components/Menu/Settings/SettingsProperties/StringSetting.vue

diff --git a/packages/safelight/src/components/Menu/Settings/NamespaceSettings.vue b/packages/safelight/src/components/Menu/Settings/NamespaceSettings.vue
new file mode 100644
index 00000000..a44607bf
--- /dev/null
+++ b/packages/safelight/src/components/Menu/Settings/NamespaceSettings.vue
@@ -0,0 +1,27 @@
+<template>
+    <div v-if="currentSettings" class="h-full flex-1 overflow-y-scroll">
+        <h1 class="mt-0">
+            {{ currentSettings.title }}
+        </h1>
+        <vue-markdown
+            v-if="currentSettings.description"
+            :source="currentSettings.description"
+            :html="false"
+        />
+        <div>
+            <SettingsGroup :settings="currentSettings.settings" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { SettingsManager } from '@safelight/shared/Settings/SettingsManager';
+import SettingsGroup from './SettingsProperties/SettingsGroup.vue';
+import VueMarkdown from 'vue-markdown-render';
+
+const props = withDefaults(defineProps<{ path: string }>(), {
+    path: () => 'general'
+});
+
+const currentSettings = computed(() => SettingsManager.settingsDefinition.get(props.path));
+</script>
diff --git a/packages/safelight/src/components/Menu/Settings/Settings.vue b/packages/safelight/src/components/Menu/Settings/Settings.vue
index c7164230..7ed2c8c5 100644
--- a/packages/safelight/src/components/Menu/Settings/Settings.vue
+++ b/packages/safelight/src/components/Menu/Settings/Settings.vue
@@ -1,21 +1,53 @@
 <template>
-    <Tree :value="tree" />
-    <SettingsNamespaceItem />
+    <div class="flex h-full">
+        <div class="overflow-y-auto">
+            <Tree
+                v-model:expandedKeys="expandedKeys"
+                class="w-64"
+                :selection-keys="{ [selectedPath]: true }"
+                :value="tree"
+                selection-mode="single"
+                @node-select="onNodeSelect"
+            />
+        </div>
+        <div
+            class="mr-4 border-solid"
+            style="
+                border-width: 0;
+                border-right-width: 1px;
+                border-right-color: var(--color-border);
+            "
+        ></div>
+        <NamespaceSettings :path="selectedPath" />
+    </div>
 </template>
 
 <script setup lang="ts">
 import { SettingsManager, SettingsNamespace } from '@safelight/shared/Settings/SettingsManager';
+import Tree from 'primevue/tree';
 import type { TreeNode } from 'primevue/treenode';
 
+const selectedPath = ref<string>('general');
+const expandedKeys = ref({});
+
+function onNodeSelect(data: TreeNode) {
+    if (data.key) {
+        selectedPath.value = data.key;
+        if ((data.children ?? []).length > 0) {
+            expandedKeys.value = { ...expandedKeys.value, [data.key]: true };
+        }
+    }
+}
+
 const tree = computed(() => {
     return (Array.from(SettingsManager.settingsDefinition.values()) as SettingsNamespace[])
-        .filter((ns) => ns.path.length <= 1)
+        .filter((ns) => ns.path.split('.').length <= 1)
         .map((ns) => mapSettingsNs(ns));
 });
 
 function mapSettingsNs(ns: SettingsNamespace): TreeNode {
     return {
-        key: ns.path.join('.'),
+        key: ns.path,
         label: ns.title,
         children: ns.childNamespaces?.map(mapSettingsNs)
     } as TreeNode;
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsNamespaceItem.vue b/packages/safelight/src/components/Menu/Settings/SettingsNamespaceItem.vue
deleted file mode 100644
index 0e305b25..00000000
--- a/packages/safelight/src/components/Menu/Settings/SettingsNamespaceItem.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-    <li>
-        <pre>{{ currentLevelNamespaces }}</pre>
-        <template v-for="ns in currentLevelNamespaces" :key="ns.path.join('.')">
-            {{ index }} {{ ns.path.join('.') }}:
-            <SettingsNamespaceComp :path="ns.path" :index="index + 1" />
-        </template>
-    </li>
-</template>
-
-<script setup lang="ts">
-import { SettingsManager, SettingsNamespace } from '@safelight/shared/Settings/SettingsManager';
-import SettingsNamespaceItem from './SettingsNamespaceItem.vue';
-
-const props = withDefaults(defineProps<{ path: string[]; index: number }>(), {
-    path: () => [],
-    index: () => 0
-});
-
-const currentLevelNamespaces = computed(() => {
-    if (props.path.length > 0) {
-        return (SettingsManager.settingsDefinition.get(props.path)?.childNamespaces ??
-            []) as SettingsNamespace[];
-    } else {
-        return Array.from(SettingsManager.settingsDefinition.values()).filter(
-            (ns) => ns.path.length <= 1
-        ) as SettingsNamespace[];
-    }
-});
-</script>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/ArraySetting.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/ArraySetting.vue
new file mode 100644
index 00000000..9fa3844c
--- /dev/null
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/ArraySetting.vue
@@ -0,0 +1,3 @@
+<template></template>
+
+<script lang="ts" setup></script>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/BooleanSetting.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/BooleanSetting.vue
new file mode 100644
index 00000000..fa4d6aca
--- /dev/null
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/BooleanSetting.vue
@@ -0,0 +1,11 @@
+<template>
+    <h3 v-if="setting?.title">{{ setting.title }}</h3>
+    <vue-markdown v-if="setting?.description" :source="setting.description" />
+</template>
+
+<script lang="ts" setup>
+import type { SettingsBoolProperty } from '@safelight/shared/Settings/SettingsManager';
+import VueMarkdown from 'vue-markdown-render';
+
+defineProps<{ setting: SettingsBoolProperty }>();
+</script>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/DictionarySetting.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/DictionarySetting.vue
new file mode 100644
index 00000000..9fa3844c
--- /dev/null
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/DictionarySetting.vue
@@ -0,0 +1,3 @@
+<template></template>
+
+<script lang="ts" setup></script>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/EnumSetting.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/EnumSetting.vue
new file mode 100644
index 00000000..9fa3844c
--- /dev/null
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/EnumSetting.vue
@@ -0,0 +1,3 @@
+<template></template>
+
+<script lang="ts" setup></script>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/NumberSetting.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/NumberSetting.vue
new file mode 100644
index 00000000..9fa3844c
--- /dev/null
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/NumberSetting.vue
@@ -0,0 +1,3 @@
+<template></template>
+
+<script lang="ts" setup></script>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/SettingsGroup.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/SettingsGroup.vue
new file mode 100644
index 00000000..8cdd424a
--- /dev/null
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/SettingsGroup.vue
@@ -0,0 +1,35 @@
+<template>
+    <h2 v-if="title">{{ title }}</h2>
+    <vue-markdown v-if="description" :source="description" :html="false" :toc-first-level="3" />
+    <div v-for="(setting, i) in settings ?? []" :key="i">
+        <ArraySetting v-if="setting.type === 'array'" :setting="setting" />
+        <BooleanSetting v-else-if="setting.type === 'boolean'" :setting="setting" />
+        <DictionarySetting v-else-if="setting.type === 'dictionary'" :setting="setting" />
+        <EnumSetting v-else-if="setting.type === 'enum'" :setting="setting" />
+        <SettingsGroup
+            v-else-if="setting.type === 'group'"
+            :title="setting.title"
+            :description="setting.description"
+            :settings="setting.settings"
+        />
+        <NumberSetting v-else-if="setting.type === 'number'" :setting="setting" />
+        <StringSetting v-else-if="setting.type === 'string'" :setting="setting" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { SettingsPropertyDefinition } from '@safelight/shared/Settings/SettingsManager';
+import ArraySetting from './ArraySetting.vue';
+import BooleanSetting from './BooleanSetting.vue';
+import DictionarySetting from './DictionarySetting.vue';
+import EnumSetting from './EnumSetting.vue';
+import NumberSetting from './NumberSetting.vue';
+import SettingsGroup from './SettingsGroup.vue';
+import VueMarkdown from 'vue-markdown-render';
+
+defineProps<{
+    title?: string;
+    description?: string;
+    settings: SettingsPropertyDefinition[];
+}>();
+</script>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/StringSetting.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/StringSetting.vue
new file mode 100644
index 00000000..9fa3844c
--- /dev/null
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/StringSetting.vue
@@ -0,0 +1,3 @@
+<template></template>
+
+<script lang="ts" setup></script>
diff --git a/packages/safelight/src/views/Editor/Editor.vue b/packages/safelight/src/views/Editor/Editor.vue
index 8a5b1743..9e11e978 100644
--- a/packages/safelight/src/views/Editor/Editor.vue
+++ b/packages/safelight/src/views/Editor/Editor.vue
@@ -68,13 +68,16 @@ const menuItems: MenuItem[] = [
                         props: {
                             header: 'Settings',
                             style: {
-                                width: '75vw'
+                                width: '75vw',
+                                height: '70vh'
                             },
+                            pt: { content: { style: { height: '100%' } } },
                             breakpoints: {
                                 '960px': '80vw',
                                 '640px': '90vw'
                             },
-                            modal: true
+                            modal: true,
+                            maximizable: true
                         }
                     });
                 }
diff --git a/packages/safelight/vite.config.ts b/packages/safelight/vite.config.ts
index 30243a11..44054464 100644
--- a/packages/safelight/vite.config.ts
+++ b/packages/safelight/vite.config.ts
@@ -117,7 +117,9 @@ export default defineConfig({
             'primevue/splitterpanel',
             'primevue/tabmenu',
             'primevue/toolbar',
+            'primevue/tree',
             'primevue/useconfirm',
+            'primevue/usedialog',
             'rxjs',
             'uuid'
         ]
diff --git a/packages/shared/src/Settings/SettingsManager.ts b/packages/shared/src/Settings/SettingsManager.ts
index 5fb36664..4eac3add 100644
--- a/packages/shared/src/Settings/SettingsManager.ts
+++ b/packages/shared/src/Settings/SettingsManager.ts
@@ -8,13 +8,256 @@ export class SettingsManager {
             childNamespaces: []
         },
         {
-            name: 'editor',
+            name: 'editor1',
             title: 'Editor',
             childNamespaces: [
                 {
                     name: 'playback',
                     title: 'Playback',
+                    settings: [
+                        {
+                            title: 'Bool 1',
+                            description: 'AAAAAAAAfasf',
+                            name: 'A',
+                            type: 'boolean'
+                        },
+                        {
+                            title: 'Bool 2',
+                            name: 'A',
+                            type: 'boolean'
+                        }
+                    ]
+                },
+                {
+                    name: 'timeline',
+                    title: 'Timeline',
+                    settings: []
+                },
+                {
+                    name: 'media',
+                    title: 'Media',
+                    settings: []
+                }
+            ]
+        },
+        {
+            name: 'editor2',
+            title: 'Editor',
+            childNamespaces: [
+                {
+                    name: 'playback',
+                    title: 'Playback',
+                    settings: [
+                        {
+                            title: 'Bool 1',
+                            description: 'AAAAAAAAfasf',
+                            name: 'A',
+                            type: 'boolean'
+                        },
+                        {
+                            title: 'Bool 2',
+                            name: 'A',
+                            type: 'boolean'
+                        }
+                    ]
+                },
+                {
+                    name: 'timeline',
+                    title: 'Timeline',
+                    settings: []
+                },
+                {
+                    name: 'media',
+                    title: 'Media',
+                    settings: []
+                }
+            ]
+        },
+        {
+            name: 'editor3',
+            title: 'Editor',
+            childNamespaces: [
+                {
+                    name: 'playback',
+                    title: 'Playback',
+                    settings: [
+                        {
+                            title: 'Bool 1',
+                            description: 'AAAAAAAAfasf',
+                            name: 'A',
+                            type: 'boolean'
+                        },
+                        {
+                            title: 'Bool 2',
+                            name: 'A',
+                            type: 'boolean'
+                        }
+                    ]
+                },
+                {
+                    name: 'timeline',
+                    title: 'Timeline',
+                    settings: []
+                },
+                {
+                    name: 'media',
+                    title: 'Media',
+                    settings: []
+                }
+            ]
+        },
+        {
+            name: 'editor4',
+            title: 'Editor',
+            childNamespaces: [
+                {
+                    name: 'playback',
+                    title: 'Playback',
+                    settings: [
+                        {
+                            title: 'Bool 1',
+                            description: 'AAAAAAAAfasf',
+                            name: 'A',
+                            type: 'boolean'
+                        },
+                        {
+                            title: 'Bool 2',
+                            name: 'A',
+                            type: 'boolean'
+                        }
+                    ]
+                },
+                {
+                    name: 'timeline',
+                    title: 'Timeline',
+                    settings: []
+                },
+                {
+                    name: 'media',
+                    title: 'Media',
+                    settings: []
+                }
+            ]
+        },
+        {
+            name: 'editor5',
+            title: 'Editor',
+            childNamespaces: [
+                {
+                    name: 'playback',
+                    title: 'Playback',
+                    settings: [
+                        {
+                            title: 'Bool 1',
+                            description: 'AAAAAAAAfasf',
+                            name: 'A',
+                            type: 'boolean'
+                        },
+                        {
+                            title: 'Bool 2',
+                            name: 'A',
+                            type: 'boolean'
+                        }
+                    ]
+                },
+                {
+                    name: 'timeline',
+                    title: 'Timeline',
+                    settings: []
+                },
+                {
+                    name: 'media',
+                    title: 'Media',
+                    settings: []
+                }
+            ]
+        },
+        {
+            name: 'editor6',
+            title: 'Editor',
+            childNamespaces: [
+                {
+                    name: 'playback',
+                    title: 'Playback',
+                    settings: [
+                        {
+                            title: 'Bool 1',
+                            description: 'AAAAAAAAfasf',
+                            name: 'A',
+                            type: 'boolean'
+                        },
+                        {
+                            title: 'Bool 2',
+                            name: 'A',
+                            type: 'boolean'
+                        }
+                    ]
+                },
+                {
+                    name: 'timeline',
+                    title: 'Timeline',
+                    settings: []
+                },
+                {
+                    name: 'media',
+                    title: 'Media',
+                    settings: []
+                }
+            ]
+        },
+        {
+            name: 'editor7',
+            title: 'Editor',
+            childNamespaces: [
+                {
+                    name: 'playback',
+                    title: 'Playback',
+                    settings: [
+                        {
+                            title: 'Bool 1',
+                            description: 'AAAAAAAAfasf',
+                            name: 'A',
+                            type: 'boolean'
+                        },
+                        {
+                            title: 'Bool 2',
+                            name: 'A',
+                            type: 'boolean'
+                        }
+                    ]
+                },
+                {
+                    name: 'timeline',
+                    title: 'Timeline',
+                    settings: []
+                },
+                {
+                    name: 'media',
+                    title: 'Media',
                     settings: []
+                }
+            ]
+        },
+        {
+            name: 'editor8',
+            title: 'Editor',
+            childNamespaces: [
+                {
+                    name: 'playback',
+                    title: 'Playback',
+                    settings: [
+                        {
+                            title: 'Bool 1',
+                            description: 'AAAAAAAAfasf',
+                            name: 'A',
+                            type: 'boolean'
+                        },
+                        {
+                            title: 'Bool 2',
+                            name: 'A',
+                            type: 'boolean'
+                        }
+                    ]
                 },
                 {
                     name: 'timeline',
@@ -40,7 +283,7 @@ export class SettingsManager {
         }
     ];
 
-    public static settingsDefinition = reactive(new Map<string[], SettingsNamespace>());
+    public static settingsDefinition = reactive(new Map<string, SettingsNamespace>());
 
     private static defaultsCreated = false;
 
@@ -70,8 +313,8 @@ export class SettingsManager {
     }
 
     public static createNamespace(path: string[], namespace: SettingsNamespaceDefinition) {
-        const newNamespace = new SettingsNamespace(path, namespace);
-        this.settingsDefinition.set(path, newNamespace);
+        const newNamespace = new SettingsNamespace(path.join('.'), namespace);
+        this.settingsDefinition.set(path.join('.'), newNamespace);
 
         return newNamespace;
     }
@@ -80,14 +323,16 @@ export class SettingsManager {
 export class SettingsNamespace {
     public childNamespaces!: SettingsNamespace[];
     public title: string;
+    public description?: string;
     public name: string;
     public settings: SettingsPropertyDefinition[];
     constructor(
-        public path: string[],
+        public path: string,
         private definition: SettingsNamespaceDefinition
     ) {
         this.title = definition.title;
         this.name = definition.name;
+        this.description = definition.description;
         this.settings = definition.settings ?? [];
     }
 }
@@ -95,6 +340,7 @@ export class SettingsNamespace {
 export interface SettingsNamespaceDefinition {
     name: string;
     title: string;
+    description?: string;
     settings?: SettingsPropertyDefinition[];
     childNamespaces?: SettingsNamespaceDefinition[];
 }
@@ -111,15 +357,16 @@ export type SettingsPropertyDefinition =
 interface DefaultSettingsProperty {
     type: string;
     name: string;
+    title: string;
     description?: string;
 }
 
-interface SettingsBoolProperty extends DefaultSettingsProperty {
+export interface SettingsBoolProperty extends DefaultSettingsProperty {
     type: 'boolean';
     default?: boolean;
 }
 
-interface SettingsStringProperty extends DefaultSettingsProperty {
+export interface SettingsStringProperty extends DefaultSettingsProperty {
     type: 'string';
     default?: string;
     pattern?: RegExp;
@@ -129,7 +376,7 @@ interface SettingsStringProperty extends DefaultSettingsProperty {
     multiline?: boolean;
 }
 
-interface SettingsNumberProperty extends DefaultSettingsProperty {
+export interface SettingsNumberProperty extends DefaultSettingsProperty {
     type: 'number';
     default?: number;
     min?: number;
@@ -137,19 +384,19 @@ interface SettingsNumberProperty extends DefaultSettingsProperty {
     decimals?: number | false;
 }
 
-interface SettingsArrayProperty extends DefaultSettingsProperty {
+export interface SettingsArrayProperty extends DefaultSettingsProperty {
     type: 'array';
     default?: string[];
     minItems?: number;
     maxItems?: number;
 }
 
-interface SettingsDictionaryProperty extends DefaultSettingsProperty {
+export interface SettingsDictionaryProperty extends DefaultSettingsProperty {
     type: 'dictionary';
     default?: { [key: string]: string };
 }
 
-interface SettingsEnumProperty extends DefaultSettingsProperty {
+export interface SettingsEnumProperty extends DefaultSettingsProperty {
     type: 'enum';
     options: any[];
     valueKey?: string;
@@ -157,9 +404,9 @@ interface SettingsEnumProperty extends DefaultSettingsProperty {
     default?: any;
 }
 
-interface SettingsGroup {
+export interface SettingsGroup {
     type: 'group';
-    name: string;
+    title: string;
     description?: string;
     settings: SettingsPropertyDefinition[];
 }

From f83105e02170f21d6b0da76b4dec7271693d3446 Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Sat, 22 Jun 2024 00:40:44 +0200
Subject: [PATCH 03/18] fix: Timeline no longer blocks scrolling when mouse
 hovers over overlays

---
 packages/timeline/src/Timeline.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/timeline/src/Timeline.vue b/packages/timeline/src/Timeline.vue
index 04360d1f..3e49266b 100644
--- a/packages/timeline/src/Timeline.vue
+++ b/packages/timeline/src/Timeline.vue
@@ -32,12 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-    useElementBounding,
-    useEventListener,
-    useMouseInElement,
-    watchImmediate
-} from '@vueuse/core';
+import { useElementBounding, useEventListener, watchImmediate } from '@vueuse/core';
 import { useWheel } from '@vueuse/gesture';
 import Splitter from 'primevue/splitter';
 import SplitterPanel from 'primevue/splitterpanel';
@@ -50,7 +45,13 @@ import TimelineItemComponent from './TimelineItemComponent.vue';
 
 const target = ref<HTMLDivElement>();
 const horizontalScroll = ref<HTMLDivElement>();
-const pointerOut = useMouseInElement(target).isOutside;
+const pointerOut = ref(true);
+
+useEventListener(['mousemove', 'mouseenter', 'mouseover'], (ev) => {
+    if (ev.target) {
+        pointerOut.value = !target.value?.parentNode?.contains(ev.target as Node) ?? true;
+    }
+});
 
 const props = withDefaults(defineProps<TimelineProps>(), {
     alignment: 'bottom',

From f9efcee00aaf4b8d5f4bda9165a37f160996b866 Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Sun, 23 Jun 2024 16:04:52 +0200
Subject: [PATCH 04/18] feat: Added getting and setting of settings

---
 packages/safelight/src/App.vue                |   2 +-
 packages/shared/package.json                  |   5 +-
 .../shared/src/Settings/SettingsManager.ts    | 384 ++++++------------
 pnpm-lock.yaml                                |   9 +-
 4 files changed, 142 insertions(+), 258 deletions(-)

diff --git a/packages/safelight/src/App.vue b/packages/safelight/src/App.vue
index 1a2524d1..1be17de0 100644
--- a/packages/safelight/src/App.vue
+++ b/packages/safelight/src/App.vue
@@ -24,5 +24,5 @@ watchEffect(() => {
     }
 });
 
-SettingsManager.createDefaultNamespaces();
+SettingsManager.setup();
 </script>
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 25e72928..c01b4bbf 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -16,14 +16,15 @@
         "@vueuse/rxjs": "^10.10.0",
         "@vueuse/shared": "^10.10.0",
         "dexie": "^4.0.7",
+        "dot-path-value": "^0.0.10",
         "hash-wasm": "^4.11.0",
         "luxon": "^3.4.4",
         "mediainfo.js": "^0.3.1",
         "mime-matcher": "^1.0.5",
+        "primevue": "^3.52.0",
         "rxjs": "^7.8.1",
         "uuid": "^9.0.1",
-        "vue": "^3.4.29",
-        "primevue": "^3.52.0"
+        "vue": "^3.4.29"
     },
     "devDependencies": {
         "@tsconfig/node20": "^20.1.4",
diff --git a/packages/shared/src/Settings/SettingsManager.ts b/packages/shared/src/Settings/SettingsManager.ts
index 4eac3add..8270d33c 100644
--- a/packages/shared/src/Settings/SettingsManager.ts
+++ b/packages/shared/src/Settings/SettingsManager.ts
@@ -1,4 +1,13 @@
-import { reactive } from 'vue';
+import { getByPath, setByPath } from 'dot-path-value';
+import {
+    computed,
+    defineAsyncComponent,
+    markRaw,
+    reactive,
+    type Component,
+    type ComputedRef,
+    type Raw
+} from 'vue';
 
 export class SettingsManager {
     private static defaultNamespaces: SettingsNamespaceDefinition[] = [
@@ -8,229 +17,27 @@ export class SettingsManager {
             childNamespaces: []
         },
         {
-            name: 'editor1',
+            name: 'editor',
             title: 'Editor',
             childNamespaces: [
                 {
                     name: 'playback',
                     title: 'Playback',
-                    settings: [
-                        {
-                            title: 'Bool 1',
-                            description: 'AAAAAAAAfasf',
-                            name: 'A',
-                            type: 'boolean'
-                        },
-                        {
-                            title: 'Bool 2',
-                            name: 'A',
-                            type: 'boolean'
-                        }
-                    ]
-                },
-                {
-                    name: 'timeline',
-                    title: 'Timeline',
-                    settings: []
-                },
-                {
-                    name: 'media',
-                    title: 'Media',
-                    settings: []
-                }
-            ]
-        },
-        {
-            name: 'editor2',
-            title: 'Editor',
-            childNamespaces: [
-                {
-                    name: 'playback',
-                    title: 'Playback',
-                    settings: [
-                        {
-                            title: 'Bool 1',
-                            description: 'AAAAAAAAfasf',
-                            name: 'A',
-                            type: 'boolean'
-                        },
-                        {
-                            title: 'Bool 2',
-                            name: 'A',
-                            type: 'boolean'
-                        }
-                    ]
-                },
-                {
-                    name: 'timeline',
-                    title: 'Timeline',
-                    settings: []
-                },
-                {
-                    name: 'media',
-                    title: 'Media',
-                    settings: []
-                }
-            ]
-        },
-        {
-            name: 'editor3',
-            title: 'Editor',
-            childNamespaces: [
-                {
-                    name: 'playback',
-                    title: 'Playback',
-                    settings: [
-                        {
-                            title: 'Bool 1',
-                            description: 'AAAAAAAAfasf',
-                            name: 'A',
-                            type: 'boolean'
-                        },
-                        {
-                            title: 'Bool 2',
-                            name: 'A',
-                            type: 'boolean'
-                        }
-                    ]
-                },
-                {
-                    name: 'timeline',
-                    title: 'Timeline',
-                    settings: []
-                },
-                {
-                    name: 'media',
-                    title: 'Media',
-                    settings: []
-                }
-            ]
-        },
-        {
-            name: 'editor4',
-            title: 'Editor',
-            childNamespaces: [
-                {
-                    name: 'playback',
-                    title: 'Playback',
-                    settings: [
-                        {
-                            title: 'Bool 1',
-                            description: 'AAAAAAAAfasf',
-                            name: 'A',
-                            type: 'boolean'
-                        },
-                        {
-                            title: 'Bool 2',
-                            name: 'A',
-                            type: 'boolean'
-                        }
-                    ]
-                },
-                {
-                    name: 'timeline',
-                    title: 'Timeline',
-                    settings: []
-                },
-                {
-                    name: 'media',
-                    title: 'Media',
-                    settings: []
-                }
-            ]
-        },
-        {
-            name: 'editor5',
-            title: 'Editor',
-            childNamespaces: [
-                {
-                    name: 'playback',
-                    title: 'Playback',
-                    settings: [
-                        {
-                            title: 'Bool 1',
-                            description: 'AAAAAAAAfasf',
-                            name: 'A',
-                            type: 'boolean'
-                        },
-                        {
-                            title: 'Bool 2',
-                            name: 'A',
-                            type: 'boolean'
-                        }
-                    ]
-                },
-                {
-                    name: 'timeline',
-                    title: 'Timeline',
-                    settings: []
-                },
-                {
-                    name: 'media',
-                    title: 'Media',
                     settings: []
-                }
-            ]
-        },
-        {
-            name: 'editor6',
-            title: 'Editor',
-            childNamespaces: [
-                {
-                    name: 'playback',
-                    title: 'Playback',
-                    settings: [
-                        {
-                            title: 'Bool 1',
-                            description: 'AAAAAAAAfasf',
-                            name: 'A',
-                            type: 'boolean'
-                        },
-                        {
-                            title: 'Bool 2',
-                            name: 'A',
-                            type: 'boolean'
-                        }
-                    ]
                 },
                 {
                     name: 'timeline',
                     title: 'Timeline',
-                    settings: []
-                },
-                {
-                    name: 'media',
-                    title: 'Media',
-                    settings: []
-                }
-            ]
-        },
-        {
-            name: 'editor7',
-            title: 'Editor',
-            childNamespaces: [
-                {
-                    name: 'playback',
-                    title: 'Playback',
                     settings: [
                         {
-                            title: 'Bool 1',
-                            description: 'AAAAAAAAfasf',
-                            name: 'A',
-                            type: 'boolean'
-                        },
-                        {
-                            title: 'Bool 2',
-                            name: 'A',
-                            type: 'boolean'
+                            type: 'boolean',
+                            name: 'useTrackpad',
+                            title: 'Trackpad mode',
+                            description: 'Will inverse the axes on which the timeline will scroll.',
+                            default: false
                         }
                     ]
                 },
-                {
-                    name: 'timeline',
-                    title: 'Timeline',
-                    settings: []
-                },
                 {
                     name: 'media',
                     title: 'Media',
@@ -239,45 +46,24 @@ export class SettingsManager {
             ]
         },
         {
-            name: 'editor8',
-            title: 'Editor',
+            name: 'keyboard',
+            title: 'Keyboard',
             childNamespaces: [
                 {
-                    name: 'playback',
-                    title: 'Playback',
+                    name: 'hotkeys',
+                    title: 'Hotkeys',
                     settings: [
                         {
-                            title: 'Bool 1',
-                            description: 'AAAAAAAAfasf',
-                            name: 'A',
-                            type: 'boolean'
-                        },
-                        {
-                            title: 'Bool 2',
-                            name: 'A',
-                            type: 'boolean'
+                            type: 'custom',
+                            name: 'keybinds',
+                            title: 'Hotkeys',
+                            component: markRaw(
+                                defineAsyncComponent(
+                                    () => import('../../../safelight/src/views/dev/Packages.vue')
+                                )
+                            )
                         }
                     ]
-                },
-                {
-                    name: 'timeline',
-                    title: 'Timeline',
-                    settings: []
-                },
-                {
-                    name: 'media',
-                    title: 'Media',
-                    settings: []
-                }
-            ]
-        },
-        {
-            name: 'keyboard',
-            title: 'Keyboard',
-            childNamespaces: [
-                {
-                    name: 'hotkeys',
-                    title: 'Hotkeys'
                 }
             ]
         }
@@ -285,9 +71,69 @@ export class SettingsManager {
 
     public static settingsDefinition = reactive(new Map<string, SettingsNamespace>());
 
+    public static defaultSettings = reactive<{ [key: string]: any }>({});
+
+    public static currentSettings = reactive<{ [key: string]: any }>({});
+
     private static defaultsCreated = false;
 
-    public static createDefaultNamespaces(namespace = this.defaultNamespaces, path: string[] = []) {
+    public static setup() {
+        this.createDefaultNamespaces(this.defaultNamespaces, []);
+        this.createDefaultSettings(Array.from(this.settingsDefinition.values()));
+    }
+
+    public static createNamespace(path: string[], namespace: SettingsNamespaceDefinition) {
+        const newNamespace = new SettingsNamespace(path, namespace);
+        if (path.length <= 1) {
+            this.settingsDefinition.set(path.join('.'), newNamespace);
+        }
+
+        return newNamespace;
+    }
+
+    public static getNamespace(path: string[]): SettingsNamespace | undefined;
+    public static getNamespace(path: string): SettingsNamespace | undefined;
+    public static getNamespace(path: string[] | string): SettingsNamespace | undefined {
+        const pathArray = Array.isArray(path) ? path : path.split('.');
+
+        // Loop through path array to find nested namespace
+        return pathArray.reduce((ns, path, curIndex) => {
+            if (!ns) return;
+
+            const childNs = ns?.childNamespaces.find(
+                (ns) => ns.path == pathArray.slice(0, curIndex + 1).join('.')
+            );
+
+            return childNs ?? ns;
+        }, this.settingsDefinition.get(pathArray[0]));
+    }
+
+    public static getSetting(path: string): ComputedRef<any>;
+    public static getSetting(path: string[]): ComputedRef<any>;
+    public static getSetting(path: string | string[]) {
+        const combinedPath = Array.isArray(path) ? path.join('.') : path;
+
+        return computed(() => {
+            const currentValue = getByPath(this.currentSettings, combinedPath);
+            if (currentValue === undefined) {
+                console.log(currentValue);
+                return getByPath(this.defaultSettings, combinedPath);
+            }
+            return currentValue;
+        });
+    }
+
+    public static setSetting(path: string, value: any): void;
+    public static setSetting(path: string[], value: any): void;
+    public static setSetting(path: string | string[], value: any) {
+        const combinedPath = Array.isArray(path) ? path.join('.') : path;
+        setByPath(this.currentSettings, combinedPath, value);
+    }
+
+    private static createDefaultNamespaces(
+        namespace: SettingsNamespaceDefinition[],
+        path: string[]
+    ) {
         if (this.defaultsCreated && path.length == 0) {
             this.defaultsCreated = true;
             return [];
@@ -312,29 +158,52 @@ export class SettingsManager {
         return newNamespaces;
     }
 
-    public static createNamespace(path: string[], namespace: SettingsNamespaceDefinition) {
-        const newNamespace = new SettingsNamespace(path.join('.'), namespace);
-        this.settingsDefinition.set(path.join('.'), newNamespace);
+    /**
+     * Loop over each namespace and child namespaces to set the default settings
+     */
+    private static createDefaultSettings(namespace?: SettingsNamespace[]) {
+        if (!namespace) return;
 
-        return newNamespace;
+        namespace.forEach((ns) => {
+            ns.setDefaultValues();
+            this.createDefaultSettings(ns.childNamespaces);
+        });
     }
 }
 
 export class SettingsNamespace {
-    public childNamespaces!: SettingsNamespace[];
+    public path: string;
     public title: string;
     public description?: string;
     public name: string;
+    public childNamespaces!: SettingsNamespace[];
     public settings: SettingsPropertyDefinition[];
+
     constructor(
-        public path: string,
-        private definition: SettingsNamespaceDefinition
+        public pathArray: string[],
+        definition: SettingsNamespaceDefinition
     ) {
+        this.path = pathArray.join('.');
         this.title = definition.title;
         this.name = definition.name;
         this.description = definition.description;
         this.settings = definition.settings ?? [];
     }
+
+    /**
+     * Set the default values of each setting in the namespace.
+     */
+    public setDefaultValues() {
+        this.settings.forEach((setting) => {
+            if (setting.type !== 'group' && setting.default !== undefined) {
+                setByPath(
+                    SettingsManager.defaultSettings,
+                    [...this.pathArray, setting.name].join('.'),
+                    setting.default
+                );
+            }
+        });
+    }
 }
 
 export interface SettingsNamespaceDefinition {
@@ -346,13 +215,14 @@ export interface SettingsNamespaceDefinition {
 }
 
 export type SettingsPropertyDefinition =
-    | SettingsGroup
     | SettingsArrayProperty
-    | SettingsNumberProperty
-    | SettingsStringProperty
+    | SettingsBoolProperty
+    | SettingsCustomProperty
     | SettingsDictionaryProperty
     | SettingsEnumProperty
-    | SettingsBoolProperty;
+    | SettingsGroup
+    | SettingsNumberProperty
+    | SettingsStringProperty;
 
 interface DefaultSettingsProperty {
     type: string;
@@ -404,6 +274,12 @@ export interface SettingsEnumProperty extends DefaultSettingsProperty {
     default?: any;
 }
 
+export interface SettingsCustomProperty extends DefaultSettingsProperty {
+    type: 'custom';
+    component: Raw<Component>;
+    default?: any;
+}
+
 export interface SettingsGroup {
     type: 'group';
     title: string;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3549bbf7..c81ad910 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -307,6 +307,9 @@ importers:
       dexie:
         specifier: ^4.0.7
         version: 4.0.7
+      dot-path-value:
+        specifier: ^0.0.10
+        version: 0.0.10
       hash-wasm:
         specifier: ^4.11.0
         version: 4.11.0
@@ -1985,7 +1988,7 @@ packages:
       pathe: 1.1.2
       picocolors: 1.0.1
       sirv: 2.0.4
-      vitest: 1.6.0(@types/node@20.14.2)(@vitest/browser@1.6.0)(@vitest/ui@1.6.0)
+      vitest: 1.6.0(@vitest/browser@1.6.0)(@vitest/ui@1.6.0)
     dev: true
 
   /@vitest/utils@1.6.0:
@@ -2857,6 +2860,10 @@ packages:
       esutils: 2.0.3
     dev: true
 
+  /dot-path-value@0.0.10:
+    resolution: {integrity: sha512-MrVpDoFwk1xjeM0sGRuei7N3LQOylJ9iamgfxAQwPY0hPnDHL981hM/KpoQwFHMckgjZvJA0MyH7VN//ernFFA==}
+    dev: false
+
   /dynamic-dedupe@0.3.0:
     resolution: {integrity: sha512-ssuANeD+z97meYOqd50e04Ze5qp4bPqo8cCkI4TRjZkzAUgIDTrXV1R8QCdINpiI+hw14+rYazvTRdQrz0/rFQ==}
     dependencies:

From 991be9d7b7c6d9e1fa3e26302971b89180370692 Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Sun, 23 Jun 2024 16:06:19 +0200
Subject: [PATCH 05/18] feat: Implemented basic UI for boolen setting

---
 .../Menu/Settings/NamespaceSettings.vue       | 19 +++++++--
 .../src/components/Menu/Settings/Settings.vue | 35 +++++++++++++----
 .../SettingsProperties/ArraySetting.vue       | 12 +++++-
 .../SettingsProperties/BooleanSetting.vue     | 33 ++++++++++++++--
 .../SettingsProperties/DictionarySetting.vue  | 12 +++++-
 .../SettingsProperties/EnumSetting.vue        | 12 +++++-
 .../SettingsProperties/NumberSetting.vue      | 12 +++++-
 .../SettingsProperties/SettingsGroup.vue      | 39 +++++++++++--------
 .../SettingsProperties/StringSetting.vue      | 12 +++++-
 .../safelight/src/views/Editor/Editor.vue     |  4 +-
 10 files changed, 146 insertions(+), 44 deletions(-)

diff --git a/packages/safelight/src/components/Menu/Settings/NamespaceSettings.vue b/packages/safelight/src/components/Menu/Settings/NamespaceSettings.vue
index a44607bf..60c336b0 100644
--- a/packages/safelight/src/components/Menu/Settings/NamespaceSettings.vue
+++ b/packages/safelight/src/components/Menu/Settings/NamespaceSettings.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="currentSettings" class="h-full flex-1 overflow-y-scroll">
+    <div v-if="currentSettings" ref="scrollContainer" class="h-full flex-1 overflow-y-scroll">
         <h1 class="mt-0">
             {{ currentSettings.title }}
         </h1>
@@ -8,8 +8,11 @@
             :source="currentSettings.description"
             :html="false"
         />
-        <div>
-            <SettingsGroup :settings="currentSettings.settings" />
+        <div v-if="currentSettings.settings" role="list">
+            <SettingsGroup
+                :settings="currentSettings.settings"
+                :namespace="currentSettings.pathArray"
+            />
         </div>
     </div>
 </template>
@@ -23,5 +26,13 @@ const props = withDefaults(defineProps<{ path: string }>(), {
     path: () => 'general'
 });
 
-const currentSettings = computed(() => SettingsManager.settingsDefinition.get(props.path));
+const scrollContainer = ref<HTMLDivElement>();
+
+const currentSettings = computed(() => SettingsManager.getNamespace(props.path));
+
+watch(currentSettings, () => {
+    if (scrollContainer.value) {
+        scrollContainer.value.scrollTo(0, 0);
+    }
+});
 </script>
diff --git a/packages/safelight/src/components/Menu/Settings/Settings.vue b/packages/safelight/src/components/Menu/Settings/Settings.vue
index 7ed2c8c5..f6859a8e 100644
--- a/packages/safelight/src/components/Menu/Settings/Settings.vue
+++ b/packages/safelight/src/components/Menu/Settings/Settings.vue
@@ -17,8 +17,8 @@
                 border-right-width: 1px;
                 border-right-color: var(--color-border);
             "
-        ></div>
-        <NamespaceSettings :path="selectedPath" />
+        />
+        <NamespaceSettings class="namespace" :path="selectedPath" />
     </div>
 </template>
 
@@ -32,24 +32,43 @@ const expandedKeys = ref({});
 
 function onNodeSelect(data: TreeNode) {
     if (data.key) {
-        selectedPath.value = data.key;
-        if ((data.children ?? []).length > 0) {
-            expandedKeys.value = { ...expandedKeys.value, [data.key]: true };
+        if ((SettingsManager.getNamespace(data.key)?.settings?.length ?? 0) > 0) {
+            selectedPath.value = data.key;
+        }
+        if (data.children && data.children.length > 0) {
+            expandedKeys.value = { [data.key]: true };
         }
     }
 }
 
 const tree = computed(() => {
-    return (Array.from(SettingsManager.settingsDefinition.values()) as SettingsNamespace[])
-        .filter((ns) => ns.path.split('.').length <= 1)
-        .map((ns) => mapSettingsNs(ns));
+    return (Array.from(SettingsManager.settingsDefinition.values()) as SettingsNamespace[]).map(
+        (ns) => mapSettingsNs(ns)
+    );
 });
 
 function mapSettingsNs(ns: SettingsNamespace): TreeNode {
     return {
         key: ns.path,
         label: ns.title,
+        selectable: ns.settings?.length > 0 || ns.childNamespaces?.length > 0,
         children: ns.childNamespaces?.map(mapSettingsNs)
     } as TreeNode;
 }
 </script>
+
+<style lang="scss" scoped>
+.namespace :deep(div[role='listitem']) {
+    @apply ml-2;
+
+    h3 {
+        @apply mb-2 mt-0;
+    }
+    p {
+        @apply m-0;
+    }
+    & > div {
+        @apply ml-2;
+    }
+}
+</style>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/ArraySetting.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/ArraySetting.vue
index 9fa3844c..0ff26570 100644
--- a/packages/safelight/src/components/Menu/Settings/SettingsProperties/ArraySetting.vue
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/ArraySetting.vue
@@ -1,3 +1,11 @@
-<template></template>
+<template>
+    <h3 v-if="setting?.title">{{ setting.title }}</h3>
+    <vue-markdown v-if="setting?.description" :source="setting.description" />
+</template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { SettingsArrayProperty } from '@safelight/shared/Settings/SettingsManager';
+import VueMarkdown from 'vue-markdown-render';
+
+defineProps<{ namespace: string[]; setting: SettingsArrayProperty }>();
+</script>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/BooleanSetting.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/BooleanSetting.vue
index fa4d6aca..41e43c02 100644
--- a/packages/safelight/src/components/Menu/Settings/SettingsProperties/BooleanSetting.vue
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/BooleanSetting.vue
@@ -1,11 +1,36 @@
 <template>
-    <h3 v-if="setting?.title">{{ setting.title }}</h3>
-    <vue-markdown v-if="setting?.description" :source="setting.description" />
+    <h3 v-if="setting?.title" :id="setting.name + '-title'">{{ setting.title }}</h3>
+    <vue-markdown
+        v-if="setting?.description"
+        :id="setting.name + '-description'"
+        :source="setting.description"
+    />
+    <Checkbox
+        :model-value="checkboxValue"
+        :binary="true"
+        :pt="{
+            input: {
+                'aria-describedby': setting.name + '-description'
+            }
+        }"
+        :aria-labelledby="setting.name + '-title'"
+        @change="changeValue()"
+    />
 </template>
 
 <script lang="ts" setup>
-import type { SettingsBoolProperty } from '@safelight/shared/Settings/SettingsManager';
+import {
+    SettingsManager,
+    type SettingsBoolProperty
+} from '@safelight/shared/Settings/SettingsManager';
+import Checkbox from 'primevue/checkbox';
 import VueMarkdown from 'vue-markdown-render';
 
-defineProps<{ setting: SettingsBoolProperty }>();
+const props = defineProps<{ namespace: string[]; setting: SettingsBoolProperty }>();
+
+const checkboxValue = SettingsManager.getSetting([...props.namespace, props.setting.name]);
+
+function changeValue() {
+    SettingsManager.setSetting([...props.namespace, props.setting.name], !checkboxValue.value);
+}
 </script>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/DictionarySetting.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/DictionarySetting.vue
index 9fa3844c..2fd3edd1 100644
--- a/packages/safelight/src/components/Menu/Settings/SettingsProperties/DictionarySetting.vue
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/DictionarySetting.vue
@@ -1,3 +1,11 @@
-<template></template>
+<template>
+    <h3 v-if="setting?.title">{{ setting.title }}</h3>
+    <vue-markdown v-if="setting?.description" :source="setting.description" />
+</template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { SettingsDictionaryProperty } from '@safelight/shared/Settings/SettingsManager';
+import VueMarkdown from 'vue-markdown-render';
+
+defineProps<{ namespace: string[]; setting: SettingsDictionaryProperty }>();
+</script>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/EnumSetting.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/EnumSetting.vue
index 9fa3844c..960770d4 100644
--- a/packages/safelight/src/components/Menu/Settings/SettingsProperties/EnumSetting.vue
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/EnumSetting.vue
@@ -1,3 +1,11 @@
-<template></template>
+<template>
+    <h3 v-if="setting?.title">{{ setting.title }}</h3>
+    <vue-markdown v-if="setting?.description" :source="setting.description" />
+</template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { SettingsEnumProperty } from '@safelight/shared/Settings/SettingsManager';
+import VueMarkdown from 'vue-markdown-render';
+
+defineProps<{ namespace: string[]; setting: SettingsEnumProperty }>();
+</script>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/NumberSetting.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/NumberSetting.vue
index 9fa3844c..8b805fc2 100644
--- a/packages/safelight/src/components/Menu/Settings/SettingsProperties/NumberSetting.vue
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/NumberSetting.vue
@@ -1,3 +1,11 @@
-<template></template>
+<template>
+    <h3 v-if="setting?.title">{{ setting.title }}</h3>
+    <vue-markdown v-if="setting?.description" :source="setting.description" />
+</template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { SettingsNumberProperty } from '@safelight/shared/Settings/SettingsManager';
+import VueMarkdown from 'vue-markdown-render';
+
+defineProps<{ namespace: string[]; setting: SettingsNumberProperty }>();
+</script>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/SettingsGroup.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/SettingsGroup.vue
index 8cdd424a..abc34a2d 100644
--- a/packages/safelight/src/components/Menu/Settings/SettingsProperties/SettingsGroup.vue
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/SettingsGroup.vue
@@ -1,35 +1,42 @@
 <template>
     <h2 v-if="title">{{ title }}</h2>
-    <vue-markdown v-if="description" :source="description" :html="false" :toc-first-level="3" />
-    <div v-for="(setting, i) in settings ?? []" :key="i">
-        <ArraySetting v-if="setting.type === 'array'" :setting="setting" />
-        <BooleanSetting v-else-if="setting.type === 'boolean'" :setting="setting" />
-        <DictionarySetting v-else-if="setting.type === 'dictionary'" :setting="setting" />
-        <EnumSetting v-else-if="setting.type === 'enum'" :setting="setting" />
-        <SettingsGroup
-            v-else-if="setting.type === 'group'"
-            :title="setting.title"
-            :description="setting.description"
-            :settings="setting.settings"
-        />
-        <NumberSetting v-else-if="setting.type === 'number'" :setting="setting" />
-        <StringSetting v-else-if="setting.type === 'string'" :setting="setting" />
-    </div>
+    <vue-markdown v-if="description" :source="description" :html="false" />
+    <template v-for="(setting, i) in settings ?? []" :key="i">
+        <div role="listitem">
+            <ArraySetting v-if="setting.type === 'array'" :namespace :setting />
+            <BooleanSetting v-else-if="setting.type === 'boolean'" :namespace :setting />
+            <DictionarySetting v-else-if="setting.type === 'dictionary'" :namespace :setting />
+            <EnumSetting v-else-if="setting.type === 'enum'" :namespace :setting />
+            <SettingsGroup
+                v-else-if="setting.type === 'group'"
+                :title="setting.title"
+                :description="setting.description"
+                :settings="setting.settings"
+                :namespace
+            />
+            <NumberSetting v-else-if="setting.type === 'number'" :namespace :setting />
+            <StringSetting v-else-if="setting.type === 'string'" :namespace :setting />
+            <Suspense v-else-if="setting.type === 'custom'">
+                <component :is="setting.component" :setting />
+            </Suspense>
+        </div>
+    </template>
 </template>
 
 <script setup lang="ts">
 import type { SettingsPropertyDefinition } from '@safelight/shared/Settings/SettingsManager';
+import VueMarkdown from 'vue-markdown-render';
 import ArraySetting from './ArraySetting.vue';
 import BooleanSetting from './BooleanSetting.vue';
 import DictionarySetting from './DictionarySetting.vue';
 import EnumSetting from './EnumSetting.vue';
 import NumberSetting from './NumberSetting.vue';
 import SettingsGroup from './SettingsGroup.vue';
-import VueMarkdown from 'vue-markdown-render';
 
 defineProps<{
     title?: string;
     description?: string;
+    namespace: string[];
     settings: SettingsPropertyDefinition[];
 }>();
 </script>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/StringSetting.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/StringSetting.vue
index 9fa3844c..6194b27f 100644
--- a/packages/safelight/src/components/Menu/Settings/SettingsProperties/StringSetting.vue
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/StringSetting.vue
@@ -1,3 +1,11 @@
-<template></template>
+<template>
+    <h3 v-if="setting?.title">{{ setting.title }}</h3>
+    <vue-markdown v-if="setting?.description" :source="setting.description" />
+</template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { SettingsStringProperty } from '@safelight/shared/Settings/SettingsManager';
+import VueMarkdown from 'vue-markdown-render';
+
+defineProps<{ namespace: string[]; setting: SettingsStringProperty }>();
+</script>
diff --git a/packages/safelight/src/views/Editor/Editor.vue b/packages/safelight/src/views/Editor/Editor.vue
index 9e11e978..1c5aa7f5 100644
--- a/packages/safelight/src/views/Editor/Editor.vue
+++ b/packages/safelight/src/views/Editor/Editor.vue
@@ -69,7 +69,7 @@ const menuItems: MenuItem[] = [
                             header: 'Settings',
                             style: {
                                 width: '75vw',
-                                height: '70vh'
+                                height: '80vh'
                             },
                             pt: { content: { style: { height: '100%' } } },
                             breakpoints: {
@@ -77,7 +77,7 @@ const menuItems: MenuItem[] = [
                                 '640px': '90vw'
                             },
                             modal: true,
-                            maximizable: true
+                            draggable: false
                         }
                     });
                 }

From 857d907d6309dfb48b4304960663e1ad0ecedee2 Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Mon, 24 Jun 2024 10:15:48 +0200
Subject: [PATCH 06/18] refactor: Updated for removing of autoimport

Also fixed a build warning
---
 .../src/components/Menu/Settings/NamespaceSettings.vue         | 3 ++-
 packages/safelight/src/components/Menu/Settings/Settings.vue   | 2 ++
 .../Menu/Settings/SettingsProperties/SettingsGroup.vue         | 1 +
 packages/safelight/src/views/Editor/Editor.vue                 | 2 +-
 packages/safelight/src/views/dev/UI.vue                        | 1 +
 packages/safelight/src/views/dev/dev.vue                       | 1 +
 packages/timeline/src/Timeline.vue                             | 2 +-
 7 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/safelight/src/components/Menu/Settings/NamespaceSettings.vue b/packages/safelight/src/components/Menu/Settings/NamespaceSettings.vue
index 60c336b0..ef4387dc 100644
--- a/packages/safelight/src/components/Menu/Settings/NamespaceSettings.vue
+++ b/packages/safelight/src/components/Menu/Settings/NamespaceSettings.vue
@@ -19,8 +19,9 @@
 
 <script setup lang="ts">
 import { SettingsManager } from '@safelight/shared/Settings/SettingsManager';
-import SettingsGroup from './SettingsProperties/SettingsGroup.vue';
+import { computed, ref, watch } from 'vue';
 import VueMarkdown from 'vue-markdown-render';
+import SettingsGroup from './SettingsProperties/SettingsGroup.vue';
 
 const props = withDefaults(defineProps<{ path: string }>(), {
     path: () => 'general'
diff --git a/packages/safelight/src/components/Menu/Settings/Settings.vue b/packages/safelight/src/components/Menu/Settings/Settings.vue
index f6859a8e..d4727928 100644
--- a/packages/safelight/src/components/Menu/Settings/Settings.vue
+++ b/packages/safelight/src/components/Menu/Settings/Settings.vue
@@ -26,6 +26,8 @@
 import { SettingsManager, SettingsNamespace } from '@safelight/shared/Settings/SettingsManager';
 import Tree from 'primevue/tree';
 import type { TreeNode } from 'primevue/treenode';
+import { computed, ref } from 'vue';
+import NamespaceSettings from './NamespaceSettings.vue';
 
 const selectedPath = ref<string>('general');
 const expandedKeys = ref({});
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/SettingsGroup.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/SettingsGroup.vue
index abc34a2d..1f0e6c00 100644
--- a/packages/safelight/src/components/Menu/Settings/SettingsProperties/SettingsGroup.vue
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/SettingsGroup.vue
@@ -32,6 +32,7 @@ import DictionarySetting from './DictionarySetting.vue';
 import EnumSetting from './EnumSetting.vue';
 import NumberSetting from './NumberSetting.vue';
 import SettingsGroup from './SettingsGroup.vue';
+import StringSetting from './StringSetting.vue';
 
 defineProps<{
     title?: string;
diff --git a/packages/safelight/src/views/Editor/Editor.vue b/packages/safelight/src/views/Editor/Editor.vue
index 01af52b5..54cd14d8 100644
--- a/packages/safelight/src/views/Editor/Editor.vue
+++ b/packages/safelight/src/views/Editor/Editor.vue
@@ -49,7 +49,7 @@ import type { MenuItem } from 'primevue/menuitem';
 import Toolbar from 'primevue/toolbar';
 import { useConfirm } from 'primevue/useconfirm';
 import { useDialog } from 'primevue/usedialog';
-import { onBeforeUnmount, onMounted, watch } from 'vue';
+import { defineAsyncComponent, onBeforeUnmount, onMounted, watch } from 'vue';
 
 const project = useProject();
 const editor = useEditor();
diff --git a/packages/safelight/src/views/dev/UI.vue b/packages/safelight/src/views/dev/UI.vue
index 0cae1a32..7271a70e 100644
--- a/packages/safelight/src/views/dev/UI.vue
+++ b/packages/safelight/src/views/dev/UI.vue
@@ -37,6 +37,7 @@
 </template>
 
 <script setup lang="ts">
+import { PhArrowLeft } from '@phosphor-icons/vue';
 import Button from 'primevue/button';
 import Card from 'primevue/card';
 import Listbox from 'primevue/listbox';
diff --git a/packages/safelight/src/views/dev/dev.vue b/packages/safelight/src/views/dev/dev.vue
index 5fa211fa..f84b3dcf 100644
--- a/packages/safelight/src/views/dev/dev.vue
+++ b/packages/safelight/src/views/dev/dev.vue
@@ -25,6 +25,7 @@
 </template>
 
 <script setup lang="ts">
+import { PhHouse } from '@phosphor-icons/vue';
 import Button from 'primevue/button';
 import Card from 'primevue/card';
 import { RouterLink } from 'vue-router';
diff --git a/packages/timeline/src/Timeline.vue b/packages/timeline/src/Timeline.vue
index 3e49266b..5621d436 100644
--- a/packages/timeline/src/Timeline.vue
+++ b/packages/timeline/src/Timeline.vue
@@ -49,7 +49,7 @@ const pointerOut = ref(true);
 
 useEventListener(['mousemove', 'mouseenter', 'mouseover'], (ev) => {
     if (ev.target) {
-        pointerOut.value = !target.value?.parentNode?.contains(ev.target as Node) ?? true;
+        pointerOut.value = !target.value?.parentNode?.contains(ev.target as Node);
     }
 });
 

From 456f143699050724f36a01b892ab1047638b252c Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Tue, 25 Jun 2024 22:20:59 +0200
Subject: [PATCH 07/18] feat(Settings): :sparkles: Implemented saving of
 settings

Setting are saved to localstorage using the `sl-settings` key
---
 packages/safelight/vite.config.ts             |  1 +
 .../shared/src/Settings/SettingsManager.ts    | 41 +++++++++++++++----
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/packages/safelight/vite.config.ts b/packages/safelight/vite.config.ts
index 4f98e6a5..5ab161d5 100644
--- a/packages/safelight/vite.config.ts
+++ b/packages/safelight/vite.config.ts
@@ -44,6 +44,7 @@ export default defineConfig({
             'primevue/button',
             'primevue/buttongroup',
             'primevue/card',
+            'primevue/checkbox',
             'primevue/column',
             'primevue/confirmdialog',
             'primevue/datatable',
diff --git a/packages/shared/src/Settings/SettingsManager.ts b/packages/shared/src/Settings/SettingsManager.ts
index 8270d33c..e593bedc 100644
--- a/packages/shared/src/Settings/SettingsManager.ts
+++ b/packages/shared/src/Settings/SettingsManager.ts
@@ -4,6 +4,7 @@ import {
     defineAsyncComponent,
     markRaw,
     reactive,
+    toRaw,
     type Component,
     type ComputedRef,
     type Raw
@@ -39,8 +40,8 @@ export class SettingsManager {
                     ]
                 },
                 {
-                    name: 'media',
-                    title: 'Media',
+                    name: 'library',
+                    title: 'Library',
                     settings: []
                 }
             ]
@@ -69,6 +70,8 @@ export class SettingsManager {
         }
     ];
 
+    private static saveTimeout: ReturnType<typeof setTimeout>;
+
     public static settingsDefinition = reactive(new Map<string, SettingsNamespace>());
 
     public static defaultSettings = reactive<{ [key: string]: any }>({});
@@ -80,6 +83,8 @@ export class SettingsManager {
     public static setup() {
         this.createDefaultNamespaces(this.defaultNamespaces, []);
         this.createDefaultSettings(Array.from(this.settingsDefinition.values()));
+
+        this.loadSettings();
     }
 
     public static createNamespace(path: string[], namespace: SettingsNamespaceDefinition) {
@@ -108,17 +113,15 @@ export class SettingsManager {
         }, this.settingsDefinition.get(pathArray[0]));
     }
 
-    public static getSetting(path: string): ComputedRef<any>;
-    public static getSetting(path: string[]): ComputedRef<any>;
+    public static getSetting<T = any>(path: string): ComputedRef<T>;
+    public static getSetting<T = any>(path: string[]): ComputedRef<T>;
     public static getSetting(path: string | string[]) {
         const combinedPath = Array.isArray(path) ? path.join('.') : path;
 
         return computed(() => {
-            const currentValue = getByPath(this.currentSettings, combinedPath);
-            if (currentValue === undefined) {
-                console.log(currentValue);
-                return getByPath(this.defaultSettings, combinedPath);
-            }
+            const currentValue =
+                getByPath(this.currentSettings, combinedPath) ??
+                getByPath(this.defaultSettings, combinedPath);
             return currentValue;
         });
     }
@@ -128,6 +131,26 @@ export class SettingsManager {
     public static setSetting(path: string | string[], value: any) {
         const combinedPath = Array.isArray(path) ? path.join('.') : path;
         setByPath(this.currentSettings, combinedPath, value);
+
+        this.saveSettingsDebounced();
+    }
+
+    private static saveSettingsDebounced() {
+        clearInterval(this.saveTimeout);
+        this.saveTimeout = setTimeout(() => this.saveSettings(), 250);
+    }
+
+    public static saveSettings() {
+        localStorage.setItem('sl-settings', JSON.stringify(toRaw(this.currentSettings)));
+    }
+
+    public static loadSettings() {
+        const storedSettings = localStorage.getItem('sl-settings');
+        if (!storedSettings) return;
+        const newSettings = JSON.parse(storedSettings);
+        if (!newSettings || Object.keys(newSettings).length == 0) return;
+
+        Object.assign(this.currentSettings, newSettings);
     }
 
     private static createDefaultNamespaces(

From 66d27aa1b51caa064e98770955b7da4c860c5706 Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Tue, 25 Jun 2024 22:22:14 +0200
Subject: [PATCH 08/18] feat(Timeline): :sparkles: Implemented first setting

Implemented setting for timeline trackpad scrolling
---
 packages/safelight/src/components/Editor/Timeline/Timeline.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/safelight/src/components/Editor/Timeline/Timeline.vue b/packages/safelight/src/components/Editor/Timeline/Timeline.vue
index 1c2a82b1..8e6f43bc 100644
--- a/packages/safelight/src/components/Editor/Timeline/Timeline.vue
+++ b/packages/safelight/src/components/Editor/Timeline/Timeline.vue
@@ -3,6 +3,7 @@
         v-model:items="items"
         :playback-position="pbPos"
         :fps="timeline?.framerate.value"
+        :invert-scroll-axes
         class="h-full"
         @update:playback-position="setPbPos"
     />
@@ -10,6 +11,7 @@
 
 <script setup lang="ts">
 import { CurrentProject } from '@/stores/currentProject';
+import { SettingsManager } from '@safelight/shared/Settings/SettingsManager';
 import Timecode from '@safelight/shared/Timecode';
 import { Timeline as SLTimeline, type TimelineItem } from '@safelight/timeline/source';
 import { v4 as uuidv4 } from 'uuid';
@@ -23,6 +25,7 @@ const pbPos = computed(() =>
         ? Timecode.fromFrames(timeline.value.pbPos.value, timeline.value.framerate.value)
         : 0
 );
+const invertScrollAxes = SettingsManager.getSetting<boolean>('editor.timeline.useTrackpad');
 
 function setPbPos(pb?: number) {
     if (pb !== undefined && timeline?.value) {

From 732f597282475059548d3c4faf7e935e4de66a4f Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Tue, 25 Jun 2024 22:24:11 +0200
Subject: [PATCH 09/18] fix(Timeline): :goal_net: Fixed warning for timeline
 items being too large when zoomed in

When zooming in a lot, a warning will appear in Firefox stating that Will-change memory usage is too large

Timeline items are now sticky to left side. Something i wanted to implement anyway
---
 packages/timeline/src/PlaybackHead.vue        |  8 ++++++
 .../timeline/src/TimelineItemComponent.vue    | 25 ++++++++++++++-----
 packages/timeline/src/index.ts                |  2 +-
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/packages/timeline/src/PlaybackHead.vue b/packages/timeline/src/PlaybackHead.vue
index 0a773ff5..21546da0 100644
--- a/packages/timeline/src/PlaybackHead.vue
+++ b/packages/timeline/src/PlaybackHead.vue
@@ -1,5 +1,6 @@
 <template>
     <div
+        v-if="isVisible"
         id="pbHead"
         role="slider"
         aria-label="Playback head"
@@ -21,6 +22,13 @@ const left = computed(
     () => viewport.getTimePosition(viewport.pbPos.value ?? 0) - viewport.offsetX.value
 );
 
+const isVisible = computed(() =>
+    viewport.isItemVisible({
+        start: (viewport.pbPos.value ?? 0) - 50,
+        duration: 100
+    })
+);
+
 const lastPos = ref(0);
 const virtualPos = ref(0);
 const isMoving = ref(false);
diff --git a/packages/timeline/src/TimelineItemComponent.vue b/packages/timeline/src/TimelineItemComponent.vue
index 814bfb87..c99b3ec8 100644
--- a/packages/timeline/src/TimelineItemComponent.vue
+++ b/packages/timeline/src/TimelineItemComponent.vue
@@ -3,7 +3,7 @@
         class="timelineItem"
         :style="{
             top: ySmooth + 'px',
-            left: xSmooth + 'px',
+            left: useMax(x, 0).value + 'px',
             width: width + 'px',
             height: height + 'px'
         }"
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { useRound } from '@vueuse/math';
+import { useMax, useRound } from '@vueuse/math';
 import { computed, inject } from 'vue';
 import type { TimelineItem, TimelineViewport } from '.';
 
@@ -29,10 +29,23 @@ defineEmits<{
     itemChange: [TimelineItem];
 }>();
 
-const width = computed(
-    () =>
-        viewport.getTimePosition(item.start + item.duration) - viewport.getTimePosition(item.start)
-);
+// Calculate width of item, but not larger than the viewport (for CSS reasons)
+// and if the x position is less than 0, subtract it from the width to make the
+// item stick to the left side
+const width = computed(() => {
+    let width =
+        viewport.getTimePosition(item.start + item.duration) - viewport.getTimePosition(item.start);
+
+    if (x.value < 0) {
+        // Already negative
+        width += x.value;
+    }
+
+    // Viewport width without overflowing left side
+    const viewportWidth = viewport.boundingBoxWidth.value + (x.value > 0 ? -x.value : 0);
+
+    return width > viewportWidth ? viewportWidth : width;
+});
 const height = computed(
     () =>
         viewport.LayerToYPosition(item.layer, false, true) -
diff --git a/packages/timeline/src/index.ts b/packages/timeline/src/index.ts
index 59bfd872..6b30ff11 100644
--- a/packages/timeline/src/index.ts
+++ b/packages/timeline/src/index.ts
@@ -269,7 +269,7 @@ export class TimelineViewport {
      *
      * I hope no one needs to have like 10000 items stacked vertically.
      */
-    isItemVisible(item: TimelineItem) {
+    isItemVisible(item: { start: number; duration: number }) {
         const isHorizontalVisible =
             item.start + item.duration >= this.startTime.value && item.start <= this.endTime.value;
         return isHorizontalVisible;

From 44ca22c05898f799daee5c05ac09542cf9898fd4 Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Thu, 27 Jun 2024 12:01:53 +0200
Subject: [PATCH 10/18] refactor(Settings): :recycle: Moved opening settings
 dialog to SettingManager. Added icons to namespaces

Also added a hr to setting groups. Moved some dependencies around for shared
---
 .../Menu/Settings/NamespaceSettings.vue       |  3 +-
 .../src/components/Menu/Settings/Settings.vue | 43 +++++++++++----
 .../SettingsProperties/SettingsGroup.vue      |  7 ++-
 .../safelight/src/views/Editor/Editor.vue     | 26 ++-------
 packages/shared/package.json                  | 17 +++---
 .../shared/src/Settings/SettingsManager.ts    | 55 ++++++++++++++++++-
 pnpm-lock.yaml                                | 25 ++++-----
 pnpm-workspace.yaml                           |  2 +-
 8 files changed, 122 insertions(+), 56 deletions(-)

diff --git a/packages/safelight/src/components/Menu/Settings/NamespaceSettings.vue b/packages/safelight/src/components/Menu/Settings/NamespaceSettings.vue
index ef4387dc..e00c13c7 100644
--- a/packages/safelight/src/components/Menu/Settings/NamespaceSettings.vue
+++ b/packages/safelight/src/components/Menu/Settings/NamespaceSettings.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="currentSettings" ref="scrollContainer" class="h-full flex-1 overflow-y-scroll">
+    <div v-if="currentSettings" ref="scrollContainer" class="h-full flex-1 overflow-y-auto">
         <h1 class="mt-0">
             {{ currentSettings.title }}
         </h1>
@@ -12,6 +12,7 @@
             <SettingsGroup
                 :settings="currentSettings.settings"
                 :namespace="currentSettings.pathArray"
+                :is-first="true"
             />
         </div>
     </div>
diff --git a/packages/safelight/src/components/Menu/Settings/Settings.vue b/packages/safelight/src/components/Menu/Settings/Settings.vue
index d4727928..8d9bbe62 100644
--- a/packages/safelight/src/components/Menu/Settings/Settings.vue
+++ b/packages/safelight/src/components/Menu/Settings/Settings.vue
@@ -3,12 +3,18 @@
         <div class="overflow-y-auto">
             <Tree
                 v-model:expandedKeys="expandedKeys"
-                class="w-64"
+                class="min-w-64"
                 :selection-keys="{ [selectedPath]: true }"
                 :value="tree"
                 selection-mode="single"
                 @node-select="onNodeSelect"
-            />
+            >
+            <template #nodeicon="{node}">
+                <template v-if="node.data?.icon">
+                    <component :is="node.data.icon" class="mr-2"/>
+                </template>
+            </template>
+            </Tree>
         </div>
         <div
             class="mr-4 border-solid"
@@ -24,14 +30,34 @@
 
 <script setup lang="ts">
 import { SettingsManager, SettingsNamespace } from '@safelight/shared/Settings/SettingsManager';
+import type { DynamicDialogInstance } from 'primevue/dynamicdialogoptions';
 import Tree from 'primevue/tree';
 import type { TreeNode } from 'primevue/treenode';
-import { computed, ref } from 'vue';
+import { computed, inject, onMounted, ref, type Ref } from 'vue';
 import NamespaceSettings from './NamespaceSettings.vue';
 
 const selectedPath = ref<string>('general');
 const expandedKeys = ref({});
 
+const dialogRef = inject<Ref<DynamicDialogInstance>>('dialogRef');
+
+onMounted(() => {
+    if (dialogRef?.value?.data && dialogRef.value.data.namespace) {
+        selectedPath.value = dialogRef.value.data.namespace
+        const namespaces = selectedPath.value.split('.')
+        expandedKeys.value = {}
+        namespaces.forEach((ns) => {
+            expandedKeys.value = {...expandedKeys.value, [ns]: true}
+        })
+    }
+})
+
+const tree = computed(() => {
+    return (Array.from(SettingsManager.settingsDefinition.values()) as SettingsNamespace[]).map(
+        (ns) => mapSettingsNs(ns)
+    );
+});
+
 function onNodeSelect(data: TreeNode) {
     if (data.key) {
         if ((SettingsManager.getNamespace(data.key)?.settings?.length ?? 0) > 0) {
@@ -43,18 +69,15 @@ function onNodeSelect(data: TreeNode) {
     }
 }
 
-const tree = computed(() => {
-    return (Array.from(SettingsManager.settingsDefinition.values()) as SettingsNamespace[]).map(
-        (ns) => mapSettingsNs(ns)
-    );
-});
-
 function mapSettingsNs(ns: SettingsNamespace): TreeNode {
     return {
         key: ns.path,
         label: ns.title,
         selectable: ns.settings?.length > 0 || ns.childNamespaces?.length > 0,
-        children: ns.childNamespaces?.map(mapSettingsNs)
+        children: ns.childNamespaces?.map(mapSettingsNs),
+        data: {
+            icon: ns.icon
+        }
     } as TreeNode;
 }
 </script>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/SettingsGroup.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/SettingsGroup.vue
index 1f0e6c00..6d156520 100644
--- a/packages/safelight/src/components/Menu/Settings/SettingsProperties/SettingsGroup.vue
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/SettingsGroup.vue
@@ -1,5 +1,8 @@
 <template>
-    <h2 v-if="title">{{ title }}</h2>
+    <template v-if="title">
+        <hr v-if="!isFirst" />
+        <h2>{{ title }}</h2>
+    </template>
     <vue-markdown v-if="description" :source="description" :html="false" />
     <template v-for="(setting, i) in settings ?? []" :key="i">
         <div role="listitem">
@@ -12,6 +15,7 @@
                 :title="setting.title"
                 :description="setting.description"
                 :settings="setting.settings"
+                :is-first="i == 0"
                 :namespace
             />
             <NumberSetting v-else-if="setting.type === 'number'" :namespace :setting />
@@ -38,6 +42,7 @@ defineProps<{
     title?: string;
     description?: string;
     namespace: string[];
+    isFirst?: boolean;
     settings: SettingsPropertyDefinition[];
 }>();
 </script>
diff --git a/packages/safelight/src/views/Editor/Editor.vue b/packages/safelight/src/views/Editor/Editor.vue
index 54cd14d8..5abe7800 100644
--- a/packages/safelight/src/views/Editor/Editor.vue
+++ b/packages/safelight/src/views/Editor/Editor.vue
@@ -43,13 +43,14 @@ import { CurrentProject } from '@/stores/currentProject';
 import { useEditor } from '@/stores/useEditor';
 import { useProject } from '@/stores/useProject';
 import { PhFile, PhGear, PhSignOut } from '@phosphor-icons/vue';
+import { SettingsManager } from '@safelight/shared/Settings/SettingsManager';
 import ConfirmDialog from 'primevue/confirmdialog';
 import Menubar from 'primevue/menubar';
 import type { MenuItem } from 'primevue/menuitem';
 import Toolbar from 'primevue/toolbar';
 import { useConfirm } from 'primevue/useconfirm';
 import { useDialog } from 'primevue/usedialog';
-import { defineAsyncComponent, onBeforeUnmount, onMounted, watch } from 'vue';
+import { onBeforeUnmount, onMounted, watch } from 'vue';
 
 const project = useProject();
 const editor = useEditor();
@@ -68,26 +69,8 @@ const menuItems: MenuItem[] = [
                 label: 'Settings',
                 icon: PhGear as any,
                 disabled: false,
-                command: async () => {
-                    const settingsComponent = defineAsyncComponent(
-                        () => import('@/components/Menu/Settings/Settings.vue')
-                    );
-                    dialog.open(settingsComponent, {
-                        props: {
-                            header: 'Settings',
-                            style: {
-                                width: '75vw',
-                                height: '80vh'
-                            },
-                            pt: { content: { style: { height: '100%' } } },
-                            breakpoints: {
-                                '960px': '80vw',
-                                '640px': '90vw'
-                            },
-                            modal: true,
-                            draggable: false
-                        }
-                    });
+                command: () => {
+                    SettingsManager.openSettings(dialog);
                 }
             },
             {
@@ -107,7 +90,6 @@ onMounted(async () => {
     await router.isReady();
     if (!CurrentProject.isLoaded.value) {
         const lastProject = CurrentProject.getSessionProject();
-        console.log(lastProject);
         if (lastProject) {
             if (lastProject) {
                 CurrentProject.openProject(lastProject, false /* Already here */);
diff --git a/packages/shared/package.json b/packages/shared/package.json
index c01b4bbf..3dd27bf7 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -11,20 +11,14 @@
         "test:run": "vitest run --ui false"
     },
     "dependencies": {
-        "@phosphor-icons/vue": "^2.2.1",
-        "@vueuse/core": "^10.9.0",
-        "@vueuse/rxjs": "^10.10.0",
-        "@vueuse/shared": "^10.10.0",
         "dexie": "^4.0.7",
         "dot-path-value": "^0.0.10",
         "hash-wasm": "^4.11.0",
         "luxon": "^3.4.4",
         "mediainfo.js": "^0.3.1",
         "mime-matcher": "^1.0.5",
-        "primevue": "^3.52.0",
         "rxjs": "^7.8.1",
-        "uuid": "^9.0.1",
-        "vue": "^3.4.29"
+        "uuid": "^9.0.1"
     },
     "devDependencies": {
         "@tsconfig/node20": "^20.1.4",
@@ -33,5 +27,14 @@
         "@vue/tsconfig": "^0.5.1",
         "fake-indexeddb": "^5.0.2",
         "happy-dom": "^14.7.1"
+    },
+    "peerDependencies": {
+        "@phosphor-icons/vue": "~2",
+        "@vueuse/core": "~10",
+        "@vueuse/rxjs": "~10",
+        "@vueuse/shared": "~10",
+        "primevue": "~3",
+        "vue": "~3",
+        "@safelight/safelight": "workspace:^"
     }
 }
diff --git a/packages/shared/src/Settings/SettingsManager.ts b/packages/shared/src/Settings/SettingsManager.ts
index e593bedc..2f76ce88 100644
--- a/packages/shared/src/Settings/SettingsManager.ts
+++ b/packages/shared/src/Settings/SettingsManager.ts
@@ -9,6 +9,7 @@ import {
     type ComputedRef,
     type Raw
 } from 'vue';
+import { useDialog } from 'primevue/usedialog';
 
 export class SettingsManager {
     private static defaultNamespaces: SettingsNamespaceDefinition[] = [
@@ -20,15 +21,22 @@ export class SettingsManager {
         {
             name: 'editor',
             title: 'Editor',
+            icon: defineAsyncComponent(async () => (await import('@phosphor-icons/vue')).PhSidebar),
             childNamespaces: [
                 {
                     name: 'playback',
                     title: 'Playback',
+                    icon: defineAsyncComponent(
+                        async () => (await import('@phosphor-icons/vue')).PhPlayPause
+                    ),
                     settings: []
                 },
                 {
                     name: 'timeline',
                     title: 'Timeline',
+                    icon: defineAsyncComponent(
+                        async () => (await import('@phosphor-icons/vue')).PhFilmStrip
+                    ),
                     settings: [
                         {
                             type: 'boolean',
@@ -42,13 +50,30 @@ export class SettingsManager {
                 {
                     name: 'library',
                     title: 'Library',
-                    settings: []
+                    icon: defineAsyncComponent(
+                        async () => (await import('@phosphor-icons/vue')).PhFolders
+                    ),
+                    settings: [
+                        {
+                            type: 'group',
+                            title: 'Media',
+                            settings: []
+                        },
+                        {
+                            type: 'group',
+                            title: 'Files',
+                            settings: []
+                        }
+                    ]
                 }
             ]
         },
         {
             name: 'keyboard',
             title: 'Keyboard',
+            icon: defineAsyncComponent(
+                async () => (await import('@phosphor-icons/vue')).PhKeyboard
+            ),
             childNamespaces: [
                 {
                     name: 'hotkeys',
@@ -135,6 +160,31 @@ export class SettingsManager {
         this.saveSettingsDebounced();
     }
 
+    public static async openSettings(dialog: ReturnType<typeof useDialog>, namespace?: string) {
+        const settingsComponent = defineAsyncComponent(
+            () => import('@safelight/safelight/src/components/Menu/Settings/Settings.vue')
+        );
+        dialog.open(settingsComponent, {
+            data: {
+                namespace
+            },
+            props: {
+                header: 'Settings',
+                style: {
+                    width: '75vw',
+                    height: '80vh'
+                },
+                pt: { content: { style: { height: '100%' } } },
+                breakpoints: {
+                    '960px': '80vw',
+                    '640px': '90vw'
+                },
+                modal: true,
+                draggable: false
+            }
+        });
+    }
+
     private static saveSettingsDebounced() {
         clearInterval(this.saveTimeout);
         this.saveTimeout = setTimeout(() => this.saveSettings(), 250);
@@ -201,6 +251,7 @@ export class SettingsNamespace {
     public name: string;
     public childNamespaces!: SettingsNamespace[];
     public settings: SettingsPropertyDefinition[];
+    public icon?: Raw<Component>;
 
     constructor(
         public pathArray: string[],
@@ -211,6 +262,7 @@ export class SettingsNamespace {
         this.name = definition.name;
         this.description = definition.description;
         this.settings = definition.settings ?? [];
+        this.icon = definition.icon;
     }
 
     /**
@@ -235,6 +287,7 @@ export interface SettingsNamespaceDefinition {
     description?: string;
     settings?: SettingsPropertyDefinition[];
     childNamespaces?: SettingsNamespaceDefinition[];
+    icon?: Raw<Component>;
 }
 
 export type SettingsPropertyDefinition =
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ceb32c48..4292e739 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -287,17 +287,20 @@ importers:
   packages/shared:
     dependencies:
       '@phosphor-icons/vue':
-        specifier: ^2.2.1
+        specifier: ~2
         version: 2.2.1(vue@3.4.29)
+      '@safelight/safelight':
+        specifier: workspace:^
+        version: link:../safelight
       '@vueuse/core':
-        specifier: ^10.9.0
-        version: 10.10.0(vue@3.4.29)
+        specifier: ~10
+        version: 10.11.0(vue@3.4.29)
       '@vueuse/rxjs':
-        specifier: ^10.10.0
-        version: 10.10.0(rxjs@7.8.1)(vue@3.4.29)
+        specifier: ~10
+        version: 10.11.0(rxjs@7.8.1)(vue@3.4.29)
       '@vueuse/shared':
-        specifier: ^10.10.0
-        version: 10.10.0(vue@3.4.29)
+        specifier: ~10
+        version: 10.11.0(vue@3.4.29)
       dexie:
         specifier: ^4.0.7
         version: 4.0.7
@@ -317,7 +320,7 @@ importers:
         specifier: ^1.0.5
         version: 1.0.5
       primevue:
-        specifier: ^3.52.0
+        specifier: ~3
         version: 3.52.0(vue@3.4.29)
       rxjs:
         specifier: ^7.8.1
@@ -326,7 +329,7 @@ importers:
         specifier: ^9.0.1
         version: 9.0.1
       vue:
-        specifier: ^3.4.29
+        specifier: ~3
         version: 3.4.29(typescript@5.4.5)
     devDependencies:
       '@tsconfig/node20':
@@ -2190,7 +2193,6 @@ packages:
       - '@vue/composition-api'
       - vue
     dev: false
-    optional: true
 
   /@vueuse/gesture@2.0.0(vue@3.4.29):
     resolution: {integrity: sha512-+F0bhhd8j+gxHaXG4fJgfokrkFfWenQ10MtrWOJk68B5UaTwtJm4EpsZFiVdluA3jpKExG6H+HtroJpvO7Qx0A==}
@@ -2275,7 +2277,6 @@ packages:
     resolution: {integrity: sha512-kQX7l6l8dVWNqlqyN3ePW3KmjCQO3ZMgXuBMddIu83CmucrsBfXlH+JoviYyRBws/yLTQO8g3Pbw+bdIoVm4oQ==}
     requiresBuild: true
     dev: false
-    optional: true
 
   /@vueuse/rxjs@10.10.0(rxjs@7.8.1)(vue@3.4.29):
     resolution: {integrity: sha512-gGziL1ImRb6M6P7BIPIWg9bk0qbZWIdSmXNwUlwlPi/tu6c4bBa4tfz4jqaL3ayQ2jOj8GTYea2Kg/8Afp+/ew==}
@@ -2303,7 +2304,6 @@ packages:
       - '@vue/composition-api'
       - vue
     dev: false
-    optional: true
 
   /@vueuse/shared@10.10.0(vue@3.4.29):
     resolution: {integrity: sha512-2aW33Ac0Uk0U+9yo3Ypg9s5KcR42cuehRWl7vnUHadQyFvCktseyxxEPBi1Eiq4D2yBGACOnqLZpx1eMc7g5Og==}
@@ -2323,7 +2323,6 @@ packages:
       - '@vue/composition-api'
       - vue
     dev: false
-    optional: true
 
   /abbrev@2.0.0:
     resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 9a36b405..6de82aee 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,2 +1,2 @@
 packages:
-    - 'packages/*'
+    - "packages/*"

From 6c292b46adcd2caa331b41042155ec72a29641e0 Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Sun, 30 Jun 2024 21:28:51 +0200
Subject: [PATCH 11/18] feat(Settings): :sparkles: Added resetting to default,
 number setting, string setting

---
 .../components/Editor/Timeline/Timeline.vue   |  2 +
 .../src/components/Menu/Settings/Settings.vue | 39 +++++---
 .../SettingsProperties/BooleanSetting.vue     | 32 +++++-
 .../SettingsProperties/EnumSetting.vue        |  8 +-
 .../SettingsProperties/NumberSetting.vue      | 85 +++++++++++++++-
 .../SettingsProperties/SettingsGroup.vue      |  2 +-
 .../SettingsProperties/StringSetting.vue      | 99 ++++++++++++++++++-
 .../shared/src/Settings/SettingsManager.ts    | 69 ++++++++++---
 packages/timeline/src/Timeline.vue            |  4 +-
 9 files changed, 296 insertions(+), 44 deletions(-)

diff --git a/packages/safelight/src/components/Editor/Timeline/Timeline.vue b/packages/safelight/src/components/Editor/Timeline/Timeline.vue
index 8e6f43bc..2287f4b5 100644
--- a/packages/safelight/src/components/Editor/Timeline/Timeline.vue
+++ b/packages/safelight/src/components/Editor/Timeline/Timeline.vue
@@ -4,6 +4,7 @@
         :playback-position="pbPos"
         :fps="timeline?.framerate.value"
         :invert-scroll-axes
+        :zoom-factor
         class="h-full"
         @update:playback-position="setPbPos"
     />
@@ -26,6 +27,7 @@ const pbPos = computed(() =>
         : 0
 );
 const invertScrollAxes = SettingsManager.getSetting<boolean>('editor.timeline.useTrackpad');
+const zoomFactor = SettingsManager.getSetting<number>('editor.timeline.zoomFactor');
 
 function setPbPos(pb?: number) {
     if (pb !== undefined && timeline?.value) {
diff --git a/packages/safelight/src/components/Menu/Settings/Settings.vue b/packages/safelight/src/components/Menu/Settings/Settings.vue
index 8d9bbe62..6d7c19fa 100644
--- a/packages/safelight/src/components/Menu/Settings/Settings.vue
+++ b/packages/safelight/src/components/Menu/Settings/Settings.vue
@@ -9,11 +9,11 @@
                 selection-mode="single"
                 @node-select="onNodeSelect"
             >
-            <template #nodeicon="{node}">
-                <template v-if="node.data?.icon">
-                    <component :is="node.data.icon" class="mr-2"/>
+                <template #nodeicon="{ node }">
+                    <template v-if="node.data?.icon">
+                        <component :is="node.data.icon" class="mr-2" />
+                    </template>
                 </template>
-            </template>
             </Tree>
         </div>
         <div
@@ -43,14 +43,14 @@ const dialogRef = inject<Ref<DynamicDialogInstance>>('dialogRef');
 
 onMounted(() => {
     if (dialogRef?.value?.data && dialogRef.value.data.namespace) {
-        selectedPath.value = dialogRef.value.data.namespace
-        const namespaces = selectedPath.value.split('.')
-        expandedKeys.value = {}
+        selectedPath.value = dialogRef.value.data.namespace;
+        const namespaces = selectedPath.value.split('.');
+        expandedKeys.value = {};
         namespaces.forEach((ns) => {
-            expandedKeys.value = {...expandedKeys.value, [ns]: true}
-        })
+            expandedKeys.value = { ...expandedKeys.value, [ns]: true };
+        });
     }
-})
+});
 
 const tree = computed(() => {
     return (Array.from(SettingsManager.settingsDefinition.values()) as SettingsNamespace[]).map(
@@ -84,16 +84,27 @@ function mapSettingsNs(ns: SettingsNamespace): TreeNode {
 
 <style lang="scss" scoped>
 .namespace :deep(div[role='listitem']) {
-    @apply ml-2;
+    @apply mb-4 pl-4;
 
     h3 {
-        @apply mb-2 mt-0;
+        @apply -ml-2 mb-3 mt-0;
     }
     p {
         @apply m-0;
     }
-    & > div {
-        @apply ml-2;
+    .description {
+        line-height: normal;
+    }
+
+    a.default {
+        @apply invisible cursor-pointer align-middle text-sm font-extralight italic opacity-0 transition-all;
+
+        &.show {
+            @apply visible opacity-100;
+        }
+        > svg {
+            @apply align-middle;
+        }
     }
 }
 </style>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/BooleanSetting.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/BooleanSetting.vue
index 41e43c02..c0f0b48a 100644
--- a/packages/safelight/src/components/Menu/Settings/SettingsProperties/BooleanSetting.vue
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/BooleanSetting.vue
@@ -3,6 +3,7 @@
     <vue-markdown
         v-if="setting?.description"
         :id="setting.name + '-description'"
+        class="description"
         :source="setting.description"
     />
     <Checkbox
@@ -14,11 +15,27 @@
             }
         }"
         :aria-labelledby="setting.name + '-title'"
-        @change="changeValue()"
+        @change="changeValue(!checkboxValue)"
     />
+    <a
+        v-if="defaultValue !== undefined"
+        :class="{ show: defaultValue !== checkboxValue }"
+        class="default"
+        aria-label="Reset value"
+        tabindex="0"
+        role="button"
+        @click="
+            $event.preventDefault();
+            changeValue(defaultValue);
+        "
+    >
+        (Default: {{ defaultValue }})
+        <PhArrowUDownLeft size="15" />
+    </a>
 </template>
 
 <script lang="ts" setup>
+import { PhArrowUDownLeft } from '@phosphor-icons/vue';
 import {
     SettingsManager,
     type SettingsBoolProperty
@@ -28,9 +45,16 @@ import VueMarkdown from 'vue-markdown-render';
 
 const props = defineProps<{ namespace: string[]; setting: SettingsBoolProperty }>();
 
-const checkboxValue = SettingsManager.getSetting([...props.namespace, props.setting.name]);
+const checkboxValue = SettingsManager.getSetting<boolean>([...props.namespace, props.setting.name]);
+const defaultValue = props.setting.default;
 
-function changeValue() {
-    SettingsManager.setSetting([...props.namespace, props.setting.name], !checkboxValue.value);
+function changeValue(value: boolean) {
+    SettingsManager.setSetting([...props.namespace, props.setting.name], value);
 }
 </script>
+
+<style lang="scss" scoped>
+.description {
+    @apply mb-2;
+}
+</style>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/EnumSetting.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/EnumSetting.vue
index 960770d4..45e253a3 100644
--- a/packages/safelight/src/components/Menu/Settings/SettingsProperties/EnumSetting.vue
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/EnumSetting.vue
@@ -1,6 +1,10 @@
 <template>
-    <h3 v-if="setting?.title">{{ setting.title }}</h3>
-    <vue-markdown v-if="setting?.description" :source="setting.description" />
+    <h3 v-if="setting?.title" :id="setting.name + '-title'">{{ setting.title }}</h3>
+    <vue-markdown
+        v-if="setting?.description"
+        :id="setting.name + '-description'"
+        :source="setting.description"
+    />
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/NumberSetting.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/NumberSetting.vue
index 8b805fc2..397b623d 100644
--- a/packages/safelight/src/components/Menu/Settings/SettingsProperties/NumberSetting.vue
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/NumberSetting.vue
@@ -1,11 +1,88 @@
 <template>
-    <h3 v-if="setting?.title">{{ setting.title }}</h3>
-    <vue-markdown v-if="setting?.description" :source="setting.description" />
+    <h3 v-if="setting?.title" :id="setting.name + '-title'">{{ setting.title }}</h3>
+    <vue-markdown
+        v-if="setting?.description"
+        :id="setting.name + '-description'"
+        class="description"
+        :source="setting.description"
+    />
+    <a
+        v-if="defaultValue !== undefined"
+        :class="{ show: defaultValue !== numberValue }"
+        class="default"
+        aria-label="Reset value"
+        tabindex="0"
+        role="button"
+        @click="
+            $event.preventDefault();
+            changeValue(defaultValue);
+        "
+    >
+        (Default: {{ defaultValue }})
+        <PhArrowUDownLeft size="15" />
+    </a>
+    <div class="number-slider-combo">
+        <InputNumber
+            :model-value="numberValue"
+            :min="setting.min"
+            :max="setting.max"
+            :max-fraction-digits="setting.decimals == false ? 0 : setting.decimals ?? 20"
+            show-buttons
+            class="w-32"
+            input-class="w-32"
+            :aria-labelledby="setting.name + '-title'"
+            @update:model-value="changeValue"
+        />
+        <Slider
+            v-if="useRange"
+            :model-value="numberValue"
+            :aria-labelledby="setting.name + '-title'"
+            :min="setting.min"
+            :max="setting.max"
+            @update:model-value="changeValue($event as number)"
+        />
+    </div>
 </template>
 
 <script lang="ts" setup>
-import type { SettingsNumberProperty } from '@safelight/shared/Settings/SettingsManager';
+import { PhArrowUDownLeft } from '@phosphor-icons/vue';
+import {
+    SettingsManager,
+    type SettingsNumberProperty
+} from '@safelight/shared/Settings/SettingsManager';
+import InputNumber from 'primevue/inputnumber';
+import Slider from 'primevue/slider';
+import { computed } from 'vue';
 import VueMarkdown from 'vue-markdown-render';
 
-defineProps<{ namespace: string[]; setting: SettingsNumberProperty }>();
+const props = defineProps<{ namespace: string[]; setting: SettingsNumberProperty }>();
+
+const numberValue = SettingsManager.getSetting([...props.namespace, props.setting.name]);
+const defaultValue = props.setting.default;
+
+function changeValue(value: number) {
+    if (value == null) {
+        return;
+    }
+    SettingsManager.setSetting([...props.namespace, props.setting.name], value);
+}
+
+const useRange = computed(
+    () => props.setting.range && props.setting.min != null && props.setting.max != null
+);
 </script>
+
+<style lang="scss" scoped>
+.number-slider-combo {
+    display: flex;
+    width: calc(100% - 2em);
+    align-items: center;
+
+    gap: 1em;
+
+    > .p-slider {
+        @apply mr-0 max-w-96;
+        flex-grow: 1;
+    }
+}
+</style>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/SettingsGroup.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/SettingsGroup.vue
index 6d156520..b26921e5 100644
--- a/packages/safelight/src/components/Menu/Settings/SettingsProperties/SettingsGroup.vue
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/SettingsGroup.vue
@@ -5,7 +5,7 @@
     </template>
     <vue-markdown v-if="description" :source="description" :html="false" />
     <template v-for="(setting, i) in settings ?? []" :key="i">
-        <div role="listitem">
+        <div role="listitem" :aria-label="setting.title">
             <ArraySetting v-if="setting.type === 'array'" :namespace :setting />
             <BooleanSetting v-else-if="setting.type === 'boolean'" :namespace :setting />
             <DictionarySetting v-else-if="setting.type === 'dictionary'" :namespace :setting />
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/StringSetting.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/StringSetting.vue
index 6194b27f..48fd5499 100644
--- a/packages/safelight/src/components/Menu/Settings/SettingsProperties/StringSetting.vue
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/StringSetting.vue
@@ -1,11 +1,102 @@
 <template>
-    <h3 v-if="setting?.title">{{ setting.title }}</h3>
-    <vue-markdown v-if="setting?.description" :source="setting.description" />
+    <h3 v-if="setting?.title" :id="setting.name + '-title'">{{ setting.title }}</h3>
+    <vue-markdown
+        v-if="setting?.description"
+        :id="setting.name + '-description'"
+        class="description"
+        :source="setting.description"
+    />
+    <a
+        v-if="defaultValue !== undefined"
+        :class="{ show: defaultValue !== stringValue }"
+        class="default"
+        aria-label="Reset value"
+        tabindex="0"
+        role="button"
+        @click="
+            $event.preventDefault();
+            changeValue(defaultValue);
+        "
+    >
+        (Default: {{ defaultValue }})
+        <PhArrowUDownLeft size="15" />
+    </a>
+    <InputText
+        class="input"
+        :model-value="stringValue"
+        :invalid="invalid"
+        :pt="{
+            root: {
+                'aria-describedby': setting.name + '-description'
+            }
+        }"
+        :aria-labelledby="setting.name + '-title'"
+        @update:model-value="changeValue($event)"
+    />
 </template>
 
 <script lang="ts" setup>
-import type { SettingsStringProperty } from '@safelight/shared/Settings/SettingsManager';
+import { PhArrowUDownLeft } from '@phosphor-icons/vue';
+import {
+    SettingsManager,
+    type SettingsStringProperty
+} from '@safelight/shared/Settings/SettingsManager';
+import { watchImmediate } from '@vueuse/core';
+import InputText from 'primevue/inputtext';
+import { ref } from 'vue';
 import VueMarkdown from 'vue-markdown-render';
 
-defineProps<{ namespace: string[]; setting: SettingsStringProperty }>();
+const props = defineProps<{ namespace: string[]; setting: SettingsStringProperty }>();
+
+const stringValue = ref('');
+const storedStringValue = SettingsManager.getSetting<string>([
+    ...props.namespace,
+    props.setting.name
+]);
+const defaultValue = props.setting.default;
+
+const invalid = ref(false);
+
+function changeValue(value?: string) {
+    if (value == undefined) {
+        return;
+    }
+    let matchesRegex = true;
+    let minLength = true;
+    let maxLength = true;
+
+    if (props.setting.pattern) {
+        const pattern = new RegExp(props.setting.pattern);
+        matchesRegex = pattern.test(value);
+    }
+    if (props.setting.minLength != undefined) {
+        minLength = value.length < props.setting.minLength;
+    }
+    if (props.setting.maxLength != undefined) {
+        maxLength = value.length < props.setting.maxLength;
+    }
+
+    invalid.value = !(matchesRegex && minLength && maxLength);
+    stringValue.value = value;
+    if (!invalid.value) {
+        if (props.setting.autoTrim) {
+            SettingsManager.setSetting([...props.namespace, props.setting.name], value.trim());
+        } else {
+            SettingsManager.setSetting([...props.namespace, props.setting.name], value);
+        }
+    }
+}
+
+watchImmediate(storedStringValue, (val) => {
+    stringValue.value = val;
+});
 </script>
+
+<style lang="scss" scoped>
+.input {
+    display: block;
+    &.p-invalid {
+        outline-color: #fca5a5 !important;
+    }
+}
+</style>
diff --git a/packages/shared/src/Settings/SettingsManager.ts b/packages/shared/src/Settings/SettingsManager.ts
index 2f76ce88..45579b72 100644
--- a/packages/shared/src/Settings/SettingsManager.ts
+++ b/packages/shared/src/Settings/SettingsManager.ts
@@ -1,4 +1,5 @@
 import { getByPath, setByPath } from 'dot-path-value';
+import { useDialog } from 'primevue/usedialog';
 import {
     computed,
     defineAsyncComponent,
@@ -9,7 +10,6 @@ import {
     type ComputedRef,
     type Raw
 } from 'vue';
-import { useDialog } from 'primevue/usedialog';
 
 export class SettingsManager {
     private static defaultNamespaces: SettingsNamespaceDefinition[] = [
@@ -21,21 +21,27 @@ export class SettingsManager {
         {
             name: 'editor',
             title: 'Editor',
-            icon: defineAsyncComponent(async () => (await import('@phosphor-icons/vue')).PhSidebar),
+            icon: markRaw(
+                defineAsyncComponent(async () => (await import('@phosphor-icons/vue')).PhSidebar)
+            ),
             childNamespaces: [
                 {
                     name: 'playback',
                     title: 'Playback',
-                    icon: defineAsyncComponent(
-                        async () => (await import('@phosphor-icons/vue')).PhPlayPause
+                    icon: markRaw(
+                        defineAsyncComponent(
+                            async () => (await import('@phosphor-icons/vue')).PhPlayPause
+                        )
                     ),
                     settings: []
                 },
                 {
                     name: 'timeline',
                     title: 'Timeline',
-                    icon: defineAsyncComponent(
-                        async () => (await import('@phosphor-icons/vue')).PhFilmStrip
+                    icon: markRaw(
+                        defineAsyncComponent(
+                            async () => (await import('@phosphor-icons/vue')).PhFilmStrip
+                        )
                     ),
                     settings: [
                         {
@@ -44,20 +50,43 @@ export class SettingsManager {
                             title: 'Trackpad mode',
                             description: 'Will inverse the axes on which the timeline will scroll.',
                             default: false
+                        },
+                        {
+                            type: 'number',
+                            name: 'zoomFactor',
+                            title: 'Zoom factor',
+                            description: 'The amount to zoom in and out by when scrolling.',
+                            default: 2,
+                            decimals: false,
+                            range: true,
+                            min: 1,
+                            max: 100
                         }
                     ]
                 },
                 {
                     name: 'library',
                     title: 'Library',
-                    icon: defineAsyncComponent(
-                        async () => (await import('@phosphor-icons/vue')).PhFolders
+                    icon: markRaw(
+                        defineAsyncComponent(
+                            async () => (await import('@phosphor-icons/vue')).PhFolders
+                        )
                     ),
                     settings: [
                         {
                             type: 'group',
                             title: 'Media',
-                            settings: []
+                            settings: [
+                                {
+                                    type: 'string',
+                                    title: 'Test',
+                                    description: 'Test',
+                                    name: 'test',
+                                    pattern: /icle+/,
+                                    maxLength: 10,
+                                    default: 'icle'
+                                }
+                            ]
                         },
                         {
                             type: 'group',
@@ -71,8 +100,8 @@ export class SettingsManager {
         {
             name: 'keyboard',
             title: 'Keyboard',
-            icon: defineAsyncComponent(
-                async () => (await import('@phosphor-icons/vue')).PhKeyboard
+            icon: markRaw(
+                defineAsyncComponent(async () => (await import('@phosphor-icons/vue')).PhKeyboard)
             ),
             childNamespaces: [
                 {
@@ -268,14 +297,16 @@ export class SettingsNamespace {
     /**
      * Set the default values of each setting in the namespace.
      */
-    public setDefaultValues() {
-        this.settings.forEach((setting) => {
+    public setDefaultValues(settings = this.settings) {
+        settings.forEach((setting) => {
             if (setting.type !== 'group' && setting.default !== undefined) {
                 setByPath(
                     SettingsManager.defaultSettings,
                     [...this.pathArray, setting.name].join('.'),
                     setting.default
                 );
+            } else if (setting.type == 'group') {
+                this.setDefaultValues(setting.settings);
             }
         });
     }
@@ -327,6 +358,18 @@ export interface SettingsNumberProperty extends DefaultSettingsProperty {
     default?: number;
     min?: number;
     max?: number;
+    /**
+     * Use a slider along side a number input.
+     *
+     * @requires {@link SettingsNumberProperty.min|min}
+     * @requires {@link SettingsNumberProperty.max|max}
+     */
+    range?: boolean;
+    /**
+     * Max number of decimal digits
+     *
+     * @default Infinity
+     */
     decimals?: number | false;
 }
 
diff --git a/packages/timeline/src/Timeline.vue b/packages/timeline/src/Timeline.vue
index 5621d436..def58154 100644
--- a/packages/timeline/src/Timeline.vue
+++ b/packages/timeline/src/Timeline.vue
@@ -36,7 +36,7 @@ import { useElementBounding, useEventListener, watchImmediate } from '@vueuse/co
 import { useWheel } from '@vueuse/gesture';
 import Splitter from 'primevue/splitter';
 import SplitterPanel from 'primevue/splitterpanel';
-import { computed, provide, ref } from 'vue';
+import { computed, provide, ref, watchEffect } from 'vue';
 import { TimelineViewport, type TimelineItem, type TimelineProps } from './index';
 import LayerControl from './LayerControl.vue';
 import PlaybackHead from './PlaybackHead.vue';
@@ -82,7 +82,7 @@ viewport.pbPos = playbackPosition;
 
 provide('viewport', viewport);
 
-watchImmediate(props, () => {
+watchEffect(() => {
     viewport.alignment.value = props.alignment;
     viewport.zoomFactor.value = props.zoomFactor;
     viewport.fps.value = props.fps ?? Infinity;

From e243c4c7d8c9aa73f866e4d8d165fbe5ef07effb Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Sun, 30 Jun 2024 21:59:44 +0200
Subject: [PATCH 12/18] feat(Settings): :sparkles: Added download button

---
 .../src/components/Menu/Settings/Settings.vue  | 18 +++++++++++++++++-
 .../shared/src/Settings/SettingsManager.ts     | 14 ++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/safelight/src/components/Menu/Settings/Settings.vue b/packages/safelight/src/components/Menu/Settings/Settings.vue
index 6d7c19fa..ae8976ca 100644
--- a/packages/safelight/src/components/Menu/Settings/Settings.vue
+++ b/packages/safelight/src/components/Menu/Settings/Settings.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="flex h-full">
-        <div class="overflow-y-auto">
+        <div class="tree">
             <Tree
                 v-model:expandedKeys="expandedKeys"
                 class="min-w-64"
@@ -15,6 +15,10 @@
                     </template>
                 </template>
             </Tree>
+            <Button severity="secondary" @click="SettingsManager.downloadSettings()">
+                <PhDownload />
+                Download JSON
+            </Button>
         </div>
         <div
             class="mr-4 border-solid"
@@ -29,7 +33,9 @@
 </template>
 
 <script setup lang="ts">
+import { PhDownload } from '@phosphor-icons/vue';
 import { SettingsManager, SettingsNamespace } from '@safelight/shared/Settings/SettingsManager';
+import Button from 'primevue/button';
 import type { DynamicDialogInstance } from 'primevue/dynamicdialogoptions';
 import Tree from 'primevue/tree';
 import type { TreeNode } from 'primevue/treenode';
@@ -83,6 +89,16 @@ function mapSettingsNs(ns: SettingsNamespace): TreeNode {
 </script>
 
 <style lang="scss" scoped>
+.tree {
+    @apply mr-4 flex flex-col;
+    > .p-tree {
+        @apply flex-1 overflow-y-auto;
+    }
+    > .p-button {
+        @apply flex w-full justify-center gap-2;
+    }
+}
+
 .namespace :deep(div[role='listitem']) {
     @apply mb-4 pl-4;
 
diff --git a/packages/shared/src/Settings/SettingsManager.ts b/packages/shared/src/Settings/SettingsManager.ts
index 45579b72..c8de09a4 100644
--- a/packages/shared/src/Settings/SettingsManager.ts
+++ b/packages/shared/src/Settings/SettingsManager.ts
@@ -214,6 +214,20 @@ export class SettingsManager {
         });
     }
 
+    public static downloadSettings() {
+        const a = document.createElement('a');
+        document.body.appendChild(a);
+        a.style.display = 'none';
+        const json = JSON.stringify(toRaw(this.currentSettings));
+        const blob = new Blob([json], { type: 'application/json' });
+        const url = window.URL.createObjectURL(blob);
+        a.href = url;
+        a.download = 'sl-settings.json';
+        a.click();
+        window.URL.revokeObjectURL(url);
+        a.remove();
+    }
+
     private static saveSettingsDebounced() {
         clearInterval(this.saveTimeout);
         this.saveTimeout = setTimeout(() => this.saveSettings(), 250);

From 90a41e52553f2ded184468c9de2a01a23227c0e9 Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Sun, 30 Jun 2024 22:25:36 +0200
Subject: [PATCH 13/18] feat(Settings): :sparkles: Partially implemented enum
 setting, need to fix default value

---
 packages/safelight/package.json               |  1 +
 .../components/Editor/Timeline/Timeline.vue   |  2 +
 .../SettingsProperties/EnumSetting.vue        | 53 ++++++++++++++++++-
 .../SettingsProperties/StringSetting.vue      | 18 +++++++
 .../shared/src/Settings/SettingsManager.ts    | 12 +++++
 pnpm-lock.yaml                                | 32 ++++-------
 6 files changed, 94 insertions(+), 24 deletions(-)

diff --git a/packages/safelight/package.json b/packages/safelight/package.json
index f26312a6..3f9da4dc 100644
--- a/packages/safelight/package.json
+++ b/packages/safelight/package.json
@@ -28,6 +28,7 @@
         "@vueuse/math": "^10.11.0",
         "@vueuse/rxjs": "^10.11.0",
         "dexie": "^4.0.7",
+        "dot-path-value": "^0.0.10",
         "fuzzysearch": "^1.0.3",
         "hash-wasm": "^4.11.0",
         "luxon": "^3.4.4",
diff --git a/packages/safelight/src/components/Editor/Timeline/Timeline.vue b/packages/safelight/src/components/Editor/Timeline/Timeline.vue
index 2287f4b5..9ebbc5b7 100644
--- a/packages/safelight/src/components/Editor/Timeline/Timeline.vue
+++ b/packages/safelight/src/components/Editor/Timeline/Timeline.vue
@@ -5,6 +5,7 @@
         :fps="timeline?.framerate.value"
         :invert-scroll-axes
         :zoom-factor
+        :alignment
         class="h-full"
         @update:playback-position="setPbPos"
     />
@@ -28,6 +29,7 @@ const pbPos = computed(() =>
 );
 const invertScrollAxes = SettingsManager.getSetting<boolean>('editor.timeline.useTrackpad');
 const zoomFactor = SettingsManager.getSetting<number>('editor.timeline.zoomFactor');
+const alignment = SettingsManager.getSetting<'top' | 'bottom'>('editor.timeline.align');
 
 function setPbPos(pb?: number) {
     if (pb !== undefined && timeline?.value) {
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/EnumSetting.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/EnumSetting.vue
index 45e253a3..ee7012ff 100644
--- a/packages/safelight/src/components/Menu/Settings/SettingsProperties/EnumSetting.vue
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/EnumSetting.vue
@@ -3,13 +3,62 @@
     <vue-markdown
         v-if="setting?.description"
         :id="setting.name + '-description'"
+        class="description"
         :source="setting.description"
     />
+    <a
+        v-if="defaultValue !== undefined"
+        :class="{ show: defaultValue !== enumValue }"
+        class="default"
+        aria-label="Reset value"
+        tabindex="0"
+        role="button"
+        @click="
+            $event.preventDefault();
+            changeValue(defaultValue);
+        "
+    >
+        (Default: {{ defaultValue }})
+        <PhArrowUDownLeft size="15" />
+    </a>
+    <Dropdown
+        :model-value="enumValue"
+        :options="setting.options"
+        :option-label="setting.labelKey"
+        class="w-32"
+        :aria-labelledby="setting.name + '-title'"
+        @update:model-value="changeValue"
+    />
 </template>
 
 <script lang="ts" setup>
-import type { SettingsEnumProperty } from '@safelight/shared/Settings/SettingsManager';
+import { PhArrowUDownLeft } from '@phosphor-icons/vue';
+import {
+    SettingsManager,
+    type SettingsEnumProperty
+} from '@safelight/shared/Settings/SettingsManager';
+import { getByPath } from 'dot-path-value';
+import Dropdown from 'primevue/dropdown';
+import { computed } from 'vue';
 import VueMarkdown from 'vue-markdown-render';
 
-defineProps<{ namespace: string[]; setting: SettingsEnumProperty }>();
+const props = defineProps<{ namespace: string[]; setting: SettingsEnumProperty }>();
+
+const enumValue = computed(() => {
+    const value = SettingsManager.getSetting<'top' | 'bottom'>([
+        ...props.namespace,
+        props.setting.name
+    ]);
+    return props.setting.options.find(
+        (o) => (props.setting.valueKey ? getByPath(o, props.setting.valueKey) : o) == value.value
+    );
+});
+const defaultValue = props.setting.default;
+
+function changeValue(value: any) {
+    SettingsManager.setSetting(
+        [...props.namespace, props.setting.name],
+        props.setting.valueKey ? getByPath(value, props.setting.valueKey) : value
+    );
+}
 </script>
diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/StringSetting.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/StringSetting.vue
index 48fd5499..bf1ac075 100644
--- a/packages/safelight/src/components/Menu/Settings/SettingsProperties/StringSetting.vue
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/StringSetting.vue
@@ -22,6 +22,7 @@
         <PhArrowUDownLeft size="15" />
     </a>
     <InputText
+        v-if="!setting.multiline"
         class="input"
         :model-value="stringValue"
         :invalid="invalid"
@@ -33,6 +34,22 @@
         :aria-labelledby="setting.name + '-title'"
         @update:model-value="changeValue($event)"
     />
+    <TextArea
+        v-else
+        class="input max-w-full"
+        :model-value="stringValue"
+        :invalid="invalid"
+        :pt="{
+            root: {
+                'aria-describedby': setting.name + '-description'
+            }
+        }"
+        :aria-labelledby="setting.name + '-title'"
+        rows="6"
+        cols="40"
+        auto-resize
+        @update:model-value="changeValue($event)"
+    />
 </template>
 
 <script lang="ts" setup>
@@ -43,6 +60,7 @@ import {
 } from '@safelight/shared/Settings/SettingsManager';
 import { watchImmediate } from '@vueuse/core';
 import InputText from 'primevue/inputtext';
+import TextArea from 'primevue/textarea';
 import { ref } from 'vue';
 import VueMarkdown from 'vue-markdown-render';
 
diff --git a/packages/shared/src/Settings/SettingsManager.ts b/packages/shared/src/Settings/SettingsManager.ts
index c8de09a4..20c4f2f1 100644
--- a/packages/shared/src/Settings/SettingsManager.ts
+++ b/packages/shared/src/Settings/SettingsManager.ts
@@ -61,6 +61,18 @@ export class SettingsManager {
                             range: true,
                             min: 1,
                             max: 100
+                        },
+                        {
+                            type: 'enum',
+                            name: 'align',
+                            title: 'Align timeline',
+                            default: 'bottom',
+                            options: [
+                                { value: 'top', label: 'Top' },
+                                { value: 'bottom', label: 'Bottom' }
+                            ],
+                            labelKey: 'label',
+                            valueKey: 'value'
                         }
                     ]
                 },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c1509faf..22e8003f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -168,6 +168,9 @@ importers:
       dexie:
         specifier: ^4.0.7
         version: 4.0.7
+      dot-path-value:
+        specifier: ^0.0.10
+        version: 0.0.10
       fuzzysearch:
         specifier: ^1.0.3
         version: 1.0.3
@@ -1154,7 +1157,7 @@ packages:
     peerDependencies:
       vue: '>=3.2.39'
     dependencies:
-      vue: 3.4.29(typescript@5.5.2)
+      vue: 3.4.29(typescript@5.4.5)
     dev: false
 
   /@pkgjs/parseargs@0.11.0:
@@ -1412,7 +1415,6 @@ packages:
     resolution: {integrity: sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q==}
     dependencies:
       undici-types: 5.26.5
-    dev: true
 
   /@types/node@20.14.8:
     resolution: {integrity: sha512-DO+2/jZinXfROG7j7WKFn/3C6nFwxy2lLpgLjEXJz+0XKphZlTLJ14mo8Vfg8X5BWN6XjyESXq+LcYdT7tR3bA==}
@@ -1705,8 +1707,8 @@ packages:
       vite: ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.3.2
-      vue: 3.4.29(typescript@5.5.2)
+      vite: 5.3.2(@types/node@20.14.2)(lightningcss@1.25.1)(sass@1.77.4)
+      vue: 3.4.29(typescript@5.4.5)
     dev: true
 
   /@vitejs/plugin-vue@5.0.5(vite@5.3.2)(vue@3.4.30):
@@ -2044,7 +2046,7 @@ packages:
     dependencies:
       '@vue/compiler-ssr': 3.4.29
       '@vue/shared': 3.4.29
-      vue: 3.4.29(typescript@5.5.2)
+      vue: 3.4.29(typescript@5.4.5)
 
   /@vue/server-renderer@3.4.30(vue@3.4.30):
     resolution: {integrity: sha512-TBD3eqR1DeDc0cMrXS/vEs/PWzq1uXxnvjoqQuDGFIEHFIwuDTX/KWAQKIBjyMWLFHEeTDGYVsYci85z2UbTDg==}
@@ -2718,7 +2720,6 @@ packages:
     resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
     engines: {node: '>=0.10'}
     hasBin: true
-    dev: true
 
   /dexie@4.0.7:
     resolution: {integrity: sha512-M+Lo6rk4pekIfrc2T0o2tvVJwL6EAAM/B78DNfb8aaxFVoI1f8/rz5KTxuAnApkwqTSuxx7T5t0RKH7qprapGg==}
@@ -3401,7 +3402,6 @@ packages:
 
   /immutable@4.3.6:
     resolution: {integrity: sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==}
-    dev: true
 
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
@@ -3643,7 +3643,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /lightningcss-darwin-x64@1.25.1:
@@ -3652,7 +3651,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /lightningcss-freebsd-x64@1.25.1:
@@ -3661,7 +3659,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: true
     optional: true
 
   /lightningcss-linux-arm-gnueabihf@1.25.1:
@@ -3670,7 +3667,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /lightningcss-linux-arm64-gnu@1.25.1:
@@ -3679,7 +3675,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /lightningcss-linux-arm64-musl@1.25.1:
@@ -3688,7 +3683,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /lightningcss-linux-x64-gnu@1.25.1:
@@ -3697,7 +3691,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /lightningcss-linux-x64-musl@1.25.1:
@@ -3706,7 +3699,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: true
     optional: true
 
   /lightningcss-win32-x64-msvc@1.25.1:
@@ -3715,7 +3707,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: true
     optional: true
 
   /lightningcss@1.25.1:
@@ -3733,7 +3724,6 @@ packages:
       lightningcss-linux-x64-gnu: 1.25.1
       lightningcss-linux-x64-musl: 1.25.1
       lightningcss-win32-x64-msvc: 1.25.1
-    dev: true
 
   /lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
@@ -4380,7 +4370,7 @@ packages:
     peerDependencies:
       vue: ^3.0.0
     dependencies:
-      vue: 3.4.29(typescript@5.5.2)
+      vue: 3.4.29(typescript@5.4.5)
     dev: false
 
   /proto-list@1.2.4:
@@ -4542,7 +4532,6 @@ packages:
       chokidar: 3.6.0
       immutable: 4.3.6
       source-map-js: 1.2.0
-    dev: true
 
   /scule@1.3.0:
     resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
@@ -5286,7 +5275,7 @@ packages:
       axios: 1.7.2(debug@4.3.5)
       debug: 4.3.5
       picocolors: 1.0.1
-      vite: 5.3.2(@types/node@20.14.8)
+      vite: 5.3.2(@types/node@20.14.2)(lightningcss@1.25.1)(sass@1.77.4)
     transitivePeerDependencies:
       - supports-color
 
@@ -5397,7 +5386,6 @@ packages:
       sass: 1.77.4
     optionalDependencies:
       fsevents: 2.3.3
-    dev: true
 
   /vite@5.3.2(@types/node@20.14.8):
     resolution: {integrity: sha512-6lA7OBHBlXUxiJxbO5aAY2fsHHzDr1q7DvXYnyZycRs2Dz+dXBWuhpWHvmljTRTpQC2uvGmUFFkSHF2vGo90MA==}
@@ -5644,7 +5632,7 @@ packages:
       '@vue/composition-api':
         optional: true
     dependencies:
-      vue: 3.4.29(typescript@5.5.2)
+      vue: 3.4.29(typescript@5.4.5)
     dev: false
 
   /vue-demi@0.14.8(vue@3.4.30):

From 16cb4faab7f477374bef7215256b6f925d248a8e Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Sun, 30 Jun 2024 22:30:45 +0200
Subject: [PATCH 14/18] fix(Settings): :bug: Fixed default value and styling
 for enum setting

---
 .../Settings/SettingsProperties/EnumSetting.vue   | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/safelight/src/components/Menu/Settings/SettingsProperties/EnumSetting.vue b/packages/safelight/src/components/Menu/Settings/SettingsProperties/EnumSetting.vue
index ee7012ff..60a49b52 100644
--- a/packages/safelight/src/components/Menu/Settings/SettingsProperties/EnumSetting.vue
+++ b/packages/safelight/src/components/Menu/Settings/SettingsProperties/EnumSetting.vue
@@ -18,14 +18,14 @@
             changeValue(defaultValue);
         "
     >
-        (Default: {{ defaultValue }})
+        (Default: {{ setting.labelKey ? getByPath(defaultValue, setting.labelKey) : defaultValue }})
         <PhArrowUDownLeft size="15" />
     </a>
     <Dropdown
         :model-value="enumValue"
         :options="setting.options"
         :option-label="setting.labelKey"
-        class="w-32"
+        class="w-56"
         :aria-labelledby="setting.name + '-title'"
         @update:model-value="changeValue"
     />
@@ -53,7 +53,10 @@ const enumValue = computed(() => {
         (o) => (props.setting.valueKey ? getByPath(o, props.setting.valueKey) : o) == value.value
     );
 });
-const defaultValue = props.setting.default;
+const defaultValue = props.setting.options.find(
+    (o) =>
+        (props.setting.valueKey ? getByPath(o, props.setting.valueKey) : o) == props.setting.default
+);
 
 function changeValue(value: any) {
     SettingsManager.setSetting(
@@ -62,3 +65,9 @@ function changeValue(value: any) {
     );
 }
 </script>
+
+<style lang="scss" scoped>
+.default {
+    display: block;
+}
+</style>

From ecbc7c7b140b18a768d01d9a0020a4f0e134e087 Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Mon, 1 Jul 2024 22:14:53 +0200
Subject: [PATCH 15/18] ci(Workspace): :construction_worker: Added
 dot-path-value to dependabot minor group

---
 .github/dependabot.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index f645c827..3345a2f8 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -11,6 +11,7 @@ updates:
           - "@endo/static-module-record"
           - "@quantco/pnpm-licenses"
           - "@tsconfig/node20"
+          - "dot-path-value"
           - "fuzzysearch"
           - "luxon"
           - "mediainfo.js"

From aace3dfeae7c2ac4463f01d1cb6ebb267c1c0afe Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Mon, 1 Jul 2024 22:39:34 +0200
Subject: [PATCH 16/18] refactor(Settings): :building_construction: Moved
 defaultNamespaces definition to setup method

This is to facilitate testing and configurability
---
 packages/safelight/src/App.vue                | 124 +++++++++++++++-
 .../shared/src/Settings/SettingsManager.ts    | 138 ++----------------
 2 files changed, 134 insertions(+), 128 deletions(-)

diff --git a/packages/safelight/src/App.vue b/packages/safelight/src/App.vue
index eaa5a5b3..a3685bfa 100644
--- a/packages/safelight/src/App.vue
+++ b/packages/safelight/src/App.vue
@@ -8,7 +8,7 @@
 import { SettingsManager } from '@safelight/shared/Settings/SettingsManager';
 import { useTitle } from '@vueuse/core';
 import DynamicDialog from 'primevue/dynamicdialog';
-import { watchEffect } from 'vue';
+import { defineAsyncComponent, markRaw, watchEffect } from 'vue';
 import { RouterView } from 'vue-router';
 import NotificationManager from './components/General/Notifications/NotificationManager.vue';
 import { router } from './main';
@@ -28,5 +28,125 @@ watchEffect(() => {
     }
 });
 
-SettingsManager.setup();
+SettingsManager.setup([
+    {
+        name: 'general',
+        title: 'General',
+        childNamespaces: []
+    },
+    {
+        name: 'editor',
+        title: 'Editor',
+        icon: markRaw(
+            defineAsyncComponent(async () => (await import('@phosphor-icons/vue')).PhSidebar)
+        ),
+        childNamespaces: [
+            {
+                name: 'playback',
+                title: 'Playback',
+                icon: markRaw(
+                    defineAsyncComponent(
+                        async () => (await import('@phosphor-icons/vue')).PhPlayPause
+                    )
+                ),
+                settings: []
+            },
+            {
+                name: 'timeline',
+                title: 'Timeline',
+                icon: markRaw(
+                    defineAsyncComponent(
+                        async () => (await import('@phosphor-icons/vue')).PhFilmStrip
+                    )
+                ),
+                settings: [
+                    {
+                        type: 'boolean',
+                        name: 'useTrackpad',
+                        title: 'Trackpad mode',
+                        description: 'Will inverse the axes on which the timeline will scroll.',
+                        default: false
+                    },
+                    {
+                        type: 'number',
+                        name: 'zoomFactor',
+                        title: 'Zoom factor',
+                        description: 'The amount to zoom in and out by when scrolling.',
+                        default: 2,
+                        decimals: false,
+                        range: true,
+                        min: 1,
+                        max: 100
+                    },
+                    {
+                        type: 'enum',
+                        name: 'align',
+                        title: 'Align timeline',
+                        default: 'bottom',
+                        options: [
+                            { value: 'top', label: 'Top' },
+                            { value: 'bottom', label: 'Bottom' }
+                        ],
+                        labelKey: 'label',
+                        valueKey: 'value'
+                    }
+                ]
+            },
+            {
+                name: 'library',
+                title: 'Library',
+                icon: markRaw(
+                    defineAsyncComponent(
+                        async () => (await import('@phosphor-icons/vue')).PhFolders
+                    )
+                ),
+                settings: [
+                    {
+                        type: 'group',
+                        title: 'Media',
+                        settings: [
+                            {
+                                type: 'string',
+                                title: 'Test',
+                                description: 'Test',
+                                name: 'test',
+                                pattern: /icle+/,
+                                maxLength: 10,
+                                default: 'icle'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'group',
+                        title: 'Files',
+                        settings: []
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'keyboard',
+        title: 'Keyboard',
+        icon: markRaw(
+            defineAsyncComponent(async () => (await import('@phosphor-icons/vue')).PhKeyboard)
+        ),
+        childNamespaces: [
+            {
+                name: 'hotkeys',
+                title: 'Hotkeys',
+                settings: [
+                    {
+                        type: 'custom',
+                        name: 'keybinds',
+                        title: 'Hotkeys',
+                        component: markRaw(
+                            defineAsyncComponent(() => import('@/views/dev/Packages.vue'))
+                        )
+                    }
+                ]
+            }
+        ]
+    }
+]);
 </script>
diff --git a/packages/shared/src/Settings/SettingsManager.ts b/packages/shared/src/Settings/SettingsManager.ts
index 20c4f2f1..ba1e8458 100644
--- a/packages/shared/src/Settings/SettingsManager.ts
+++ b/packages/shared/src/Settings/SettingsManager.ts
@@ -3,7 +3,6 @@ import { useDialog } from 'primevue/usedialog';
 import {
     computed,
     defineAsyncComponent,
-    markRaw,
     reactive,
     toRaw,
     type Component,
@@ -12,129 +11,7 @@ import {
 } from 'vue';
 
 export class SettingsManager {
-    private static defaultNamespaces: SettingsNamespaceDefinition[] = [
-        {
-            name: 'general',
-            title: 'General',
-            childNamespaces: []
-        },
-        {
-            name: 'editor',
-            title: 'Editor',
-            icon: markRaw(
-                defineAsyncComponent(async () => (await import('@phosphor-icons/vue')).PhSidebar)
-            ),
-            childNamespaces: [
-                {
-                    name: 'playback',
-                    title: 'Playback',
-                    icon: markRaw(
-                        defineAsyncComponent(
-                            async () => (await import('@phosphor-icons/vue')).PhPlayPause
-                        )
-                    ),
-                    settings: []
-                },
-                {
-                    name: 'timeline',
-                    title: 'Timeline',
-                    icon: markRaw(
-                        defineAsyncComponent(
-                            async () => (await import('@phosphor-icons/vue')).PhFilmStrip
-                        )
-                    ),
-                    settings: [
-                        {
-                            type: 'boolean',
-                            name: 'useTrackpad',
-                            title: 'Trackpad mode',
-                            description: 'Will inverse the axes on which the timeline will scroll.',
-                            default: false
-                        },
-                        {
-                            type: 'number',
-                            name: 'zoomFactor',
-                            title: 'Zoom factor',
-                            description: 'The amount to zoom in and out by when scrolling.',
-                            default: 2,
-                            decimals: false,
-                            range: true,
-                            min: 1,
-                            max: 100
-                        },
-                        {
-                            type: 'enum',
-                            name: 'align',
-                            title: 'Align timeline',
-                            default: 'bottom',
-                            options: [
-                                { value: 'top', label: 'Top' },
-                                { value: 'bottom', label: 'Bottom' }
-                            ],
-                            labelKey: 'label',
-                            valueKey: 'value'
-                        }
-                    ]
-                },
-                {
-                    name: 'library',
-                    title: 'Library',
-                    icon: markRaw(
-                        defineAsyncComponent(
-                            async () => (await import('@phosphor-icons/vue')).PhFolders
-                        )
-                    ),
-                    settings: [
-                        {
-                            type: 'group',
-                            title: 'Media',
-                            settings: [
-                                {
-                                    type: 'string',
-                                    title: 'Test',
-                                    description: 'Test',
-                                    name: 'test',
-                                    pattern: /icle+/,
-                                    maxLength: 10,
-                                    default: 'icle'
-                                }
-                            ]
-                        },
-                        {
-                            type: 'group',
-                            title: 'Files',
-                            settings: []
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            name: 'keyboard',
-            title: 'Keyboard',
-            icon: markRaw(
-                defineAsyncComponent(async () => (await import('@phosphor-icons/vue')).PhKeyboard)
-            ),
-            childNamespaces: [
-                {
-                    name: 'hotkeys',
-                    title: 'Hotkeys',
-                    settings: [
-                        {
-                            type: 'custom',
-                            name: 'keybinds',
-                            title: 'Hotkeys',
-                            component: markRaw(
-                                defineAsyncComponent(
-                                    () => import('../../../safelight/src/views/dev/Packages.vue')
-                                )
-                            )
-                        }
-                    ]
-                }
-            ]
-        }
-    ];
+    private static defaultNamespaces: SettingsNamespaceDefinition[] = [];
 
     private static saveTimeout: ReturnType<typeof setTimeout>;
 
@@ -146,7 +23,15 @@ export class SettingsManager {
 
     private static defaultsCreated = false;
 
-    public static setup() {
+    public static setup(defaultNamespaces: SettingsNamespaceDefinition[]) {
+        this.defaultNamespaces = defaultNamespaces;
+
+        Object.assign(this.currentSettings, {});
+        Object.assign(this.defaultSettings, {});
+        this.settingsDefinition.clear();
+        this.defaultsCreated = false;
+        clearTimeout(this.saveTimeout);
+
         this.createDefaultNamespaces(this.defaultNamespaces, []);
         this.createDefaultSettings(Array.from(this.settingsDefinition.values()));
 
@@ -171,7 +56,7 @@ export class SettingsManager {
         return pathArray.reduce((ns, path, curIndex) => {
             if (!ns) return;
 
-            const childNs = ns?.childNamespaces.find(
+            const childNs = ns?.childNamespaces?.find(
                 (ns) => ns.path == pathArray.slice(0, curIndex + 1).join('.')
             );
 
@@ -246,6 +131,7 @@ export class SettingsManager {
     }
 
     public static saveSettings() {
+        clearInterval(this.saveTimeout);
         localStorage.setItem('sl-settings', JSON.stringify(toRaw(this.currentSettings)));
     }
 

From 2df2c57e4cc1a7d9bc27586edea6ff11cb966a60 Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Mon, 1 Jul 2024 22:39:58 +0200
Subject: [PATCH 17/18] test(Settings): :test_tube: Added tests for Settings

---
 .../shared/test/Settings/Settings.spec.ts     | 70 +++++++++++++++++++
 .../test/Settings/SettingsNamespaces.spec.ts  | 40 +++++++++++
 2 files changed, 110 insertions(+)
 create mode 100644 packages/shared/test/Settings/Settings.spec.ts
 create mode 100644 packages/shared/test/Settings/SettingsNamespaces.spec.ts

diff --git a/packages/shared/test/Settings/Settings.spec.ts b/packages/shared/test/Settings/Settings.spec.ts
new file mode 100644
index 00000000..a94a6c24
--- /dev/null
+++ b/packages/shared/test/Settings/Settings.spec.ts
@@ -0,0 +1,70 @@
+import { beforeEach, expect, test } from 'vitest';
+import { SettingsManager } from '../../src/Settings/SettingsManager';
+
+beforeEach(() => {
+    localStorage.clear();
+    SettingsManager.setup([
+        {
+            name: 'test',
+            title: 'Test',
+            settings: [
+                {
+                    type: 'boolean',
+                    name: 'onOff',
+                    title: 'Lightswitch',
+                    default: false
+                }
+            ]
+        }
+    ]);
+});
+
+test('Getting setting', () => {
+    const setting = SettingsManager.getSetting('test.onOff');
+
+    expect(setting).toBeDefined();
+
+    expect(setting.value).toBe(false);
+});
+
+test('Setting setting value', () => {
+    SettingsManager.setSetting('test.onOff', true);
+
+    const setting = SettingsManager.getSetting('test.onOff');
+
+    expect(setting).toBeDefined();
+
+    expect(setting.value).toBe(true);
+});
+
+test('Saving settings to localStorage', () => {
+    SettingsManager.setSetting('test.onOff', true);
+
+    const setting = SettingsManager.getSetting('test.onOff');
+
+    expect(setting).toBeDefined();
+
+    expect(setting.value).toBe(true);
+
+    SettingsManager.saveSettings();
+    // Get value from localstorage
+    const storedVal = JSON.parse(localStorage.getItem('sl-settings'));
+    expect(storedVal).toMatchObject({
+        test: {
+            onOff: true
+        }
+    });
+});
+test('Loading from localStorage', () => {
+    localStorage.setItem(
+        'sl-settings',
+        JSON.stringify({
+            test: {
+                onOff: true
+            }
+        })
+    );
+    SettingsManager.loadSettings();
+    const setting = SettingsManager.getSetting('test.onOff');
+    expect(setting.value).toBe(true);
+});
diff --git a/packages/shared/test/Settings/SettingsNamespaces.spec.ts b/packages/shared/test/Settings/SettingsNamespaces.spec.ts
new file mode 100644
index 00000000..3086eab9
--- /dev/null
+++ b/packages/shared/test/Settings/SettingsNamespaces.spec.ts
@@ -0,0 +1,40 @@
+import { expect, test } from 'vitest';
+import { SettingsManager } from '../../src/Settings/SettingsManager';
+
+test('Assigning namespaces', () => {
+    SettingsManager.setup([
+        {
+            name: 'test',
+            title: 'Test',
+            settings: [
+                {
+                    type: 'boolean',
+                    name: 'onOff',
+                    title: 'Lightswitch',
+                    default: false
+                }
+            ]
+        }
+    ]);
+});
+
+test('Getting namespaces', () => {
+    SettingsManager.setup([
+        {
+            name: 'test',
+            title: 'Test',
+            settings: [
+                {
+                    type: 'boolean',
+                    name: 'onOff',
+                    title: 'Lightswitch',
+                    default: false
+                }
+            ]
+        }
+    ]);
+
+    expect(SettingsManager.getNamespace('test')).toBeDefined();
+    expect(SettingsManager.getNamespace('test').title).toBe('Test');
+    expect(SettingsManager.getNamespace('test').settings).toHaveLength(1);
+});

From edc3aa20ac501aeb1cbca55b45e421708b98f3e1 Mon Sep 17 00:00:00 2001
From: Joery <44531907+Joery-M@users.noreply.github.com>
Date: Mon, 1 Jul 2024 22:46:37 +0200
Subject: [PATCH 18/18] fix(Timeline): :green_heart: Fixed vue-tsc error from
 timeline

---
 packages/timeline/src/TimelineItemComponent.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/timeline/src/TimelineItemComponent.vue b/packages/timeline/src/TimelineItemComponent.vue
index c99b3ec8..ee0b915d 100644
--- a/packages/timeline/src/TimelineItemComponent.vue
+++ b/packages/timeline/src/TimelineItemComponent.vue
@@ -2,7 +2,7 @@
     <div
         class="timelineItem"
         :style="{
-            top: ySmooth + 'px',
+            top: y + 'px',
             left: useMax(x, 0).value + 'px',
             width: width + 'px',
             height: height + 'px'
@@ -54,8 +54,6 @@ const height = computed(
 
 const x = computed(() => viewport.getTimePosition(item.start) - viewport.offsetX.value);
 const y = computed(() => viewport.LayerToYPosition(item.layer, true, true));
-const xSmooth = x;
-const ySmooth = y;
 </script>
 
 <style lang="scss" scoped>