refactor: ♻️ Simplify settings page rendering code

components/settings/page.vue

@@ -0,0 +1,18 @@
+<template>
+    <Renderer :id="id" v-for="id of settingsIds" :key="id" />
+</template>
+
+<script lang="ts" setup>
+import {
+    type SettingIds,
+    type SettingPages,
+    getSettingsForPage,
+} from "~/settings";
+import Renderer from "./renderer.vue";
+
+const props = defineProps<{
+    page: SettingPages;
+}>();
+
+const settingsIds = Object.keys(getSettingsForPage(props.page)) as SettingIds[];
+</script>

components/sidebars/settings-sidebar.vue

@@ -2,7 +2,7 @@
     <Tabs.Root v-model="tab" class="bg-dark-700 h-full overflow-auto pb-20">
         <Tabs.List class="flex flex-row p-4 gap-4 bg-dark-800 relative ring-1 ring-white/5 overflow-x-auto">
             <Tabs.Trigger :value="page"
-                v-for="page of [SettingPages.Account, SettingPages.Emojis, SettingPages.Behaviour, SettingPages.Appearance]"
+                v-for="page of SettingPages"
                 :as-child="true">
                 <ButtonBase class="capitalize hover:bg-white/5">
                     {{ page }}

pages/settings/index.vue

@@ -1,20 +1,11 @@
 <template>
     <SettingsSidebar>
         <template #behaviour>
-            <Renderer :id="id" v-for="id of (Object.keys(getSettingsForPage(
+            <SettingPage :page="SettingPages.Behaviour" />
-                SettingPages.Behaviour,
-            )) as SettingIds[])" :key="id" />
         </template>
         <template #appearance>
-            <Renderer :id="id" v-for="id of (Object.keys(getSettingsForPage(
+            <SettingPage :page="SettingPages.Appearance" />
-                SettingPages.Appearance,
-            )) as SettingIds[])" :key="id" />
         </template>
-        <!-- <template #advanced>
-            <Renderer :id="id" v-for="id of (Object.keys(getSettingsForPage(
-                SettingPages.Advanced,
-            )) as SettingIds[])" :key="id" />
-        </template> -->
         <template #account>
             <ProfileEditor />
         </template>
@@ -26,10 +17,10 @@
 
 <script setup lang="ts">
 import EmojiEditor from "~/components/settings/emojis/emojis.vue";
+import SettingPage from "~/components/settings/page.vue";
 import ProfileEditor from "~/components/settings/profile-editor.vue";
-import Renderer from "~/components/settings/renderer.vue";
 import SettingsSidebar from "~/components/sidebars/settings-sidebar.vue";
-import { SettingIds, SettingPages, getSettingsForPage } from "~/settings";
+import { SettingPages } from "~/settings";
 
 definePageMeta({
     layout: "app",

server/plugins/DocumentComment.ts

@@ -14,7 +14,6 @@ const art = `
 * With ❤️ from us:
 * - @jessew@social.lysand.org
 * - @aprl@social.lysand.org
-* - @graphite@social.lysand.org
 `;
 
 export default defineNitroPlugin((nitroApp) => {

settings.ts

@@ -62,7 +62,6 @@ export enum SettingPages {
     Account = "account",
     Emojis = "emojis",
     Behaviour = "behaviour",
-    Advanced = "advanced",
     Appearance = "appearance",
 }