src/features/settings/components/SettingsPage.vue

@@ -0,0 +1,73 @@
+<!--
+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 { useI18n } from 'vue-i18n';
+import { getSectionHeadingLevel } from '../utils/getSectionHeadingLevel.js';
+
+const { t } = useI18n();
+
+const props = defineProps({
+    setting: {
+        required: true
+    },
+    path: {
+        required: true
+    },
+});
+</script>
+
+<template>
+    <div>
+        <div role="heading" :aria-level="getSectionHeadingLevel(props.path)" class="section-heading">
+            {{ t(props.setting.i18n) }}
+        </div>
+        <div
+            v-for="setting in props.setting.content"
+            class="setting"
+            :class="{
+                switch: setting.type === 'bool',
+                input: setting.type === 'number' || setting.type === 'string',
+                selection: setting.type === 'selection'
+            }"
+        >
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.setting {
+    margin-bottom: 1.2em;
+}
+
+.section-heading {
+    --size: 1.2em;
+    font-size: var(--size);
+    margin-bottom: calc(var(--size) - 0.2em);
+}
+
+.section-heading[aria-level="2"] {
+    --size: 1.8em;
+}
+
+.section-heading[aria-level="3"] {
+    --size: 1.6em;
+}
+
+.section-heading[aria-level="4"] {
+    --size: 1.4em;
+}
+</style>

src/features/settings/views/SettingsView.vue

@@ -16,6 +16,7 @@ limitations under the License.
 
 <script setup>
 import LeftSidebarLayout from '@/layouts/LeftSidebarLayout.vue';
+import SettingsPage from '../components/SettingsPage.vue';
 
 import { loadSettingsConfig } from '../utils/settingsParser';
 import { onMounted, ref, watchEffect } from 'vue';
@@ -28,7 +29,7 @@ const router = useRouter();
 
 const settingsLoaded = ref(false)
 const settings = ref([]);
-const activeSectionContent = ref([]);
+const activeSectionContent = ref({});
 const activeSection = ref(null);
 
 watchEffect(() => {
@@ -80,10 +81,13 @@ onMounted(async () => {
                     </li>
                 </ul>
             </template>
-            <div>
+            <div class="settings-main-content">
                 <div v-if="!settingsLoaded">
                     {{ t('loading') }}
                 </div>
+                <div v-else>
+                    <SettingsPage :setting="activeSectionContent" :path="activeSection" />
+                </div>
             </div>
         </LeftSidebarLayout>
     </div>
@@ -127,4 +131,8 @@ onMounted(async () => {
     font-size: 1rem;
     display: block;
 }
+
+.settings-main-content {
+    padding: 0 30%;
+}
 </style>