refactor: improvemets

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

src/components/FolderTree.vue

@@ -2,22 +2,20 @@
 import { ref, computed } from 'vue'
 import { useCollectionsStore } from '@MailManager/stores/collectionsStore'
 import { useServicesStore } from '@MailManager/stores/servicesStore'
+import { useMailStore } from '@/stores/mailStore'
 import { useUser } from '@KTXC'
 import FolderTreeView from './FolderTreeView.vue'
 import FolderPageView from './FolderPageView.vue'
 import CreateFolderDialog from './CreateFolderDialog.vue'
 import RenameFolderDialog from './RenameFolderDialog.vue'
 import type { CollectionObject } from '@MailManager/models/collection'
-import type { ServiceInterface } from '@MailManager/types/service'
+import type { ServiceObject } from '@MailManager/models'
 
 type FolderViewMode = 'tree' | 'page'
 
-// Props
-interface Props {
+const props = defineProps<{
   selectedFolder?: CollectionObject | null
-}
-
-const props = defineProps<Props>()
+}>()
 
 // Emits
 const emit = defineEmits<{
@@ -28,6 +26,7 @@ const emit = defineEmits<{
 // Stores
 const collectionsStore = useCollectionsStore()
 const servicesStore = useServicesStore()
+const mailStore = useMailStore()
 
 // User settings
 const { settings } = useUser()
@@ -39,14 +38,14 @@ const folderViewMode = computed(() => {
 
 // Create folder dialog state
 const createDialogVisible = ref(false)
-const createDialogService = ref<ServiceInterface | null>(null)
+const createDialogService = ref<ServiceObject | null>(null)
 const createDialogParent = ref<CollectionObject | null>(null)
 const renameDialogVisible = ref(false)
-const renameDialogService = ref<ServiceInterface | null>(null)
+const renameDialogService = ref<ServiceObject | null>(null)
 const renameDialogFolder = ref<CollectionObject | null>(null)
 
 // Handle create folder event from child components
-const handleCreateFolder = (service: ServiceInterface, parentFolder: CollectionObject | null = null) => {
+const handleCreateFolder = (service: ServiceObject, parentFolder: CollectionObject | null = null) => {
   createDialogService.value = service
   createDialogParent.value = parentFolder
   createDialogVisible.value = true
@@ -58,7 +57,7 @@ const handleFolderCreated = (newFolder: CollectionObject) => {
   emit('select', newFolder)
 }
 
-const handleEditFolder = (service: ServiceInterface, folder: CollectionObject) => {
+const handleEditFolder = (service: ServiceObject, folder: CollectionObject) => {
   renameDialogService.value = service
   renameDialogFolder.value = folder
   renameDialogVisible.value = true
@@ -70,71 +69,27 @@ const handleFolderRenamed = (updatedFolder: CollectionObject) => {
 
 // Computed: all folders for validation
 const allFolders = computed(() => 
-  serviceGroups.value.flatMap(g => g.folders)
+  servicesStore.services.flatMap(service =>
+    collectionsStore.collectionsForService(service.provider, service.identifier),
+  )
 )
 
-// Folder hierarchy helper type
-interface FolderNode {
-  folder: CollectionObject
-  children: FolderNode[]
+interface ServiceGroup {
+  service: ServiceObject
+  loading: boolean
+  loaded: boolean
+  error: string | null
 }
-
-// Build hierarchical tree structure
-const buildFolderTree = (folders: CollectionObject[]): FolderNode[] => {
-  const nodeMap = new Map<string | number, FolderNode>()
-  const roots: FolderNode[] = []
-
-  // Create nodes for all folders
-  folders.forEach(folder => {
-    nodeMap.set(folder.identifier, {
-      folder,
-      children: []
-    })
-  })
-
-  // Build parent-child relationships
-  folders.forEach(folder => {
-    const node = nodeMap.get(folder.identifier)
-    if (!node) return
-
-    if (folder.collection === null || folder.collection === undefined) {
-      // Root level folder
-      roots.push(node)
-    } else {
-      // Child folder - add to parent
-      const parent = nodeMap.get(folder.collection)
-      if (parent) {
-        parent.children.push(node)
-      } else {
-        // Parent not found, treat as root
-        roots.push(node)
-      }
-    }
-  })
-
-  return roots
-}
-
-// Group collections by service
 const serviceGroups = computed(() => {
-  const groups: Array<{
-    service: ServiceInterface
-    folders: CollectionObject[]
-    folderTree: FolderNode[]
-  }> = []
+  const groups: ServiceGroup[] = []
 
   servicesStore.services.forEach(service => {
-    const folders = collectionsStore.collections.filter(
-      c => c.provider === service.provider && String(c.service) === String(service.identifier)
-    )
-    
-    if (folders.length > 0) {
-      groups.push({ 
-        service, 
-        folders,
-        folderTree: buildFolderTree(folders)
-      })
-    }
+    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
@@ -164,7 +119,7 @@ const serviceGroups = computed(() => {
     />
 
     <!-- Empty state -->
-    <v-list-item v-if="serviceGroups.length === 0">
+    <v-list-item v-if="servicesStore.services.length === 0">
       <v-list-item-title class="text-center text-medium-emphasis">
         No mail accounts configured
       </v-list-item-title>