feat: implement patch and settings store

Signed-off-by: Sebastian <krupinski01@gmail.com>

src/components/settings/BehaviorSettings.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { messageReadDelayOptions, useMailSettingsStore } from '@/stores/mailSettingsStore'
+
+const mailSettingsStore = useMailSettingsStore()
+const { messageReadEnabled, messageReadDelay } = storeToRefs(mailSettingsStore)
+</script>
+
+<template>
+  <div class="pa-4">
+    <h3 class="text-h6 mb-4">Behaviours</h3>
+
+    <v-list>
+      <v-list-item>
+        <v-list-item-title>Mark messages as read automatically</v-list-item-title>
+        <v-list-item-subtitle>
+          Mark a message as read after it stays open for the configured delay
+        </v-list-item-subtitle>
+        <template #append>
+          <v-switch v-model="messageReadEnabled" color="primary" hide-details />
+        </template>
+      </v-list-item>
+
+      <v-list-item>
+        <v-list-item-title>Read delay</v-list-item-title>
+        <v-list-item-subtitle>
+          Choose how long a message must stay open before it is marked as read
+        </v-list-item-subtitle>
+        <template #append>
+          <v-select
+            v-model="messageReadDelay"
+            :items="messageReadDelayOptions"
+            item-title="title"
+            item-value="value"
+            density="compact"
+            variant="outlined"
+            :disabled="!messageReadEnabled"
+            style="width: 180px"
+          />
+        </template>
+      </v-list-item>
+    </v-list>
+  </div>
+</template>

src/components/settings/DisplaySettings.vue

@@ -1,67 +1,23 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { useUser } from '@KTXC'
+import { storeToRefs } from 'pinia'
+import { folderViewModeOptions, useMailSettingsStore } from '@/stores/mailSettingsStore'
 
-type FolderViewMode = 'tree' | 'page'
-
-const { settings, setSetting } = useUser()
-
-const theme = ref('Auto')
-const showPreview = ref(true)
-const compactMode = ref(false)
-
-const folderViewMode = computed({
-  get: () => {
-    return (settings.value.get('mail.folderViewMode') as FolderViewMode) || 'tree'
-  },
-  set: (value: FolderViewMode) => setSetting('mail.folderViewMode', value)
-})
+const mailSettingsStore = useMailSettingsStore()
+const { folderViewMode } = storeToRefs(mailSettingsStore)
 </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' }
-            ]"
+            :items="folderViewModeOptions"
             item-value="value"
             item-title="title"
             density="compact"

src/components/settings/SettingsDialog.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import DisplaySettings from './DisplaySettings.vue'
 import AccountsSettings from './AccountsSettings.vue'
+import BehaviorSettings from './BehaviorSettings.vue'
 import SecuritySettings from './SecuritySettings.vue'
 
 interface Props {
@@ -51,6 +52,10 @@ const handleClose = () => {
             <v-icon start>mdi-palette</v-icon>
             Display
           </v-tab>
+          <v-tab value="behaviour">
+            <v-icon start>mdi-timer-cog-outline</v-icon>
+            Behaviours
+          </v-tab>
           <v-tab value="security">
             <v-icon start>mdi-shield-account</v-icon>
             Security
@@ -68,6 +73,10 @@ const handleClose = () => {
             <DisplaySettings />
           </v-window-item>
 
+          <v-window-item value="behaviour">
+            <BehaviorSettings />
+          </v-window-item>
+
           <v-window-item value="security">
             <SecuritySettings />
           </v-window-item>