feat: add select-all checkbox, fix missing important icon and favorite/unfavorite logic

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: RobinAngele

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>
 
@@ -172,6 +172,7 @@ 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,10 +370,27 @@ export default {
 	},
 
 	watch: {
+		selection: {
+			handler(newSelection) {
+				// 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) {
-			// Unselect vanished envelopes
-			const newIds = newVal.map((env) => env.databaseId)
-			this.selection = this.selection.filter((id) => newIds.includes(id))
+			// 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)
+			}
 			differenceWith((a, b) => a.databaseId === b.databaseId, oldVal, newVal)
 				.forEach((env) => {
 					env.flags.selected = false
@@ -451,23 +479,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 +563,22 @@ 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.setEnvelopeSelected(envelope, selected)
+			this.emitLocalSelection()
 		},
 
 		onEnvelopeSelectMultiple(envelope, index) {
@@ -557,20 +589,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() {