From a4b16f514b9dc8b32fc57694f7e4f15837b7310b Mon Sep 17 00:00:00 2001
From: Tobias Frischmann <tobias.frischmann@proton.me>
Date: Sun, 11 Oct 2026 12:24:19 +0200
Subject: [PATCH] add category sorting

---
 app/components/Filter/CategorySelect.vue | 47 ++++++++++++++--
 app/composables/useCategoryDragging.ts   | 70 ++++++++++++++++++++++++
 app/mutations/categories.ts              | 43 +++++++++++++++
 3 files changed, 156 insertions(+), 4 deletions(-)
 create mode 100644 app/composables/useCategoryDragging.ts

diff --git a/app/components/Filter/CategorySelect.vue b/app/components/Filter/CategorySelect.vue
index 01ac71d..471cde1 100644
--- a/app/components/Filter/CategorySelect.vue
+++ b/app/components/Filter/CategorySelect.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+	import { useCategoryDragging } from "#imports";
 	import { useCategoriesQuery } from "~/queries/category";
 	import { useTodosQuery } from "~/queries/todo";
 	import type { Label as LabelType, UUID } from "~/utils/types";
@@ -57,6 +58,17 @@
 
 		return map;
 	});
+
+	const {
+		startDrag,
+		endDrag,
+		dropOnCategoryHandler,
+		dragOver,
+		dragLeave,
+		draggedCategry,
+		hoveredCategry,
+		hoveredState,
+	} = useCategoryDragging();
 </script>
 
 <template>
@@ -66,17 +78,40 @@
 				leave-to-class="max-h-0! opacity-0 scale-y-0 mb-0!"
 				enter-from-class="max-h-0! opacity-0 scale-y-0 mb-0!"
 			>
-				<div
+				<li
 					v-for="category in categories"
 					:key="category.uuid"
-					class="max-h-6 flex mr-1 mb-1 items-center gap-0.5 transition-all duration-300"
+					class="relative max-h-6 flex mr-1 mb-1 items-center gap-0.5 transition-all duration-300"
+					draggable="true"
+					@dragstart="
+                  (event: DragEvent) => {
+                    startDrag(event, category.uuid);
+                  }
+                "
+					@dragend="endDrag"
+					@dragover="
+                  (event: DragEvent) => {
+                    dragOver(event, category.uuid);
+                  }
+                "
+					@dragleave="dragLeave"
+					@drop="
+                  (event: DragEvent) => {
+                    dropOnCategoryHandler(event, category.uuid);
+                  }
+                "
 				>
+					<div
+						v-if="hoveredState === 'above' && hoveredCategry === category.uuid && draggedCategry !== category.uuid"
+						class="h-0.5 absolute -top-0.5 w-full bg-primary-hover rounded-full"
+					/>
 					<CategoryLabel
 						:label="category"
 						:count="categoryCount.get(category.uuid)"
 						:is-selected="isSelected(category)"
+						:data-dragged="draggedCategry === category.uuid ? 'true' : undefined"
 						type="category"
-						class="flex-1"
+						class="flex-1 data-dragged:blur-[1px] data-dragged:grayscale-100"
 						@press="onPress(category.uuid, false)"
 					/>
 					<button
@@ -92,7 +127,11 @@
 						/>
 						<Icon v-else name="material-symbols:add-2-rounded" size="16" />
 					</button>
-				</div>
+					<div
+						v-if="hoveredState === 'below' && hoveredCategry === category.uuid && draggedCategry !== category.uuid"
+						class="h-0.5 absolute -bottom-0.5 w-full bg-primary-hover rounded-full"
+					/>
+				</li>
 			</TransitionGroup>
 		</div>
 	</div>
diff --git a/app/composables/useCategoryDragging.ts b/app/composables/useCategoryDragging.ts
new file mode 100644
index 0000000..a2ea25c
--- /dev/null
+++ b/app/composables/useCategoryDragging.ts
@@ -0,0 +1,70 @@
+import { useMoveCategory } from "~/mutations/categories";
+import { useCategoriesQuery } from "~/queries/category";
+import type { UUID } from "~/utils/types";
+
+export function useCategoryDragging() {
+	const { data: categories } = useQuery(useCategoriesQuery());
+
+	const draggedCategry = ref<UUID | null>(null);
+	const hoveredCategry = ref<UUID | null>(null);
+	const hoveredState = ref<"above" | "below" | null>(null);
+
+	function startDrag(event: DragEvent, uuid: UUID) {
+		event.dataTransfer?.setData("uuid", uuid);
+		draggedCategry.value = uuid;
+	}
+
+	function endDrag() {
+		draggedCategry.value = null;
+		hoveredCategry.value = null;
+		hoveredState.value = null;
+	}
+
+	function dragOver(event: DragEvent, uuid: UUID) {
+		event.preventDefault();
+
+		hoveredCategry.value = uuid;
+
+		const hoveredIndex = (categories.value ?? []).findIndex(
+			(category) => category.uuid === hoveredCategry.value,
+		);
+		const draggedIndex = (categories.value ?? []).findIndex(
+			(category) => category.uuid === draggedCategry.value,
+		);
+
+		if (hoveredIndex === -1 || draggedIndex === -1) return;
+
+		if (hoveredIndex > draggedIndex) {
+			hoveredState.value = "below";
+		} else {
+			hoveredState.value = "above";
+		}
+	}
+
+	function dragLeave(event: DragEvent) {
+		event.preventDefault();
+		hoveredCategry.value = null;
+		hoveredState.value = null;
+	}
+
+	const { mutate: moveCategory } = useMoveCategory();
+	async function dropOnCategoryHandler(event: DragEvent, uuid: UUID) {
+		event.preventDefault();
+		const dragedUUID = event.dataTransfer?.getData("uuid");
+
+		if (!dragedUUID) return;
+
+		moveCategory({ toMove: dragedUUID, to: uuid });
+	}
+
+	return {
+		startDrag,
+		endDrag,
+		dropOnCategoryHandler,
+		dragOver,
+		dragLeave,
+		draggedCategry,
+		hoveredCategry,
+		hoveredState,
+	};
+}
diff --git a/app/mutations/categories.ts b/app/mutations/categories.ts
index 6011971..522eaea 100644
--- a/app/mutations/categories.ts
+++ b/app/mutations/categories.ts
@@ -119,3 +119,46 @@ export const useUpdateCategory = defineMutation({
 		queryCache.invalidateQueries({ key: ["categories"] });
 	},
 });
+
+export const useMoveCategory = defineMutation({
+	async mutation({ toMove, to }: { toMove: UUID; to: UUID }) {
+		const { $api } = useNuxtApp();
+		return $api(`/api/categories/move`, {
+			method: "POST",
+			body: {
+				toMove,
+				to,
+			},
+		});
+	},
+	onMutate({ toMove, to }: { toMove: UUID; to: UUID }) {
+		const queryCache = useQueryCache();
+
+		const activeCategories = queryCache.getQueryData<Todo[]>(["categories"]);
+		if (!activeCategories) return;
+
+		const dropIndex = activeCategories.findIndex(
+			(category) => category.uuid === to,
+		);
+		const dragIndex = activeCategories.findIndex(
+			(category) => category.uuid === toMove,
+		);
+
+		const draged = activeCategories.splice(dragIndex, 1)[0];
+		if (!draged) {
+			console.warn("No category to move", toMove, to);
+			return;
+		}
+
+		activeCategories.splice(dropIndex, 0, draged);
+
+		queryCache.setQueryData(["categories"], [...activeCategories]);
+	},
+	onError(error) {
+		const { showError } = useToast();
+		showError(error.message);
+
+		const queryCache = useQueryCache();
+		queryCache.invalidateQueries({ key: ["categories"], exact: true });
+	},
+});
-- 
2.51.2