refactor: split stores and use events

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

src/components/FolderView.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useServicesStore } from '@MailManager/stores/servicesStore'
+import { useMailStore } from '@/stores/mailStore'
+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
+  loaded: boolean
+  error: string | null
+}
+
+const props = defineProps<{
+  selectedFolder?: CollectionObject | null
+}>()
+
+// Emits
+const emit = defineEmits<{
+  select: [folder: CollectionObject]
+}>()
+
+// Stores
+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 serviceGroups = computed(() => {
+  const groups: ServiceGroup[] = []
+
+  servicesStore.servicesEnabled.forEach(service => {
+    if (service.identifier === null) {
+      return
+    }
+
+    groups.push({
+      service,
+      loading: mailStore.isServiceFolderLoading(service.provider, service.identifier),
+      loaded: mailStore.hasServiceFoldersLoaded(service.provider, service.identifier),
+      error: mailStore.getServiceFolderError(service.provider, service.identifier),
+    })
+  })
+
+  return groups
+})
+
+// Handlers
+const handleFolderCreate = (service: ServiceObject, parentFolder: CollectionObject | null = null) => {
+  mailUiStore.openCreateFolderDialog(service, parentFolder)
+}
+
+const handleFolderEdit = (folder: CollectionObject) => {
+  mailUiStore.openRenameFolderDialog(folder)
+}
+
+const handleFolderDelete = (folder: CollectionObject) => {
+  mailUiStore.openDeleteFolderDialog(folder)
+}
+
+const handleFolderMove = (folder: CollectionObject) => {
+  mailUiStore.openMoveFolderDialog(folder)
+}
+
+</script>
+
+<template>
+  <v-list density="compact" nav>
+    <!-- Tree View -->
+    <FolderTreeView
+      v-if="folderViewMode === 'tree'"
+      :selected-folder="selectedFolder"
+      :service-groups="serviceGroups"
+      @select="emit('select', $event)"
+      @create-folder="handleFolderCreate"
+      @edit-folder="handleFolderEdit"
+      @move-folder="handleFolderMove"
+      @delete-folder="handleFolderDelete"
+    />
+
+    <!-- Page-based View -->
+    <FolderPageView
+      v-else
+      :selected-folder="selectedFolder"
+      :service-groups="serviceGroups"
+      @select="emit('select', $event)"
+      @create-folder="handleFolderCreate"
+      @edit-folder="handleFolderEdit"
+      @move-folder="handleFolderMove"
+      @delete-folder="handleFolderDelete"
+    />
+
+    <!-- Empty state -->
+    <v-list-item v-if="servicesStore.servicesEnabled.length === 0">
+      <v-list-item-title class="text-center text-medium-emphasis">
+        No mail accounts configured
+      </v-list-item-title>
+    </v-list-item>
+  </v-list>
+</template>
+
+<style scoped>
+.v-list-item--active {
+  background-color: rgba(var(--v-theme-primary), 0.12);
+}
+</style>