From c9245c131cb7e75560428a1f49ab27971602aa94 Mon Sep 17 00:00:00 2001
From: namdh861 <namdh861@gmail.com>
Date: Mon, 14 Sep 2026 21:30:06 +0700
Subject: [PATCH] feat: add badge for mine tasks

---
 src/views/tasks/TasksBoardView.vue | 37 ++++++++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/views/tasks/TasksBoardView.vue b/src/views/tasks/TasksBoardView.vue
index e5a6753..833c833 100644
--- a/src/views/tasks/TasksBoardView.vue
+++ b/src/views/tasks/TasksBoardView.vue
@@ -15,6 +15,9 @@
           showClear
           class="w-[180px]"
         />
+        <span class="flex items-center gap-2 text-[0.8rem] muted-note">
+          <i class="legend-swatch"></i> My tasks
+        </span>
       </div>
       <Button v-if="auth.can('tasks', 'create')" label="New Task" icon="pi pi-plus" @click="openCreate" />
     </div>
@@ -40,13 +43,16 @@
             :key="task.id"
             class="task-card cursor-pointer rounded-xl border p-3 shadow-sm"
             :style="{ background: 'var(--canvas)', borderColor: 'var(--hairline)' }"
-            :class="{ 'opacity-40': draggingId === task.id }"
+            :class="{ 'opacity-40': draggingId === task.id, 'is-mine': isMine(task) }"
             draggable="true"
             @dragstart="onDragStart(task)"
             @dragend="onDragEnd"
             @click.stop="openEdit(task)"
           >
-            <div class="font-medium">{{ task.title }}</div>
+            <div class="flex items-start justify-between gap-2">
+              <div class="font-medium">{{ task.title }}</div>
+              <span v-if="isMine(task)" class="mine-badge">My task</span>
+            </div>
             <div v-if="task.description" class="muted-note mt-1 line-clamp-2 text-[0.85rem]">{{ task.description }}</div>
             <div class="mt-2 text-[0.8rem]" v-if="task.assigneeName">
               <span class="flex items-center gap-1 muted-note">
@@ -228,6 +234,10 @@ function formatDate(v: string) {
   return new Date(v).toLocaleDateString()
 }
 
+function isMine(task: Task) {
+  return !!task.assigneeId && task.assigneeId === auth.user?.id
+}
+
 watch(
   () => route.params.id,
   async () => {
@@ -242,6 +252,29 @@ watch(
 .task-card:hover {
   border-color: var(--primary) !important;
 }
+.task-card.is-mine {
+  background: color-mix(in srgb, var(--primary) 8%, var(--canvas)) !important;
+  border-left: 3px solid var(--primary);
+}
+.legend-swatch {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 3px;
+  border-left: 3px solid var(--primary);
+  background: color-mix(in srgb, var(--primary) 8%, var(--canvas));
+}
+.mine-badge {
+  flex-shrink: 0;
+  white-space: nowrap;
+  border-radius: 999px;
+  background: var(--primary-soft);
+  color: var(--primary);
+  padding: 1px 7px;
+  font-size: 0.65rem;
+  font-weight: 600;
+  line-height: 1.5;
+}
 .board-col.drag-over {
   background: color-mix(in srgb, var(--primary) 6%, transparent);
   box-shadow: inset 0 0 0 2px var(--primary);