Initial commit

src/components/settings/DisplaySettings.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useUser } from '@KTXC/composables/useUser'
+
+type FolderViewMode = 'tree' | 'page'
+
+const { settings, setSetting } = useUser()
+
+const theme = ref('Auto')
+const showPreview = ref(true)
+const compactMode = ref(false)
+
+const folderViewMode = computed({
+  get: () => {
+    const allSettings = settings.value?.all || {}
+    const mailSettings = allSettings.mail || {}
+    return (mailSettings.folderViewMode as FolderViewMode) || 'tree'
+  },
+  set: (value: FolderViewMode) => setSetting('mail.folderViewMode', value)
+})
+</script>
+
+<template>
+  <div class="pa-4">
+    <h3 class="text-h6 mb-4">Display Settings</h3>
+    <v-list>
+      <v-list-item>
+        <v-list-item-title>Theme</v-list-item-title>
+        <v-list-item-subtitle>Choose your preferred theme</v-list-item-subtitle>
+        <template #append>
+          <v-select
+            v-model="theme"
+            :items="['Light', 'Dark', 'Auto']"
+            density="compact"
+            variant="outlined"
+            style="width: 150px"
+          />
+        </template>
+      </v-list-item>
+
+      <v-list-item>
+        <v-list-item-title>Message preview</v-list-item-title>
+        <v-list-item-subtitle>Show message preview in list</v-list-item-subtitle>
+        <template #append>
+          <v-switch v-model="showPreview" color="primary" hide-details />
+        </template>
+      </v-list-item>
+
+      <v-list-item>
+        <v-list-item-title>Compact mode</v-list-item-title>
+        <v-list-item-subtitle>Use compact message list layout</v-list-item-subtitle>
+        <template #append>
+          <v-switch v-model="compactMode" color="primary" hide-details />
+        </template>
+      </v-list-item>
+
+      <v-list-item>
+        <v-list-item-title>Folder navigation style</v-list-item-title>
+        <v-list-item-subtitle>Choose how folders are displayed</v-list-item-subtitle>
+        <template #append>
+          <v-select
+            v-model="folderViewMode"
+            :items="[
+              { value: 'tree', title: 'Tree' },
+              { value: 'page', title: 'Page' }
+            ]"
+            item-value="value"
+            item-title="title"
+            density="compact"
+            variant="outlined"
+            style="width: 150px"
+          />
+        </template>
+      </v-list-item>
+    </v-list>
+  </div>
+</template>