refactor: split stores and use events

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

src/components/CreateFolderDialog.vue

@@ -1,7 +1,5 @@
 <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 { ServiceObject } from '@MailManager/models'
 
@@ -9,28 +7,27 @@ import type { ServiceObject } from '@MailManager/models'
 interface Props {
   modelValue: boolean
   service: ServiceObject
-  parentFolder?: CollectionObject | null
-  allFolders?: CollectionObject[]
+  parentFolderLabel?: string
+  validateName?: (name: string) => string[]
+  loading?: boolean
+  errorMessage?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  parentFolder: null,
-  allFolders: () => []
+  parentFolderLabel: 'Root',
+  validateName: () => [],
+  loading: false,
+  errorMessage: '',
 })
 
 // Emits
 const emit = defineEmits<{
   'update:modelValue': [value: boolean]
-  'created': [folder: CollectionObject]
+  confirm: [folderName: string]
 }>()
 
-// Store
-const collectionsStore = useCollectionsStore()
-
 // Form state
 const folderName = ref('')
-const loading = ref(false)
-const errorMessage = ref('')
 const validationErrors = ref<string[]>([])
 
 // Computed
@@ -39,67 +36,13 @@ const dialogValue = computed({
   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')
-    }
-  }
+  validationErrors.value = props.validateName(newName)
 })
 
 // Reset form when dialog opens/closes
@@ -111,59 +54,25 @@ watch(dialogValue, (isOpen) => {
 
 const resetForm = () => {
   folderName.value = ''
-  errorMessage.value = ''
   validationErrors.value = []
-  loading.value = false
 }
 
 const handleCreate = async () => {
-  // Final validation
-  const errors = validateFolderName(folderName.value)
+  const errors = props.validateName(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.create(
-      props.service.provider,
-      props.service.identifier as string | number,
-      props.parentFolder?.identifier ?? null,
-      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
-  }
+  emit('confirm', folderName.value.trim())
 }
 
 const handleCancel = () => {
   dialogValue.value = false
   resetForm()
 }
+
 </script>
 
 <template>