feat(fonts): use Inter

Added the environment variables VITE_ASSETS_BUILD_ID for the ID of the
used build and VITE_ASSETS_BASE_URL for the base URL of the assets.
A script for reading this configuration was also added.

.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/assets/icons/sidebar-expand.svg

@@ -0,0 +1,38 @@
+<!--
+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.
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path
+        stroke="currentColor"
+        stroke-width="2"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="
+            M6 4
+            h12
+            a4 4 0 0 1 4 4
+            v8
+            a4 4 0 0 1 -4 4
+            h-12
+            a4 4 0 0 1 -4 -4
+            v-8
+            a4 4 0 0 1 4 -4
+            m2 0
+            v16
+        "
+    />
+</svg>

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/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/sidebar/components/Sidebar.vue

@@ -14,15 +14,60 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
+<script setup>
+import SidebarExpandButton from './SidebarExpandButton.vue';
+
+const props = defineProps({
+    'expanded': {
+        default: false,
+        required: false,
+        type: Boolean
+    }
+});
+const emit = defineEmits(['toggleExpanded']);
+
+const toggleSidebar = function toggleSidebar () {
+    emit('toggleExpanded');
+};
+</script>
+
 <template>
-    <nav class="sidebar">
-        <slot />
+    <nav class="sidebar" :class="{ expanded }">
+        <div class="sidebar-controls">
+            <SidebarExpandButton @click="toggleSidebar" class="sidebar-expand-button" />
+        </div>
+        <div class="sidebar-content" v-if="props.expanded">
+            <slot />
+        </div>
     </nav>
 </template>
 
 <style scoped>
 .sidebar {
     border-right: 1px solid var(--border);
+}
+
+.sidebar-controls {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    padding: 1em 20px;
+    padding-bottom: 0;
+    margin-bottom: 8px;
+}
+
+.sidebar:not(.expanded) .sidebar-controls {
+    padding: 1em;
+}
+
+@media (max-width: 48rem) {
+    .sidebar:not(.expanded) .sidebar-expand-button {
+        display: none;
+    }
+}
+
+.sidebar-content {
     padding: 20px;
+    padding-top: 0;
 }
 </style>

src/features/sidebar/components/SidebarExpandButton.vue

@@ -0,0 +1,41 @@
+<!--
+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.
+-->
+
+<script setup>
+import Icon from '@/features/icons/components/Icon.vue';
+
+const emit = defineEmits(['click']);
+
+const click = function click (event) {
+    emit('click', event);
+};
+</script>
+
+<template>
+    <button class="button sidebar-expand-button">
+        <Icon name="sidebar-expand" @click="click" />
+    </button>
+</template>
+
+<style scoped>
+.sidebar-expand-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 4px;
+    border-radius: 10px;
+}
+</style>

src/layouts/LeftSidebarLayout.vue

@@ -16,11 +16,30 @@ limitations under the License.
 
 <script setup>
 import Sidebar from '@/features/sidebar/components/Sidebar.vue';
+import SidebarExpandButton from '@/features/sidebar/components/SidebarExpandButton.vue';
+import { ref } from 'vue';
+
+const props = defineProps({
+    'expanded': {
+        default: false,
+        required: false,
+        type: Boolean
+    }
+});
+
+const expanded = ref(props.expanded);
+
+const toggleExpanded = function toggleExpanded () {
+    expanded.value = !expanded.value;
+};
 </script>
 
 <template>
-    <div class="layout-container">
-        <Sidebar>
+    <div class="layout-container" :class="{ expanded }">
+        <div class="sidebar-expand-button-container">
+            <SidebarExpandButton class="sidebar-expand-button" @click="toggleExpanded" />
+        </div>
+        <Sidebar @toggle-expanded="toggleExpanded" :expanded="expanded" class="sidebar">
             <slot name="sidebar" />
         </Sidebar>
         <main class="main-content">
@@ -32,11 +51,53 @@ import Sidebar from '@/features/sidebar/components/Sidebar.vue';
 <style scoped>
 .layout-container {
     display: grid;
-    grid-template-columns: min(24%, 280px) 1fr;
+    grid-template-columns: calc(32px + 2em) 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+        "sidebar-expand sidebar-expand"
+        "sidebar main-content";
     border-top: 1px solid var(--border);
 }
 
+.layout-container.expanded {
+    grid-template-columns: min(24%, 280px) 1fr;
+}
+
+.sidebar-expand-button-container {
+    grid-area: sidebar-expand;
+    display: none;
+}
+
+.sidebar {
+    grid-area: sidebar;
+}
+
+@media (max-width: 48rem) {
+    .layout-container {
+        grid-template-columns: 0 1fr;
+    }
+
+    .layout-container.expanded {
+        grid-template-columns: 1fr 0;
+    }
+    
+    .layout-container:not(.expanded) .sidebar-expand-button-container {
+        justify-content: end;
+        display: block;
+        padding: 20px;
+    }
+
+    .layout-container:not(.expanded) .main-content {
+        padding-top: 0;
+    }
+
+    .layout-container.expanded .main-content {
+        display: none;
+    }
+}
+
 .main-content {
+    grid-area: main-content;
     padding: 20px;
 }
 </style>

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 {

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"
+            }
+        ]
+    }
+]