From f6a0553b99393938da07edc58375165078e9a37f Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Thu, 23 Jul 2026 12:32:31 +0200
Subject: [PATCH] feat(settings): implement settings pages navigation

---
 src/features/settings/components/SettingsPage.vue |  5 ++---
 src/features/settings/views/SettingsView.vue      | 13 ++++++++-----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/features/settings/components/SettingsPage.vue b/src/features/settings/components/SettingsPage.vue
index 9d4ebc6..aeb60a7 100644
--- a/src/features/settings/components/SettingsPage.vue
+++ b/src/features/settings/components/SettingsPage.vue
@@ -20,7 +20,6 @@ import SettingsInput from './SettingsInput.vue';
 import Selection from './Selection.vue';
 
 import { useI18n } from 'vue-i18n';
-import { getSectionHeadingLevel } from '../utils/getSectionHeadingLevel.js';
 
 const { t } = useI18n();
 
@@ -36,9 +35,9 @@ const props = defineProps({
 
 <template>
     <div>
-        <div role="heading" :aria-level="getSectionHeadingLevel(props.path)" class="section-heading">
+        <h2 class="section-heading">
             {{ t(props.setting.i18n) }}
-        </div>
+        </h2>
         <div
             v-for="setting in props.setting.content"
             class="setting"
diff --git a/src/features/settings/views/SettingsView.vue b/src/features/settings/views/SettingsView.vue
index 951503f..7046bdf 100644
--- a/src/features/settings/views/SettingsView.vue
+++ b/src/features/settings/views/SettingsView.vue
@@ -18,6 +18,7 @@ limitations under the License.
 import LeftSidebarLayout from '@/layouts/LeftSidebarLayout.vue';
 import SettingsPage from '../components/SettingsPage.vue';
 
+import { getSettingRecursively } from '../utils/getSetting.js';
 import { loadSettingsConfig } from '../utils/settingsParser';
 import { onMounted, ref, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -37,12 +38,17 @@ watchEffect(() => {
         .split('/')
         .filter(Boolean);
 
-    activeSection.value = segments[1];
+    activeSection.value = segments.slice(1, segments.length).join('.');
 });
 
 const updateSettings = function updateSettings () {
     if (activeSection.value) {
-        activeSectionContent.value = settings.value.filter((section) => section.name === activeSection.value)[0];
+        const setting = getSettingRecursively(activeSection.value, settings.value);
+        if (!setting.content) {
+            router.push('/settings');
+        } else {
+            activeSectionContent.value = setting;
+        };
     } else {
         activeSectionContent.value = { content: [] };
     };
@@ -50,9 +56,6 @@ const updateSettings = function updateSettings () {
 
 onMounted(async () => {
     settings.value = (await loadSettingsConfig()).contents;
-    if (!settings.value.map((section) => section.name).includes(activeSection.value)) {
-        router.push('/settings');
-    };
     watchEffect(() => {
         updateSettings();
     });