Initial commit

.gitignore

@@ -0,0 +1,29 @@
+# Frontend development
+node_modules/
+*.local
+.env.local
+.env.*.local
+.cache/
+.vite/
+.temp/
+.tmp/
+
+# Frontend build
+/static/
+
+# Backend development
+/lib/vendor/
+coverage/
+phpunit.xml.cache
+.phpunit.result.cache
+.php-cs-fixer.cache
+.phpstan.cache
+.phpactor/
+
+# Editors
+.DS_Store
+.vscode/
+.idea/
+
+# Logs
+*.log

composer.json

@@ -0,0 +1,14 @@
+{
+    "name": "ktrix/mail",
+    "description": "Mail client module",
+    "type": "library",
+    "license": "proprietary",
+    "autoload": {
+        "psr-4": {
+            "KTXM\\Mail\\": "lib/"
+        }
+    },
+    "require": {
+        "php": ">=8.2"
+    }
+}

lib/Module.php

@@ -0,0 +1,80 @@
+<?php
+
+namespace KTXM\Mail;
+
+use KTXF\Module\ModuleBrowserInterface;
+use KTXF\Module\ModuleInstanceAbstract;
+
+/**
+ * Mail Module - Email Client
+ */
+class Module extends ModuleInstanceAbstract implements ModuleBrowserInterface
+{
+
+    public function __construct()
+    { }
+
+    public function handle(): string
+    {
+        return 'mail';
+    }
+
+    public function label(): string
+    {
+        return 'Mail';
+    }
+
+    public function author(): string
+    {
+        return 'Ktrix';
+    }
+
+    public function description(): string
+    {
+        return 'Email client interface - provides a 3-column responsive mail client for reading, composing, and managing email messages';
+    }
+
+    public function version(): string
+    {
+        return '0.0.1';
+    }
+
+    public function permissions(): array
+    {
+        return [
+            'mail' => [
+                'label' => 'Access Mail',
+                'description' => 'View and access the mail client',
+                'group' => 'Mail'
+            ],
+            'mail.compose' => [
+                'label' => 'Compose Mail',
+                'description' => 'Compose and send email messages',
+                'group' => 'Mail'
+            ],
+            'mail.delete' => [
+                'label' => 'Delete Mail',
+                'description' => 'Delete email messages',
+                'group' => 'Mail'
+            ],
+            'mail.*' => [
+                'label' => 'Full Mail Access',
+                'description' => 'All mail operations',
+                'group' => 'Mail'
+            ],
+        ];
+    }
+
+    public function registerBI(): array
+    {
+        return [
+            'handle' => $this->handle(),
+            'namespace' => 'Mail',
+            'version' => $this->version(),
+            'label' => $this->label(),
+            'author' => $this->author(),
+            'description' => $this->description(),
+            'boot' => 'static/module.mjs',
+        ];
+    }
+}

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@ktrix/mail",
+  "description": "Ktrix Mail Module",
+  "version": "0.0.1",
+  "private": true,
+  "license": "AGPL-3.0-or-later",
+  "author": "Sebastian Krupinski",
+  "type": "module",
+  "scripts": {
+    "build": "vite build --mode production --config vite.config.ts",
+    "dev": "vite build --mode development --config vite.config.ts",
+    "watch": "vite build --mode development --watch --config vite.config.ts",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@tiptap/vue-3": "^2.1.13",
+    "@tiptap/starter-kit": "^2.1.13",
+    "@tiptap/extension-link": "^2.1.13",
+    "@tiptap/extension-placeholder": "^2.1.13",
+    "@tiptap/extension-text-align": "^2.1.13",
+    "@tiptap/extension-underline": "^2.1.13",
+    "vue": "^3.4.0",
+    "vue-router": "^4.2.5",
+    "pinia": "^2.1.7",
+    "vuetify": "^3.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vue/tsconfig": "^0.5.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vue-tsc": "^1.8.27"
+  }
+}

src/components/CreateFolderDialog.vue

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+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'
+
+// Props
+interface Props {
+  modelValue: boolean
+  service: ServiceInterface
+  parentFolder?: CollectionObject | null
+  allFolders?: CollectionObject[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  parentFolder: null,
+  allFolders: () => []
+})
+
+// Emits
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'created': [folder: CollectionObject]
+}>()
+
+// Store
+const collectionsStore = useCollectionsStore()
+
+// Form state
+const folderName = ref('')
+const loading = ref(false)
+const errorMessage = ref('')
+const validationErrors = ref<string[]>([])
+
+// Computed
+const dialogValue = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit('update:modelValue', value)
+})
+
+const parentFolderLabel = computed(() => {
+  if (!props.parentFolder) return 'Root'
+  return props.parentFolder.properties.label
+})
+
+const isValid = computed(() => {
+  return folderName.value.trim().length > 0 && validationErrors.value.length === 0
+})
+
+// Validation functions
+const validateFolderName = (name: string): string[] => {
+  const errors: string[] = []
+  
+  if (!name || name.trim().length === 0) {
+    errors.push('Folder name is required')
+    return errors
+  }
+  
+  if (name.length > 255) {
+    errors.push('Folder name too long (max 255 characters)')
+  }
+  
+  // No special characters that might cause issues
+  if (/[<>:"|?*\x00-\x1F]/.test(name)) {
+    errors.push('Folder name contains invalid characters')
+  }
+  
+  // Provider-specific rules
+  if (props.service.provider === 'imap' && /[\/\\]/.test(name)) {
+    errors.push('IMAP folder names cannot contain / or \\')
+  }
+  
+  // Leading/trailing spaces
+  if (name !== name.trim()) {
+    errors.push('Folder name cannot have leading or trailing spaces')
+  }
+  
+  return errors
+}
+
+const checkDuplicateName = (name: string): boolean => {
+  const parentId = props.parentFolder?.identifier ?? null
+  
+  return props.allFolders.some(f => 
+    f.properties.label === name &&
+    String(f.collection) === String(parentId) &&
+    String(f.service) === String(props.service.identifier)
+  )
+}
+
+// Watch folder name for validation
+watch(folderName, (newName) => {
+  errorMessage.value = ''
+  validationErrors.value = validateFolderName(newName)
+  
+  // Check for duplicates only if no other validation errors
+  if (validationErrors.value.length === 0 && newName.trim().length > 0) {
+    if (checkDuplicateName(newName)) {
+      validationErrors.value.push('A folder with this name already exists in this location')
+    }
+  }
+})
+
+// Reset form when dialog opens/closes
+watch(dialogValue, (isOpen) => {
+  if (isOpen) {
+    resetForm()
+  }
+})
+
+const resetForm = () => {
+  folderName.value = ''
+  errorMessage.value = ''
+  validationErrors.value = []
+  loading.value = false
+}
+
+const handleCreate = async () => {
+  // Final validation
+  const errors = validateFolderName(folderName.value)
+  if (errors.length > 0) {
+    validationErrors.value = errors
+    return
+  }
+  
+  if (checkDuplicateName(folderName.value)) {
+    validationErrors.value = ['A folder with this name already exists in this location']
+    return
+  }
+  
+  loading.value = true
+  errorMessage.value = ''
+  
+  try {
+    // Create properties object
+    const properties = new CollectionPropertiesObject()
+    properties.label = folderName.value.trim()
+    properties.rank = 0
+    properties.subscribed = true
+    
+    // Create the collection
+    const newFolder = await collectionsStore.createCollection({
+      provider: props.service.provider,
+      service: props.service.identifier,
+      collection: props.parentFolder?.identifier ?? null,
+      properties: properties
+    })
+    
+    // Success!
+    emit('created', newFolder)
+    dialogValue.value = false
+    resetForm()
+    
+  } catch (error: any) {
+    console.error('[CreateFolderDialog] Failed to create folder:', error)
+    errorMessage.value = error.message || 'Failed to create folder. Please try again.'
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleCancel = () => {
+  dialogValue.value = false
+  resetForm()
+}
+</script>
+
+<template>
+  <v-dialog
+    v-model="dialogValue"
+    max-width="500"
+    persistent
+  >
+    <v-card>
+      <v-card-title class="text-h5">
+        Create New Folder
+      </v-card-title>
+      
+      <v-card-text>
+        <!-- Service info -->
+        <div class="mb-4">
+          <div class="text-caption text-medium-emphasis">Account</div>
+          <div class="text-body-2">
+            {{ service.label || service.primaryAddress || 'Mail Account' }}
+          </div>
+        </div>
+        
+        <!-- Parent folder info -->
+        <div class="mb-4">
+          <div class="text-caption text-medium-emphasis">Location</div>
+          <div class="text-body-2">
+            {{ parentFolderLabel }}
+          </div>
+        </div>
+        
+        <!-- Folder name input -->
+        <v-text-field
+          v-model="folderName"
+          label="Folder Name"
+          placeholder="Enter folder name"
+          variant="outlined"
+          autofocus
+          :error-messages="validationErrors"
+          :disabled="loading"
+          @keyup.enter="isValid && handleCreate()"
+        />
+        
+        <!-- Error message -->
+        <v-alert
+          v-if="errorMessage"
+          type="error"
+          variant="tonal"
+          density="compact"
+          class="mt-2"
+        >
+          {{ errorMessage }}
+        </v-alert>
+      </v-card-text>
+      
+      <v-card-actions>
+        <v-spacer />
+        
+        <v-btn
+          variant="text"
+          :disabled="loading"
+          @click="handleCancel"
+        >
+          Cancel
+        </v-btn>
+        
+        <v-btn
+          color="primary"
+          variant="elevated"
+          :loading="loading"
+          :disabled="!isValid"
+          @click="handleCreate"
+        >
+          Create Folder
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+.text-caption {
+  font-size: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.0333em;
+}
+</style>

src/components/FolderPageView.vue

@@ -0,0 +1,340 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { CollectionObject } from '@MailManager/models/collection'
+import type { ServiceInterface } from '@MailManager/types/service'
+
+// Props
+interface Props {
+  selectedFolder?: CollectionObject | null
+  serviceGroups: Array<{
+    service: ServiceInterface
+    folders: CollectionObject[]
+  }>
+}
+
+const props = defineProps<Props>()
+
+// Emits
+const emit = defineEmits<{
+  select: [folder: CollectionObject]
+  createFolder: [service: ServiceInterface, parentFolder: CollectionObject | null]
+}>()
+
+// Page-based navigation state
+const currentPageLevel = ref<(string | number | null)[]>([null]) // Stack of parent IDs (null = root)
+
+// Get folders for current page level
+const getCurrentPageFolders = (folders: CollectionObject[]): CollectionObject[] => {
+  const currentParent = currentPageLevel.value[currentPageLevel.value.length - 1]
+  return folders.filter(f => {
+    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 => {
+  return allFolders.some(f => String(f.collection) === String(folder.identifier))
+}
+
+// Get icon for folder based on role
+const getFolderIcon = (folder: CollectionObject): string => {
+  switch (folder.properties.role) {
+    case 'inbox':
+      return 'mdi-inbox'
+    case 'sent':
+      return 'mdi-send'
+    case 'drafts':
+      return 'mdi-file-document'
+    case 'trash':
+      return 'mdi-delete'
+    case 'junk':
+      return 'mdi-alert-octagon'
+    case 'archive':
+      return 'mdi-archive'
+    case 'outbox':
+      return 'mdi-tray-arrow-up'
+    default:
+      return 'mdi-folder'
+  }
+}
+
+// Get color for folder based on role
+const getFolderColor = (folder: CollectionObject): string | undefined => {
+  switch (folder.properties.role) {
+    case 'inbox':
+      return 'primary'
+    case 'sent':
+      return 'success'
+    case 'drafts':
+      return 'warning'
+    case 'trash':
+      return 'error'
+    case 'junk':
+      return 'orange'
+    default:
+      return undefined
+  }
+}
+
+// Check if folder is selected
+const isSelected = (folder: CollectionObject): boolean => {
+  if (!props.selectedFolder) return false
+  return (
+    folder.provider === props.selectedFolder.provider &&
+    String(folder.service) === String(props.selectedFolder.service) &&
+    String(folder.identifier) === String(props.selectedFolder.identifier)
+  )
+}
+
+// Handle folder click - just select it
+const handleFolderClick = (folder: CollectionObject) => {
+  emit('select', folder)
+}
+
+// Navigate into a folder to show its children
+const handleNavigateInto = (folderId: string | number) => {
+  currentPageLevel.value.push(folderId)
+}
+
+// Navigate back in page-based view
+const navigateBack = () => {
+  if (currentPageLevel.value.length > 1) {
+    currentPageLevel.value.pop()
+  }
+}
+
+// Get breadcrumb label for current page
+const getCurrentBreadcrumb = (folders: CollectionObject[]): string => {
+  const currentParent = currentPageLevel.value[currentPageLevel.value.length - 1]
+  if (currentParent === null) return 'All Folders'
+  
+  const parentFolder = folders.find(f => String(f.identifier) === String(currentParent))
+  return parentFolder?.properties.label || 'Folders'
+}
+
+// Get current parent folder for dialog context
+const getCurrentParentFolder = (folders: CollectionObject[]): CollectionObject | null => {
+  const currentParent = currentPageLevel.value[currentPageLevel.value.length - 1]
+  if (currentParent === null) return null
+  
+  // Search through all folders in the array
+  const found = folders.find(f => String(f.identifier) === String(currentParent))
+  return found || null
+}
+
+// Computed helper to get all folders from all service groups
+const allFolders = computed(() => props.serviceGroups.flatMap(g => g.folders))
+</script>
+
+<template>
+  <div>
+    <template v-for="group in serviceGroups" :key="`${group.service.provider}-${group.service.identifier}`">
+      <!-- Service account group -->
+      <v-list-group v-if="serviceGroups.length > 1">
+        <template v-slot:activator="{ props: activatorProps }">
+          <v-list-item
+            v-bind="activatorProps"
+            :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(allFolders))"
+              >
+                <v-icon>mdi-folder-plus</v-icon>
+                <v-tooltip activator="parent" location="bottom">New Folder</v-tooltip>
+              </v-btn>
+            </template>
+          </v-list-item>
+        </template>
+
+        <!-- Back button if not at root -->
+        <v-list-item
+          v-if="currentPageLevel.length > 1"
+          @click="navigateBack"
+          prepend-icon="mdi-arrow-left"
+          title="Back"
+        />
+
+        <!-- Breadcrumb with New Folder button -->
+        <v-list-subheader v-if="currentPageLevel.length > 1" class="d-flex align-center">
+          <span class="flex-grow-1">{{ getCurrentBreadcrumb(group.folders) }}</span>
+          <v-btn
+            icon="mdi-folder-plus"
+            variant="text"
+            size="x-small"
+            @click="emit('createFolder', group.service, getCurrentParentFolder(allFolders))"
+          >
+            <v-icon size="small">mdi-folder-plus</v-icon>
+            <v-tooltip activator="parent" location="bottom">New Subfolder</v-tooltip>
+          </v-btn>
+        </v-list-subheader>
+
+        <!-- Current level folders -->
+        <v-list-item
+          v-for="folder in getCurrentPageFolders(group.folders)"
+          :key="`${folder.provider}-${folder.service}-${folder.identifier}`"
+          :title="folder.properties.label"
+          :active="isSelected(folder)"
+          @click="handleFolderClick(folder)"
+        >
+          <template v-slot:prepend>
+            <v-icon 
+              :icon="getFolderIcon(folder)" 
+              :color="getFolderColor(folder)"
+            />
+          </template>
+          
+          <template v-slot:append>
+            <!-- Unread badge -->
+            <v-badge
+              v-if="folder.properties.unread && folder.properties.unread > 0"
+              :content="folder.properties.unread"
+              color="primary"
+              inline
+              class="mr-2"
+            />
+            
+            <!-- Chevron for folders with children -->
+            <v-btn
+              v-if="hasChildren(folder, group.folders)"
+              icon="mdi-chevron-right"
+              variant="text"
+              size="small"
+              density="compact"
+              @click.stop="handleNavigateInto(folder.identifier)"
+            />
+            
+            <!-- Menu for folder actions -->
+            <v-menu v-else>
+              <template v-slot:activator="{ props: menuProps }">
+                <v-btn
+                  v-bind="menuProps"
+                  icon="mdi-dots-vertical"
+                  variant="text"
+                  size="small"
+                  density="compact"
+                  @click.stop
+                />
+              </template>
+              
+              <v-list density="compact">
+                <v-list-item
+                  prepend-icon="mdi-folder-plus"
+                  @click="emit('createFolder', group.service, folder)"
+                >
+                  <v-list-item-title>New Subfolder</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </template>
+        </v-list-item>
+      </v-list-group>
+
+      <!-- Single service - show folders directly -->
+      <template v-else>
+        <!-- Header with New Folder button -->
+        <v-list-subheader class="d-flex align-center">
+          <span class="flex-grow-1">
+            {{ currentPageLevel.length > 1 ? getCurrentBreadcrumb(group.folders) : 'FOLDERS' }}
+          </span>
+          <v-btn
+            icon="mdi-folder-plus"
+            variant="text"
+            size="x-small"
+            @click="emit('createFolder', group.service, getCurrentParentFolder(allFolders))"
+          >
+            <v-icon size="small">mdi-folder-plus</v-icon>
+            <v-tooltip activator="parent" location="bottom">
+              {{ currentPageLevel.length > 1 ? 'New Subfolder' : 'New Folder' }}
+            </v-tooltip>
+          </v-btn>
+        </v-list-subheader>
+        
+        <!-- Back button if not at root -->
+        <v-list-item
+          v-if="currentPageLevel.length > 1"
+          @click="navigateBack"
+          prepend-icon="mdi-arrow-left"
+          title="Back"
+        />
+
+        <!-- Current level folders -->
+        <v-list-item
+          v-for="folder in getCurrentPageFolders(group.folders)"
+          :key="`${folder.provider}-${folder.service}-${folder.identifier}`"
+          :title="folder.properties.label"
+          :active="isSelected(folder)"
+          @click="handleFolderClick(folder)"
+        >
+          <template v-slot:prepend>
+            <v-icon 
+              :icon="getFolderIcon(folder)" 
+              :color="getFolderColor(folder)"
+            />
+          </template>
+          
+          <template v-slot:append>
+            <!-- Unread badge -->
+            <v-badge
+              v-if="folder.properties.unread && folder.properties.unread > 0"
+              :content="folder.properties.unread"
+              color="primary"
+              inline
+              class="mr-2"
+            />
+            
+            <!-- Chevron for folders with children or Menu for actions -->
+            <v-btn
+              v-if="hasChildren(folder, group.folders)"
+              icon="mdi-chevron-right"
+              variant="text"
+              size="small"
+              density="compact"
+              @click.stop="handleNavigateInto(folder.identifier)"
+            />
+            
+            <v-menu v-else>
+              <template v-slot:activator="{ props: menuProps }">
+                <v-btn
+                  v-bind="menuProps"
+                  icon="mdi-dots-vertical"
+                  variant="text"
+                  size="small"
+                  density="compact"
+                  @click.stop
+                />
+              </template>
+              
+              <v-list density="compact">
+                <v-list-item
+                  prepend-icon="mdi-folder-plus"
+                  @click="emit('createFolder', group.service, folder)"
+                >
+                  <v-list-item-title>New Subfolder</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </template>
+        </v-list-item>
+      </template>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.v-list-item--active {
+  background-color: rgba(var(--v-theme-primary), 0.12);
+}
+</style>

src/components/FolderTree.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useCollectionsStore } from '@MailManager/stores/collectionsStore'
+import { useServicesStore } from '@MailManager/stores/servicesStore'
+import { useUser } from '@KTXC/composables/useUser'
+import FolderTreeView from './FolderTreeView.vue'
+import FolderPageView from './FolderPageView.vue'
+import CreateFolderDialog from './CreateFolderDialog.vue'
+import type { CollectionObject } from '@MailManager/models/collection'
+import type { ServiceInterface } from '@MailManager/types/service'
+
+type FolderViewMode = 'tree' | 'page'
+
+// Props
+interface Props {
+  selectedFolder?: CollectionObject | null
+}
+
+const props = defineProps<Props>()
+
+// Emits
+const emit = defineEmits<{
+  select: [folder: CollectionObject]
+  folderCreated: [folder: CollectionObject]
+}>()
+
+// Stores
+const collectionsStore = useCollectionsStore()
+const servicesStore = useServicesStore()
+
+// User settings
+const { settings } = useUser()
+
+// Folder view mode from user settings
+const folderViewMode = computed(() => {
+  const allSettings = settings.value?.all || {}
+  const mailSettings = allSettings.mail || {}
+  return (mailSettings.folderViewMode as FolderViewMode) || 'tree'
+})
+
+// Create folder dialog state
+const createDialogVisible = ref(false)
+const createDialogService = ref<ServiceInterface | null>(null)
+const createDialogParent = ref<CollectionObject | null>(null)
+
+// Handle create folder event from child components
+const handleCreateFolder = (service: ServiceInterface, parentFolder: CollectionObject | null = null) => {
+  createDialogService.value = service
+  createDialogParent.value = parentFolder
+  createDialogVisible.value = true
+}
+
+// Handle folder created
+const handleFolderCreated = (newFolder: CollectionObject) => {
+  emit('folderCreated', newFolder)
+  emit('select', newFolder)
+}
+
+// Computed: all folders for validation
+const allFolders = computed(() => 
+  serviceGroups.value.flatMap(g => g.folders)
+)
+
+// Folder hierarchy helper type
+interface FolderNode {
+  folder: CollectionObject
+  children: FolderNode[]
+}
+
+// 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[]
+  }> = []
+
+  servicesStore.services.forEach(service => {
+    const folders = collectionsStore.collectionList.filter(
+      c => c.provider === service.provider && String(c.service) === String(service.identifier)
+    )
+    
+    if (folders.length > 0) {
+      groups.push({ 
+        service, 
+        folders,
+        folderTree: buildFolderTree(folders)
+      })
+    }
+  })
+
+  return groups
+})
+</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="handleCreateFolder"
+    />
+
+    <!-- Page-based View -->
+    <FolderPageView
+      v-else
+      :selected-folder="selectedFolder"
+      :service-groups="serviceGroups"
+      @select="emit('select', $event)"
+      @create-folder="handleCreateFolder"
+    />
+
+    <!-- Empty state -->
+    <v-list-item v-if="serviceGroups.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>
+  
+  <!-- Create Folder Dialog -->
+  <CreateFolderDialog
+    v-if="createDialogService"
+    v-model="createDialogVisible"
+    :service="createDialogService"
+    :parent-folder="createDialogParent"
+    :all-folders="allFolders"
+    @created="handleFolderCreated"
+  />
+</template>
+
+<style scoped>
+.v-list-item--active {
+  background-color: rgba(var(--v-theme-primary), 0.12);
+}
+</style>

src/components/FolderTreeNode.vue

@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import type { CollectionObject } from '@MailManager/models/collection'
+import type { ServiceInterface } from '@MailManager/types/service'
+
+export interface FolderNode {
+  folder: CollectionObject
+  children: FolderNode[]
+}
+
+export interface Props {
+  node: FolderNode
+  service: ServiceInterface
+  selectedFolder?: CollectionObject | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  select: [folder: CollectionObject]
+  createSubfolder: [service: ServiceInterface, parentFolder: CollectionObject]
+}>()
+
+// Get icon for folder based on role
+const getFolderIcon = (folder: CollectionObject): string => {
+  switch (folder.properties.role) {
+    case 'inbox':
+      return 'mdi-inbox'
+    case 'sent':
+      return 'mdi-send'
+    case 'drafts':
+      return 'mdi-file-document'
+    case 'trash':
+      return 'mdi-delete'
+    case 'junk':
+      return 'mdi-alert-octagon'
+    case 'archive':
+      return 'mdi-archive'
+    case 'outbox':
+      return 'mdi-tray-arrow-up'
+    default:
+      return 'mdi-folder'
+  }
+}
+
+// Get color for folder based on role
+const getFolderColor = (folder: CollectionObject): string | undefined => {
+  switch (folder.properties.role) {
+    case 'inbox':
+      return 'primary'
+    case 'sent':
+      return 'success'
+    case 'drafts':
+      return 'warning'
+    case 'trash':
+      return 'error'
+    case 'junk':
+      return 'orange'
+    default:
+      return undefined
+  }
+}
+
+// Check if folder is selected
+const isSelected = (folder: CollectionObject): boolean => {
+  if (!props.selectedFolder) return false
+  return (
+    folder.provider === props.selectedFolder.provider &&
+    String(folder.service) === String(props.selectedFolder.service) &&
+    String(folder.identifier) === String(props.selectedFolder.identifier)
+  )
+}
+</script>
+
+<template>
+  <v-list-group v-if="node.children.length > 0" class="folder-tree-group">
+    <template v-slot:activator="{ props: activatorProps }">
+      <v-list-item
+        v-bind="activatorProps"
+        :title="node.folder.properties.label"
+        :active="isSelected(node.folder)"
+        @click.stop="emit('select', node.folder)"
+      >
+        <template v-slot:prepend>
+          <v-icon 
+            :icon="getFolderIcon(node.folder)" 
+            :color="getFolderColor(node.folder)"
+          />
+        </template>
+        
+        <template v-slot:append>
+          <v-badge
+            v-if="node.folder.properties.unread && node.folder.properties.unread > 0"
+            :content="node.folder.properties.unread"
+            color="primary"
+            inline
+            class="mr-2"
+          />
+          
+          <!-- Action menu -->
+          <v-menu>
+            <template v-slot:activator="{ props: menuProps }">
+              <v-btn
+                v-bind="menuProps"
+                icon="mdi-dots-vertical"
+                variant="text"
+                size="x-small"
+                density="compact"
+                @click.stop
+              >
+                <v-icon size="small">mdi-dots-vertical</v-icon>
+              </v-btn>
+            </template>
+            
+            <v-list density="compact">
+              <v-list-item
+                prepend-icon="mdi-folder-plus"
+                @click="emit('createSubfolder', service, node.folder)"
+              >
+                <v-list-item-title>New Subfolder</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </template>
+      </v-list-item>
+    </template>
+
+    <div class="folder-tree-children">
+      <FolderTreeNode
+        v-for="child in node.children"
+        :key="child.folder.identifier"
+        :node="child"
+        :service="service"
+        :selected-folder="selectedFolder"
+        @select="emit('select', $event)"
+        @create-subfolder="(service, parentFolder) => emit('createSubfolder', service, parentFolder)"
+      />
+    </div>
+  </v-list-group>
+
+  <v-list-item
+    v-else
+    :title="node.folder.properties.label"
+    :active="isSelected(node.folder)"
+    @click="emit('select', node.folder)"
+  >
+    <template v-slot:prepend>
+      <v-icon 
+        :icon="getFolderIcon(node.folder)" 
+        :color="getFolderColor(node.folder)"
+      />
+    </template>
+    
+    <template v-slot:append>
+      <v-badge
+        v-if="node.folder.properties.unread && node.folder.properties.unread > 0"
+        :content="node.folder.properties.unread"
+        color="primary"
+        inline
+        class="mr-2"
+      />
+      
+      <!-- Action menu -->
+      <v-menu>
+        <template v-slot:activator="{ props: menuProps }">
+          <v-btn
+            v-bind="menuProps"
+            icon="mdi-dots-vertical"
+            variant="text"
+            size="x-small"
+            density="compact"
+            @click.stop
+          >
+            <v-icon size="small">mdi-dots-vertical</v-icon>
+          </v-btn>
+        </template>
+        
+        <v-list density="compact">
+          <v-list-item
+            prepend-icon="mdi-folder-plus"
+            @click="emit('createSubfolder', service, node.folder)"
+          >
+            <v-list-item-title>New Subfolder</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </template>
+  </v-list-item>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'FolderTreeNode'
+}
+</script>
+
+<style scoped>
+.v-list-item--active {
+  background-color: rgba(var(--v-theme-primary), 0.12);
+}
+
+/* Remove indentation for the folder-tree-group itself */
+.folder-tree-group {
+  --indent-padding: 0 !important;
+}
+
+/* Reduce default indentation for nested items */
+.folder-tree-group :deep(.v-list-group__items) {
+  --indent-padding: 0;
+}
+
+/* Add visual indicator for nested items */
+.folder-tree-children {
+  position: relative;
+  padding-left: 12px;
+  border-left: 2px solid rgba(var(--v-border-color), 0.3);
+  margin-left: 8px;
+}
+
+/* Add connector line for nested items */
+.folder-tree-children::before {
+  content: '';
+  position: absolute;
+  left: -2px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: rgba(var(--v-border-color), 0.3);
+}
+</style>

src/components/FolderTreeView.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { CollectionObject } from '@MailManager/models/collection'
+import type { ServiceInterface } from '@MailManager/types/service'
+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
+    folders: CollectionObject[]
+    folderTree: FolderNode[]
+  }>
+}
+
+const props = defineProps<Props>()
+
+// Emits
+const emit = defineEmits<{
+  select: [folder: CollectionObject]
+  createFolder: [service: ServiceInterface, parentFolder: CollectionObject | null]
+}>()
+</script>
+
+<template>
+  <div>
+    <template v-for="group in serviceGroups" :key="`${group.service.provider}-${group.service.identifier}`">
+      <!-- Service account group -->
+      <v-list-group v-if="serviceGroups.length > 1" class="no-indent">
+        <template v-slot:activator="{ props: activatorProps }">
+          <v-list-item
+            v-bind="activatorProps"
+            :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>
+        </template>
+
+        <FolderTreeNode
+          v-for="node in group.folderTree"
+          :key="`${node.folder.provider}-${node.folder.service}-${node.folder.identifier}`"
+          :node="node"
+          :service="group.service"
+          :selected-folder="selectedFolder"
+          @select="emit('select', $event)"
+          @create-subfolder="(service, parentFolder) => emit('createFolder', service, parentFolder)"
+        />
+      </v-list-group>
+
+      <!-- Single service - show folders directly -->
+      <template v-else>
+        <!-- Header with New Folder button -->
+        <v-list-subheader class="d-flex align-center">
+          <span class="flex-grow-1">FOLDERS</span>
+          <v-btn
+            icon="mdi-folder-plus"
+            variant="text"
+            size="x-small"
+            @click="emit('createFolder', group.service, null)"
+          >
+            <v-icon size="small">mdi-folder-plus</v-icon>
+            <v-tooltip activator="parent" location="bottom">New Folder</v-tooltip>
+          </v-btn>
+        </v-list-subheader>
+        
+        <FolderTreeNode
+          v-for="node in group.folderTree"
+          :key="`${node.folder.provider}-${node.folder.service}-${node.folder.identifier}`"
+          :node="node"
+          :service="group.service"
+          :selected-folder="selectedFolder"
+          @select="emit('select', $event)"
+          @create-subfolder="(service, parentFolder) => emit('createFolder', service, parentFolder)"
+        />
+      </template>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.v-list-item--active {
+  background-color: rgba(var(--v-theme-primary), 0.12);
+}
+</style>

src/components/MessageComposer.vue

@@ -0,0 +1,521 @@
+<script setup lang="ts">
+import { ref, computed, watch, onBeforeUnmount } from 'vue'
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Link from '@tiptap/extension-link'
+import Underline from '@tiptap/extension-underline'
+import TextAlign from '@tiptap/extension-text-align'
+import Placeholder from '@tiptap/extension-placeholder'
+import { entityService } from '@MailManager/services'
+import type { EntityInterface } from '@MailManager/types/entity'
+import type { MessageInterface } from '@MailManager/types/message'
+import type { CollectionInterface } from '@MailManager/types/collection'
+import { MessageObject } from '@MailManager/models/message'
+import { EntityObject } from '@MailManager/models/entity'
+
+// Props
+interface Props {
+  replyTo?: EntityInterface<MessageInterface> | null
+  folder?: CollectionInterface | null
+}
+
+const props = defineProps<Props>()
+
+// Emits
+const emit = defineEmits<{
+  close: []
+  sent: []
+}>()
+
+// State
+const to = ref<string[]>([])
+const cc = ref<string[]>([])
+const bcc = ref<string[]>([])
+const subject = ref('')
+const showCc = ref(false)
+const showBcc = ref(false)
+const sending = ref(false)
+const saving = ref(false)
+const lastSaved = ref<Date | null>(null)
+const draftId = ref<string | null>(null)
+
+// Auto-save timer
+let autoSaveTimer: ReturnType<typeof setTimeout> | null = null
+
+// Initialize Tiptap editor
+const editor = useEditor({
+  extensions: [
+    StarterKit,
+    Link.configure({
+      openOnClick: false,
+    }),
+    Underline,
+    TextAlign.configure({
+      types: ['heading', 'paragraph'],
+    }),
+    Placeholder.configure({
+      placeholder: 'Write your message...',
+    }),
+  ],
+  content: '',
+  editorProps: {
+    attributes: {
+      class: 'tiptap-editor pa-4',
+    },
+  },
+})
+
+// Initialize from reply-to message
+if (props.replyTo) {
+  const replyMessage = new MessageObject(props.replyTo.properties)
+  
+  const fromEmail = replyMessage.from?.address
+  to.value = fromEmail ? [fromEmail] : []
+  
+  const originalSubject = replyMessage.subject || ''
+  subject.value = originalSubject.startsWith('Re:') 
+    ? originalSubject
+    : `Re: ${originalSubject}`
+  
+  // Add quoted reply - prefer HTML content, fallback to text
+  const originalBody = replyMessage.getHtmlContent() || replyMessage.getTextContent() || ''
+  const senderName = replyMessage.from?.label || replyMessage.from?.address || 'Unknown'
+  const quotedReply = `<p><br></p><p>On ${new Date(replyMessage.date || '').toLocaleString()}, ${senderName} wrote:</p><blockquote>${originalBody}</blockquote>`
+  editor.value?.commands.setContent(quotedReply)
+}
+
+// Computed
+const canSend = computed(() => {
+  return to.value.length > 0 && subject.value.trim().length > 0
+})
+
+const saveStatus = computed(() => {
+  if (saving.value) return 'Saving...'
+  if (lastSaved.value) {
+    const seconds = Math.floor((Date.now() - lastSaved.value.getTime()) / 1000)
+    if (seconds < 60) return 'Saved just now'
+    if (seconds < 3600) return `Saved ${Math.floor(seconds / 60)} min ago`
+    return `Saved at ${lastSaved.value.toLocaleTimeString()}`
+  }
+  return ''
+})
+
+// Auto-save function
+const saveDraft = async () => {
+  if (saving.value || sending.value) return
+  if (!props.folder) return
+  
+  // Don't save if completely empty
+  if (to.value.length === 0 && subject.value.trim().length === 0 && !editor.value?.getText().trim()) {
+    return
+  }
+  
+  saving.value = true
+  
+  try {
+    const draftData = {
+      to: to.value,
+      cc: cc.value,
+      bcc: bcc.value,
+      subject: subject.value,
+      body: {
+        html: editor.value?.getHTML() || '',
+        text: editor.value?.getText() || '',
+      },
+    }
+    
+    // Find drafts folder for this service
+    // For now, we'll use the current folder's service
+    // In a real implementation, you'd find the actual Drafts folder
+    const response = await entityService.create({
+      provider: props.folder.provider,
+      service: props.folder.service,
+      collection: props.folder.identifier, // Should be drafts folder ID
+      data: draftData,
+    })
+    
+    if (response && response.entity) {
+      draftId.value = response.entity.identifier
+    }
+    
+    lastSaved.value = new Date()
+  } catch (error) {
+    console.error('[MessageComposer] Failed to save draft:', error)
+  } finally {
+    saving.value = false
+  }
+}
+
+// Watch for changes and trigger auto-save
+const scheduleAutoSave = () => {
+  if (autoSaveTimer) {
+    clearTimeout(autoSaveTimer)
+  }
+  
+  autoSaveTimer = setTimeout(() => {
+    saveDraft()
+  }, 30000) // 30 seconds
+}
+
+watch([to, cc, bcc, subject], () => {
+  scheduleAutoSave()
+}, { deep: true })
+
+// Watch editor content changes
+if (editor.value) {
+  editor.value.on('update', () => {
+    scheduleAutoSave()
+  })
+}
+
+// Cleanup
+onBeforeUnmount(() => {
+  if (autoSaveTimer) {
+    clearTimeout(autoSaveTimer)
+  }
+  editor.value?.destroy()
+})
+
+// Handlers
+const handleClose = () => {
+  emit('close')
+}
+
+const handleSend = async () => {
+  if (!canSend.value || sending.value) return
+  
+  sending.value = true
+  
+  try {
+    await entityService.send({
+      message: {
+        to: to.value,
+        cc: cc.value.length > 0 ? cc.value : undefined,
+        bcc: bcc.value.length > 0 ? bcc.value : undefined,
+        subject: subject.value,
+        body: {
+          html: editor.value?.getHTML() || '',
+          text: editor.value?.getText() || '',
+        },
+      },
+    })
+    
+    // Delete draft if it was saved
+    if (draftId.value && props.folder) {
+      try {
+        await entityService.destroy({
+          provider: props.folder.provider,
+          service: props.folder.service,
+          collection: props.folder.identifier,
+          identifier: draftId.value,
+        })
+      } catch (error) {
+        console.error('[MessageComposer] Failed to delete draft:', error)
+      }
+    }
+    
+    emit('sent')
+  } catch (error) {
+    console.error('[MessageComposer] Failed to send message:', error)
+    alert('Failed to send message. Please try again.')
+  } finally {
+    sending.value = false
+  }
+}
+
+const toggleCc = () => {
+  showCc.value = !showCc.value
+}
+
+const toggleBcc = () => {
+  showBcc.value = !showBcc.value
+}
+
+// Toolbar actions
+const toggleBold = () => editor.value?.chain().focus().toggleBold().run()
+const toggleItalic = () => editor.value?.chain().focus().toggleItalic().run()
+const toggleUnderline = () => editor.value?.chain().focus().toggleUnderline().run()
+const toggleBulletList = () => editor.value?.chain().focus().toggleBulletList().run()
+const toggleOrderedList = () => editor.value?.chain().focus().toggleOrderedList().run()
+const setLink = () => {
+  const url = window.prompt('Enter URL:')
+  if (url) {
+    editor.value?.chain().focus().setLink({ href: url }).run()
+  }
+}
+const removeLink = () => editor.value?.chain().focus().unsetLink().run()
+
+const isActive = (name: string, attrs?: any) => {
+  return editor.value?.isActive(name, attrs) || false
+}
+</script>
+
+<template>
+  <div class="message-composer">
+    <!-- Toolbar -->
+    <v-toolbar density="compact" elevation="0" class="composer-toolbar">
+      <v-btn
+        variant="text"
+        @click="handleClose"
+        icon="mdi-close"
+      >
+        <v-icon>mdi-close</v-icon>
+        <v-tooltip activator="parent" location="bottom">Close</v-tooltip>
+      </v-btn>
+
+      <v-toolbar-title>
+        {{ replyTo ? 'Reply' : 'New Message' }}
+      </v-toolbar-title>
+
+      <v-spacer />
+
+      <span v-if="saveStatus" class="text-caption text-medium-emphasis mr-4">
+        {{ saveStatus }}
+      </span>
+
+      <v-btn
+        color="primary"
+        :disabled="!canSend"
+        :loading="sending"
+        @click="handleSend"
+        prepend-icon="mdi-send"
+      >
+        Send
+      </v-btn>
+    </v-toolbar>
+
+    <!-- Composer content -->
+    <div class="composer-content">
+      <!-- Recipients -->
+      <div class="composer-fields pa-4">
+        <v-combobox
+          v-model="to"
+          label="To"
+          chips
+          multiple
+          closable-chips
+          variant="outlined"
+          density="compact"
+          class="mb-2"
+        >
+          <template v-slot:append-inner>
+            <v-btn
+              size="x-small"
+              variant="text"
+              @click="toggleCc"
+              class="mr-1"
+            >
+              Cc
+            </v-btn>
+            <v-btn
+              size="x-small"
+              variant="text"
+              @click="toggleBcc"
+            >
+              Bcc
+            </v-btn>
+          </template>
+        </v-combobox>
+
+        <v-combobox
+          v-if="showCc"
+          v-model="cc"
+          label="Cc"
+          chips
+          multiple
+          closable-chips
+          variant="outlined"
+          density="compact"
+          class="mb-2"
+        />
+
+        <v-combobox
+          v-if="showBcc"
+          v-model="bcc"
+          label="Bcc"
+          chips
+          multiple
+          closable-chips
+          variant="outlined"
+          density="compact"
+          class="mb-2"
+        />
+
+        <v-text-field
+          v-model="subject"
+          label="Subject"
+          variant="outlined"
+          density="compact"
+        />
+      </div>
+
+      <v-divider />
+
+      <!-- Editor toolbar -->
+      <v-toolbar density="compact" elevation="0" class="editor-toolbar">
+        <v-btn
+          icon
+          size="small"
+          :class="{ 'v-btn--active': isActive('bold') }"
+          @click="toggleBold"
+        >
+          <v-icon>mdi-format-bold</v-icon>
+          <v-tooltip activator="parent" location="bottom">Bold</v-tooltip>
+        </v-btn>
+
+        <v-btn
+          icon
+          size="small"
+          :class="{ 'v-btn--active': isActive('italic') }"
+          @click="toggleItalic"
+        >
+          <v-icon>mdi-format-italic</v-icon>
+          <v-tooltip activator="parent" location="bottom">Italic</v-tooltip>
+        </v-btn>
+
+        <v-btn
+          icon
+          size="small"
+          :class="{ 'v-btn--active': isActive('underline') }"
+          @click="toggleUnderline"
+        >
+          <v-icon>mdi-format-underline</v-icon>
+          <v-tooltip activator="parent" location="bottom">Underline</v-tooltip>
+        </v-btn>
+
+        <v-divider vertical class="mx-2" />
+
+        <v-btn
+          icon
+          size="small"
+          :class="{ 'v-btn--active': isActive('bulletList') }"
+          @click="toggleBulletList"
+        >
+          <v-icon>mdi-format-list-bulleted</v-icon>
+          <v-tooltip activator="parent" location="bottom">Bullet List</v-tooltip>
+        </v-btn>
+
+        <v-btn
+          icon
+          size="small"
+          :class="{ 'v-btn--active': isActive('orderedList') }"
+          @click="toggleOrderedList"
+        >
+          <v-icon>mdi-format-list-numbered</v-icon>
+          <v-tooltip activator="parent" location="bottom">Numbered List</v-tooltip>
+        </v-btn>
+
+        <v-divider vertical class="mx-2" />
+
+        <v-btn
+          icon
+          size="small"
+          :class="{ 'v-btn--active': isActive('link') }"
+          @click="isActive('link') ? removeLink() : setLink()"
+        >
+          <v-icon>mdi-link</v-icon>
+          <v-tooltip activator="parent" location="bottom">Link</v-tooltip>
+        </v-btn>
+
+        <v-spacer />
+
+        <v-btn
+          icon
+          size="small"
+        >
+          <v-icon>mdi-paperclip</v-icon>
+          <v-tooltip activator="parent" location="bottom">Attach Files</v-tooltip>
+        </v-btn>
+      </v-toolbar>
+
+      <v-divider />
+
+      <!-- Editor -->
+      <div class="editor-container">
+        <editor-content :editor="editor" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.message-composer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.composer-toolbar {
+  flex-shrink: 0;
+  border-bottom: 1px solid rgb(var(--v-border-color));
+}
+
+.composer-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.composer-fields {
+  flex-shrink: 0;
+}
+
+.editor-toolbar {
+  flex-shrink: 0;
+  border-bottom: 1px solid rgb(var(--v-border-color));
+}
+
+.editor-container {
+  flex: 1;
+  overflow-y: auto;
+  background-color: rgb(var(--v-theme-background));
+}
+
+.v-btn--active {
+  background-color: rgba(var(--v-theme-primary), 0.12);
+  color: rgb(var(--v-theme-primary));
+}
+
+:deep(.tiptap-editor) {
+  outline: none;
+  min-height: 300px;
+  
+  p.is-editor-empty:first-child::before {
+    color: rgb(var(--v-theme-on-surface-variant));
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+    line-height: 1.3;
+    margin-top: 1em;
+    margin-bottom: 0.5em;
+  }
+  
+  p {
+    margin-bottom: 0.5em;
+  }
+  
+  ul, ol {
+    padding-left: 1.5em;
+    margin-bottom: 0.5em;
+  }
+  
+  blockquote {
+    border-left: 3px solid rgb(var(--v-border-color));
+    padding-left: 1em;
+    margin-left: 0;
+    margin-bottom: 0.5em;
+    color: rgb(var(--v-theme-on-surface-variant));
+  }
+  
+  a {
+    color: rgb(var(--v-theme-primary));
+    text-decoration: underline;
+  }
+}
+</style>

src/components/MessageList.vue

@@ -0,0 +1,283 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { EntityInterface } from '@MailManager/types/entity'
+import type { MessageInterface } from '@MailManager/types/message'
+import type { CollectionObject } from '@MailManager/models/collection'
+
+// Props
+interface Props {
+  messages: EntityInterface<MessageInterface>[]
+  selectedMessage?: EntityInterface<MessageInterface> | null
+  selectedCollection?: CollectionObject | null
+  loading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false
+})
+
+// Emits
+const emit = defineEmits<{
+  select: [message: EntityInterface<MessageInterface>]
+}>()
+
+// Check if message is selected
+const isSelected = (message: EntityInterface<MessageInterface>): boolean => {
+  if (!props.selectedMessage) return false
+  return (
+    message.provider === props.selectedMessage.provider &&
+    message.service === props.selectedMessage.service &&
+    message.collection === props.selectedMessage.collection &&
+    message.identifier === props.selectedMessage.identifier
+  )
+}
+
+// Check if message is unread
+const isUnread = (message: EntityInterface<MessageInterface>): boolean => {
+  return !message.properties.flags?.read
+}
+
+// Check if message is flagged
+const isFlagged = (message: EntityInterface<MessageInterface>): boolean => {
+  return message.properties.flags?.flagged || false
+}
+
+// Format date for display
+const formatDate = (date: Date | string | null | undefined): string => {
+  if (!date) return ''
+  
+  const messageDate = new Date(date)
+  const now = new Date()
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+  const yesterday = new Date(today)
+  yesterday.setDate(yesterday.getDate() - 1)
+  
+  // Today - show time
+  if (messageDate >= today) {
+    return messageDate.toLocaleTimeString('en-US', { 
+      hour: 'numeric', 
+      minute: '2-digit',
+      hour12: true 
+    })
+  }
+  
+  // Yesterday
+  if (messageDate >= yesterday) {
+    return 'Yesterday'
+  }
+  
+  // This year - show month and day
+  if (messageDate.getFullYear() === now.getFullYear()) {
+    return messageDate.toLocaleDateString('en-US', { 
+      month: 'short', 
+      day: 'numeric' 
+    })
+  }
+  
+  // Other years - show full date
+  return messageDate.toLocaleDateString('en-US', { 
+    month: 'short', 
+    day: 'numeric',
+    year: 'numeric'
+  })
+}
+
+// Truncate text
+const truncate = (text: string | null | undefined, length: number = 100): string => {
+  if (!text) return ''
+  return text.length > length ? text.substring(0, length) + '...' : text
+}
+
+// Handle message click
+const handleMessageClick = (message: EntityInterface<MessageInterface>) => {
+  emit('select', message)
+}
+
+// Sorted messages (newest first)
+const sortedMessages = computed(() => {
+  return [...props.messages].sort((a, b) => {
+    const dateA = a.properties.date ? new Date(a.properties.date).getTime() : 0
+    const dateB = b.properties.date ? new Date(b.properties.date).getTime() : 0
+    return dateB - dateA
+  })
+})
+
+// Read/Unread counts from collection properties
+const unreadCount = computed(() => {
+  return props.selectedCollection?.properties.unread ?? 0
+})
+
+const readCount = computed(() => {
+  const total = props.selectedCollection?.properties.total ?? 0
+  const unread = props.selectedCollection?.properties.unread ?? 0
+  return total - unread
+})
+
+const totalCount = computed(() => {
+  return props.selectedCollection?.properties.total ?? 0
+})
+</script>
+
+<template>
+  <div class="message-list">
+    <!-- Header with folder name and counts -->
+    <div v-if="selectedCollection" class="message-list-header">
+      <h2 class="text-h6">{{ selectedCollection.properties.label || 'Folder' }}</h2>
+      <div class="folder-counts text-caption text-medium-emphasis">
+        <span v-if="totalCount > 0">
+          <span class="unread-count">{{ unreadCount }}</span>
+          <span class="mx-1">/</span>
+          <span>{{ totalCount }}</span>
+        </span>
+        <span v-else>
+          Empty
+        </span>
+      </div>
+    </div>
+
+    <!-- Loading state -->
+    <div v-if="loading" class="pa-4">
+      <v-skeleton-loader
+        v-for="i in 5"
+        :key="i"
+        type="list-item-three-line"
+        class="mb-2"
+      />
+    </div>
+
+    <!-- Empty state -->
+    <div v-else-if="messages.length === 0" class="pa-8 text-center">
+      <v-icon size="64" color="grey-lighten-1">mdi-email-outline</v-icon>
+      <div class="text-h6 mt-4 text-medium-emphasis">No messages</div>
+      <div class="text-body-2 text-medium-emphasis">
+        This folder is empty
+      </div>
+    </div>
+
+    <!-- Message list with virtual scroll -->
+    <v-virtual-scroll
+      v-else
+      :items="sortedMessages"
+      :item-height="80"
+      class="message-virtual-scroll"
+    >
+      <template v-slot:default="{ item: message }">
+        <v-list-item
+          :key="`${message.provider}-${message.service}-${message.collection}-${message.identifier}`"
+          class="message-item"
+          :class="{
+            'selected': isSelected(message),
+            'unread': isUnread(message)
+          }"
+          @click="handleMessageClick(message)"
+          lines="three"
+        >
+          <template v-slot:prepend>
+            <v-avatar size="40" color="primary">
+              <span class="text-white text-body-1">
+                {{ (message.properties.from?.label || message.properties.from?.address || 'U')[0].toUpperCase() }}
+              </span>
+            </v-avatar>
+          </template>
+
+          <v-list-item-title class="d-flex align-center">
+            <span class="flex-grow-1 text-truncate">
+              {{ message.properties.from?.label || message.properties.from?.address || 'Unknown Sender' }}
+            </span>
+            <span class="text-caption text-medium-emphasis ml-2">
+              {{ formatDate(message.properties.date) }}
+            </span>
+          </v-list-item-title>
+
+          <v-list-item-subtitle class="text-truncate">
+            {{ message.properties.subject || '(No subject)' }}
+          </v-list-item-subtitle>
+
+          <v-list-item-subtitle class="text-caption text-truncate">
+            {{ truncate(message.properties.snippet, 80) }}
+          </v-list-item-subtitle>
+
+          <template v-slot:append>
+            <div class="d-flex flex-column align-center">
+              <v-icon 
+                v-if="isFlagged(message)"
+                size="small"
+                color="warning"
+                class="mb-1"
+              >
+                mdi-star
+              </v-icon>
+              <v-icon 
+                v-if="message.properties.attachments && message.properties.attachments.length > 0"
+                size="small"
+                color="grey"
+              >
+                mdi-paperclip
+              </v-icon>
+            </div>
+          </template>
+        </v-list-item>
+        <v-divider />
+      </template>
+    </v-virtual-scroll>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.message-list {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.message-list-header {
+  padding: 16px;
+  border-bottom: 1px solid rgb(var(--v-border-color));
+  background-color: rgb(var(--v-theme-surface));
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  h2 {
+    margin: 0;
+  }
+}
+
+.folder-counts {
+  display: flex;
+  align-items: center;
+  
+  .unread-count {
+    font-weight: 600;
+    color: rgb(var(--v-theme-primary));
+  }
+}
+
+.message-virtual-scroll {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.message-item {
+  cursor: pointer;
+  transition: background-color 0.2s;
+  border-left: 3px solid transparent;
+}
+
+.message-item:hover {
+  background-color: rgba(var(--v-theme-on-surface), 0.04);
+}
+
+.message-item.selected {
+  background-color: rgba(var(--v-theme-primary), 0.12);
+  border-left-color: rgb(var(--v-theme-primary));
+}
+
+.message-item.unread {
+  :deep(.v-list-item-title),
+  :deep(.v-list-item-subtitle:first-of-type) {
+    font-weight: 600;
+  }
+}
+</style>

src/components/MessageReader.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useUser } from '@KTXC/composables/useUser'
+import type { EntityInterface } from '@MailManager/types/entity'
+import type { MessageInterface } from '@MailManager/types/message'
+import { MessageObject } from '@MailManager/models/message'
+import { SecurityLevel } from '@/utile/emailSanitizer'
+import ReaderEmpty from './reader/ReaderEmpty.vue'
+import ReaderToolbar from './reader/ReaderToolbar.vue'
+import ReaderHeader from './reader/ReaderHeader.vue'
+import ReaderBody from './reader/ReaderBody.vue'
+
+// Props
+interface Props {
+  message?: EntityInterface<MessageInterface> | null
+}
+
+const props = defineProps<Props>()
+
+// User settings
+const { getSetting } = useUser()
+
+// Emits
+const emit = defineEmits<{
+  reply: [message: EntityInterface<MessageInterface>]
+  forward: [message: EntityInterface<MessageInterface>]
+  delete: [message: EntityInterface<MessageInterface>]
+  flag: [message: EntityInterface<MessageInterface>]
+  compose: []
+}>()
+
+// Computed
+const hasMessage = computed(() => !!props.message)
+
+const messageInstance = computed(() => {
+  if (!props.message) return null
+  return new MessageObject(props.message.properties)
+})
+
+const messageBody = computed(() => {
+  if (!messageInstance.value) return ''
+  
+  const htmlContent = messageInstance.value.getHtmlContent()
+  if (htmlContent) return htmlContent
+  
+  const textContent = messageInstance.value.getTextContent()
+  return textContent || ''
+})
+
+const isHtml = computed(() => {
+  if (!messageInstance.value) return false
+  return messageInstance.value.hasHtmlContent()
+})
+
+// Security preferences from user settings
+const securityLevel = computed(() => {
+  return (getSetting('mail.security.level') as SecurityLevel) || SecurityLevel.MODERATE
+})
+
+const allowImagesDefault = computed(() => {
+  return getSetting('mail.security.allowImagesDefault') as boolean || false
+})
+
+// Per-message overrides
+const allowImages = ref(false)
+const overrideSecurityLevel = ref<SecurityLevel | null>(null)
+
+// Computed effective security level (use override if set, otherwise default)
+const effectiveSecurityLevel = computed(() => {
+  return overrideSecurityLevel.value ?? securityLevel.value
+})
+
+// Reset overrides when message changes
+watch(() => props.message, () => {
+  allowImages.value = allowImagesDefault.value
+  overrideSecurityLevel.value = null
+})
+
+// Toggle images for current message only
+const toggleImages = () => {
+  allowImages.value = !allowImages.value
+}
+
+// Set security level override for current message only
+const setSecurityLevel = (level: SecurityLevel) => {
+  overrideSecurityLevel.value = level
+}
+
+// Handlers
+const handleReply = () => {
+  if (props.message) {
+    emit('reply', props.message)
+  }
+}
+
+const handleForward = () => {
+  if (props.message) {
+    emit('forward', props.message)
+  }
+}
+
+const handleDelete = () => {
+  if (props.message) {
+    emit('delete', props.message)
+  }
+}
+
+const handleFlag = () => {
+  if (props.message) {
+    emit('flag', props.message)
+  }
+}
+
+const handleCompose = () => {
+  emit('compose')
+}
+</script>
+
+<template>
+  <div class="message-reader">
+    <!-- Empty state -->
+    <ReaderEmpty 
+      v-if="!hasMessage" 
+      @compose="handleCompose"
+    />
+
+    <!-- Message viewer -->
+    <template v-else>
+      <ReaderToolbar
+        :message="message!"
+        :is-html="isHtml"
+        :allow-images="allowImages"
+        :security-level="effectiveSecurityLevel"
+        :is-security-overridden="overrideSecurityLevel !== null"
+        @reply="handleReply"
+        @forward="handleForward"
+        @delete="handleDelete"
+        @flag="handleFlag"
+        @toggle-images="toggleImages"
+        @set-security-level="setSecurityLevel"
+      />
+
+      <!-- Message content -->
+      <div class="message-content">
+        <ReaderHeader :message-instance="messageInstance!" />
+        
+        <v-divider />
+        
+        <ReaderBody
+          :message-body="messageBody"
+          :is-html="isHtml"
+          :security-level="effectiveSecurityLevel"
+          :allow-images="allowImages"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.message-reader {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.message-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+</style>

src/components/reader/ReaderBody.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { EmailSanitizer, SecurityLevel } from '@/utile/emailSanitizer'
+
+interface Props {
+  messageBody: string
+  isHtml: boolean
+  securityLevel: SecurityLevel
+  allowImages: boolean
+}
+
+const props = defineProps<Props>()
+
+// Sanitize HTML content for security
+const sanitizedMessageBody = computed(() => {
+  if (!props.messageBody || !props.isHtml) return props.messageBody
+  
+  return EmailSanitizer.sanitize(props.messageBody, {
+    securityLevel: props.securityLevel,
+    allowImages: props.allowImages,
+    allowExternalLinks: true,
+    allowStyles: true
+  })
+})
+
+// Iframe reference for sandboxed HTML rendering
+const emailFrame = ref<HTMLIFrameElement | null>(null)
+
+// Resize iframe to fit content
+const resizeIframe = () => {
+  if (emailFrame.value?.contentWindow?.document?.body) {
+    const height = emailFrame.value.contentWindow.document.body.scrollHeight
+    emailFrame.value.style.height = `${height + 20}px`
+  }
+}
+
+// Watch for changes to trigger resize
+watch(() => props.messageBody, () => {
+  setTimeout(resizeIframe, 100)
+})
+
+watch(() => props.allowImages, () => {
+  setTimeout(resizeIframe, 100)
+})
+</script>
+
+<template>
+  <div class="message-body pa-6">
+    <!-- HTML body (sandboxed iframe) -->
+    <iframe
+      v-if="isHtml"
+      ref="emailFrame"
+      sandbox="allow-same-origin"
+      class="html-content-frame"
+      :srcdoc="sanitizedMessageBody"
+      @load="resizeIframe"
+    />
+    
+    <!-- Plain text body -->
+    <pre v-else class="text-body-1 text-pre-wrap">{{ messageBody }}</pre>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.message-body {
+  background-color: rgb(var(--v-theme-background));
+  min-height: 100%;
+}
+
+.html-content-frame {
+  width: 100%;
+  border: none;
+  min-height: 400px;
+  display: block;
+  background: white;
+}
+
+.text-pre-wrap {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-family: inherit;
+}
+</style>

src/components/reader/ReaderEmpty.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  compose: []
+}>()
+
+const handleCompose = () => {
+  emit('compose')
+}
+</script>
+
+<template>
+  <div class="empty-state">
+    <v-icon size="96" color="grey-lighten-1">mdi-email-open-outline</v-icon>
+    <div class="text-h5 mt-6 text-medium-emphasis">No message selected</div>
+    <div class="text-body-1 mt-2 text-medium-emphasis">
+      Select a message to read or compose a new one
+    </div>
+    <v-btn
+      color="primary"
+      size="large"
+      class="mt-6"
+      prepend-icon="mdi-pencil"
+      @click="handleCompose"
+    >
+      Compose New Message
+    </v-btn>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px;
+  text-align: center;
+}
+</style>

src/components/reader/ReaderHeader.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { MessageObject } from '@MailManager/models/message'
+
+interface Props {
+  messageInstance: MessageObject
+}
+
+const props = defineProps<Props>()
+
+// Format date for display
+const formatDate = (date: Date | string | null | undefined): string => {
+  if (!date) return ''
+  
+  const messageDate = new Date(date)
+  return messageDate.toLocaleString('en-US', {
+    weekday: 'short',
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true
+  })
+}
+
+// Format file size for display
+const formatFileSize = (bytes: number | undefined): string => {
+  if (!bytes) return ''
+  
+  if (bytes < 1024) return bytes + ' B'
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
+  return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
+}
+</script>
+
+<template>
+  <div class="message-header pa-6">
+    <div class="text-h5 mb-4">{{ messageInstance?.subject || '(No subject)' }}</div>
+    
+    <div class="d-flex align-center mb-3">
+      <v-avatar size="48" color="primary" class="mr-3">
+        <span class="text-white text-h6">
+          {{ (messageInstance?.from?.label || messageInstance?.from?.address || 'U')[0].toUpperCase() }}
+        </span>
+      </v-avatar>
+      
+      <div class="flex-grow-1">
+        <div class="text-body-1 font-weight-medium">
+          {{ messageInstance?.from?.label || messageInstance?.from?.address || 'Unknown Sender' }}
+        </div>
+        <div class="text-caption text-medium-emphasis">
+          {{ formatDate(messageInstance?.date) }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Recipients -->
+    <div v-if="messageInstance?.to && messageInstance?.to.length > 0" class="text-body-2 mb-1">
+      <span class="text-medium-emphasis">To:</span>
+      {{ messageInstance?.to.map(t => t.label || t.address).join(', ') }}
+    </div>
+
+    <div v-if="messageInstance?.cc && messageInstance?.cc.length > 0" class="text-body-2 mb-1">
+      <span class="text-medium-emphasis">Cc:</span>
+      {{ messageInstance?.cc.map(c => c.label || c.address).join(', ') }}
+    </div>
+
+    <!-- Attachments -->
+    <div v-if="messageInstance?.attachments && messageInstance?.attachments.length > 0" class="mt-4">
+      <div class="text-body-2 text-medium-emphasis mb-2">
+        Attachments ({{ messageInstance?.attachments.length }})
+      </div>
+      <div class="d-flex flex-wrap gap-2">
+        <v-chip
+          v-for="(attachment, index) in messageInstance?.attachments"
+          :key="index"
+          prepend-icon="mdi-paperclip"
+          size="small"
+          variant="outlined"
+          class="attachment-chip"
+        >
+          <span class="attachment-name">{{ attachment.name || 'Untitled' }}</span>
+          <span v-if="attachment.size" class="text-caption text-medium-emphasis ml-1">
+            ({{ formatFileSize(attachment.size) }})
+          </span>
+        </v-chip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.message-header {
+  background-color: rgba(var(--v-theme-surface));
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.attachment-chip {
+  max-width: 300px;
+  
+  .attachment-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>

src/components/reader/ReaderToolbar.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { EntityInterface } from '@MailManager/types/entity'
+import type { MessageInterface } from '@MailManager/types/message'
+import { SecurityLevel } from '@/utile/emailSanitizer'
+
+interface Props {
+  message: EntityInterface<MessageInterface>
+  isHtml: boolean
+  allowImages: boolean
+  securityLevel: SecurityLevel
+  isSecurityOverridden: boolean
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  reply: []
+  forward: []
+  delete: []
+  flag: []
+  toggleImages: []
+  setSecurityLevel: [level: SecurityLevel]
+}>()
+
+const securityLevels = [
+  { value: SecurityLevel.STRICT, title: 'Strict', icon: 'mdi-shield-lock', description: 'Maximum security' },
+  { value: SecurityLevel.MODERATE, title: 'Moderate', icon: 'mdi-shield-check', description: 'Balanced security' },
+  { value: SecurityLevel.RELAXED, title: 'Relaxed', icon: 'mdi-shield-off', description: 'Minimal restrictions' }
+]
+
+const currentSecurityLevel = computed(() => {
+  return securityLevels.find(l => l.value === props.securityLevel) || securityLevels[1]
+})
+</script>
+
+<template>
+  <v-toolbar density="compact" elevation="0" class="message-toolbar">
+    <v-btn
+      icon="mdi-reply"
+      variant="text"
+      @click="emit('reply')"
+    >
+      <v-icon>mdi-reply</v-icon>
+      <v-tooltip activator="parent" location="bottom">Reply</v-tooltip>
+    </v-btn>
+
+    <v-btn
+      icon="mdi-reply-all"
+      variant="text"
+      @click="emit('reply')"
+    >
+      <v-icon>mdi-reply-all</v-icon>
+      <v-tooltip activator="parent" location="bottom">Reply All</v-tooltip>
+    </v-btn>
+
+    <v-btn
+      icon="mdi-share"
+      variant="text"
+      @click="emit('forward')"
+    >
+      <v-icon>mdi-share</v-icon>
+      <v-tooltip activator="parent" location="bottom">Forward</v-tooltip>
+    </v-btn>
+
+    <v-divider vertical class="mx-2" />
+
+    <!-- Image toggle -->
+    <v-btn
+      v-if="isHtml"
+      :icon="allowImages ? 'mdi-image' : 'mdi-image-off'"
+      variant="text"
+      :color="allowImages ? 'primary' : undefined"
+      @click="emit('toggleImages')"
+    >
+      <v-icon>{{ allowImages ? 'mdi-image' : 'mdi-image-off' }}</v-icon>
+      <v-tooltip activator="parent" location="bottom">
+        {{ allowImages ? 'Hide Images' : 'Show Images' }} (This Message Only)
+      </v-tooltip>
+    </v-btn>
+
+    <!-- Security Level Menu -->
+    <v-menu v-if="isHtml" :close-on-content-click="false">
+      <template #activator="{ props: menuProps }">
+        <v-btn
+          v-bind="menuProps"
+          :icon="currentSecurityLevel.icon"
+          variant="text"
+          :color="isSecurityOverridden ? 'warning' : undefined"
+        >
+          <v-icon>{{ currentSecurityLevel.icon }}</v-icon>
+          <v-badge
+            v-if="isSecurityOverridden"
+            dot
+            color="warning"
+            offset-x="-8"
+            offset-y="8"
+          />
+          <v-tooltip activator="parent" location="bottom">
+            {{ isSecurityOverridden ? 'Security Override Active' : 'Security Level' }} (This Message Only)
+          </v-tooltip>
+        </v-btn>
+      </template>
+
+      <v-card min-width="280">
+        <v-card-title class="text-subtitle-1">
+          <v-icon start>mdi-shield-account</v-icon>
+          Message Security
+        </v-card-title>
+        <v-divider />
+        <v-card-text>
+          <div class="text-caption text-medium-emphasis mb-2">
+            Override security level for this message only
+          </div>
+          <v-list density="compact">
+            <v-list-item
+              v-for="level in securityLevels"
+              :key="level.value"
+              :active="securityLevel === level.value"
+              @click="emit('setSecurityLevel', level.value)"
+            >
+              <template #prepend>
+                <v-icon :icon="level.icon" />
+              </template>
+              <v-list-item-title>{{ level.title }}</v-list-item-title>
+              <v-list-item-subtitle>{{ level.description }}</v-list-item-subtitle>
+              <template #append>
+                <v-icon v-if="securityLevel === level.value" icon="mdi-check" color="primary" />
+              </template>
+            </v-list-item>
+          </v-list>
+
+          <v-alert
+            v-if="isSecurityOverridden"
+            density="compact"
+            variant="tonal"
+            color="warning"
+            class="text-caption mt-3"
+            icon="mdi-alert"
+          >
+            Security override active for this message. Change messages to reset.
+          </v-alert>
+        </v-card-text>
+      </v-card>
+    </v-menu>
+
+    <v-spacer />
+
+    <v-btn
+      icon="mdi-dots-vertical"
+      variant="text"
+    >
+      <v-icon>mdi-dots-vertical</v-icon>
+      <v-tooltip activator="parent" location="bottom">More Actions</v-tooltip>
+    </v-btn>
+  </v-toolbar>
+</template>
+
+<style scoped lang="scss">
+.message-toolbar {
+  flex-shrink: 0;
+  border-bottom: 1px solid rgb(var(--v-border-color));
+}
+</style>

src/components/settings/AccountsSettings.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useServicesStore } from '@MailManager/stores/servicesStore'
+import AddAccountDialog from '@MailManager/components/AddAccountDialog.vue'
+import EditAccountDialog from '@MailManager/components/EditAccountDialog.vue'
+
+const servicesStore = useServicesStore()
+
+// Dialog state
+const showAddDialog = ref(false)
+const showEditDialog = ref(false)
+const editServiceProvider = ref<string>('')
+const editServiceIdentifier = ref<string | number>('')
+
+// Load services on mount
+onMounted(async () => {
+  if (!servicesStore.has) {
+    await servicesStore.list()
+  }
+})
+
+const handleAddAccount = () => {
+  showAddDialog.value = true
+}
+
+const handleConfigureAccount = (serviceKey: string) => {
+  // Service key is in format "provider:identifier"
+  const [provider, identifier] = serviceKey.split(':')
+  editServiceProvider.value = provider
+  editServiceIdentifier.value = identifier
+  showEditDialog.value = true
+}
+
+const handleAccountSaved = async () => {
+  // Refresh the services list
+  await servicesStore.list()
+}
+</script>
+
+<template>
+  <div class="pa-4">
+    <h3 class="text-h6 mb-4">Email Accounts</h3>
+    <v-list>
+      <v-list-item
+        v-for="service in servicesStore.services"
+        :key="`${service.provider}:${service.identifier}`"
+      >
+        <template #prepend>
+          <v-avatar color="primary">
+            <v-icon>mdi-email</v-icon>
+          </v-avatar>
+        </template>
+
+        <v-list-item-title>{{ service.label || 'Unnamed Account' }}</v-list-item-title>
+        <v-list-item-subtitle>{{ service.primaryAddress || service.identifier }}</v-list-item-subtitle>
+
+        <template #append>
+          <v-btn
+            icon="mdi-cog"
+            variant="text"
+            size="small"
+            @click="handleConfigureAccount(`${service.provider}:${service.identifier}`)"
+          />
+        </template>
+      </v-list-item>
+
+      <v-list-item v-if="servicesStore.services.length === 0">
+        <v-list-item-title class="text-medium-emphasis">No accounts configured</v-list-item-title>
+      </v-list-item>
+    </v-list>
+
+    <div class="mt-4">
+      <v-btn
+        prepend-icon="mdi-plus"
+        variant="outlined"
+        color="primary"
+        @click="handleAddAccount"
+      >
+        Add Account
+      </v-btn>
+    </div>
+
+    <!-- Add Account Dialog -->
+    <AddAccountDialog
+      v-model="showAddDialog"
+      @saved="handleAccountSaved"
+    />
+
+    <!-- Edit Account Dialog -->
+    <EditAccountDialog
+      v-if="editServiceProvider && editServiceIdentifier"
+      v-model="showEditDialog"
+      :service-provider="editServiceProvider"
+      :service-identifier="editServiceIdentifier"
+      @saved="handleAccountSaved"
+    />
+  </div>
+</template>

src/components/settings/DisplaySettings.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useUser } from '@KTXC/composables/useUser'
+
+type FolderViewMode = 'tree' | 'page'
+
+const { settings, setSetting } = useUser()
+
+const theme = ref('Auto')
+const showPreview = ref(true)
+const compactMode = ref(false)
+
+const folderViewMode = computed({
+  get: () => {
+    const allSettings = settings.value?.all || {}
+    const mailSettings = allSettings.mail || {}
+    return (mailSettings.folderViewMode as FolderViewMode) || 'tree'
+  },
+  set: (value: FolderViewMode) => setSetting('mail.folderViewMode', value)
+})
+</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' }
+            ]"
+            item-value="value"
+            item-title="title"
+            density="compact"
+            variant="outlined"
+            style="width: 150px"
+          />
+        </template>
+      </v-list-item>
+    </v-list>
+  </div>
+</template>

src/components/settings/SecuritySettings.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useUser } from '@KTXC/composables/useUser'
+import { SecurityLevel, EmailSanitizer } from '@/utile/emailSanitizer'
+
+const { getSetting, setSetting } = useUser()
+
+const securityLevel = computed({
+  get: () => (getSetting('mail.security.level') as SecurityLevel) || SecurityLevel.MODERATE,
+  set: (value: SecurityLevel) => setSetting('mail.security.level', value)
+})
+
+const allowImagesDefault = computed({
+  get: () => getSetting('mail.security.allowImagesDefault') as boolean || false,
+  set: (value: boolean) => setSetting('mail.security.allowImagesDefault', value)
+})
+
+const securityLevels = [
+  { value: SecurityLevel.STRICT, title: 'Strict', icon: 'mdi-shield-lock', description: 'Maximum security, blocks most content' },
+  { value: SecurityLevel.MODERATE, title: 'Moderate', icon: 'mdi-shield-check', description: 'Balanced security and functionality' },
+  { value: SecurityLevel.RELAXED, title: 'Relaxed', icon: 'mdi-shield-off', description: 'Minimal restrictions' }
+]
+</script>
+
+<template>
+  <div class="pa-4">
+    <h3 class="text-h6 mb-4">Security & Privacy</h3>
+    
+    <v-list>
+      <v-list-subheader>Email Content Security</v-list-subheader>
+      
+      <v-list-item>
+        <v-list-item-title>Security Level</v-list-item-title>
+        <v-list-item-subtitle>
+          Controls how email content is filtered and sanitized
+        </v-list-item-subtitle>
+        
+        <div class="mt-3">
+          <v-btn-toggle
+            v-model="securityLevel"
+            mandatory
+            color="primary"
+            variant="outlined"
+            density="comfortable"
+            class="d-flex flex-column flex-sm-row"
+            divided
+          >
+            <v-btn
+              v-for="level in securityLevels"
+              :key="level.value"
+              :value="level.value"
+              class="flex-grow-1"
+            >
+              <v-icon start>{{ level.icon }}</v-icon>
+              {{ level.title }}
+            </v-btn>
+          </v-btn-toggle>
+          
+          <v-alert
+            density="compact"
+            variant="tonal"
+            color="info"
+            class="text-caption mt-3"
+          >
+            {{ EmailSanitizer.getSecurityLevelDescription(securityLevel) }}
+          </v-alert>
+        </div>
+      </v-list-item>
+
+      <v-divider class="my-2" />
+
+      <v-list-item>
+        <v-list-item-title>External Images</v-list-item-title>
+        <v-list-item-subtitle>
+          Load images from external sources automatically
+        </v-list-item-subtitle>
+        <template #append>
+          <v-switch v-model="allowImagesDefault" color="primary" hide-details />
+        </template>
+      </v-list-item>
+
+      <v-list-item>
+        <v-alert
+          density="compact"
+          variant="tonal"
+          color="warning"
+          icon="mdi-alert"
+          class="text-caption"
+        >
+          <strong>Privacy Warning:</strong> Loading external images may expose your IP address 
+          and confirm to senders that you've opened their email. You can still choose to load 
+          images for individual messages.
+        </v-alert>
+      </v-list-item>
+    </v-list>
+
+    <v-list class="mt-4">
+      <v-list-subheader>Additional Security Options</v-list-subheader>
+      
+      <v-list-item>
+        <v-list-item-title>Block tracking pixels</v-list-item-title>
+        <v-list-item-subtitle>Prevent email tracking (recommended)</v-list-item-subtitle>
+        <template #append>
+          <v-switch color="primary" hide-details model-value="true" disabled />
+        </template>
+      </v-list-item>
+
+      <v-list-item>
+        <v-list-item-title>Warn on external links</v-list-item-title>
+        <v-list-item-subtitle>Show confirmation before opening links</v-list-item-subtitle>
+        <template #append>
+          <v-switch color="primary" hide-details />
+        </template>
+      </v-list-item>
+    </v-list>
+  </div>
+</template>

src/components/settings/SettingsDialog.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import DisplaySettings from './DisplaySettings.vue'
+import AccountsSettings from './AccountsSettings.vue'
+import SecuritySettings from './SecuritySettings.vue'
+
+interface Props {
+  modelValue: boolean
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: boolean): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const settingsTab = ref('display')
+
+const handleClose = () => {
+  emit('update:modelValue', false)
+}
+</script>
+
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    @update:model-value="emit('update:modelValue', $event)"
+    max-width="800"
+    scrollable
+  >
+    <v-card>
+      <v-card-title class="d-flex align-center">
+        <span>Mail Settings</span>
+        <v-spacer />
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          @click="handleClose"
+        />
+      </v-card-title>
+
+      <v-divider />
+
+      <v-card-text class="pa-0">
+        <v-tabs
+          v-model="settingsTab"
+          bg-color="transparent"
+        >
+          <v-tab value="display">
+            <v-icon start>mdi-palette</v-icon>
+            Display
+          </v-tab>
+          <v-tab value="security">
+            <v-icon start>mdi-shield-account</v-icon>
+            Security
+          </v-tab>
+          <v-tab value="accounts">
+            <v-icon start>mdi-account-multiple</v-icon>
+            Accounts
+          </v-tab>
+        </v-tabs>
+
+        <v-divider />
+
+        <v-window v-model="settingsTab">
+          <v-window-item value="display">
+            <DisplaySettings />
+          </v-window-item>
+
+          <v-window-item value="security">
+            <SecuritySettings />
+          </v-window-item>
+
+          <v-window-item value="accounts">
+            <AccountsSettings />
+          </v-window-item>
+        </v-window>
+      </v-card-text>
+
+      <v-divider />
+
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          variant="text"
+          @click="handleClose"
+        >
+          Close
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>

src/integrations.ts

@@ -0,0 +1,16 @@
+import type { ModuleIntegrations } from "@KTXC/types/moduleTypes";
+
+const integrations: ModuleIntegrations = {
+  app_menu: [
+    {
+      id: 'mail',
+      label: 'Mail',
+      path: '/',
+      icon: 'mdi-email',
+      priority: 15,
+      caption: 'Email client'
+    },
+  ],
+};
+
+export default integrations;

src/main.ts

@@ -0,0 +1,7 @@
+import routes from '@/routes'
+import integrations from '@/integrations'
+
+// CSS filename is injected by the vite plugin at build time
+export const css = ['__CSS_FILENAME_PLACEHOLDER__']
+
+export { routes, integrations }

src/pages/MailPage.vue

@@ -0,0 +1,414 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { useDisplay } from 'vuetify'
+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 type { CollectionObject } from '@MailManager/models/collection'
+import type { EntityInterface } from '@MailManager/types/entity'
+import type { MessageInterface } from '@MailManager/types/message'
+import FolderTree from '@/components/FolderTree.vue'
+import MessageList from '@/components/MessageList.vue'
+import MessageReader from '@/components/MessageReader.vue'
+import MessageComposer from '@/components/MessageComposer.vue'
+import SettingsDialog from '@/components/settings/SettingsDialog.vue'
+
+// Vuetify display for responsive behavior
+const display = useDisplay()
+
+// Snackbar state for notifications
+const snackbarVisible = ref(false)
+const snackbarMessage = ref('')
+const snackbarColor = ref('success')
+
+// Stores
+const collectionsStore = useCollectionsStore()
+const entitiesStore = useEntitiesStore()
+const servicesStore = useServicesStore()
+
+// Background mail sync
+const mailSync = useMailSync({
+  interval: 30000, // Check every 30 seconds
+  autoStart: false, // We'll start it manually after initialization
+  fetchDetails: true, // Auto-fetch full message details for new/modified messages
+})
+
+// UI state
+const sidebarVisible = ref(true)
+const selectedFolder = ref<CollectionObject | null>(null)
+const selectedMessage = ref<EntityInterface<MessageInterface> | null>(null)
+const composeMode = ref(false)
+const composeReplyTo = ref<EntityInterface<MessageInterface> | null>(null)
+const settingsDialogVisible = ref(false)
+
+// Loading state
+const loading = ref(false)
+
+// Computed
+const isMobile = computed(() => display.mdAndDown.value)
+
+// Initialize
+onMounted(async () => {
+  loading.value = true
+  try {
+    // Load services (accounts)
+    await servicesStore.list()
+    
+    // Load collections (folders)
+    await collectionsStore.loadCollections()
+    
+    // Select inbox by default if available
+    const inbox = collectionsStore.collectionList.find(c => c.properties.role === 'inbox')
+    if (inbox) {
+      handleFolderSelect(inbox)
+    }
+
+    // Start background sync after initialization
+    mailSync.start()
+  } catch (error) {
+    console.error('[Mail] Failed to initialize:', error)
+  } finally {
+    loading.value = false
+  }
+})
+
+// Watch for folder and service changes to update sync sources
+watch(
+  [selectedFolder, () => servicesStore.services],
+  () => {
+    mailSync.clearSources()
+
+    // Add currently selected folder to sync
+    if (selectedFolder.value) {
+      mailSync.addSource({
+        provider: selectedFolder.value.provider,
+        service: selectedFolder.value.service,
+        collections: [selectedFolder.value.identifier],
+      })
+    }
+
+    // Add inbox for each service to get notifications
+    servicesStore.services.forEach(service => {
+      // Find inbox collection for this service
+      const inboxes = collectionsStore.collectionList.filter(
+        c => c.service === service.identifier && 
+             (c.properties.role === 'inbox' || 
+              String(c.identifier).toLowerCase() === 'inbox')
+      )
+
+      if (inboxes.length > 0) {
+        mailSync.addSource({
+          provider: service.provider,
+          service: service.identifier,
+          collections: inboxes.map(inbox => inbox.identifier),
+        })
+      }
+    })
+
+    // Restart sync with updated sources
+    if (mailSync.sources.value.length > 0 && !mailSync.isRunning.value) {
+      mailSync.start()
+    }
+  },
+  { deep: true }
+)
+
+// Handlers
+const handleFolderSelect = async (folder: CollectionObject) => {
+  selectedFolder.value = folder
+  selectedMessage.value = null
+  composeMode.value = false
+  
+  // Load messages for this folder
+  try {
+    await entitiesStore.loadMessages({
+      [folder.provider]: {
+        [folder.service]: {
+          [folder.identifier]: true
+        }
+      }
+    })
+  } catch (error) {
+    console.error('[Mail] Failed to load messages:', error)
+  }
+}
+
+const handleMessageSelect = (message: EntityInterface<MessageInterface>) => {
+  selectedMessage.value = message
+  composeMode.value = false
+  
+  // Close sidebar on mobile after selection
+  if (isMobile.value) {
+    sidebarVisible.value = false
+  }
+}
+
+const handleCompose = (replyTo?: EntityInterface<MessageInterface>) => {
+  composeMode.value = true
+  composeReplyTo.value = replyTo || null
+  selectedMessage.value = null
+}
+
+const handleComposeClose = () => {
+  composeMode.value = false
+  composeReplyTo.value = null
+}
+
+const handleComposeSent = () => {
+  composeMode.value = false
+  composeReplyTo.value = null
+  
+  // Reload current folder to show sent message in Sent folder
+  if (selectedFolder.value) {
+    handleFolderSelect(selectedFolder.value)
+  }
+}
+
+const handleReply = (message: EntityInterface<MessageInterface>) => {
+  handleCompose(message)
+}
+
+const handleDelete = async (message: EntityInterface<MessageInterface>) => {
+  // TODO: Implement delete functionality
+  console.log('[Mail] Delete message:', message.identifier)
+}
+
+const toggleSidebar = () => {
+  sidebarVisible.value = !sidebarVisible.value
+}
+
+const handleSettingsOpen = () => {
+  settingsDialogVisible.value = true
+}
+
+const handleFolderCreated = (folder: CollectionObject) => {
+  snackbarMessage.value = `Folder "${folder.properties.label}" created successfully`
+  snackbarColor.value = 'success'
+  snackbarVisible.value = true
+  
+  // Reload collections to ensure UI is in sync
+  collectionsStore.loadCollections()
+}
+
+// Messages for current folder
+const currentMessages = computed(() => {
+  if (!selectedFolder.value) return []
+  
+  const provider = selectedFolder.value.provider
+  const service = String(selectedFolder.value.service)
+  const collection = String(selectedFolder.value.identifier)
+  
+  const messages = entitiesStore.messages[provider]?.[service]?.[collection]
+  return messages ? Object.values(messages) : []
+})
+</script>
+
+<template>
+  <div class="mail-container">
+    <!-- Top toolbar -->
+    <v-app-bar class="mail-toolbar" elevation="0" density="compact">
+      <v-app-bar-nav-icon 
+        v-if="isMobile" 
+        @click="toggleSidebar"
+      />
+      
+      <v-app-bar-title>Mail</v-app-bar-title>
+      
+      <v-spacer />
+      
+      <v-btn
+        icon="mdi-pencil"
+        @click="handleCompose()"
+        color="primary"
+        variant="text"
+      >
+        <v-icon>mdi-pencil</v-icon>
+        <v-tooltip activator="parent" location="bottom">Compose</v-tooltip>
+      </v-btn>
+      
+      <v-btn
+        icon="mdi-refresh"
+        @click="mailSync.sync()"
+        :loading="mailSync.isRunning.value && entitiesStore.loading"
+        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()})` : '' }}
+        </v-tooltip>
+      </v-btn>
+      
+      <v-icon 
+        v-if="mailSync.isRunning.value" 
+        color="success" 
+        size="small"
+        class="ml-2"
+      >
+        mdi-sync
+      </v-icon>
+    </v-app-bar>
+
+    <!-- Main content area -->
+    <div class="mail-content">
+      <!-- Folder tree sidebar -->
+      <v-navigation-drawer
+        v-model="sidebarVisible"
+        :permanent="!isMobile"
+        :temporary="isMobile"
+        width="280"
+        class="mail-sidebar"
+      >
+        <FolderTree
+          :selected-folder="selectedFolder"
+          @select="handleFolderSelect"
+          @folder-created="handleFolderCreated"
+        />
+
+        <template #append>
+          <div class="pa-2">
+            <v-btn
+              block
+              variant="text"
+              prepend-icon="mdi-cog"
+              @click="handleSettingsOpen"
+            >
+              Settings
+            </v-btn>
+          </div>
+        </template>
+      </v-navigation-drawer>
+
+      <!-- Main area with message list and reader -->
+      <div class="mail-main">
+        <div class="mail-wrapper">
+          <!-- Message list panel -->
+          <div class="mail-list-panel">
+            <MessageList
+              :messages="currentMessages"
+              :selected-message="selectedMessage"
+              :selected-collection="selectedFolder"
+              :loading="loading"
+              @select="handleMessageSelect"
+            />
+          </div>
+
+          <!-- Reader/Composer panel -->
+          <div class="mail-reader-panel">
+            <MessageComposer
+              v-if="composeMode"
+              :reply-to="composeReplyTo"
+              :folder="selectedFolder"
+              @close="handleComposeClose"
+              @sent="handleComposeSent"
+            />
+            
+            <MessageReader
+              v-else
+              :message="selectedMessage"
+              @reply="handleReply"
+              @delete="handleDelete"
+              @compose="handleCompose()"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 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>
+
+<style scoped lang="scss">
+.mail-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  isolation: isolate;
+}
+
+.mail-toolbar {
+  flex-shrink: 0;
+}
+
+.mail-content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.mail-sidebar {
+  border-right: 1px solid rgb(var(--v-border-color));
+  overflow-y: auto;
+}
+
+.mail-main {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.mail-wrapper {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.mail-list-panel {
+  width: 320px;
+  min-width: 280px;
+  max-width: 450px;
+  border-right: 1px solid rgb(var(--v-border-color));
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.mail-reader-panel {
+  flex: 1;
+  overflow: hidden;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Responsive adjustments */
+@media (max-width: 960px) {
+  .mail-wrapper {
+    flex-direction: column;
+  }
+  
+  .mail-list-panel {
+    width: 100%;
+    max-width: 100%;
+    border-right: none;
+    border-bottom: 1px solid rgb(var(--v-border-color));
+    max-height: 50%;
+  }
+  
+  .mail-reader-panel {
+    width: 100%;
+  }
+}
+</style>

src/routes.ts

@@ -0,0 +1,13 @@
+const routes = [
+  {
+    name: 'mail',
+    path: '/',
+    component: () => import('@/pages/MailPage.vue'),
+    meta: {
+      title: 'Mail',
+      requiresAuth: true
+    }
+  },
+]
+
+export default routes

src/style.css

@@ -0,0 +1,104 @@
+/* mail module styles */
+
+.mail-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  isolation: isolate;
+}
+
+.mail-toolbar {
+  flex-shrink: 0;
+}
+
+.mail-content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.mail-sidebar {
+  border-right: 1px solid rgb(var(--v-border-color));
+  overflow-y: auto;
+}
+
+.mail-main {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.mail-wrapper {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.mail-list-panel {
+  width: 320px;
+  min-width: 280px;
+  max-width: 450px;
+  border-right: 1px solid rgb(var(--v-border-color));
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.mail-reader-panel {
+  flex: 1;
+  overflow: hidden;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Tiptap editor styles */
+.tiptap-editor {
+  outline: none;
+}
+
+.tiptap-editor p.is-editor-empty:first-child::before {
+  color: rgb(var(--v-theme-on-surface-variant));
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+/* Message list item styles */
+.message-item {
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.message-item:hover {
+  background-color: rgba(var(--v-theme-on-surface), 0.04);
+}
+
+.message-item.selected {
+  background-color: rgba(var(--v-theme-primary), 0.12);
+}
+
+.message-item.unread {
+  font-weight: 600;
+}
+
+/* Responsive adjustments */
+@media (max-width: 960px) {
+  .mail-wrapper {
+    flex-direction: column;
+  }
+  
+  .mail-list-panel {
+    width: 100%;
+    max-width: 100%;
+    border-right: none;
+    border-bottom: 1px solid rgb(var(--v-border-color));
+  }
+  
+  .mail-reader-panel {
+    width: 100%;
+  }
+}

src/utile/emailSanitizer.ts

@@ -0,0 +1,160 @@
+import DOMPurify from 'dompurify'
+
+export enum SecurityLevel {
+  STRICT = 'strict',
+  MODERATE = 'moderate',
+  RELAXED = 'relaxed'
+}
+
+export interface SanitizationOptions {
+  securityLevel?: SecurityLevel
+  allowImages?: boolean
+  allowExternalLinks?: boolean
+  allowStyles?: boolean
+}
+
+type SanitizerConfig = {
+  ALLOWED_TAGS?: string[]
+  ALLOWED_ATTR?: string[]
+  ALLOWED_URI_REGEXP?: RegExp
+  ALLOW_DATA_ATTR?: boolean
+  FORBID_TAGS?: string[]
+  FORBID_ATTR?: string[]
+  KEEP_CONTENT?: boolean
+  RETURN_TRUSTED_TYPE?: boolean
+}
+
+export class EmailSanitizer {
+  private static readonly STRICT_CONFIG: SanitizerConfig = {
+    ALLOWED_TAGS: [
+      'p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li', 'blockquote',
+      'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'span', 'b', 'i'
+    ],
+    ALLOWED_ATTR: ['title'],
+    ALLOW_DATA_ATTR: false,
+    FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form', 'input', 'button', 'img', 'style', 'link', 'base', 'meta', 'svg', 'math'],
+    FORBID_ATTR: ['style', 'onerror', 'onload', 'onclick', 'onmouseover', 'onmouseout', 'onmousemove', 'onmouseenter', 'onmouseleave'],
+    KEEP_CONTENT: true,
+    RETURN_TRUSTED_TYPE: false
+  }
+
+  private static readonly MODERATE_CONFIG: SanitizerConfig = {
+    ALLOWED_TAGS: [
+      'p', 'br', 'strong', 'em', 'u', 'a', 'ul', 'ol', 'li', 'blockquote',
+      'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'span', 'table', 'thead',
+      'tbody', 'tr', 'td', 'th', 'b', 'i', 'hr', 'pre', 'code', 'center',
+      'font', 'small', 'big', 'sub', 'sup'
+    ],
+    ALLOWED_ATTR: [
+      'href', 'title', 'class', 'colspan', 'rowspan', 'align', 'valign',
+      'style', 'color', 'bgcolor', 'width', 'height', 'border', 'cellpadding',
+      'cellspacing', 'size', 'face'
+    ],
+    ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i,
+    ALLOW_DATA_ATTR: false,
+    FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form', 'input', 'button', 'img', 'style', 'link', 'base', 'meta'],
+    FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onmouseout', 'onmousemove', 'onmouseenter', 'onmouseleave'],
+    KEEP_CONTENT: true,
+    RETURN_TRUSTED_TYPE: false
+  }
+
+  private static readonly RELAXED_CONFIG: SanitizerConfig = {
+    ALLOWED_TAGS: [
+      'p', 'br', 'strong', 'em', 'u', 'a', 'ul', 'ol', 'li', 'blockquote',
+      'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'span', 'table', 'thead',
+      'tbody', 'tr', 'td', 'th', 'b', 'i', 'hr', 'pre', 'code', 'center',
+      'font', 'small', 'big', 'sub', 'sup', 'img', 'picture', 'source'
+    ],
+    ALLOWED_ATTR: [
+      'href', 'title', 'class', 'colspan', 'rowspan', 'align', 'valign',
+      'style', 'color', 'bgcolor', 'width', 'height', 'border', 'cellpadding',
+      'cellspacing', 'size', 'face', 'src', 'alt', 'srcset', 'loading'
+    ],
+    ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|data|cid):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i,
+    ALLOW_DATA_ATTR: false,
+    FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form', 'input', 'button', 'style', 'link', 'base', 'meta'],
+    FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onmouseout', 'onmousemove', 'onmouseenter', 'onmouseleave'],
+    KEEP_CONTENT: true,
+    RETURN_TRUSTED_TYPE: false
+  }
+
+  /**
+   * Sanitize HTML email content based on security level and options
+   */
+  static sanitize(html: string, options: SanitizationOptions = {}): string {
+    const {
+      securityLevel = SecurityLevel.MODERATE,
+      allowImages = false,
+      allowExternalLinks = true,
+      allowStyles = true
+    } = options
+
+    // Get base configuration
+    let config: SanitizerConfig
+    switch (securityLevel) {
+      case SecurityLevel.STRICT:
+        config = { ...this.STRICT_CONFIG }
+        break
+      case SecurityLevel.RELAXED:
+        config = { ...this.RELAXED_CONFIG }
+        break
+      case SecurityLevel.MODERATE:
+      default:
+        config = { ...this.MODERATE_CONFIG }
+    }
+
+    // Adjust configuration based on options
+    if (allowImages && config.ALLOWED_TAGS && config.ALLOWED_ATTR) {
+      // Add image tags
+      if (!config.ALLOWED_TAGS.includes('img')) {
+        config.ALLOWED_TAGS.push('img', 'picture', 'source')
+      }
+      
+      // Add image attributes
+      const imageAttrs = ['src', 'alt', 'srcset', 'loading']
+      imageAttrs.forEach(attr => {
+        if (!config.ALLOWED_ATTR!.includes(attr)) {
+          config.ALLOWED_ATTR!.push(attr)
+        }
+      })
+
+      // Allow data URIs and CID references
+      config.ALLOWED_URI_REGEXP = /^(?:(?:(?:f|ht)tps?|mailto|tel|data|cid):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i
+
+      // Remove img from forbidden tags
+      if (config.FORBID_TAGS) {
+        config.FORBID_TAGS = config.FORBID_TAGS.filter((tag: string) => tag !== 'img')
+      }
+    }
+
+    if (!allowExternalLinks && config.ALLOWED_TAGS) {
+      // Remove anchor tags
+      config.ALLOWED_TAGS = config.ALLOWED_TAGS.filter((tag: string) => tag !== 'a')
+    }
+
+    if (!allowStyles && config.ALLOWED_ATTR) {
+      // Remove style-related attributes
+      config.ALLOWED_ATTR = config.ALLOWED_ATTR.filter(
+        (attr: string) => !['style', 'color', 'bgcolor'].includes(attr)
+      )
+    }
+
+    return DOMPurify.sanitize(html, config) as string
+  }
+
+  /**
+   * Get security level description
+   */
+  static getSecurityLevelDescription(level: SecurityLevel): string {
+    switch (level) {
+      case SecurityLevel.STRICT:
+        return 'Maximum security - Only basic text formatting allowed'
+      case SecurityLevel.MODERATE:
+        return 'Balanced security - Allows formatting, links, and tables (recommended)'
+      case SecurityLevel.RELAXED:
+        return 'Minimal filtering - Allows most content including images'
+      default:
+        return ''
+    }
+  }
+}

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tsconfig.app.json

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

tsconfig.json

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

tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["vite.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}

vite.config.ts

@@ -0,0 +1,61 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+
+// https://vite.dev/config/
+export default defineConfig({
+  define: {
+    'process.env': {},
+  },
+  plugins: [
+    vue(),
+    {
+      name: 'inject-css-filename',
+      enforce: 'post',
+      generateBundle(_options, bundle) {
+        const cssFile = Object.keys(bundle).find(name => name.endsWith('.css'))
+        if (!cssFile) return
+        
+        for (const fileName of Object.keys(bundle)) {
+          const chunk = bundle[fileName]
+          if (chunk.type === 'chunk' && chunk.code.includes('__CSS_FILENAME_PLACEHOLDER__')) {
+            chunk.code = chunk.code.replace(/__CSS_FILENAME_PLACEHOLDER__/g, `static/${cssFile}`)
+            console.log(`Injected CSS filename "static/${cssFile}" into ${fileName}`)
+          }
+        }
+      }
+    }
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@KTXC': path.resolve(__dirname, '../../core/src'),
+      '@MailManager': path.resolve(__dirname, '../mail_manager/src'),
+    },
+  },
+  build: {
+    outDir: 'static',
+    emptyOutDir: true,
+    sourcemap: true,
+    lib: {
+      entry: path.resolve(__dirname, 'src/main.ts'),
+      formats: ['es'],
+      fileName: () => 'module.mjs',
+    },
+    rollupOptions: {
+      external: [
+        'vue',
+        'vue-router',
+        'pinia',
+      ],
+      output: {
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name?.endsWith('.css')) {
+            return 'mail-[hash].css'
+          }
+          return '[name]-[hash][extname]'
+        }
+      }
+    },
+  },
+})