From 9346a114bda935fe1e61bab04279e4349dbf524a Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Wed, 14 May 2025 09:28:23 +0200
Subject: [PATCH] quick filter tags on todo

---
 app/components/nav/Nav.vue   | 2 +-
 app/components/todo/Todo.vue | 7 ++++++-
 app/components/utils/Tag.vue | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/components/nav/Nav.vue b/app/components/nav/Nav.vue
index 3e6eeb2..273d86c 100644
--- a/app/components/nav/Nav.vue
+++ b/app/components/nav/Nav.vue
@@ -32,7 +32,7 @@ const isNewSheetOpen = ref(false);
           name="material-symbols:filter-alt"
           size="24"
         />
-        <Icon v-else name="material-symbols:filter-alt" size="24" />
+        <Icon v-else name="material-symbols:filter-alt-outline" size="24" />
       </button>
     </div>
     <button
diff --git a/app/components/todo/Todo.vue b/app/components/todo/Todo.vue
index d2ba469..ca69ffd 100644
--- a/app/components/todo/Todo.vue
+++ b/app/components/todo/Todo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Todo } from "~~/shared/types";
+import type { Tag as TagType, Todo } from "~~/shared/types";
 import Tag from "../utils/Tag.vue";
 import TimeDisplay from "./TimeDisplay.vue";
 
@@ -33,6 +33,10 @@ const tags = computed(() => {
     .filter((tag) => !filterStore.tags.includes(tag.uuid))
     .sort((a, b) => a.name.localeCompare(b.name));
 });
+
+function onTagPress(tag: TagType) {
+  filterStore.tags.push(tag.uuid);
+}
 </script>
 
 <template>
@@ -65,6 +69,7 @@ const tags = computed(() => {
             :tag="tag"
             :is-selected="false"
             class="text-xs"
+            @press="onTagPress(tag)"
           />
         </div>
       </div>
diff --git a/app/components/utils/Tag.vue b/app/components/utils/Tag.vue
index 7faefeb..acee264 100644
--- a/app/components/utils/Tag.vue
+++ b/app/components/utils/Tag.vue
@@ -14,7 +14,7 @@ const fontColor = computed(() => {
 </script>
 <template>
   <button
-    class="rounded border-1 border-stone-300 px-1 text-nowrap transition-all dark:border-stone-700"
+    class="cursor-pointer rounded border-1 border-stone-300 px-1 text-nowrap transition-all dark:border-stone-700"
     :style="{
       color: fontColor,
       'background-color': bgColor,
-- 
2.51.2