From bfa6c87fce8cc9126b0603a5711c5c1d648a54e4 Mon Sep 17 00:00:00 2001
From: Hammer <hammer7839283@gmail.com>
Date: Thu, 29 Jan 2026 11:05:33 +0000
Subject: [PATCH] feat: add tags display to TaskPage header and sidebar

---
 frontend/src/pages/TaskPage.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/frontend/src/pages/TaskPage.tsx b/frontend/src/pages/TaskPage.tsx
index 487a1c7..e942677 100644
--- a/frontend/src/pages/TaskPage.tsx
+++ b/frontend/src/pages/TaskPage.tsx
@@ -248,6 +248,11 @@ export function TaskPage() {
                     📁 {project.name}
                   </span>
                 )}
+                {task.tags?.map(tag => (
+                  <span key={tag} className="text-xs text-violet-600 dark:text-violet-400 bg-violet-100 dark:bg-violet-900/30 px-2 py-0.5 rounded-full font-medium">
+                    🏷️ {tag}
+                  </span>
+                ))}
               </div>
               {editingTitle ? (
                 <div className="flex items-center gap-2">
@@ -612,6 +617,18 @@ export function TaskPage() {
                     <span className="text-gray-700 dark:text-gray-300 font-medium">{project.name}</span>
                   </div>
                 )}
+                {task.tags?.length > 0 && (
+                  <div>
+                    <span className="text-gray-500 dark:text-gray-400 block mb-1">Tags</span>
+                    <div className="flex flex-wrap gap-1">
+                      {task.tags.map(tag => (
+                        <span key={tag} className="text-[10px] text-violet-600 dark:text-violet-400 bg-violet-100 dark:bg-violet-900/30 px-1.5 py-0.5 rounded-full font-medium">
+                          🏷️ {tag}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
                 <div className="flex justify-between">
                   <span className="text-gray-500 dark:text-gray-400">Created</span>
                   <span className="text-gray-700 dark:text-gray-300 text-xs">{timeAgo(task.createdAt)}</span>