feat: lots more improvements

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

src/components/EditAccountDialog.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, shallowRef, computed, watch } from 'vue'
 import { useServicesStore } from '@MailManager/stores/servicesStore'
 import { useProvidersStore } from '@MailManager/stores/providersStore'
 import type { ProviderObject, ServiceObject } from '@MailManager/models'
+import ProviderAuxiliaryPanel from '@MailManager/components/steps/ProviderAuxiliaryPanel.vue'
 import ProviderProtocolPanel from '@MailManager/components/steps/ProviderProtocolPanel.vue'
 import ProviderAuthPanel from '@MailManager/components/steps/ProviderAuthPanel.vue'
 import TestAndSavePanel from '@MailManager/components/steps/TestAndSavePanel.vue'
 
-type EditTab = 'general' | 'protocol' | 'auth'
+type EditTab = 'general' | 'auxiliary' | 'protocol' | 'auth'
 
 const props = defineProps<{
   modelValue: boolean
@@ -33,19 +34,27 @@ const saving = ref(false)
 const loading = ref(false)
 const loadError = ref<string | null>(null)
 
-const localProvider = ref<ProviderObject | null>(null)
-const localService = ref<ServiceObject | null>(null)
-const mutated = ref(false)
+const localProvider = shallowRef<ProviderObject | null>(null)
+const localService = shallowRef<ServiceObject | null>(null)
 
 // Validation states
 const testAndSaveValid = ref(false)
 
+function serviceRequiresConnectionTest(service: ServiceObject | null): boolean {
+  return !!(service?.location?.mutated() || service?.identity?.mutated())
+}
+
 const tabItems = [
   {
     title: 'General',
     icon: 'mdi-view-dashboard-outline',
     value: 'general' as const
   },
+  {
+    title: 'Auxiliary Settings',
+    icon: 'mdi-tune-variant',
+    value: 'auxiliary' as const
+  },
   {
     title: 'Protocol',
     icon: 'mdi-tune-vertical',
@@ -59,7 +68,7 @@ const tabItems = [
 ]
 
 const canSave = computed(() => {
-  return testAndSaveValid.value
+  return !serviceRequiresConnectionTest(localService.value) || testAndSaveValid.value
 })
 
 const showSaveButton = computed(() => currentTab.value === 'general')
@@ -118,7 +127,6 @@ function resetForm() {
   localService.value = null
   localProvider.value = null
   loadError.value = null
-  testAndSaveValid.value = false
 }
 
 function isTabDisabled(tab: EditTab) {
@@ -131,14 +139,24 @@ function isTabDisabled(tab: EditTab) {
 
 function handleUpdate(mutatedService: ServiceObject) {
   localService.value = mutatedService
-  mutated.value = true
+
+  if (serviceRequiresConnectionTest(mutatedService)) {
+    testAndSaveValid.value = false
+  }
 }
 
 async function testConnection() {
   try {
+    if (!localService.value) {
+      return {
+        success: false,
+        message: 'Missing service configuration'
+      }
+    }
+
     let testResult = null
     
-    if (mutated.value) {
+    if (serviceRequiresConnectionTest(localService.value)) {
       testResult = await servicesStore.test(
         localService.value.provider,
         null,
@@ -165,27 +183,19 @@ async function testConnection() {
 
 async function saveAccount() {
   // No changes made, just close the dialog
-  if (!mutated.value) {
+  if (!localService.value.mutated() && !localService.value.location?.mutated() && !localService.value.identity?.mutated()) {
     close()
     return
   }
 
-  if (!localService.value?.location || !localService.value?.identity) return
-  
   saving.value = true
 
   try {
-    const accountData = {
-      label: accountLabel.value || localService.value.label,
-      enabled: accountEnabled.value,
-      location: localService.value.location,
-      identity: localService.value.identity
-    }
-
     await servicesStore.update(
       localService.value.provider,
       localService.value.identifier as string | number,
-      accountData
+      true, // delta update
+      localService.value
     )
 
     emit('saved')
@@ -254,20 +264,31 @@ async function saveAccount() {
             <v-card flat class="pa-6">
               <TestAndSavePanel
                 v-if="localProvider && localService"
-                :provider="localProvider"
-                :service="localService"
+                :provider="localProvider!"
+                :service="localService!"
                 :on-test="testConnection"
                 @update:service="handleUpdate"
               />
             </v-card>
           </v-window-item>
 
+          <v-window-item value="auxiliary">
+            <v-card flat class="pa-6">
+              <ProviderAuxiliaryPanel
+                v-if="localProvider && localService"
+                :provider="localProvider!"
+                :service="localService!"
+                @update:service="handleUpdate"
+              />
+            </v-card>
+          </v-window-item>
+
           <v-window-item value="protocol">
             <v-card flat class="pa-6">
               <ProviderProtocolPanel
                 v-if="localProvider && localService"
-                :provider="localProvider"
-                :service="localService"
+                :provider="localProvider!"
+                :service="localService!"
                 @update:service="handleUpdate"
               />
             </v-card>
@@ -277,8 +298,8 @@ async function saveAccount() {
             <v-card flat class="pa-6">
               <ProviderAuthPanel
                 v-if="localProvider && localService"
-                :provider="localProvider"
-                :service="localService"
+                :provider="localProvider!"
+                :service="localService!"
                 @update:service="handleUpdate"
               />
             </v-card>