feat(settings): add composable for settings values

Added the composable useSettings that provides the function getSetting.
This function returns the set value of the setting, or otherwise the
default value. If there is no default value, it returns undefined.

.env

@@ -0,0 +1,16 @@
+# Copyright 2026 Seekra
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+VITE_ASSETS_BUILD_ID=2026-08-04-76a067e
+VITE_ASSETS_BASE_URL=https://assets.seekra.jcloud-services.ddns.net

src/config/env.js

@@ -0,0 +1,22 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export const getAssetsUrl = function getAssetsUrl () {
+    return new URL(
+        `${import.meta.env.VITE_ASSETS_BUILD_ID}/`,
+        import.meta.env.VITE_ASSETS_BASE_URL
+    ).href;
+};

src/features/settings/composables/useSettings.js

@@ -0,0 +1,43 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { useSettingsStore } from '../stores/settingsStore';
+import { getSettingRecursively } from '../utils/getSetting';
+import { loadSettingsConfig } from '../utils/settingsParser';
+
+/**
+ * Provides access to the stored settings.
+ */
+export const useSettings = function useSettings () {
+    /**
+     * Returns the value of a specific setting.
+     * @param {string[]} key - The settings key.
+     * @return The value of the setting.
+     */
+    const getSetting = async function getSetting (key) {
+        const settingsStore = useSettingsStore();
+
+        const settings = await loadSettingsConfig();
+        return (
+            settingsStore.get(key) ??
+            getSettingRecursively(
+                key, settings.contents ?? []
+            )?.default
+        );
+    };
+
+    return { getSetting };
+};

src/features/settings/utils/__tests__/settingsValidator.test.js

@@ -557,6 +557,30 @@ describe('settingsValidator', () => {
                 { name: 'maybe', i18n: 'selectSomething.options.maybe' }
             ] }],
 
+            [{ name: 'selectMultiple', type: 'selection', i18n: 'selectMultiple.title', default: ['1', '2', '3'], allowMultiple: true, options: [
+                { name: '1', i18n: 'selectMultiple.options.1' },
+                { name: '2', i18n: 'selectMultiple.options.2' },
+                { name: '3', i18n: 'selectMultiple.options.3' }
+            ] }],
+
+            [{ name: 'selectMultiple', type: 'selection', i18n: 'selectMultiple.title', default: ['2', '3'], allowMultiple: true, options: [
+                { name: '1', i18n: 'selectMultiple.options.1' },
+                { name: '2', i18n: 'selectMultiple.options.2' },
+                { name: '3', i18n: 'selectMultiple.options.3' }
+            ] }],
+
+            [{ name: 'selectMultiple', type: 'selection', i18n: 'selectMultiple.title', default: ['2'], allowMultiple: true, options: [
+                { name: '1', i18n: 'selectMultiple.options.1' },
+                { name: '2', i18n: 'selectMultiple.options.2' },
+                { name: '3', i18n: 'selectMultiple.options.3' }
+            ] }],
+
+            [{ name: 'selectMultiple', type: 'selection', i18n: 'selectMultiple.title', default: [], allowMultiple: true, options: [
+                { name: '1', i18n: 'selectMultiple.options.1' },
+                { name: '2', i18n: 'selectMultiple.options.2' },
+                { name: '3', i18n: 'selectMultiple.options.3' }
+            ] }],
+
             [{ name: 'aSection', type: 'section', i18n: 'sections.aSection.title', content: [] }],
             [{ name: 'aSection', type: 'section', i18n: 'sections.aSection.title', content: [
                 { name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: true }
@@ -616,6 +640,34 @@ describe('settingsValidator', () => {
 
             [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', default: 'a', options: true }],
             [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', default: 'a', options: [] }],
+            [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', default: ['a'], options: [
+                { name: 'a', i18n: 'a' },
+                { name: 'b', i18n: 'b' }
+            ] }],
+            [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', default: ['a', 'b'], options: [
+                { name: 'a', i18n: 'a' },
+                { name: 'b', i18n: 'b' }
+            ] }],
+            [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', allowMultiple: true, default: 'a', options: [
+                { name: 'a', i18n: 'a' },
+                { name: 'b', i18n: 'b' }
+            ] }],
+            [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', allowMultiple: true, default: 'a', options: [
+                { name: 'a', i18n: 'a' },
+                { name: 'b', i18n: 'b' }
+            ] }],
+            [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', allowMultiple: true, default: ['c'], options: [
+                { name: 'a', i18n: 'a' },
+                { name: 'b', i18n: 'b' }
+            ] }],
+            [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', allowMultiple: true, default: [1], options: [
+                { name: 'a', i18n: 'a' },
+                { name: 'b', i18n: 'b' }
+            ] }],
+            [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', allowMultiple: true, default: ['a', 1], options: [
+                { name: 'a', i18n: 'a' },
+                { name: 'b', i18n: 'b' }
+            ] }],
             [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', default: 'c', options: [
                 { name: 'a', i18n: 'a' },
                 { name: 'b', i18n: 'b' }

src/features/settings/utils/settingsValidator.js

@@ -73,12 +73,27 @@ export const validateEntry = function validateEntry (entry, path) {
             throw new Error(`[settings] "${path}.default" must be a string`);
         }
         if (entry.type === 'selection') {
-            if (typeof entry.default !== 'string') {
-                throw new Error(`[settings] "${path}.default" must be a string`);
-            };
-            if (!entry.options.map((option) => option.name).includes(entry.default)) {
-                throw new Error(`[settings] option "${path}.default" does not exist`);
-            };
+            if (entry.allowMultiple) {
+                if (!Array.isArray(entry.default)) {
+                    throw new Error(`[settings] "${path}.default" must be an array`);
+                }
+                const allOptions = entry.options.map((option) => option.name);
+                entry.default.forEach((defaultValue, index) => {
+                    if (typeof defaultValue !== 'string') {
+                        throw new Error(`[settings] "${path}.default[${index}]" must be a string`);
+                    }
+                    if (!allOptions.includes(defaultValue)) {
+                        throw new Error(`[settings] option "${path}.default[${index}]" does not exist`);
+                    }
+                });
+            } else {
+                if (typeof entry.default !== 'string') {
+                    throw new Error(`[settings] "${path}.default" must be a string`);
+                };
+                if (!entry.options.map((option) => option.name).includes(entry.default)) {
+                    throw new Error(`[settings] option "${path}.default" does not exist`);
+                };
+            }
         };
     }
 }

src/features/settings/views/SettingsView.vue

@@ -61,6 +61,10 @@ onMounted(async () => {
     });
     settingsLoaded.value = true;
 });
+
+const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSidebarFunction) {
+    if (matchMedia('(max-width: 48rem)').matches) toggleSidebarFunction();
+};
 </script>
 
 <template>
@@ -71,13 +75,14 @@ onMounted(async () => {
             </h1>
         </header>
         <LeftSidebarLayout class="layout">
-            <template #sidebar>
+            <template #sidebar="{ toggleSidebar }">
                 <ul class="sidebar-sections-list">
                     <li v-for="section in settings">
                         <RouterLink
                             :to="`/settings/${section.name}`"
                             class="button button-link link sidebar-section"
                             :class="{ active: activeSection === section.name }"
+                            @click="toggleSidebarIfSmallScreen(toggleSidebar)"
                         >
                             {{ t(section.i18n) }}
                         </RouterLink>

src/layouts/LeftSidebarLayout.vue

@@ -29,7 +29,7 @@ const props = defineProps({
 
 const expanded = ref(props.expanded);
 
-const toggleExpanded = function toggleExpanded () {
+const toggleSidebar = function toggleSidebar () {
     expanded.value = !expanded.value;
 };
 </script>
@@ -37,13 +37,13 @@ const toggleExpanded = function toggleExpanded () {
 <template>
     <div class="layout-container" :class="{ expanded }">
         <div class="sidebar-expand-button-container">
-            <SidebarExpandButton class="sidebar-expand-button" @click="toggleExpanded" />
+            <SidebarExpandButton class="sidebar-expand-button" @click="toggleSidebar" />
         </div>
-        <Sidebar @toggle-expanded="toggleExpanded" :expanded="expanded" class="sidebar">
-            <slot name="sidebar" />
+        <Sidebar @toggle-expanded="toggleSidebar" :expanded="expanded" class="sidebar">
+            <slot name="sidebar" :toggleSidebar="toggleSidebar" />
         </Sidebar>
         <main class="main-content">
-            <slot />
+            <slot :toggleSidebar="toggleSidebar" />
         </main>
     </div>
 </template>

src/main.js

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { getAssetsUrl } from './config/env';
 import { createApp } from 'vue'
 import { createPinia } from 'pinia';
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
@@ -25,10 +26,29 @@ import './styles/common.css'
 import './styles/variables/colors.css'
 import './styles/variables/dimensions.css';
 
+import rawFonts from './styles/fonts.json';
 import './styles/common.css';
 import './styles/variables/colors.css';
 
 (async () => {
+    const fonts = rawFonts.map((font) => new FontFace(
+        font.family ?? '',
+        Array.isArray(font.source)
+            ? font.source.map(
+                (source) => `url('${source.url
+                    ? new URL(source.url, getAssetsUrl()).href
+                    : ''
+                }') format('${source.format ?? ''}')`
+            ).join(',')
+            : '',
+        {
+            weight: font.weight ?? undefined,
+            style: font.style ?? undefined
+        }
+    ));
+    await Promise.all(fonts.map((font) => font.load()));
+    fonts.forEach((font) => document.fonts.add(font));
+
     await loadLanguage(fallbackLocale);
     await loadLanguage(getCurrentLanguage());
     

src/styles/common.css

@@ -19,6 +19,7 @@ body {
     color: var(--dark);
     margin: 0;
     font-size: 16px;
+    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 .link {
@@ -85,4 +86,9 @@ input {
 
 .button:hover {
     background-color: var(--light-hover);
+}
+
+/* Temporary until a custom tap highlight is implemented. */
+* {
+    -webkit-tap-highlight-color: transparent;
 }

src/styles/fonts.json

@@ -0,0 +1,32 @@
+[
+    {
+        "family": "Inter",
+        "weight": "100 900",
+        "style": "normal",
+        "source": [
+            {
+                "url": "fonts/Inter/Inter-Variable.woff2",
+                "format": "woff2"
+            },
+            {
+                "url": "fonts/Inter/Inter-Variable.ttf",
+                "format": "truetype"
+            }
+        ]
+    },
+    {
+        "family": "Inter",
+        "weight": "100 900",
+        "style": "italic",
+        "source": [
+            {
+                "url": "fonts/Inter/Inter-Italic-Variable.woff2",
+                "format": "woff2"
+            },
+            {
+                "url": "fonts/Inter/Inter-Italic-Variable.ttf",
+                "format": "truetype"
+            }
+        ]
+    }
+]