feat: lots more improvements

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

src/components/steps/ProviderAuthPanel.vue

@@ -66,11 +66,11 @@ async function loadProviderPanel() {
   panelLoading.value = true
 
   // retrieve panel from integration store
-  const panel = integrationStore.getItems('mail_account_auth_panels').find((panel: any) => {
+  const panel = integrationStore.getItems('mail_provider_panels_auth').find((panel: any) => {
     return panel.id === providerIdentifier || panel.id.endsWith(`.${providerIdentifier}`)
   })
   if (!panel?.component) {
-    console.warn(`No config panel found for provider ID: ${providerIdentifier}`)
+    console.warn(`No panel found for provider ID: ${providerIdentifier}`)
     panelActive.value = null
     panelLoading.value = false
     return
@@ -99,19 +99,18 @@ function handleUpdate(service: ServiceObject) {
   <div class="provider-auth-panel">
     <h3 class="text-h6 mb-2">Authentication</h3>
     <p class="text-body-2 text-medium-emphasis mb-6">
-      Configure authentication for {{ localProvider?.label || 'this provider' }}.
+      Configure authentication specific settings for {{ localProvider?.label || 'this provider' }}.
     </p>
 
     <div v-if="panelLoading" class="text-center py-8">
       <v-progress-circular indeterminate color="primary" />
       <p class="text-caption text-medium-emphasis mt-2">
-        Loading authentication panel...
+        Loading panel...
       </p>
     </div>
 
-    <v-alert v-else-if="!panelActive" type="error" variant="tonal">
-      <v-icon start>mdi-alert-circle</v-icon>
-      No authentication method available for this provider.
+    <v-alert v-else-if="!panelActive" type="info" variant="tonal">
+      No panel available for this provider.
     </v-alert>
 
     <component

src/components/steps/ProviderAuxiliaryPanel.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref, shallowRef, watch } from 'vue'
+import type { Component } from 'vue'
+import { useIntegrationStore } from '@KTXC/stores/integrationStore'
+import type { ServiceObject } from '@MailManager/models/service'
+import type { ProviderObject } from '@MailManager/models/provider'
+
+const props = defineProps<{
+  provider: ProviderObject
+  service: ServiceObject
+}>()
+
+const emit = defineEmits<{
+  'update:service': [value: ServiceObject]
+}>()
+
+const integrationStore = useIntegrationStore()
+const panelCache = new Map<string, Component>()
+const panelLoading = ref(false)
+const panelActive = shallowRef<Component | null>(null)
+const localProvider = ref<ProviderObject>(props.provider)
+const localService = ref<ServiceObject>(props.service)
+
+watch(
+  () => props.provider,
+  async (provider) => {
+    localProvider.value = provider
+    await loadProviderPanel()
+  }
+)
+
+watch(
+  () => props.service,
+  (service) => {
+    localService.value = service
+  }
+)
+
+watch(
+  () => [localProvider.value?.identifier, localService.value?.provider] as const,
+  async () => {
+    await loadProviderPanel()
+  },
+  { immediate: true }
+)
+
+async function loadProviderPanel() {
+  const providerIdentifier = localProvider.value?.identifier || localService.value?.provider
+
+  if (!providerIdentifier) {
+    panelActive.value = null
+    panelLoading.value = false
+    return
+  }
+
+  if (panelCache.has(providerIdentifier)) {
+    panelActive.value = panelCache.get(providerIdentifier) || null
+    panelLoading.value = false
+    return
+  }
+
+  panelLoading.value = true
+
+  const panel = integrationStore.getItems('mail_provider_panels_auxiliary').find((panel: any) => {
+    return panel.id === providerIdentifier || panel.id.endsWith(`.${providerIdentifier}`)
+  })
+
+  if (!panel?.component) {
+    console.warn(`No auxiliary panel found for provider ID: ${providerIdentifier}`)
+    panelActive.value = null
+    panelLoading.value = false
+    return
+  }
+
+  try {
+    const module = await panel.component()
+    const component = module.default || module
+    panelCache.set(providerIdentifier, component)
+    panelActive.value = component
+  } catch (error) {
+    console.error(`Failed to load auxiliary panel for ${providerIdentifier}:`, error)
+    panelActive.value = null
+  } finally {
+    panelLoading.value = false
+  }
+}
+
+function handleUpdate(service: ServiceObject) {
+  localService.value = service
+  emit('update:service', localService.value)
+}
+</script>
+
+<template>
+  <div class="provider-auxiliary-panel">
+    <h3 class="text-h6 mb-2">Settings</h3>
+    <p class="text-body-2 text-medium-emphasis mb-6">
+      Configure provider specific settings for {{ localProvider?.label || 'this provider' }}.
+    </p>
+
+    <div v-if="panelLoading" class="text-center py-8">
+      <v-progress-circular indeterminate color="primary" />
+      <p class="text-caption text-medium-emphasis mt-2">
+        Loading panel...
+      </p>
+    </div>
+
+    <v-alert v-else-if="!panelActive" type="info" variant="tonal">
+      No panel available for this provider.
+    </v-alert>
+
+    <component
+      v-else
+      :is="panelActive"
+      :service="localService"
+      @update:service="handleUpdate"
+    />
+  </div>
+</template>

src/components/steps/ProviderProtocolPanel.vue

@@ -66,11 +66,11 @@ async function loadProviderPanel() {
   panelLoading.value = true
 
   // retrieve panel from integration store
-  const panel = integrationStore.getItems('mail_account_protocol_panels').find((panel: any) => {
+  const panel = integrationStore.getItems('mail_provider_panels_protocol').find((panel: any) => {
     return panel.id === providerIdentifier || panel.id.endsWith(`.${providerIdentifier}`)
   })
   if (!panel?.component) {
-    console.warn(`No config panel found for provider ID: ${providerIdentifier}`)
+    console.warn(`No panel found for provider ID: ${providerIdentifier}`)
     panelActive.value = null
     panelLoading.value = false
     return
@@ -97,21 +97,20 @@ function handleUpdate(service: ServiceObject) {
 
 <template>
   <div class="provider-protocol-panel">
-    <h3 class="text-h6 mb-2">Protocol Configuration</h3>
+    <h3 class="text-h6 mb-2">Protocol</h3>
     <p class="text-body-2 text-medium-emphasis mb-6">
-      Configure authentication for {{ localProvider?.label || 'this provider' }}.
+      Configure protocol specific settings for {{ localProvider?.label || 'this provider' }}.
     </p>
 
     <div v-if="panelLoading" class="text-center py-8">
       <v-progress-circular indeterminate color="primary" />
       <p class="text-caption text-medium-emphasis mt-2">
-        Loading configuration panel...
+        Loading panel...
       </p>
     </div>
 
     <v-alert v-else-if="!panelActive" type="info" variant="tonal">
-      <v-icon start>mdi-information</v-icon>
-      No configuration panel available for this provider
+      No panel available for this provider.
     </v-alert>
 
     <component

src/components/steps/ProviderSelectionPanel.vue

@@ -14,7 +14,7 @@ const selected = ref<string | null>(null)
 
 // Get provider metadata from integrations
 const providerMetadata = computed(() => {
-  const metadata = integrationStore.getItems('mail_provider_metadata')
+  const metadata = integrationStore.getItems('mail_provider_details')
   return metadata.reduce((acc: any, meta: any) => {
     acc[meta.id] = meta
     return acc