Merge pull request 'refactor: improvemets' (#9) from refactor/improvements into main

Reviewed-on: #9

src/components/CreateFolderDialog.vue

@@ -3,12 +3,12 @@ import { ref, computed, watch } from 'vue'
 import { useCollectionsStore } from '@MailManager/stores/collectionsStore'
 import { CollectionPropertiesObject } from '@MailManager/models/collection'
 import type { CollectionObject } from '@MailManager/models/collection'
-import type { ServiceInterface } from '@MailManager/types/service'
+import type { ServiceObject } from '@MailManager/models'
 
 // Props
 interface Props {
   modelValue: boolean
-  service: ServiceInterface
+  service: ServiceObject
   parentFolder?: CollectionObject | null
   allFolders?: CollectionObject[]
 }

src/components/FolderPageView.vue

@@ -1,34 +1,38 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useCollectionsStore } from '@MailManager/stores/collectionsStore'
 import type { CollectionObject } from '@MailManager/models/collection'
-import type { ServiceInterface } from '@MailManager/types/service'
+import type { ServiceObject } from '@MailManager/models'
 
 // Props
 interface Props {
   selectedFolder?: CollectionObject | null
   serviceGroups: Array<{
-    service: ServiceInterface
+    service: ServiceObject
-    folders: CollectionObject[]
+    loading: boolean
+    loaded: boolean
+    error: string | null
   }>
 }
 
 const props = defineProps<Props>()
+const collectionsStore = useCollectionsStore()
 
 // Emits
 const emit = defineEmits<{
   select: [folder: CollectionObject]
-  createFolder: [service: ServiceInterface, parentFolder: CollectionObject | null]
+  createFolder: [service: ServiceObject, parentFolder: CollectionObject | null]
-  editFolder: [service: ServiceInterface, folder: CollectionObject]
+  editFolder: [service: ServiceObject, folder: CollectionObject]
 }>()
 
 // Page-based navigation state per service account
 const pageLevels = ref<Record<string, (string | number | null)[]>>({})
 
-const getServiceKey = (service: ServiceInterface): string => {
+const getServiceKey = (service: ServiceObject): string => {
   return `${service.provider}-${service.identifier}`
 }
 
-const getCurrentPageLevel = (service: ServiceInterface): (string | number | null)[] => {
+const getCurrentPageLevel = (service: ServiceObject): (string | number | null)[] => {
   const key = getServiceKey(service)
   if (!pageLevels.value[key]) {
     pageLevels.value[key] = [null]
@@ -37,20 +41,19 @@ const getCurrentPageLevel = (service: ServiceInterface): (string | number | null
 }
 
 // Get folders for current page level
-const getCurrentPageFolders = (service: ServiceInterface, folders: CollectionObject[]): CollectionObject[] => {
+const getCurrentPageFolders = (service: ServiceObject): CollectionObject[] => {
   const level = getCurrentPageLevel(service)
   const currentParent = level[level.length - 1]
-  return folders.filter(f => {
+  return collectionsStore.collectionsInCollection(service.provider, service.identifier, currentParent)
-    if (currentParent === null) {
-      return f.collection === null || f.collection === undefined
-    }
-    return String(f.collection) === String(currentParent)
-  })
 }
 
 // Check if folder has children
-const hasChildren = (folder: CollectionObject, allFolders: CollectionObject[]): boolean => {
+const hasChildren = (folder: CollectionObject): boolean => {
-  return allFolders.some(f => String(f.collection) === String(folder.identifier))
+  return collectionsStore.hasChildrenInCollection(folder.provider, folder.service, folder.identifier)
+}
+
+const getServiceFolders = (service: ServiceObject): CollectionObject[] => {
+  return collectionsStore.collectionsForService(service.provider, service.identifier)
 }
 
 // Get icon for folder based on role
@@ -109,13 +112,13 @@ const handleFolderClick = (folder: CollectionObject) => {
 }
 
 // Navigate into a folder to show its children
-const handleNavigateInto = (service: ServiceInterface, folderId: string | number) => {
+const handleNavigateInto = (service: ServiceObject, folderId: string | number) => {
   const level = getCurrentPageLevel(service)
   level.push(folderId)
 }
 
 // Navigate back in page-based view
-const navigateBack = (service: ServiceInterface) => {
+const navigateBack = (service: ServiceObject) => {
   const level = getCurrentPageLevel(service)
   if (level.length > 1) {
     level.pop()
@@ -123,14 +126,14 @@ const navigateBack = (service: ServiceInterface) => {
 }
 
 // Get breadcrumb label for current page
-const getCurrentBreadcrumb = (service: ServiceInterface, folders: CollectionObject[]): string => {
+const getCurrentBreadcrumb = (service: ServiceObject): string => {
   const level = getCurrentPageLevel(service)
   const currentParent = level[level.length - 1]
   if (currentParent === null) return 'All Folders'
 
   const labels = level
     .filter((id): id is string | number => id !== null)
-    .map(id => folders.find(f => String(f.identifier) === String(id))?.properties.label)
+    .map(id => collectionsStore.collection(service.provider, service.identifier, id)?.properties.label)
     .filter((label): label is string => !!label)
 
   if (labels.length === 0) return 'Folders'
@@ -139,14 +142,12 @@ const getCurrentBreadcrumb = (service: ServiceInterface, folders: CollectionObje
 }
 
 // Get current parent folder for dialog context
-const getCurrentParentFolder = (service: ServiceInterface, folders: CollectionObject[]): CollectionObject | null => {
+const getCurrentParentFolder = (service: ServiceObject): CollectionObject | null => {
   const level = getCurrentPageLevel(service)
   const currentParent = level[level.length - 1]
   if (currentParent === null) return null
 
-  // Search through all folders in the array
+  return collectionsStore.collection(service.provider, service.identifier, currentParent)
-  const found = folders.find(f => String(f.identifier) === String(currentParent))
-  return found || null
 }
 
 </script>
@@ -176,7 +177,7 @@ const getCurrentParentFolder = (service: ServiceInterface, folders: CollectionOb
                 variant="text"
                 size="small"
                 density="compact"
-                @click.stop="emit('createFolder', group.service, getCurrentParentFolder(group.service, group.folders))"
+                @click.stop="emit('createFolder', group.service, getCurrentParentFolder(group.service))"
               >
                 <v-icon>mdi-folder-plus</v-icon>
                 <v-tooltip activator="parent" location="bottom">New Folder</v-tooltip>
@@ -187,12 +188,12 @@ const getCurrentParentFolder = (service: ServiceInterface, folders: CollectionOb
 
         <!-- Breadcrumb with New Folder button -->
         <v-list-subheader v-if="getCurrentPageLevel(group.service).length > 1" class="d-flex align-center">
-          <span class="flex-grow-1">{{ getCurrentBreadcrumb(group.service, group.folders) }}</span>
+          <span class="flex-grow-1">{{ getCurrentBreadcrumb(group.service) }}</span>
           <v-btn
             icon="mdi-folder-plus"
             variant="text"
             size="x-small"
-            @click="emit('createFolder', group.service, getCurrentParentFolder(group.service, group.folders))"
+            @click="emit('createFolder', group.service, getCurrentParentFolder(group.service))"
           >
             <v-icon size="small">mdi-folder-plus</v-icon>
             <v-tooltip activator="parent" location="bottom">New Subfolder</v-tooltip>
@@ -210,7 +211,7 @@ const getCurrentParentFolder = (service: ServiceInterface, folders: CollectionOb
 
         <!-- Current level folders -->
         <v-list-item
-          v-for="folder in getCurrentPageFolders(group.service, group.folders)"
+          v-for="folder in getCurrentPageFolders(group.service)"
           :key="`${folder.provider}-${folder.service}-${folder.identifier}`"
           class="folder-page-item folder-row-item"
           :title="folder.properties.label"
@@ -236,7 +237,7 @@ const getCurrentParentFolder = (service: ServiceInterface, folders: CollectionOb
             
             <!-- Chevron for folders with children -->
             <v-btn
-              v-if="hasChildren(folder, group.folders)"
+              v-if="hasChildren(folder)"
               icon="mdi-chevron-right"
               variant="text"
               size="small"
@@ -274,20 +275,73 @@ const getCurrentParentFolder = (service: ServiceInterface, folders: CollectionOb
             </v-menu>
           </template>
         </v-list-item>
+
+        <v-list-item v-if="group.loading && getServiceFolders(group.service).length === 0" disabled class="folder-status-item">
+          <template v-slot:prepend>
+            <v-progress-circular indeterminate size="18" width="2" color="primary" />
+          </template>
+          <v-list-item-title>Loading folders</v-list-item-title>
+        </v-list-item>
+
+        <v-list-item
+          v-else-if="group.error && getServiceFolders(group.service).length === 0"
+          disabled
+          class="folder-status-item"
+        >
+          <template v-slot:prepend>
+            <v-icon icon="mdi-alert-circle-outline" color="error" />
+          </template>
+          <v-list-item-title>Folders unavailable</v-list-item-title>
+          <v-list-item-subtitle>{{ group.error }}</v-list-item-subtitle>
+        </v-list-item>
+
+        <v-list-item
+          v-else-if="group.loaded && getServiceFolders(group.service).length === 0"
+          disabled
+          class="folder-status-item"
+        >
+          <template v-slot:prepend>
+            <v-icon icon="mdi-folder-off-outline" />
+          </template>
+          <v-list-item-title>No folders found</v-list-item-title>
+        </v-list-item>
       </v-list-group>
 
       <!-- Single service - show folders directly -->
       <template v-else>
+        <v-list-item
+          class="account-header-item"
+          :title="group.service.label || 'Mail Account'"
+          :subtitle="group.service.primaryAddress || undefined"
+        >
+          <template v-slot:prepend>
+            <v-icon icon="mdi-email-outline" />
+          </template>
+
+          <template v-slot:append>
+            <v-btn
+              icon="mdi-folder-plus"
+              variant="text"
+              size="small"
+              density="compact"
+              @click.stop="emit('createFolder', group.service, getCurrentParentFolder(group.service))"
+            >
+              <v-icon>mdi-folder-plus</v-icon>
+              <v-tooltip activator="parent" location="bottom">New Folder</v-tooltip>
+            </v-btn>
+          </template>
+        </v-list-item>
+
         <!-- Header with New Folder button -->
         <v-list-subheader class="d-flex align-center">
           <span class="flex-grow-1">
-            {{ getCurrentPageLevel(group.service).length > 1 ? getCurrentBreadcrumb(group.service, group.folders) : 'FOLDERS' }}
+            {{ getCurrentPageLevel(group.service).length > 1 ? getCurrentBreadcrumb(group.service) : 'FOLDERS' }}
           </span>
           <v-btn
             icon="mdi-folder-plus"
             variant="text"
             size="x-small"
-            @click="emit('createFolder', group.service, getCurrentParentFolder(group.service, group.folders))"
+            @click="emit('createFolder', group.service, getCurrentParentFolder(group.service))"
           >
             <v-icon size="small">mdi-folder-plus</v-icon>
             <v-tooltip activator="parent" location="bottom">
@@ -307,7 +361,7 @@ const getCurrentParentFolder = (service: ServiceInterface, folders: CollectionOb
 
         <!-- Current level folders -->
         <v-list-item
-          v-for="folder in getCurrentPageFolders(group.service, group.folders)"
+          v-for="folder in getCurrentPageFolders(group.service)"
           :key="`${folder.provider}-${folder.service}-${folder.identifier}`"
           class="folder-row-item"
           :title="folder.properties.label"
@@ -333,7 +387,7 @@ const getCurrentParentFolder = (service: ServiceInterface, folders: CollectionOb
             
             <!-- Chevron for folders with children or Menu for actions -->
             <v-btn
-              v-if="hasChildren(folder, group.folders)"
+              v-if="hasChildren(folder)"
               icon="mdi-chevron-right"
               variant="text"
               size="small"
@@ -370,11 +424,59 @@ const getCurrentParentFolder = (service: ServiceInterface, folders: CollectionOb
             </v-menu>
           </template>
         </v-list-item>
+
+        <v-list-item v-if="group.loading && getServiceFolders(group.service).length === 0" disabled class="folder-status-item">
+          <template v-slot:prepend>
+            <v-progress-circular indeterminate size="18" width="2" color="primary" />
+          </template>
+          <v-list-item-title>Loading folders</v-list-item-title>
+        </v-list-item>
+
+        <v-list-item
+          v-else-if="group.error && getServiceFolders(group.service).length === 0"
+          disabled
+          class="folder-status-item"
+        >
+          <template v-slot:prepend>
+            <v-icon icon="mdi-alert-circle-outline" color="error" />
+          </template>
+          <v-list-item-title>Folders unavailable</v-list-item-title>
+          <v-list-item-subtitle>{{ group.error }}</v-list-item-subtitle>
+        </v-list-item>
+
+        <v-list-item
+          v-else-if="group.loaded && getServiceFolders(group.service).length === 0"
+          disabled
+          class="folder-status-item"
+        >
+          <template v-slot:prepend>
+            <v-icon icon="mdi-folder-off-outline" />
+          </template>
+          <v-list-item-title>No folders found</v-list-item-title>
+        </v-list-item>
       </template>
     </template>
   </div>
 </template>
 
+<style scoped>
+.account-header-item {
+  --v-list-item-prepend-size: 22px;
+  background-color: rgba(var(--v-theme-primary), 0.1);
+  border-radius: 6px;
+  margin-bottom: 4px;
+}
+
+.account-header-item :deep(.v-list-item__prepend) {
+  padding-inline-start: 4px;
+  margin-inline-end: 2px;
+}
+
+.folder-status-item {
+  padding-inline-start: 16px;
+}
+</style>
+
 <style scoped>
 .v-list-item--active {
   background-color: rgba(var(--v-theme-primary), 0.12);

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
+const props = defineProps<{
-interface Props {
   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 ServiceGroup {
-interface FolderNode {
+  service: ServiceObject
-  folder: CollectionObject
+  loading: boolean
-  children: FolderNode[]
+  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<{
+  const groups: ServiceGroup[] = []
-    service: ServiceInterface
-    folders: CollectionObject[]
-    folderTree: FolderNode[]
-  }> = []
 
   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,
+      loading: mailStore.isServiceFolderLoading(service.provider, service.identifier),
-        folderTree: buildFolderTree(folders)
+      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>

src/components/FolderTreeNode.vue

@@ -1,26 +1,38 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useCollectionsStore } from '@MailManager/stores/collectionsStore'
 import type { CollectionObject } from '@MailManager/models/collection'
-import type { ServiceInterface } from '@MailManager/types/service'
+import type { ServiceObject } from '@MailManager/models'
-
-export interface FolderNode {
-  folder: CollectionObject
-  children: FolderNode[]
-}
 
 export interface Props {
-  node: FolderNode
+  folder: CollectionObject
-  service: ServiceInterface
+  service: ServiceObject
   selectedFolder?: CollectionObject | null
 }
 
 const props = defineProps<Props>()
+const collectionsStore = useCollectionsStore()
+const expanded = ref(false)
 
 const emit = defineEmits<{
   select: [folder: CollectionObject]
-  createSubfolder: [service: ServiceInterface, parentFolder: CollectionObject]
+  createSubfolder: [service: ServiceObject, parentFolder: CollectionObject]
-  editFolder: [service: ServiceInterface, folder: CollectionObject]
+  editFolder: [service: ServiceObject, folder: CollectionObject]
 }>()
 
+const childFolders = computed(() => {
+  return collectionsStore.collectionsInCollection(props.service.provider, props.service.identifier, props.folder.identifier)
+})
+
+const hasChildren = computed(() => {
+  return collectionsStore.hasChildrenInCollection(props.service.provider, props.service.identifier, props.folder.identifier)
+})
+
+const handleExpandableFolderClick = () => {
+  expanded.value = !expanded.value
+  emit('select', props.folder)
+}
+
 // Get icon for folder based on role
 const getFolderIcon = (folder: CollectionObject): string => {
   switch (folder.properties.role) {
@@ -73,26 +85,26 @@ const isSelected = (folder: CollectionObject): boolean => {
 </script>
 
 <template>
-  <v-list-group v-if="node.children.length > 0" class="folder-tree-group">
+  <v-list-group v-if="hasChildren" v-model="expanded" class="folder-tree-group">
     <template v-slot:activator="{ props: activatorProps }">
       <v-list-item
         v-bind="activatorProps"
         class="folder-row-item"
-        :title="node.folder.properties.label"
+        :title="folder.properties.label"
-        :active="isSelected(node.folder)"
+        :active="isSelected(folder)"
-        @click.stop="emit('select', node.folder)"
+        @click.stop="handleExpandableFolderClick()"
       >
         <template v-slot:prepend>
           <v-icon 
-            :icon="getFolderIcon(node.folder)" 
+            :icon="getFolderIcon(folder)" 
-            :color="getFolderColor(node.folder)"
+            :color="getFolderColor(folder)"
           />
         </template>
         
         <template v-slot:append>
           <v-badge
-            v-if="node.folder.properties.unread && node.folder.properties.unread > 0"
+            v-if="folder.properties.unread && folder.properties.unread > 0"
-            :content="node.folder.properties.unread"
+            :content="folder.properties.unread"
             color="primary"
             inline
             class="mr-2"
@@ -116,13 +128,13 @@ const isSelected = (folder: CollectionObject): boolean => {
             <v-list density="compact">
               <v-list-item
                 prepend-icon="mdi-pencil"
-                @click="emit('editFolder', service, node.folder)"
+                @click="emit('editFolder', service, folder)"
               >
                 <v-list-item-title>Edit Folder Name</v-list-item-title>
               </v-list-item>
               <v-list-item
                 prepend-icon="mdi-folder-plus"
-                @click="emit('createSubfolder', service, node.folder)"
+                @click="emit('createSubfolder', service, folder)"
               >
                 <v-list-item-title>New Subfolder</v-list-item-title>
               </v-list-item>
@@ -132,11 +144,11 @@ const isSelected = (folder: CollectionObject): boolean => {
       </v-list-item>
     </template>
 
-    <div class="folder-tree-children">
+    <div v-if="expanded" class="folder-tree-children">
       <FolderTreeNode
-        v-for="child in node.children"
+        v-for="childFolder in childFolders"
-        :key="child.folder.identifier"
+        :key="childFolder.identifier"
-        :node="child"
+        :folder="childFolder"
         :service="service"
         :selected-folder="selectedFolder"
         @select="emit('select', $event)"
@@ -149,21 +161,21 @@ const isSelected = (folder: CollectionObject): boolean => {
   <v-list-item
     v-else
     class="folder-tree-item folder-row-item"
-    :title="node.folder.properties.label"
+    :title="folder.properties.label"
-    :active="isSelected(node.folder)"
+    :active="isSelected(folder)"
-    @click="emit('select', node.folder)"
+    @click="emit('select', folder)"
   >
     <template v-slot:prepend>
       <v-icon 
-        :icon="getFolderIcon(node.folder)" 
+        :icon="getFolderIcon(folder)" 
-        :color="getFolderColor(node.folder)"
+        :color="getFolderColor(folder)"
       />
     </template>
     
     <template v-slot:append>
       <v-badge
-        v-if="node.folder.properties.unread && node.folder.properties.unread > 0"
+        v-if="folder.properties.unread && folder.properties.unread > 0"
-        :content="node.folder.properties.unread"
+        :content="folder.properties.unread"
         color="primary"
         inline
         class="mr-2"
@@ -187,13 +199,13 @@ const isSelected = (folder: CollectionObject): boolean => {
         <v-list density="compact">
           <v-list-item
             prepend-icon="mdi-pencil"
-            @click="emit('editFolder', service, node.folder)"
+            @click="emit('editFolder', service, folder)"
           >
             <v-list-item-title>Edit Folder Name</v-list-item-title>
           </v-list-item>
           <v-list-item
             prepend-icon="mdi-folder-plus"
-            @click="emit('createSubfolder', service, node.folder)"
+            @click="emit('createSubfolder', service, folder)"
           >
             <v-list-item-title>New Subfolder</v-list-item-title>
           </v-list-item>

src/components/FolderTreeView.vue

@@ -1,32 +1,37 @@
 <script setup lang="ts">
+import { useCollectionsStore } from '@MailManager/stores/collectionsStore'
 import type { CollectionObject } from '@MailManager/models/collection'
-import type { ServiceInterface } from '@MailManager/types/service'
+import type { ServiceObject } from '@MailManager/models'
 import FolderTreeNode from './FolderTreeNode.vue'
 
-// Folder hierarchy helper type
-export interface FolderNode {
-  folder: CollectionObject
-  children: FolderNode[]
-}
-
 // Props
 interface Props {
   selectedFolder?: CollectionObject | null
   serviceGroups: Array<{
-    service: ServiceInterface
+    service: ServiceObject
-    folders: CollectionObject[]
+    loading: boolean
-    folderTree: FolderNode[]
+    loaded: boolean
+    error: string | null
   }>
 }
 
 const props = defineProps<Props>()
+const collectionsStore = useCollectionsStore()
 
 // Emits
 const emit = defineEmits<{
   select: [folder: CollectionObject]
-  createFolder: [service: ServiceInterface, parentFolder: CollectionObject | null]
+  createFolder: [service: ServiceObject, parentFolder: CollectionObject | null]
-  editFolder: [service: ServiceInterface, folder: CollectionObject]
+  editFolder: [service: ServiceObject, folder: CollectionObject]
 }>()
+
+const getRootFolders = (service: ServiceObject): CollectionObject[] => {
+  return collectionsStore.collectionsInCollection(service.provider, service.identifier, null)
+}
+
+const getServiceFolders = (service: ServiceObject): CollectionObject[] => {
+  return collectionsStore.collectionsForService(service.provider, service.identifier)
+}
 </script>
 
 <template>
@@ -61,19 +66,72 @@ const emit = defineEmits<{
         </template>
 
         <FolderTreeNode
-          v-for="node in group.folderTree"
+          v-for="folder in getRootFolders(group.service)"
-          :key="`${node.folder.provider}-${node.folder.service}-${node.folder.identifier}`"
+          :key="`${folder.provider}-${folder.service}-${folder.identifier}`"
-          :node="node"
+          :folder="folder"
           :service="group.service"
           :selected-folder="selectedFolder"
           @select="emit('select', $event)"
           @create-subfolder="(service, parentFolder) => emit('createFolder', service, parentFolder)"
           @edit-folder="(service, folder) => emit('editFolder', service, folder)"
         />
+
+        <v-list-item v-if="group.loading && getServiceFolders(group.service).length === 0" disabled class="folder-status-item">
+          <template v-slot:prepend>
+            <v-progress-circular indeterminate size="18" width="2" color="primary" />
+          </template>
+          <v-list-item-title>Loading folders</v-list-item-title>
+        </v-list-item>
+
+        <v-list-item
+          v-else-if="group.error && getServiceFolders(group.service).length === 0"
+          disabled
+          class="folder-status-item"
+        >
+          <template v-slot:prepend>
+            <v-icon icon="mdi-alert-circle-outline" color="error" />
+          </template>
+          <v-list-item-title>Folders unavailable</v-list-item-title>
+          <v-list-item-subtitle>{{ group.error }}</v-list-item-subtitle>
+        </v-list-item>
+
+        <v-list-item
+          v-else-if="group.loaded && getServiceFolders(group.service).length === 0"
+          disabled
+          class="folder-status-item"
+        >
+          <template v-slot:prepend>
+            <v-icon icon="mdi-folder-off-outline" />
+          </template>
+          <v-list-item-title>No folders found</v-list-item-title>
+        </v-list-item>
       </v-list-group>
 
       <!-- Single service - show folders directly -->
       <template v-else>
+        <v-list-item
+          class="account-header-item account-header-static"
+          :title="group.service.label || 'Mail Account'"
+          :subtitle="group.service.primaryAddress || undefined"
+        >
+          <template v-slot:prepend>
+            <v-icon icon="mdi-email-outline" />
+          </template>
+
+          <template v-slot:append>
+            <v-btn
+              icon="mdi-folder-plus"
+              variant="text"
+              size="small"
+              density="compact"
+              @click.stop="emit('createFolder', group.service, null)"
+            >
+              <v-icon>mdi-folder-plus</v-icon>
+              <v-tooltip activator="parent" location="bottom">New Folder</v-tooltip>
+            </v-btn>
+          </template>
+        </v-list-item>
+
         <!-- Header with New Folder button -->
         <v-list-subheader class="d-flex align-center">
           <span class="flex-grow-1">FOLDERS</span>
@@ -89,15 +147,45 @@ const emit = defineEmits<{
         </v-list-subheader>
         
         <FolderTreeNode
-          v-for="node in group.folderTree"
+          v-for="folder in getRootFolders(group.service)"
-          :key="`${node.folder.provider}-${node.folder.service}-${node.folder.identifier}`"
+          :key="`${folder.provider}-${folder.service}-${folder.identifier}`"
-          :node="node"
+          :folder="folder"
           :service="group.service"
           :selected-folder="selectedFolder"
           @select="emit('select', $event)"
           @create-subfolder="(service, parentFolder) => emit('createFolder', service, parentFolder)"
           @edit-folder="(service, folder) => emit('editFolder', service, folder)"
         />
+
+        <v-list-item v-if="group.loading && getServiceFolders(group.service).length === 0" disabled class="folder-status-item">
+          <template v-slot:prepend>
+            <v-progress-circular indeterminate size="18" width="2" color="primary" />
+          </template>
+          <v-list-item-title>Loading folders</v-list-item-title>
+        </v-list-item>
+
+        <v-list-item
+          v-else-if="group.error && getServiceFolders(group.service).length === 0"
+          disabled
+          class="folder-status-item"
+        >
+          <template v-slot:prepend>
+            <v-icon icon="mdi-alert-circle-outline" color="error" />
+          </template>
+          <v-list-item-title>Folders unavailable</v-list-item-title>
+          <v-list-item-subtitle>{{ group.error }}</v-list-item-subtitle>
+        </v-list-item>
+
+        <v-list-item
+          v-else-if="group.loaded && getServiceFolders(group.service).length === 0"
+          disabled
+          class="folder-status-item"
+        >
+          <template v-slot:prepend>
+            <v-icon icon="mdi-folder-off-outline" />
+          </template>
+          <v-list-item-title>No folders found</v-list-item-title>
+        </v-list-item>
       </template>
     </template>
   </div>
@@ -114,8 +202,16 @@ const emit = defineEmits<{
   border-radius: 6px;
 }
 
+.account-header-static {
+  margin-bottom: 4px;
+}
+
 .account-header-item :deep(.v-list-item__prepend) {
   padding-inline-start: 4px;
   margin-inline-end: 2px;
 }
+
+.folder-status-item {
+  padding-inline-start: 16px;
+}
 </style>

src/components/RenameFolderDialog.vue

@@ -3,11 +3,11 @@ import { ref, computed, watch } from 'vue'
 import { useCollectionsStore } from '@MailManager/stores/collectionsStore'
 import { CollectionPropertiesObject } from '@MailManager/models/collection'
 import type { CollectionObject } from '@MailManager/models/collection'
-import type { ServiceInterface } from '@MailManager/types/service'
+import type { ServiceObject } from '@MailManager/models'
 
 interface Props {
   modelValue: boolean
-  service: ServiceInterface
+  service: ServiceObject
   folder: CollectionObject
   allFolders?: CollectionObject[]
 }

src/pages/MailPage.vue

@@ -11,6 +11,7 @@ import MessageComposer from '@/components/MessageComposer.vue'
 import SettingsDialog from '@/components/settings/SettingsDialog.vue'
 import type { EntityInterface } from '@MailManager/types/entity'
 import type { MessageInterface } from '@MailManager/types/message'
+import type { CollectionObject } from '@MailManager/models'
 
 // Vuetify display for responsive behavior
 const display = useDisplay()
@@ -22,7 +23,7 @@ const isMailManagerAvailable = computed(() => {
   return moduleStore.has('mail_manager') || moduleStore.has('MailManager')
 })
 
-// Mail store — single source of truth for all mail UI state
+// Mail module store
 const mailStore = useMailStore()
 
 // storeToRefs preserves reactivity for state and computed properties
@@ -34,9 +35,6 @@ const {
   selectedMessage,
   composeMode,
   composeReplyTo,
-  snackbarVisible,
-  snackbarMessage,
-  snackbarColor,
   currentMessages,
 } = storeToRefs(mailStore)
 
@@ -50,31 +48,25 @@ onMounted(async () => {
 })
 
 // Handlers — thin wrappers that delegate to the store
-const handleFolderSelect = (folder: Parameters<typeof mailStore.selectFolder>[0]) =>
+const handleFolderSelect = (folder: CollectionObject) => mailStore.selectFolder(folder)
-  mailStore.selectFolder(folder)
 
-const handleMessageSelect = (message: EntityInterface<MessageInterface>) =>
+const handleMessageSelect = (message: EntityInterface<MessageInterface>) => mailStore.selectMessage(message, isMobile.value)
-  mailStore.selectMessage(message, isMobile.value)
 
-const handleCompose = (replyTo?: EntityInterface<MessageInterface>) =>
+const handleCompose = (replyTo?: EntityInterface<MessageInterface>) => mailStore.openCompose(replyTo)
-  mailStore.openCompose(replyTo)
 
 const handleComposeClose = () => mailStore.closeCompose()
 
 const handleComposeSent = () => mailStore.afterSent()
 
-const handleReply = (message: EntityInterface<MessageInterface>) =>
+const handleReply = (message: EntityInterface<MessageInterface>) => mailStore.openCompose(message)
-  mailStore.openCompose(message)
 
-const handleDelete = (message: EntityInterface<MessageInterface>) =>
+const handleDelete = (message: EntityInterface<MessageInterface>) => mailStore.deleteMessage(message)
-  mailStore.deleteMessage(message)
 
 const toggleSidebar = () => mailStore.toggleSidebar()
 
 const handleSettingsOpen = () => mailStore.openSettings()
 
-const handleFolderCreated = (folder: Parameters<typeof mailStore.onFolderCreated>[0]) =>
+const handleFolderCreated = (folder: CollectionObject) => mailStore.notify(`Folder "${folder.properties.label}" created`, 'success')
-  mailStore.onFolderCreated(folder)
 </script>
 
 <template>
@@ -124,17 +116,17 @@ const handleFolderCreated = (folder: Parameters<typeof mailStore.onFolderCreated
       <v-btn
         icon="mdi-refresh"
         @click="mailSync.sync()"
-        :loading="mailSync.isRunning.value && entitiesStore.transceiving"
+        :loading="mailSync.isRunning && entitiesStore.transceiving"
         variant="text"
       >
         <v-icon>mdi-refresh</v-icon>
         <v-tooltip activator="parent" location="bottom">
-          Refresh {{ mailSync.lastSync.value ? `(Last: ${new Date(mailSync.lastSync.value).toLocaleTimeString()})` : '' }}
+          Refresh {{ mailSync.lastSync ? `(Last: ${new Date(mailSync.lastSync).toLocaleTimeString()})` : '' }}
         </v-tooltip>
       </v-btn>
       
       <v-icon 
-        v-if="mailSync.isRunning.value" 
+        v-if="mailSync.isRunning" 
         color="success" 
         size="small"
         class="ml-2"
@@ -211,24 +203,6 @@ const handleFolderCreated = (folder: Parameters<typeof mailStore.onFolderCreated
 
     <!-- Settings Dialog -->
     <SettingsDialog v-model="settingsDialogVisible" />
-    
-    <!-- Success Snackbar -->
-    <v-snackbar
-      v-model="snackbarVisible"
-      :color="snackbarColor"
-      :timeout="3000"
-      location="bottom right"
-    >
-      {{ snackbarMessage }}
-      <template v-slot:actions>
-        <v-btn
-          variant="text"
-          @click="snackbarVisible = false"
-        >
-          Close
-        </v-btn>
-      </template>
-    </v-snackbar>
   </div>
 </template>
 

src/stores/mailStore.ts

@@ -4,52 +4,56 @@ import { useCollectionsStore } from '@MailManager/stores/collectionsStore'
 import { useEntitiesStore } from '@MailManager/stores/entitiesStore'
 import { useServicesStore } from '@MailManager/stores/servicesStore'
 import { useMailSync } from '@MailManager/composables/useMailSync'
+import { useSnackbar } from '@KTXC'
 import type { CollectionObject } from '@MailManager/models/collection'
 import type { EntityInterface } from '@MailManager/types/entity'
 import type { MessageInterface } from '@MailManager/types/message'
+import type { ServiceObject } from '@MailManager/models'
 
 export const useMailStore = defineStore('mailStore', () => {
   const collectionsStore = useCollectionsStore()
   const entitiesStore = useEntitiesStore()
   const servicesStore = useServicesStore()
+  const { showSnackbar } = useSnackbar()
 
   // Background mail sync
-  const mailSync = useMailSync({
+  const mailSyncController = useMailSync({
     interval: 30000,
     autoStart: false,
     fetchDetails: true,
   })
+  const mailSync = {
+    isRunning: mailSyncController.isRunning,
+    lastSync: mailSyncController.lastSync,
+    error: mailSyncController.error,
+    sync: mailSyncController.sync,
+    start: mailSyncController.start,
+    stop: mailSyncController.stop,
+    restart: mailSyncController.restart,
+  }
 
-  // ── UI State ──────────────────────────────────────────────────────────────
+  // ── General State ─────────────────-───────────────────────────────────────
-
   const sidebarVisible = ref(true)
   const settingsDialogVisible = ref(false)
   const loading = ref(false)
+  const serviceFolderLoadingState = ref<Record<string, boolean>>({})
+  const serviceFolderLoadedState = ref<Record<string, boolean>>({})
+  const serviceFolderErrorState = ref<Record<string, string | null>>({})
 
   // ── Selection State ───────────────────────────────────────────────────────
-
   const selectedFolder = shallowRef<CollectionObject | null>(null)
   const selectedMessage = shallowRef<EntityInterface<MessageInterface> | null>(null)
 
   // ── Compose State ─────────────────────────────────────────────────────────
-
   const composeMode = ref(false)
   const composeReplyTo = shallowRef<EntityInterface<MessageInterface> | null>(null)
 
-  // ── Notification State ────────────────────────────────────────────────────
-
-  const snackbarVisible = ref(false)
-  const snackbarMessage = ref('')
-  const snackbarColor = ref<'success' | 'error' | 'info' | 'warning'>('success')
-
   // ── Computed ──────────────────────────────────────────────────────────────
-
   const currentMessages = computed(() => {
     if (!selectedFolder.value) return []
 
     const folder = selectedFolder.value
 
-    // Access entitiesStore.entities (reactive computed array) so Vue tracks it
     return entitiesStore.entities.filter(e =>
       e.provider === folder.provider &&
       String(e.service) === String(folder.service) &&
@@ -57,14 +61,109 @@ export const useMailStore = defineStore('mailStore', () => {
     )
   })
 
+  // ── Initialization ────────────────────────────────────────────────────────
+
+  async function initialize() {
+    loading.value = true
+    try {
+      await servicesStore.list()
+
+      const services = [...servicesStore.services]
+      services.forEach(service => {
+        void loadFoldersForService(service,{ selectInbox: true })
+      })
+    } catch (error) {
+      console.error('[Mail] Failed to initialize:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function loadFoldersForService(
+    service: ServiceObject,
+    options: { selectInbox?: boolean } = {},
+  ) {
+    
+    if (service.identifier === null) {
+      return
+    }
+    
+    _setServiceFolderLoading(service.provider, service.identifier, true)
+    _setServiceFolderError(service.provider, service.identifier, null)
+
+    try {
+      // retrieve folders for service
+      const collections = await collectionsStore.list({
+        [service.provider]: {
+          [String(service.identifier)]: true,
+        },
+      })
+
+      _setServiceFolderLoaded(service.provider, service.identifier, true)
+
+      if (options.selectInbox && !selectedFolder.value) {
+        const inbox = Object.values(collections).find(
+          folder =>
+            folder.provider === service.provider &&
+            String(folder.service) === String(service.identifier) &&
+            (folder.properties.role === 'inbox' ||
+              String(folder.identifier).toLowerCase() === 'inbox'),
+        )
+
+        if (inbox) {
+          await selectFolder(inbox)
+        }
+      }
+
+      _updateSyncSources()
+      return collections
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to load folders'
+      _setServiceFolderError(service.provider, service.identifier, message)
+      console.error(
+        `[Mail] Failed to load folders for ${service.provider}:${String(service.identifier)}:`,
+        error,
+      )
+      _updateSyncSources()
+      return {}
+    } finally {
+      _setServiceFolderLoading(service.provider, service.identifier, false)
+    }
+  }
+
   // ── Sync Helpers ──────────────────────────────────────────────────────────
 
+  function _serviceKey(provider: string, service: string | number) {
+    return `${provider}:${String(service)}`
+  }
+
+  function _setServiceFolderLoading(provider: string, service: string | number, loadingState: boolean) {
+    serviceFolderLoadingState.value = {
+      ...serviceFolderLoadingState.value,
+      [_serviceKey(provider, service)]: loadingState,
+    }
+  }
+
+  function _setServiceFolderLoaded(provider: string, service: string | number, loaded: boolean) {
+    serviceFolderLoadedState.value = {
+      ...serviceFolderLoadedState.value,
+      [_serviceKey(provider, service)]: loaded,
+    }
+  }
+
+  function _setServiceFolderError(provider: string, service: string | number, error: string | null) {
+    serviceFolderErrorState.value = {
+      ...serviceFolderErrorState.value,
+      [_serviceKey(provider, service)]: error,
+    }
+  }
+
   function _updateSyncSources() {
-    mailSync.clearSources()
+    mailSyncController.clearSources()
 
     // Track the currently selected folder
     if (selectedFolder.value) {
-      mailSync.addSource({
+      mailSyncController.addSource({
         provider: selectedFolder.value.provider,
         service: selectedFolder.value.service,
         collections: [selectedFolder.value.identifier],
@@ -73,15 +172,15 @@ export const useMailStore = defineStore('mailStore', () => {
 
     // Always track inboxes for each account (for new-mail notifications)
     servicesStore.services.forEach(service => {
-      const inboxes = collectionsStore.collections.filter(
+      const inboxes = collectionsStore.collectionsForService(service.provider, service.identifier).filter(
         c =>
-          c.service === service.identifier &&
+          String(c.service) === String(service.identifier) &&
           (c.properties.role === 'inbox' ||
             String(c.identifier).toLowerCase() === 'inbox'),
       )
 
       if (inboxes.length > 0) {
-        mailSync.addSource({
+        mailSyncController.addSource({
           provider: service.provider,
           service: service.identifier as string | number,
           collections: inboxes.map(inbox => inbox.identifier),
@@ -89,11 +188,23 @@ export const useMailStore = defineStore('mailStore', () => {
       }
     })
 
-    if (mailSync.sources.value.length > 0 && !mailSync.isRunning.value) {
+    if (mailSyncController.sources.value.length > 0 && !mailSyncController.isRunning.value) {
-      mailSync.start()
+      mailSyncController.start()
     }
   }
 
+  function isServiceFolderLoading(provider: string, service: string | number) {
+    return serviceFolderLoadingState.value[_serviceKey(provider, service)] === true
+  }
+
+  function hasServiceFoldersLoaded(provider: string, service: string | number) {
+    return serviceFolderLoadedState.value[_serviceKey(provider, service)] === true
+  }
+
+  function getServiceFolderError(provider: string, service: string | number) {
+    return serviceFolderErrorState.value[_serviceKey(provider, service)] ?? null
+  }
+
   // ── Actions ───────────────────────────────────────────────────────────────
 
   async function selectFolder(folder: CollectionObject) {
@@ -159,38 +270,8 @@ export const useMailStore = defineStore('mailStore', () => {
     settingsDialogVisible.value = true
   }
 
-  function notify(message: string, color: typeof snackbarColor.value = 'success') {
+  function notify(message: string, color: 'success' | 'error' | 'info' | 'warning' = 'success') {
-    snackbarMessage.value = message
+    showSnackbar({ message, color })
-    snackbarColor.value = color
-    snackbarVisible.value = true
-  }
-
-  async function onFolderCreated(folder: CollectionObject) {
-    notify(`Folder "${folder.properties.label}" created successfully`)
-    // Reload collections so the sidebar reflects the new folder
-    await collectionsStore.list()
-  }
-
-  // ── Initialization ────────────────────────────────────────────────────────
-
-  async function initialize() {
-    loading.value = true
-    try {
-      await servicesStore.list()
-      await collectionsStore.list()
-
-      // Select inbox by default
-      const inbox = collectionsStore.collections.find(c => c.properties.role === 'inbox')
-      if (inbox) {
-        await selectFolder(inbox)
-      }
-
-      mailSync.start()
-    } catch (error) {
-      console.error('[Mail] Failed to initialize:', error)
-    } finally {
-      loading.value = false
-    }
   }
 
   // ── Exports ───────────────────────────────────────────────────────────────
@@ -210,9 +291,9 @@ export const useMailStore = defineStore('mailStore', () => {
     selectedMessage,
     composeMode,
     composeReplyTo,
-    snackbarVisible,
+    serviceFolderLoadingState,
-    snackbarMessage,
+    serviceFolderLoadedState,
-    snackbarColor,
+    serviceFolderErrorState,
 
     // Computed
     currentMessages,
@@ -227,7 +308,10 @@ export const useMailStore = defineStore('mailStore', () => {
     toggleSidebar,
     openSettings,
     notify,
-    onFolderCreated,
+    isServiceFolderLoading,
+    hasServiceFoldersLoaded,
+    getServiceFolderError,
+    loadFoldersForService,
     initialize,
   }
 })

tsconfig.app.json

@@ -1,12 +1,12 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["src/**/*", "src/**/*.vue"],
+  "include": ["src/**/*", "src/**/*.vue", "../../core/src/**/*.ts"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"],
+      "@KTXC": ["../../core/src/shared/index.ts"],
       "@KTXC/*": ["../../core/src/*"],
       "@MailManager/*": ["../mail_manager/src/*"]
     }

tsconfig.json

@@ -1,13 +1,7 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "files": [],
-  "include": ["src/**/*", "src/**/*.vue"],
+  "references": [
-  "exclude": ["src/**/__tests__/*"],
+    { "path": "./tsconfig.app.json" },
-  "compilerOptions": {
+    { "path": "./tsconfig.node.json" }
-    "composite": true,
+  ]
-    "paths": {
-      "@/*": ["./src/*"],
-      "@KTXC/*": ["../../core/src/*"],
-      "@MailManager/*": ["../mail_manager/src/*"]
-    }
-  }
 }

tsconfig.node.json

@@ -1,10 +1,22 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*"],
   "compilerOptions": {
-    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
     "module": "ESNext",
-    "moduleResolution": "Bundler",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
     "types": ["node"]
-  }
+  },
+  "include": ["vite.config.ts"]
 }