From 609ed1d9dd584927f50e6b97a098c3149df4a701 Mon Sep 17 00:00:00 2001
From: ToBinio <tobias.frischmann@proton.me>
Date: Mon, 27 Apr 2026 09:27:47 +0200
Subject: [PATCH] stabilize filter settings

---
 app/components/Edit/NewTodoSheet.vue          |  6 +-
 app/components/FilterSheet.vue                |  8 +--
 app/components/Nav/VerticalNav.vue            |  8 +--
 app/components/Todo/Todo.vue                  |  6 +-
 .../Utils/Label/MultiCategorySelect.vue       |  2 +-
 app/components/Utils/Label/TagSelect.vue      |  2 +-
 app/composables/useFilteredTodos.ts           |  8 ++-
 app/composables/useFilters.ts                 | 71 +++++++++++++++----
 8 files changed, 81 insertions(+), 30 deletions(-)

diff --git a/app/components/Edit/NewTodoSheet.vue b/app/components/Edit/NewTodoSheet.vue
index 6d1a66e..a2ed255 100644
--- a/app/components/Edit/NewTodoSheet.vue
+++ b/app/components/Edit/NewTodoSheet.vue
@@ -9,7 +9,7 @@
 
 	const isOpen = defineModel<boolean>("isOpen", { required: true });
 	const todoStore = useTodoStore();
-	const { filter } = useFilter();
+	const { tags: tagsFilter, category: categoryFilter } = useFilter();
 
 	function close() {
 		isOpen.value = false;
@@ -35,9 +35,9 @@
 	function resetData() {
 		todoData.value.title = "";
 		todoData.value.note = "";
-		todoData.value.tags = [...filter.value.tags];
+		todoData.value.tags = [...tagsFilter.value];
 		todoData.value.category =
-			filter.value.category.length === 1 ? filter.value.category[0] : undefined;
+			categoryFilter.value.length === 1 ? categoryFilter.value[0] : undefined;
 		todoData.value.time = undefined;
 	}
 
diff --git a/app/components/FilterSheet.vue b/app/components/FilterSheet.vue
index c7a06a1..9200d08 100644
--- a/app/components/FilterSheet.vue
+++ b/app/components/FilterSheet.vue
@@ -8,7 +8,7 @@
 
 	const { t } = useI18n();
 
-	const { filter } = useFilter();
+	const { time, category, tags } = useFilter();
 
 	function close() {
 		isOpen.value = false;
@@ -20,15 +20,15 @@
 		<div class="flex flex-col gap-1">
 			<div>
 				<h2 class="text-muted-text text-lg">{{ t("time") }}</h2>
-				<TimeSelect v-model:time="filter.time" />
+				<TimeSelect v-model:time="time" />
 			</div>
 			<div>
 				<h2 class="text-muted-text text-lg">{{ t("categories") }}</h2>
-				<MultiCategorySelect v-model:categorys="filter.category" />
+				<MultiCategorySelect v-model:categorys="category" />
 			</div>
 			<div>
 				<h2 class="text-muted-text text-lg">{{ t("tags") }}</h2>
-				<TagSelect v-model:tags="filter.tags" :show-all="false" />
+				<TagSelect v-model:tags="tags" :show-all="false" />
 			</div>
 		</div>
 	</Sheet>
diff --git a/app/components/Nav/VerticalNav.vue b/app/components/Nav/VerticalNav.vue
index 78676fa..174c015 100644
--- a/app/components/Nav/VerticalNav.vue
+++ b/app/components/Nav/VerticalNav.vue
@@ -5,7 +5,7 @@
 
 	const { t } = useI18n();
 
-	const { filter } = useFilter();
+	const { time, category, tags } = useFilter();
 
 	const isSettingsSheetOpen = defineModel<boolean>("isSettingsSheetOpen");
 	const isNewSheetOpen = defineModel<boolean>("isNewSheetOpen");
@@ -14,20 +14,20 @@
 <template>
 	<div class="bg-surface left-0 flex h-dvh w-full flex-col justify-between p-1">
 		<div class="flex flex-col gap-2">
-			<div><TimeSelect v-model:time="filter.time" /></div>
+			<div><TimeSelect v-model:time="time" /></div>
 			<div>
 				<h2 class="text-muted-text flex items-center gap-0.5 text-sm mb-1">
 					<Icon name="material-symbols:grid-view-rounded" />
 					{{ t("categories") }}
 				</h2>
-				<MultiCategorySelect v-model:categorys="filter.category" />
+				<MultiCategorySelect v-model:categorys="category" />
 			</div>
 			<div>
 				<h2 class="text-muted-text flex items-center gap-0.5 text-sm mb-1">
 					<Icon name="material-symbols:bookmark" />
 					{{ t("tags") }}
 				</h2>
-				<TagSelect v-model:tags="filter.tags" :show-all="false" />
+				<TagSelect v-model:tags="tags" :show-all="false" />
 			</div>
 		</div>
 		<div class="flex gap-1">
diff --git a/app/components/Todo/Todo.vue b/app/components/Todo/Todo.vue
index f374eca..c1c45cf 100644
--- a/app/components/Todo/Todo.vue
+++ b/app/components/Todo/Todo.vue
@@ -50,7 +50,7 @@
 		todoStore.uncheckTodo(props.data.uuid);
 	}
 
-	const { filter } = useFilter();
+	const { tags: tagsFilter } = useFilter();
 	const tagStore = useTagStore();
 	const categoryStore = useCategoryStore();
 
@@ -66,12 +66,12 @@
 				return tag;
 			})
 			.filter((tag) => !!tag)
-			.filter((tag) => !filter.value.tags.includes(tag.uuid))
+			.filter((tag) => !tagsFilter.value.includes(tag.uuid))
 			.sort((a, b) => a.name.localeCompare(b.name));
 	});
 
 	function onTagPress(tag: LabelType) {
-		filter.value.tags.push(tag.uuid);
+		tagsFilter.value = [tag.uuid, ...tagsFilter.value];
 	}
 	const category = computed(() => {
 		if (!props.data.category) return undefined;
diff --git a/app/components/Utils/Label/MultiCategorySelect.vue b/app/components/Utils/Label/MultiCategorySelect.vue
index 1d81adc..f51d356 100644
--- a/app/components/Utils/Label/MultiCategorySelect.vue
+++ b/app/components/Utils/Label/MultiCategorySelect.vue
@@ -16,7 +16,7 @@
 				(id) => id !== category,
 			);
 		} else {
-			activeCategorys.value!.push(category);
+			activeCategorys.value = [category, ...activeCategorys.value!];
 		}
 	}
 
diff --git a/app/components/Utils/Label/TagSelect.vue b/app/components/Utils/Label/TagSelect.vue
index 1a1d7fa..f78c8ab 100644
--- a/app/components/Utils/Label/TagSelect.vue
+++ b/app/components/Utils/Label/TagSelect.vue
@@ -14,7 +14,7 @@
 		if (selectedTags.value!.includes(tag)) {
 			selectedTags.value = selectedTags.value!.filter((id) => id !== tag);
 		} else {
-			selectedTags.value!.push(tag);
+			selectedTags.value = [tag, ...selectedTags.value!];
 		}
 	}
 
diff --git a/app/composables/useFilteredTodos.ts b/app/composables/useFilteredTodos.ts
index 7023a5a..f596400 100644
--- a/app/composables/useFilteredTodos.ts
+++ b/app/composables/useFilteredTodos.ts
@@ -9,10 +9,14 @@ import type { Todo } from "~~/shared/types";
 
 export function useFilteredTodos() {
 	const todoStore = useTodoStore();
-	const { filter } = useFilter();
+	const { tags, category, time } = useFilter();
 
 	const filterdTodos = computed(() => {
-		return filterTodos(todoStore.data, filter.value);
+		return filterTodos(todoStore.data, {
+			time: time.value,
+			tags: tags.value,
+			category: category.value,
+		});
 	});
 
 	return filterdTodos;
diff --git a/app/composables/useFilters.ts b/app/composables/useFilters.ts
index 15e7e65..f862fbc 100644
--- a/app/composables/useFilters.ts
+++ b/app/composables/useFilters.ts
@@ -1,20 +1,67 @@
-import type { UUID } from "~~/shared/types";
+import { z } from "zod";
 
-export type Filter = {
-	tags: UUID[];
-	category: UUID[];
-	time: "all" | "today" | "week";
+const FilterSchema = z.object({
+	tags: z.array(z.string()).default([]),
+	category: z.array(z.string()).default([]),
+	time: z.enum(["all", "today", "week"]).default("all"),
+});
+
+export type Filter = z.infer<typeof FilterSchema>;
+const defaultFilter: Filter = {
+	tags: [],
+	category: [],
+	time: "all",
 };
 
 export function useFilter() {
-	const filter = useCookie<Filter>("filter", {
+	const cookie = useCookie<unknown>("filter", {
 		maxAge: 60 * 60 * 24 * 30, // 1month
 		sameSite: true,
-		default: () => {
-			return {
-				tags: [],
-				category: [],
-				time: "all",
+		default: () => defaultFilter,
+	});
+	const filter = computed<Filter>({
+		get() {
+			const result = FilterSchema.safeParse(cookie.value);
+			return result.success ? result.data : defaultFilter;
+		},
+		set(value) {
+			const result = FilterSchema.safeParse(value);
+			cookie.value = result.success ? result.data : defaultFilter;
+		},
+	});
+
+	const tags = computed<string[]>({
+		get() {
+			return filter.value.tags;
+		},
+		set(value) {
+			filter.value = {
+				...filter.value,
+				tags: [...value],
+			};
+		},
+	});
+
+	const category = computed<string[]>({
+		get() {
+			return filter.value.category;
+		},
+		set(value) {
+			filter.value = {
+				...filter.value,
+				category: [...value],
+			};
+		},
+	});
+
+	const time = computed<"all" | "today" | "week">({
+		get() {
+			return filter.value.time;
+		},
+		set(value) {
+			filter.value = {
+				...filter.value,
+				time: value,
 			};
 		},
 	});
@@ -26,5 +73,5 @@ export function useFilter() {
 		return filter.value.tags.length !== 0;
 	});
 
-	return { filter, isFiltering };
+	return { tags, category, time, isFiltering };
 }
-- 
2.51.2