From 65a307c8acf288e43cd7345710e99267c24a3e59 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Fri, 26 Sep 2025 08:17:01 +0200
Subject: [PATCH] feat: enhance EditCheckboxModal with task tags display -
 Updated the task status display to include tags in a flex container for
 better layout. - Added logic to show up to 3 tags with a count for additional
 tags, improving task information visibility.

---
 src/components/daily/EditCheckboxModal.tsx | 61 +++++++++++++++++-----
 1 file changed, 47 insertions(+), 14 deletions(-)

diff --git a/src/components/daily/EditCheckboxModal.tsx b/src/components/daily/EditCheckboxModal.tsx
index 7817111..fe35cc0 100644
--- a/src/components/daily/EditCheckboxModal.tsx
+++ b/src/components/daily/EditCheckboxModal.tsx
@@ -168,13 +168,27 @@ export function EditCheckboxModal({
                         {selectedTask.description}
                       </div>
                     )}
-                    <span className={`inline-block px-1 py-0.5 rounded text-xs mt-1 ${
-                      selectedTask.status === 'todo' ? 'bg-blue-100 text-blue-800' :
-                      selectedTask.status === 'in_progress' ? 'bg-yellow-100 text-yellow-800' :
-                      'bg-gray-100 text-gray-800'
-                    }`}>
-                      {selectedTask.status}
-                    </span>
+                    <div className="flex items-center gap-2 mt-1">
+                      <span className={`inline-block px-1 py-0.5 rounded text-xs ${
+                        selectedTask.status === 'todo' ? 'bg-blue-100 text-blue-800' :
+                        selectedTask.status === 'in_progress' ? 'bg-yellow-100 text-yellow-800' :
+                        'bg-gray-100 text-gray-800'
+                      }`}>
+                        {selectedTask.status}
+                      </span>
+                      {selectedTask.tags && selectedTask.tags.length > 0 && (
+                        <div className="flex flex-wrap gap-1">
+                          {selectedTask.tags.map((tag, index) => (
+                            <span
+                              key={index}
+                              className="inline-block px-1.5 py-0.5 rounded text-xs bg-[var(--primary)]/20 text-[var(--primary)] border border-[var(--primary)]/30"
+                            >
+                              #{tag}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </div>
                   </div>
                   <Button
                     type="button"
@@ -225,13 +239,32 @@ export function EditCheckboxModal({
                               {task.description}
                             </div>
                           )}
-                          <span className={`inline-block px-1 py-0.5 rounded text-xs mt-1 ${
-                            task.status === 'todo' ? 'bg-blue-100 text-blue-800' :
-                            task.status === 'in_progress' ? 'bg-yellow-100 text-yellow-800' :
-                            'bg-gray-100 text-gray-800'
-                          }`}>
-                            {task.status}
-                          </span>
+                          <div className="flex items-center gap-2 mt-1">
+                            <span className={`inline-block px-1 py-0.5 rounded text-xs ${
+                              task.status === 'todo' ? 'bg-blue-100 text-blue-800' :
+                              task.status === 'in_progress' ? 'bg-yellow-100 text-yellow-800' :
+                              'bg-gray-100 text-gray-800'
+                            }`}>
+                              {task.status}
+                            </span>
+                            {task.tags && task.tags.length > 0 && (
+                              <div className="flex flex-wrap gap-1">
+                                {task.tags.slice(0, 3).map((tag, index) => (
+                                  <span
+                                    key={index}
+                                    className="inline-block px-1.5 py-0.5 rounded text-xs bg-[var(--primary)]/20 text-[var(--primary)] border border-[var(--primary)]/30"
+                                  >
+                                    #{tag}
+                                  </span>
+                                ))}
+                                {task.tags.length > 3 && (
+                                  <span className="text-xs text-[var(--muted-foreground)]">
+                                    +{task.tags.length - 3}
+                                  </span>
+                                )}
+                              </div>
+                            )}
+                          </div>
                         </button>
                       ))
                     )}