feat(settings): add settings page link

src/features/settings/components/SettingsPage.vue

@@ -18,6 +18,7 @@ limitations under the License.
 import Switch from './Switch.vue';
 import SettingsInput from './SettingsInput.vue';
 import Selection from './Selection.vue';
+import SettingsPageLink from './SettingsPageLink.vue';
 
 import { useI18n } from 'vue-i18n';
 
@@ -58,6 +59,11 @@ const props = defineProps({
                 :setting="setting"
                 :path="`${props.path}.${setting.name}`"
             />
+            <SettingsPageLink
+                v-if="setting.type === 'section'"
+                :display-name="t(setting.i18n)"
+                :target="`${props.path}.${setting.name}`"
+            />
         </div>
     </div>
 </template>

src/features/settings/components/SettingsPageLink.vue

@@ -0,0 +1,61 @@
+<!--
+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';
+import { useSettingsPage } from '../composables/useSettingsPage';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const { goToSettingsPage } = useSettingsPage();
+
+const props = defineProps({
+    target: {
+        required: true,
+        type: String
+    },
+    displayName: {
+        required: true,
+        type: String
+    }
+});
+
+const followLink = function followLink () {
+    goToSettingsPage(props.target);
+};
+</script>
+
+<template>
+    <button
+        class="settings-button button settings-page-link"
+        :title="props.displayName"
+        :aria-label="t('settings.pages.link.ariaLabel', { page: props.displayName })"
+        @click="followLink"
+    >
+        {{ props.displayName }}
+        <Icon name="chevron-right" size="1em" />
+    </button>
+</template>
+
+<style scoped src="./SettingsButton.css"></style>
+<style scoped>
+.settings-page-link {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+</style>

src/locales/de.json

@@ -49,6 +49,11 @@
         "switch": {
             "title": "Wert umschalten",
             "ariaLabel": "Schaltet den Wert um"
+        },
+        "pages": {
+            "link": {
+                "ariaLabel": "Geht zur Einstellungsseite {page}"
+            }
         }
     }
 }

src/locales/en.json

@@ -49,6 +49,11 @@
         "switch": {
             "title": "Toggle value",
             "ariaLabel": "Toggles the value"
+        },
+        "pages": {
+            "link": {
+                "ariaLabel": "Goes to settings page {page}"
+            }
         }
     }
 }