feat: implement patch and settings store

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

src/components/FolderView.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
 import { useServicesStore } from '@MailManager/stores/servicesStore'
 import { useMailStore } from '@/stores/mailStore'
+import { useMailSettingsStore } from '@/stores/mailSettingsStore'
 import { useMailUiStore } from '@/stores/mailUiStore'
-import { useUser } from '@KTXC'
 import FolderTreeView from './FolderTreeView.vue'
 import FolderPageView from './FolderPageView.vue'
 import type { CollectionObject } from '@MailManager/models/collection'
 import type { ServiceObject } from '@MailManager/models'
 
-type FolderViewMode = 'tree' | 'page'
-
 interface ServiceGroup {
   service: ServiceObject
   loading: boolean
@@ -31,12 +30,8 @@ const emit = defineEmits<{
 const servicesStore = useServicesStore()
 const mailStore = useMailStore()
 const mailUiStore = useMailUiStore()
-const { settings } = useUser()
-
-// Computed
-const folderViewMode = computed(() => {
-  return (settings.value.get('mail.folderViewMode') as FolderViewMode) || 'tree'
-})
+const mailSettingsStore = useMailSettingsStore()
+const { folderViewMode } = storeToRefs(mailSettingsStore)
 
 const serviceGroups = computed(() => {
   const groups: ServiceGroup[] = []

src/components/MessageList.vue

@@ -29,6 +29,7 @@ const emit = defineEmits<{
   selectionClear: []
   selectionMove: []
   selectionDelete: []
+  selectionFlag: [flag: string, value: boolean]
 }>()
 
 const longPressTimer = ref<number | null>(null)
@@ -202,6 +203,13 @@ const clearLongPressTimer = () => {
   }
 }
 
+const handleFlag = (flag: string, value: boolean) => {
+  if (props.selectionMode && selectionCount.value > 0) {
+    emit('selectionFlag', flag, value)
+  }
+}
+
+
 onBeforeUnmount(() => {
   clearLongPressTimer()
 })
@@ -260,6 +268,16 @@ onBeforeUnmount(() => {
             <v-icon>mdi-delete-outline</v-icon>
             <v-tooltip activator="parent" location="bottom">Delete Selected</v-tooltip>
           </v-btn>
+          <v-btn
+            size="small"
+            icon="mdi-read"
+            variant="text"
+            :disabled="selectionCount === 0"
+            @click="handleFlag('read', true)"
+          >
+            <v-icon>mdi-read</v-icon>
+            <v-tooltip activator="parent" location="bottom">Mark as Read</v-tooltip>
+          </v-btn>
           <v-btn
             size="small"
             icon="mdi-close"

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>