feat: move and delete

Signed-off-by: Sebastian <krupinski01@gmail.com>
2026-04-16 20:36:25 -04:00
parent 509fbc2480
commit 31a9ab419c
5 changed files with 274 additions and 285 deletions
--- a/src/components/FolderSelectionDialog.vue
+++ b/src/components/FolderSelectionDialog.vue
@@ -23,7 +23,7 @@ const props = withDefaults(defineProps<Props>(), {

 const emit = defineEmits<{
  'update:modelValue': [value: boolean]
-  select: [folder: CollectionObject]
+  select: [target: CollectionObject]
  cancel: []
 }>()

@@ -50,16 +50,13 @@ interface ServiceGroup {
 }

 const serviceGroups = computed<ServiceGroup[]>(() => {
-  const moveCandidate = mailStore.moveMessageCandidates[0]
+  const context = mailStore.moveDialogService

-  if (!moveCandidate) {
+  if (!context) {
    return []
  }

-  const service = servicesStore.services.find(entry =>
-    entry.provider === moveCandidate.provider &&
-    String(entry.identifier) === String(moveCandidate.service),
-  )
+  const service = servicesStore.serviceByIdentifier(mailStore.moveDialogService)

  if (!service) {
    return []
@@ -111,7 +108,7 @@ const canConfirm = computed(() => {
 })

 watch(
-  () => [props.modelValue, mailStore.moveMessageCandidates],
+  () => [props.modelValue, mailStore.moveDialogService],
  ([isOpen]) => {
    if (!isOpen) {
      return
--- a/src/components/MessageList.vue
+++ b/src/components/MessageList.vue
@@ -1,40 +1,34 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref } from 'vue'
 import type { EntityIdentifier } from '@MailManager/types/common'
-import type { EntityInterface } from '@MailManager/types/entity'
-import type { MessageInterface } from '@MailManager/types/message'
+import type { EntityObject } from '@MailManager/models'
 import type { CollectionObject } from '@MailManager/models/collection'

 // Props
 interface Props {
-  messages: EntityInterface<MessageInterface>[]
-  selectedMessage?: EntityInterface<MessageInterface> | null
-  selectedMessageIds?: EntityIdentifier[]
-  selectionModeActive?: boolean
-  selectionCount?: number
-  hasSelection?: boolean
-  allCurrentMessagesSelected?: boolean
+  messages: EntityObject[]
+  selectedMessage?: EntityObject | null
+  selectionList?: EntityIdentifier[]
+  selectionMode?: boolean
  selectedCollection?: CollectionObject | null
  loading?: boolean
 }

 const props = withDefaults(defineProps<Props>(), {
  loading: false,
-  selectedMessageIds: () => [],
-  selectionModeActive: false,
-  selectionCount: 0,
-  hasSelection: false,
-  allCurrentMessagesSelected: false,
+  selectionList: () => [],
+  selectionMode: false,
 })

 // Emits
 const emit = defineEmits<{
-  open: [message: EntityInterface<MessageInterface>]
-  toggleSelection: [message: EntityInterface<MessageInterface>]
-  activateSelectionMode: [message: EntityInterface<MessageInterface>]
+  open: [message: EntityObject]
+  toggleSelection: [message: EntityObject]
+  activateSelectionMode: [message: EntityObject]
  toggleSelectAll: [value: boolean]
  clearSelection: []
  moveSelection: []
+  deleteSelection: []
 }>()

 const longPressTimer = ref<number | null>(null)
@@ -42,19 +36,19 @@ const longPressActivated = ref(false)
 const suppressNextClick = ref(false)
 const LONG_PRESS_MS = 450

-const selectedIdSet = computed(() => new Set(props.selectedMessageIds))
+const selectedIdSet = computed(() => new Set(props.selectionList))

-const isOpened = (message: EntityInterface<MessageInterface>): boolean => {
+const isOpened = (message: EntityObject): boolean => {
  if (!props.selectedMessage) return false
  return (
-    message.provider === selectedMessage.value.provider &&
-    message.service === selectedMessage.value.service &&
-    message.collection === selectedMessage.value.collection &&
-    message.identifier === selectedMessage.value.identifier
+    message.provider === props.selectedMessage.provider &&
+    message.service === props.selectedMessage.service &&
+    message.collection === props.selectedMessage.collection &&
+    message.identifier === props.selectedMessage.identifier
  )
 }

-const isSelected = (message: EntityInterface<MessageInterface>): boolean => {
+const isSelected = (message: EntityObject): boolean => {
  return selectedIdSet.value.has(
    `${message.provider}:${String(message.service)}:${String(message.collection)}:${String(message.identifier)}` as EntityIdentifier,
  )
@@ -70,6 +64,16 @@ const isFlagged = (message: EntityObject): boolean => {
  return message.properties.flags?.flagged || false
 }

+const currentMessages = computed(() => props.messages ?? [])
+
+const selectionCount = computed(() => props.selectionList.length)
+
+const hasSelection = computed(() => selectionCount.value > 0)
+
+const allCurrentMessagesSelected = computed(() => {
+  return currentMessages.value.length > 0 && currentMessages.value.every(message => isSelected(message))
+})
+
 // Format date for display
 const formatDate = (date: Date | string | null | undefined): string => {
  if (!date) return ''
@@ -101,6 +105,7 @@ const formatDate = (date: Date | string | null | undefined): string => {
      day: 'numeric' 
    })
  }
+
  
  // Other years - show full date
  return messageDate.toLocaleDateString('en-US', { 
@@ -116,8 +121,18 @@ const truncate = (text: string | null | undefined, length: number = 100): string
  return text.length > length ? text.substring(0, length) + '...' : text
 }

-// Handle message click
-const handleMessageClick = (message: EntityInterface<MessageInterface>) => {
+const handleSelectionToggle = (message: EntityObject) => {
+  emit('toggleSelection', message)
+}
+
+const handleMessageMouseClick = (event: MouseEvent | KeyboardEvent, message: EntityObject) => {
+  if (event.shiftKey && !props.selectionMode) {
+    event.preventDefault()
+    event.stopPropagation()
+    emit('activateSelectionMode', message)
+    return
+  }
+
  if (longPressActivated.value) {
    longPressActivated.value = false
    return
@@ -128,7 +143,7 @@ const handleMessageClick = (message: EntityInterface<MessageInterface>) => {
    return
  }

-  if (props.selectionModeActive) {
+  if (props.selectionMode) {
    emit('toggleSelection', message)
    return
  }
@@ -136,23 +151,8 @@ const handleMessageClick = (message: EntityInterface<MessageInterface>) => {
  emit('open', message)
 }

-const handleSelectionToggle = (message: EntityInterface<MessageInterface>) => {
-  emit('toggleSelection', message)
-}
-
-const handleMessageMouseClick = (event: MouseEvent | KeyboardEvent, message: EntityInterface<MessageInterface>) => {
-  if (event.shiftKey && !props.selectionModeActive) {
-    event.preventDefault()
-    event.stopPropagation()
-    emit('activateSelectionMode', message)
-    return
-  }
-
-  handleMessageClick(message)
-}
-
-const handleMessageMouseDown = (event: MouseEvent, message: EntityInterface<MessageInterface>) => {
-  if (!event.shiftKey || props.selectionModeActive) {
+const handleMessageMouseDown = (event: MouseEvent, message: EntityObject) => {
+  if (!event.shiftKey || props.selectionMode) {
    return
  }

@@ -169,12 +169,12 @@ const clearLongPressTimer = () => {
  }
 }

-const handleTouchStart = (message: EntityInterface<MessageInterface>) => {
+const handleTouchStart = (message: EntityObject) => {
  clearLongPressTimer()
  longPressActivated.value = false

  longPressTimer.value = window.setTimeout(() => {
-    if (!props.selectionModeActive) {
+    if (!props.selectionMode) {
      emit('activateSelectionMode', message)
    } else {
      emit('toggleSelection', message)
@@ -216,12 +216,12 @@ const unreadCount = computed(() => {
 })

 const totalCount = computed(() => {
-  return selectedFolder.value?.properties.total ?? 0
+  return props.selectedCollection?.properties.total ?? 0
 })

 // True only when the collection explicitly provides total/unread counts
 const hasCountData = computed(() => {
-  return selectedFolder.value?.properties.total != null
+  return props.selectedCollection?.properties.total != null
 })
 </script>

@@ -243,7 +243,7 @@ const hasCountData = computed(() => {
        </div>
      </div>

-      <div v-if="selectionModeActive && messages.length > 0" class="selection-summary">
+      <div v-if="selectionMode && messages.length > 0" class="selection-summary">
        <div class="selection-controls">
          <v-checkbox-btn
            :model-value="allCurrentMessagesSelected"
@@ -267,6 +267,15 @@ const hasCountData = computed(() => {
          >
            Move
          </v-btn>
+          <v-btn
+            size="small"
+            variant="text"
+            prepend-icon="mdi-delete-outline"
+            :disabled="!hasSelection"
+            @click="emit('deleteSelection')"
+          >
+            Delete
+          </v-btn>
          <v-btn
            size="small"
            variant="text"
@@ -307,12 +316,12 @@ const hasCountData = computed(() => {
    >
      <template v-slot:default="{ item: message }">
        <v-list-item
-          :key="`${message.provider}-${message.service}-${message.collection}-${message.identifier}`"
+          :key="`${message.provider}:${message.service}:${message.collection}:${message.identifier}`"
          class="message-item"
          :class="{
            'opened': isOpened(message),
            'selected': isSelected(message),
-            'selection-mode': selectionModeActive,
+            'selection-mode': selectionMode,
            'unread': isUnread(message)
          }"
          @mousedown="handleMessageMouseDown($event, message)"
@@ -326,7 +335,7 @@ const hasCountData = computed(() => {
          <template v-slot:prepend>
            <div class="message-item-prepend">
              <v-checkbox-btn
-                v-if="selectionModeActive || isSelected(message)"
+                v-if="selectionMode || isSelected(message)"
                :model-value="isSelected(message)"
                density="compact"
                hide-details
--- a/src/components/settings/AccountsSettings.vue
+++ b/src/components/settings/AccountsSettings.vue
@@ -2,14 +2,14 @@
 import { ref, onMounted } from 'vue'
 import { useServicesStore } from '@MailManager/stores/servicesStore'
 import { AddAccountDialog, EditAccountDialog } from '@MailManager/main'
+import type { ServiceObject } from '@MailManager/models'

 const servicesStore = useServicesStore()

 // Dialog state
 const showAddDialog = ref(false)
 const showEditDialog = ref(false)
-const editServiceProvider = ref<string>('')
-const editServiceIdentifier = ref<string | number>('')
+const editService = ref<ServiceObject>()

 // Load services on mount
 onMounted(async () => {
@@ -22,11 +22,8 @@ const handleAddAccount = () => {
  showAddDialog.value = true
 }

-const handleConfigureAccount = (serviceKey: string) => {
-  // Service key is in format "provider:identifier"
-  const [provider, identifier] = serviceKey.split(':')
-  editServiceProvider.value = provider
-  editServiceIdentifier.value = identifier
+const handleConfigureAccount = (service: ServiceObject) => {
+  editService.value = service
  showEditDialog.value = true
 }

@@ -58,7 +55,7 @@ const handleAccountSaved = async () => {
            icon="mdi-cog"
            variant="text"
            size="small"
-            @click="handleConfigureAccount(`${service.provider}:${service.identifier}`)"
+            @click="handleConfigureAccount(service)"
          />
        </template>
      </v-list-item>
@@ -87,10 +84,10 @@ const handleAccountSaved = async () => {

    <!-- Edit Account Dialog -->
    <EditAccountDialog
-      v-if="editServiceProvider && editServiceIdentifier"
+      v-if="editService"
      v-model="showEditDialog"
-      :service-provider="editServiceProvider"
-      :service-identifier="editServiceIdentifier"
+      :service-provider="editService.provider"
+      :service-identifier="editService.identifier"
      @saved="handleAccountSaved"
    />
  </div>