E-Mail Cache und Konto-Synchronisation vorbereiten

KI-AGENT: Ergänzt Tabellen für lokalen E-Mail-Cache, IMAP-Sync-Service und Inbox-API. Überarbeitet außerdem die E-Mail-Konto-Seiten mit sicherer Passwortbehandlung und manuellem Sync.

frontend/pages/settings/emailaccounts/index.vue

@@ -1,97 +1,114 @@
-<script setup>
-
-const createEMailAddress = ref("")
-const createEMailType = ref("imap")
-const showEmailAddressModal = ref(false)
-
+<script setup lang="ts">
+const toast = useToast()
 const items = ref([])
+const loading = ref(true)
+const syncingAccount = ref<string | null>(null)
 
 const setupPage = async () => {
-  items.value = await useNuxtApp().$api("/api/email/accounts")
+  loading.value = true
+  try {
+    items.value = await useNuxtApp().$api("/api/email/accounts")
+  } finally {
+    loading.value = false
+  }
 }
 
-const createAccount = async () => {
-  showEmailAddressModal.value = false
+const syncAccount = async (account: any) => {
+  syncingAccount.value = account.id
+  try {
+    const res = await useNuxtApp().$api(`/api/email/accounts/${account.id}/sync`, {
+      method: "POST",
+      body: { limit: 50 },
+    })
+
+    toast.add({
+      title: "E-Mail Konto synchronisiert",
+      description: `${res.synced?.[0]?.fetched || 0} neue Nachrichten geladen`,
+      color: "success",
+    })
+  } catch (err: any) {
+    toast.add({
+      title: "Synchronisation fehlgeschlagen",
+      description: err?.data?.error || err?.message || "Das Konto konnte nicht synchronisiert werden.",
+      color: "error",
+    })
+  } finally {
+    syncingAccount.value = null
+    await setupPage()
+  }
 }
 
 setupPage()
-
-
-const templateColumns = [
-  {
-    key: "email",
-    label: "E-Mail Adresse:"
-  },
-]
-const selectedColumns = ref(templateColumns)
-const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
-
-
-
 </script>
 
 <template>
-  <UModal
-    v-model:open="showEmailAddressModal"
-  >
-    <template #content>
-      <UCard>
-        <template #header>
-          E-Mail Adresse
-        </template>
-<!--      <UFormField
-        label="E-Mail Adresse:"
-      >
-
-      </UFormField>-->
-
-      <UInput
-          v-model="createEMailAddress"
-      />
-<!--      <UFormField
-        label="Account Typ:"
-      >
-        <USelectMenu
-          :options="[{key: 'imap',label:'IMAP'}]"
-          option-attribute="label"
-          value-attribute="key"
-          v-model="createEMailType"
-        />
-      </UFormField>-->
-        <template #footer>
-          <UButton
-              @click="createAccount"
-          >
-            Erstellen
-          </UButton>
-        </template>
-      </UCard>
-    </template>
-
-  </UModal>
   <UDashboardNavbar title="E-Mail Konten">
       <template #right>
-        <UTooltip title="In der Beta nicht verfügbar">
-          <UButton
-              @click="navigateTo('/settings/emailaccounts/create')"
-          >
-            + E-Mail Konto
-          </UButton>
-        </UTooltip>
-
+        <UButton
+            icon="i-heroicons-plus"
+            @click="navigateTo('/settings/emailaccounts/create')"
+        >
+          E-Mail Konto
+        </UButton>
       </template>
   </UDashboardNavbar>
-  <UTable
-    :data="items"
-    :columns="normalizeTableColumns(columns)"
-    class="w-full"
-    :on-select="(i) => navigateTo(`/settings/emailaccounts/edit/${i.id}`)"
-    :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-  >
-    <template #empty>
-      <TableEmptyState label="Keine E-Mail Konten anzuzeigen" />
-    </template>
-  </UTable>
+
+  <div class="p-4 space-y-3">
+    <div v-if="loading" class="space-y-2">
+      <USkeleton v-for="i in 4" :key="i" class="h-20" />
+    </div>
+
+    <TableEmptyState
+        v-else-if="items.length === 0"
+        label="Keine E-Mail Konten anzuzeigen"
+    />
+
+    <div
+        v-for="account in items"
+        v-else
+        :key="account.id"
+        class="flex flex-col gap-3 border-b border-(--ui-border) py-4 md:flex-row md:items-center md:justify-between"
+    >
+      <div class="min-w-0">
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-envelope" class="size-5 text-primary" />
+          <p class="truncate font-medium">
+            {{ account.email }}
+          </p>
+          <UBadge
+              size="xs"
+              color="neutral"
+              variant="soft"
+          >
+            IMAP/SMTP
+          </UBadge>
+        </div>
+        <div class="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-sm text-dimmed">
+          <span>IMAP: {{ account.imapHost || "nicht gesetzt" }}:{{ account.imapPort || "-" }}</span>
+          <span>SMTP: {{ account.smtpHost || "nicht gesetzt" }}:{{ account.smtpPort || "-" }}</span>
+          <span>{{ account.hasPassword ? "Passwort hinterlegt" : "Passwort fehlt" }}</span>
+        </div>
+      </div>
+
+      <div class="flex shrink-0 items-center gap-2">
+        <UButton
+            icon="i-heroicons-arrow-path"
+            color="neutral"
+            variant="soft"
+            :loading="syncingAccount === account.id"
+            @click.stop="syncAccount(account)"
+        >
+          Synchronisieren
+        </UButton>
+        <UButton
+            icon="i-heroicons-pencil-square"
+            color="neutral"
+            variant="ghost"
+            @click="navigateTo(`/settings/emailaccounts/edit/${account.id}`)"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>