feat: lots more improvements

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

src/pages/AccountsPage.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { useServicesStore } from '@/stores/servicesStore'
-import AddAccountDialog from '@/components/AddAccountDialog.vue'
-import type { ServiceObject } from '@/models'
+import { useIntegrationStore } from '@KTXC/stores/integrationStore'
+import { useServicesStore } from '../stores/servicesStore'
+import AddAccountDialog from '../components/AddAccountDialog.vue'
+import EditAccountDialog from '../components/EditAccountDialog.vue'
+import type { ServiceObject } from '../models'
 
 const servicesStore = useServicesStore()
+const integrationStore = useIntegrationStore()
 
 const showAddDialog = ref(false)
 const showEditDialog = ref(false)
@@ -12,13 +15,20 @@ const showDeleteConfirm = ref(false)
 const showTestResult = ref(false)
 const selectedAccount = ref<any>({})
 const loading = ref(false)
-const saving = ref(false)
 const deleting = ref(false)
 const testingId = ref<string | null>(null)
 const testResult = ref<any>(null)
 
 const groupedServices = computed(() => servicesStore.servicesByProvider)
 
+const providerMetadata = computed(() => {
+  return integrationStore.getItems('mail_provider_details').reduce((metadata, entry: any) => {
+    const providerId = entry.id.split('.').pop() || entry.id
+    metadata[providerId] = entry
+    return metadata
+  }, {} as Record<string, { icon?: string; label?: string }>)
+})
+
 const hasAccounts = computed(() => servicesStore.has)
 
 onMounted(async () => {
@@ -31,44 +41,18 @@ onMounted(async () => {
 })
 
 function getProviderIcon(providerId: string): string {
-  const icons: Record<string, string> = {
-    'smtp': 'mdi-email-multiple',
-    'jmap': 'mdi-api',
-    'exchange': 'mdi-microsoft',
-  }
-  return icons[providerId] || 'mdi-email'
+  return providerMetadata.value[providerId]?.icon || 'mdi-email'
 }
 
 function getProviderLabel(providerId: string): string {
-  const labels: Record<string, string> = {
-    'smtp': 'SMTP/IMAP',
-    'jmap': 'JMAP',
-    'exchange': 'Microsoft Exchange',
-  }
-  return labels[providerId] || providerId.toUpperCase()
+  return providerMetadata.value[providerId]?.label || providerId.toUpperCase()
 }
 
-function editAccount(account: any) {
-  selectedAccount.value = { ...account }
+function editAccount(account: ServiceObject) {
+  selectedAccount.value = account
   showEditDialog.value = true
 }
 
-async function saveEdit() {
-  saving.value = true
-  try {
-    await servicesStore.update(
-      selectedAccount.value.provider,
-      selectedAccount.value.identifier,
-      selectedAccount.value
-    )
-    showEditDialog.value = false
-  } catch (error) {
-    console.error('Failed to update account:', error)
-  } finally {
-    saving.value = false
-  }
-}
-
 function confirmDelete(account: any) {
   selectedAccount.value = account
   showDeleteConfirm.value = true
@@ -94,9 +78,7 @@ async function testAccount(service: ServiceObject) {
   try {
     const result = await servicesStore.test(
       service.provider,
-      service.identifier,
-      service.location,
-      service.identity
+      service.identifier
     )
     testResult.value = result
     showTestResult.value = true
@@ -112,6 +94,7 @@ async function testAccount(service: ServiceObject) {
 }
 
 async function handleAccountSaved() {
+  showEditDialog.value = false
   await servicesStore.list()
 }
 </script>
@@ -292,42 +275,12 @@ async function handleAccountSaved() {
     />
 
     <!-- Edit Account Dialog -->
-    <v-dialog
+    <EditAccountDialog
       v-model="showEditDialog"
-      max-width="600"
-    >
-      <v-card>
-        <v-card-title>Edit Account</v-card-title>
-        <v-card-text>
-          <v-text-field
-            v-model="selectedAccount.label"
-            label="Account Name"
-            variant="outlined"
-          />
-          <v-switch
-            v-model="selectedAccount.enabled"
-            label="Enable this account"
-            color="primary"
-          />
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn
-            variant="text"
-            @click="showEditDialog = false"
-          >
-            Cancel
-          </v-btn>
-          <v-btn
-            color="primary"
-            :loading="saving"
-            @click="saveEdit"
-          >
-            Save
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+      :service-provider="selectedAccount?.provider || ''"
+      :service-identifier="selectedAccount?.identifier || ''"
+      @saved="handleAccountSaved"
+    />
 
     <!-- Delete Confirmation Dialog -->
     <v-dialog