From 2713bd48ddc475d29603961337c1bf2e1fccd555 Mon Sep 17 00:00:00 2001
From: Tobias Frischmann <tobias.frischmann@proton.me>
Date: Wed, 9 Sep 2026 12:07:39 +0200
Subject: [PATCH] add category multiselect on mobile

---
 app/components/Filter/CategorySelect.vue | 40 +++++++++++++++++-------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/app/components/Filter/CategorySelect.vue b/app/components/Filter/CategorySelect.vue
index 3745832..de69df9 100644
--- a/app/components/Filter/CategorySelect.vue
+++ b/app/components/Filter/CategorySelect.vue
@@ -10,15 +10,16 @@
 
 	const { data: categories } = useQuery(useCategoriesQuery);
 
+	const { isMobile } = useDevice();
 	const { shift } = useMagicKeys();
 
-	function onPress(category: UUID) {
+	function onPress(category: UUID, alwaysAdd: boolean) {
 		if (activeCategorys.value.includes(category)) {
 			activeCategorys.value = activeCategorys.value.filter(
 				(id) => id !== category,
 			);
 		} else {
-			if (shift?.value) {
+			if (shift?.value || alwaysAdd) {
 				activeCategorys.value = [category, ...activeCategorys.value];
 			} else {
 				activeCategorys.value = [category];
@@ -46,16 +47,33 @@
 <template>
 	<div class="@container">
 		<div class="grid grid-cols-1 @sm:grid-cols-2 @md:grid-cols-3">
-			<CategoryLabel
+			<div
 				v-for="category in categories"
-				:key="category.uuid"
-				:label="category"
-				:count="categoryCount.get(category.uuid)"
-				:is-selected="isSelected(category)"
-				type="category"
-				class="mr-1 mb-1"
-				@press="onPress(category.uuid)"
-			/>
+				class="flex mr-1 mb-1 items-center gap-0.5"
+			>
+				<CategoryLabel
+					:key="category.uuid"
+					:label="category"
+					:count="categoryCount.get(category.uuid)"
+					:is-selected="isSelected(category)"
+					type="category"
+					class="flex-1"
+					@press="onPress(category.uuid, false)"
+				/>
+				<button
+					@click="onPress(category.uuid, true)"
+					v-if="isMobile"
+					type="button"
+					class="h-5 flex items-center justify-center cursor-pointer border border-secondary rounded aspect-square"
+				>
+					<Icon
+						v-if="isSelected(category)"
+						name="material-symbols:remove-rounded"
+						size="16"
+					/>
+					<Icon v-else name="material-symbols:add-2-rounded" size="16" />
+				</button>
+			</div>
 		</div>
 	</div>
 </template>
-- 
2.51.2