fix: select multiple envelopes by holding shift directly

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>

src/components/Envelope.vue

@@ -19,8 +19,9 @@
 		:name="addresses"
 		:details="formatted()"
 		:one-line="oneLineLayout"
-		@click="onClick"
-		@click.ctrl.prevent="toggleSelected"
+		@click.exact="onClick"
+		@click.ctrl.exact.prevent="toggleSelected"
+		@click.shift.exact.prevent="onSelectMultiple"
 		@update:menuOpen="closeMoreAndSnoozeOptions">
 		<template #icon>
 			<Star v-if="data.flags.flagged"
@@ -51,7 +52,7 @@
 						:checked="selected">
 					<label :for="`select-checkbox-${data.uid}`"
 						@click.exact.prevent="toggleSelected"
-						@click.shift.prevent="onSelectMultiple" />
+						@click.shift.exact.prevent="onSelectMultiple" />
 				</p>
 			</div>
 		</template>

src/components/EnvelopeList.vue

@@ -548,12 +548,15 @@ export default {
 			this.setEnvelopeSelected(envelope, selected)
 		},
 		onEnvelopeSelectMultiple(envelope, index) {
-			if (this.lastToggledIndex === undefined) {
+			const lastToggledIndex = this.lastToggledIndex
+				?? this.findSelectionIndex(parseInt(this.$route.params.threadId))
+				?? undefined
+			if (lastToggledIndex === undefined) {
 				return
 			}
 
-			const start = Math.min(this.lastToggledIndex, index)
-			const end = Math.max(this.lastToggledIndex, index)
+			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)
@@ -585,6 +588,21 @@ export default {
 			this.showMoveModal = false
 			this.unselectAll()
 		},
+		/**
+		 * Find the envelope list index of a given envelope's database id.
+		 *
+		 * @param {int} databaseId
+		 * @return {int|undefined} Index or undefined if not found in the envelope list
+		 */
+		findSelectionIndex(databaseId) {
+			for (const [index, envelope] of this.sortedEnvelops.entries()) {
+				if (envelope.databaseId === databaseId) {
+					return index
+				}
+			}
+
+			return undefined
+		},
 	},
 }
 </script>