feat: app settings

app/components/form/primitive.vue

@@ -24,30 +24,45 @@ const errorMessage = computed(() => {
 
 <template>
   <Primitive v-bind="$props" :class="cn('space-y-1.5', $props.ui?.container)">
-    <div class="flex size-fit w-full items-center justify-between">
-      <ULabel
-        :for="id"
-        :class="cn('text-sm font-medium gap-1', $props.ui?.label)"
-      >
-        {{ label }}
-        <span v-if="required" class="text-danger">*</span>
-      </ULabel>
-      <LazyUSpinner
-        v-if="isLoading"
-        class="shrink-0 size-4.5"
-        :data-testid="`loading-spinner-${label}`"
-      />
-      <p
-        v-else-if="errorMessage"
-        :title="errorMessage"
-        :class="cn('text-xs text-danger text-end max-w-2/3 truncate', $props.ui?.error)"
-      >
-        {{ errorMessage }}
-      </p>
-    </div>
+    <template v-if="!$slots.label && !$slots.error">
+      <div class="flex size-fit w-full items-center justify-between">
+        <ULabel
+          :for="id"
+          :class="cn('text-sm font-medium gap-1', $props.ui?.label)"
+        >
+          {{ label }}
+          <span v-if="required" class="text-danger">*</span>
+        </ULabel>
+        <LazyUSpinner
+          v-if="isLoading"
+          class="shrink-0 size-4.5"
+          :data-testid="`loading-spinner-${label}`"
+        />
+        <p
+          v-else-if="errorMessage"
+          :title="errorMessage"
+          :class="cn('text-xs text-danger text-end max-w-2/3 truncate', $props.ui?.error)"
+        >
+          {{ errorMessage }}
+        </p>
+      </div>
+    </template>
+
+    <slot
+      v-if="$slots.label"
+      :id
+      name="label"
+    />
+    <slot
+      v-if="$slots.error"
+      name="error"
+      :message="errorMessage"
+    />
+
     <Slot :id :data-error="errorMessage ? '' : undefined">
       <slot />
     </Slot>
+
     <div v-if="$slots.footer" :class="cn('text-xs text-muted-foreground text-end', $props.ui?.footer)">
       <slot name="footer" />
     </div>

app/components/settings/content-layout.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import type { PrimitiveProps } from 'reka-ui'
+
+defineProps<PrimitiveProps>()
+</script>
+
+<template>
+  <Primitive v-bind="$props" :class="cn('mt-12 flex flex-col p-3.5 mx-auto max-w-screen-md', $attrs.class)">
+    <slot />
+  </Primitive>
+</template>

app/components/settings/content.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  category: SettingsCategory
+}>()
+
+const Content = defineAsyncComponent(async () => {
+  try {
+    const c = await import(`~/components/settings/content/${props.category}.vue`)
+    return c
+  }
+  catch {
+    return h('div', { innerHTML: `Please create ~/components/settings/content/${props.category}.vue` })
+  }
+})
+</script>
+
+<template>
+  <Content />
+</template>

app/components/settings/content/accessibility.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+const settings = useSettings()
+</script>
+
+<template>
+  <SettingsContentLayout>
+    <SettingsFormSwitch
+      v-model:model-value="settings.accessibility.uiAnimations"
+      :label="SETTINGS_ITEM_METADATA.accessibility.uiAnimations.title"
+      :description="SETTINGS_ITEM_METADATA.accessibility.uiAnimations.description"
+    >
+    </SettingsFormSwitch>
+  </SettingsContentLayout>
+</template>

app/components/settings/content/appearance.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+const settings = useSettings()
+</script>
+
+<template>
+  <SettingsContentLayout>
+    <SettingsFormAutocomplete
+      v-model:model-value="settings.appearance.font"
+      :label="SETTINGS_ITEM_METADATA.appearance.font.title"
+      :description="SETTINGS_ITEM_METADATA.appearance.font.description"
+      :options="SETTINGS_ITEM_METADATA.appearance.font.options"
+      :default-option="DEFAULT_SETTINGS.appearance.font"
+    />
+  </SettingsContentLayout>
+</template>

app/components/settings/dialog.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-const { open } = useSettingsDialog()
+const { open, tab } = useSettingsDialog()
+
+onUnmounted(() => tab.value = SETTINGS_DEFAULT_TAB)
 </script>
 
 <template>
@@ -16,26 +18,42 @@ const { open } = useSettingsDialog()
           )"
         @close-auto-focus.prevent
       >
-        <div class="flex">
-          <LazySettingsDialogSidebar />
-          <header class="pe-2.5 ps-4 border-b flex flex-1 h-header-height items-center">
-            <DialogTitle class="font-medium">
-              My Account
-            </DialogTitle>
-            <div class="flex-1" />
-            <DialogClose
-              :class="cn(
-                interactiveStyles.base,
-                interactiveStyles.variant.ghost,
-                interactiveStyles.size.icon,
-                'inline-flex size-8 items-center justify-center opacity-70',
-              )"
+        <TabsRoot
+          v-model:model-value="tab"
+          activation-mode="manual"
+          orientation="vertical"
+          class="flex"
+        >
+          <SettingsDialogSidebar />
+
+          <div class="flex flex-1 flex-col">
+            <header class="pe-2.5 ps-4 border-b flex shrink-0 h-header-height items-center justify-between">
+              <DialogTitle class="font-medium">
+                My Account
+              </DialogTitle>
+
+              <DialogClose
+                :class="cn(
+                  interactiveStyles.base,
+                  interactiveStyles.variant.ghost,
+                  interactiveStyles.size.icon,
+                  'inline-flex size-8 items-center justify-center opacity-70',
+                )"
+              >
+                <Icon name="tabler:x" class="size-5" />
+                <VisuallyHidden>Close</VisuallyHidden>
+              </DialogClose>
+            </header>
+
+            <TabsContent
+              v-for="setting in SETTINGS_CATEGORY_METADATA"
+              :key="setting.key"
+              :value="setting.key"
             >
-              <Icon name="tabler:x" class="size-5" />
-              <span class="sr-only">Close</span>
-            </DialogClose>
-          </header>
-        </div>
+              <SettingsContent :category="setting.key" />
+            </TabsContent>
+          </div>
+        </TabsRoot>
       </DialogContent>
     </DialogPortal>
   </UDialogRoot>

app/components/settings/dialog/sidebar.vue

@@ -1,10 +1,13 @@
 <script lang="ts" setup>
 const { self } = useSelf()
+const { tab } = useSettingsDialog()
+
+onUnmounted(() => tab.value = SETTINGS_DEFAULT_TAB)
 </script>
 
 <template>
-  <div class="p-4 rounded-l-lg bg-background shrink-0 w-64">
-    <UButton variant="ghost" class="group text-foreground font-normal p-3 gap-3.5 h-[4.25rem] w-full items-center justify-between">
+  <div class="p-4 rounded-l-lg bg-background flex shrink-0 flex-col gap-4 w-64">
+    <UButton variant="ghost" class="group text-foreground font-normal shrink-0 gap-3.5 h-14 w-full items-center justify-center">
       <MatrixAvatar
         :user="self?.userId"
         :size="48"
@@ -18,5 +21,29 @@ const { self } = useSelf()
         </span>
       </div>
     </UButton>
+    <div class="grid place-items-center">
+      <UInput placeholder="Search" />
+    </div>
+
+    <TabsList class="tab-list flex flex-col gap-1 isolate">
+      <TabsTrigger
+        v-for="entry in SETTINGS_CATEGORY_METADATA"
+        :key="entry.key"
+        :value="entry.key"
+        as-child
+        @pointerdown.prevent
+        @click="tab = entry.key"
+      >
+        <UButton
+          variant="ghost"
+          class="justify-start data-[active]:text-foreground active:bg-card-lighter/50 data-[active]:bg-card-lighter/50 hover:bg-card-lighter/50 data-[active]:anchor-name-item"
+        >
+          <Icon :name="entry.icon" class="size-4" />
+          {{ upperFirst(entry.title) }}
+        </UButton>
+      </TabsTrigger>
+
+      <div class="rounded bg-card-lighter pointer-events-none duration-100 absolute position-anchor-item anchor-inset ease-snappy -z-1" />
+    </TabsList>
   </div>
 </template>

app/components/settings/form/autocomplete.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup generic="T extends string[] | undefined">
+import type { SettingsFormPrimitiveProps } from './types'
+
+type ValueType = T extends string[] ? T[number] : string
+
+defineProps<SettingsFormPrimitiveProps & {
+  options: T
+  defaultOption?: ValueType
+}>()
+
+const modelValue = defineModel<ValueType>()
+</script>
+
+<template>
+  <SettingsFormPrimitive v-bind="$props">
+    <USelectRoot v-model:model-value="modelValue">
+      <USelectTrigger class="min-w-48">
+        <USelectValue>
+          {{ modelValue }}
+        </USelectValue>
+      </USelectTrigger>
+      <USelectContent>
+        <USelectItem
+          v-for="option in options"
+          :key="option"
+          :value="option"
+        >
+          <USelectItemText>
+            {{ option }}
+          </USelectItemText>
+        </USelectItem>
+      </USelectContent>
+    </USelectRoot>
+  </SettingsFormPrimitive>
+</template>

app/components/settings/form/primitive.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { FormPrimitiveProps } from '~/components/form/primitive.vue'
+
+defineProps<FormPrimitiveProps & { description?: string }>()
+</script>
+
+<template>
+  <FormPrimitive v-bind="$props" class="flex gap-2 items-center justify-between space-y-0">
+    <template #label="{ id }">
+      <div class="flex flex-col gap-1">
+        <ULabel :for="id" class="text-base font-medium m-0">
+          {{ label }}
+        </ULabel>
+        <p v-if="description" class="text-sm text-muted-foreground">
+          {{ description }}
+        </p>
+      </div>
+    </template>
+    <slot />
+  </FormPrimitive>
+</template>

app/components/settings/form/switch.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { SettingsFormPrimitiveProps } from './types'
+
+defineProps<SettingsFormPrimitiveProps>()
+
+const modelValue = defineModel<boolean>()
+</script>
+
+<template>
+  <FormPrimitive v-bind="$props" class="flex gap-2 items-center justify-between space-y-0">
+    <template #label="{ id }">
+      <div class="flex flex-col gap-1">
+        <ULabel :for="id" class="text-base font-medium m-0">
+          {{ label }}
+        </ULabel>
+        <p v-if="description" class="text-sm text-muted-foreground">
+          {{ description }}
+        </p>
+      </div>
+    </template>
+    <USwitch v-model="modelValue" />
+  </FormPrimitive>
+</template>

app/components/settings/form/types.ts

@@ -0,0 +1,5 @@
+import type { FormPrimitiveProps } from '~/components/form/primitive.vue'
+
+export type SettingsFormPrimitiveProps = FormPrimitiveProps & {
+  description?: string
+}

app/composables/use-settings-dialog.ts

@@ -1,7 +1,9 @@
 export const useSettingsDialog = createGlobalState(() => {
   const open = shallowRef(false)
+  const tab = shallowRef<SettingsCategory>(SETTINGS_DEFAULT_TAB)
 
   return {
     open,
+    tab,
   }
 })

app/composables/use-settings.ts

@@ -0,0 +1 @@
+export const useSettings = () => useNuxtApp().$settings

app/constants/matrix/schemas.ts

@@ -0,0 +1,4 @@
+import { EventType } from 'matrix-js-sdk'
+import * as v from 'valibot'
+
+export const EventTypeSchema = v.picklist(objectValues(EventType))