feat: add filter-based mass selection via search modal

src/components/Envelope.vue

@@ -26,7 +26,7 @@
 		:is-important="isImportant"
 		@click.exact="onClick"
 		@click.ctrl.exact.prevent="toggleSelected"
-		@click.shift.exact.prevent="onSelectMultiple"
+		@click.shift.exact.prevent="onSelectMultiple($event)"
 		@delete="onDelete"
 		@toggle-important="onToggleImportant"
 		@toggle-seen="onToggleSeen"
@@ -78,7 +78,7 @@
 				<template v-else>
 					<div
 						@click.stop.exact.prevent="toggleSelected"
-						@click.shift.exact.prevent="onSelectMultiple">
+						@click.shift.exact.prevent="onSelectMultiple($event)">
 						<template v-if="hoveringAvatar || selected">
 							<CheckIcon
 								:size="28"
@@ -1129,7 +1129,10 @@ export default {
 			}
 		},
 
-		onSelectMultiple() {
+		onSelectMultiple(event) {
+			if (!event.shiftKey) {
+				return
+			}
 			this.$emit('select-multiple')
 		},
 

src/components/EnvelopeList.vue

@@ -43,15 +43,15 @@
 						v-if="isAtLeastOneSelectedFavorite"
 						variant="tertiary"
 						:title="n('mail', 'Unfavorite {number}', 'Unfavorite {number}', selection.length, { number: selection.length })"
-						@click.prevent="favoriteAll">
+						@click.prevent="unfavoriteAll">
 						<IconUnFavorite :size="20" />
 					</NcButton>
 
 					<NcButton
 						v-if="isAtLeastOneSelectedUnFavorite"
 						variant="tertiary"
 						:title="n('mail', 'Favorite {number}', 'Favorite {number}', selection.length, { number: selection.length })"
-						@click.prevent="unFavoriteAll">
+						@click.prevent="favoriteAll">
 						<IconFavorite :size="20" />
 					</NcButton>
 
@@ -167,11 +167,12 @@
 import { showError } from '@nextcloud/dialogs'
 import { NcActionButton as ActionButton, NcActions as Actions, NcButton, NcDialog } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
-import { differenceWith } from 'ramda'
+
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import IconSelect from 'vue-material-design-icons/CloseThick.vue'
 import EmailRead from 'vue-material-design-icons/EmailOpenOutline.vue'
 import EmailUnread from 'vue-material-design-icons/EmailOutline.vue'
+import ImportantIcon from 'vue-material-design-icons/LabelVariant.vue'
 import ImportantOutlineIcon from 'vue-material-design-icons/LabelVariantOutline.vue'
 import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
 import AddIcon from 'vue-material-design-icons/Plus.vue'
@@ -204,6 +205,7 @@ export default {
 		ActionButton,
 		Envelope,
 		IconDelete,
+		ImportantIcon,
 		ImportantOutlineIcon,
 		IconFavorite,
 		IconSelect,
@@ -263,11 +265,20 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		selection: {
+			type: Array,
+			default: () => [],
+		},
+
+		flatIndex: {
+			type: Number,
+			default: 0,
+		},
 	},
 
 	data() {
 		return {
-			selection: [],
 			showMoveModal: false,
 			showTagModal: false,
 			lastToggledIndex: undefined,
@@ -359,14 +370,37 @@ export default {
 	},
 
 	watch: {
-		sortedEnvelops(newVal, oldVal) {
-			// Unselect vanished envelopes
-			const newIds = newVal.map((env) => env.databaseId)
-			this.selection = this.selection.filter((id) => newIds.includes(id))
-			differenceWith((a, b) => a.databaseId === b.databaseId, oldVal, newVal)
-				.forEach((env) => {
-					env.flags.selected = false
+		selection: {
+			handler(newSelection) {
+				// Skip sync during local toggle to avoid race condition
+				// where the watcher overwrites flags.selected set by
+				// a local click before emitLocalSelection reads it.
+				if (this._localToggleInProgress) {
+					return
+				}
+				// Sync flags.selected with the global selection prop.
+				// This ensures checkboxes stay correct when another
+				// EnvelopeList instance changes the selection (e.g. shift-click
+				// across groups, or Select All / Unselect All).
+				const selectionSet = new Set(newSelection)
+				this.sortedEnvelops.forEach((env) => {
+					env.flags.selected = selectionSet.has(env.databaseId)
 				})
+			},
+			immediate: true,
+		},
+
+		sortedEnvelops(newVal, oldVal) {
+			// Skip if a local toggle is in progress to avoid race conditions
+			if (this._localToggleInProgress) {
+				return
+			}
+			// Unselect vanished envelopes by emitting cleaned selection
+			const newIds = new Set(newVal.map((env) => env.databaseId))
+			const cleanedSelection = this.selection.filter((id) => newIds.has(id))
+			if (cleanedSelection.length !== this.selection.length) {
+				this.$emit('update:selection', cleanedSelection, this.envelopes)
+			}
 		},
 	},
 
@@ -451,23 +485,21 @@ export default {
 			this.unselectAll()
 		},
 
-		favoriteAll() {
-			const favFlag = !this.isAtLeastOneSelectedUnFavorite
+		unfavoriteAll() {
 			this.selectedEnvelopes.forEach((envelope) => {
 				this.mainStore.markEnvelopeFavoriteOrUnfavorite({
 					envelope,
-					favFlag,
+					favFlag: false,
 				})
 			})
 			this.unselectAll()
 		},
 
-		unFavoriteAll() {
-			const favFlag = !this.isAtLeastOneSelectedFavorite
+		favoriteAll() {
 			this.selectedEnvelopes.forEach((envelope) => {
 				this.mainStore.markEnvelopeFavoriteOrUnfavorite({
 					envelope,
-					favFlag,
+					favFlag: true,
 				})
 			})
 			this.unselectAll()
@@ -537,16 +569,27 @@ export default {
 			const alreadySelected = this.selection.includes(envelope.databaseId)
 			if (selected && !alreadySelected) {
 				envelope.flags.selected = true
-				this.selection.push(envelope.databaseId)
 			} else if (!selected && alreadySelected) {
 				envelope.flags.selected = false
-				this.selection.splice(this.selection.indexOf(envelope.databaseId), 1)
 			}
 		},
 
+		emitLocalSelection() {
+			const localIds = this.sortedEnvelops
+				.filter((env) => env.flags.selected)
+				.map((env) => env.databaseId)
+			this.$emit('update:selection', localIds, this.envelopes)
+		},
+
 		onEnvelopeSelectToggle(envelope, index, selected) {
 			this.lastToggledIndex = index
+			this._localToggleInProgress = true
 			this.setEnvelopeSelected(envelope, selected)
+			this.emitLocalSelection()
+			// Reset after next tick — Vue batches watchers at end of tick
+			this.$nextTick(() => {
+				this._localToggleInProgress = false
+			})
 		},
 
 		onEnvelopeSelectMultiple(envelope, index) {
@@ -557,20 +600,20 @@ export default {
 				return
 			}
 
-			const start = Math.min(lastToggledIndex, index)
-			const end = Math.max(lastToggledIndex, index)
-			const selected = this.selection.includes(envelope.databaseId)
-			for (let i = start; i <= end; i++) {
-				this.setEnvelopeSelected(this.sortedEnvelops[i], !selected)
-			}
+			// Convert to global flat indices and delegate to the parent
+			const globalFrom = this.flatIndex + lastToggledIndex
+			const globalTo = this.flatIndex + index
+			// If the clicked envelope is already selected, deselect the range
+			const deselect = this.selection.includes(envelope.databaseId)
+			this.$emit('select-range', globalFrom, globalTo, deselect)
 			this.lastToggledIndex = index
 		},
 
 		unselectAll() {
 			this.sortedEnvelops.forEach((env) => {
 				env.flags.selected = false
 			})
-			this.selection = []
+			this.$emit('update:selection', [], this.envelopes)
 		},
 
 		onOpenMoveModal() {