From f50f4baaa94526345ce728254b7798c751e03949 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Tue, 30 Sep 2025 08:41:30 +0200
Subject: [PATCH] feat: enhance EditCheckboxModal with new UI components -
 Replaced task status and tags display with `StatusBadge` and `TagDisplay` for
 improved visual clarity. - Updated task search input to use `SearchInput` for
 better user experience. - Refactored task display sections to utilize `Card`
 component for consistent styling.

---
 src/components/daily/EditCheckboxModal.tsx | 72 ++++++++--------------
 src/components/ui/StatusBadge.tsx          | 20 ++++++
 src/components/ui/index.ts                 |  1 +
 3 files changed, 46 insertions(+), 47 deletions(-)
 create mode 100644 src/components/ui/StatusBadge.tsx

diff --git a/src/components/daily/EditCheckboxModal.tsx b/src/components/daily/EditCheckboxModal.tsx
index 8f24fe2..072687c 100644
--- a/src/components/daily/EditCheckboxModal.tsx
+++ b/src/components/daily/EditCheckboxModal.tsx
@@ -5,6 +5,10 @@ import { DailyCheckbox, DailyCheckboxType, Task } from '@/lib/types';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Modal } from '@/components/ui/Modal';
+import { TagDisplay } from '@/components/ui/TagDisplay';
+import { Card } from '@/components/ui/Card';
+import { SearchInput } from '@/components/ui/SearchInput';
+import { StatusBadge } from '@/components/ui/StatusBadge';
 import { tasksClient } from '@/clients/tasks-client';
 
 interface EditCheckboxModalProps {
@@ -165,7 +169,7 @@ export function EditCheckboxModal({
             
             {selectedTask ? (
               // Tâche déjà sélectionnée
-              <div className="border border-[var(--border)] rounded-lg p-3 bg-[var(--muted)]/30">
+              <Card className="p-3" background="muted">
                 <div className="flex items-center justify-between">
                   <div className="flex-1 min-w-0">
                     <div className="font-medium text-sm truncate">{selectedTask.title}</div>
@@ -175,24 +179,14 @@ export function EditCheckboxModal({
                       </div>
                     )}
                     <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>
+                      <StatusBadge status={selectedTask.status} />
                       {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>
+                        <TagDisplay 
+                          tags={selectedTask.tags} 
+                          size="sm" 
+                          availableTags={selectedTask.tagDetails}
+                          maxTags={3}
+                        />
                       )}
                     </div>
                   </div>
@@ -207,21 +201,20 @@ export function EditCheckboxModal({
                     ×
                   </Button>
                 </div>
-              </div>
+              </Card>
             ) : (
               // Interface de sélection simplifiée
               <div className="space-y-2">
-                <Input
-                  type="text"
-                  placeholder="Rechercher une tâche..."
+                <SearchInput
                   value={taskSearch}
-                  onChange={(e) => setTaskSearch(e.target.value)}
+                  onChange={setTaskSearch}
+                  placeholder="Rechercher une tâche..."
                   disabled={saving || tasksLoading}
                   className="w-full"
                 />
                 
                 {taskSearch.trim() && (
-                  <div className="border border-[var(--border)] rounded-lg max-h-40 overflow-y-auto">
+                  <Card className="max-h-40 overflow-y-auto" shadow="sm">
                     {tasksLoading ? (
                       <div className="p-3 text-center text-sm text-[var(--muted-foreground)]">
                         Chargement...
@@ -246,35 +239,20 @@ export function EditCheckboxModal({
                             </div>
                           )}
                           <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>
+                            <StatusBadge status={task.status} />
                             {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>
+                              <TagDisplay 
+                                tags={task.tags} 
+                                size="sm" 
+                                availableTags={task.tagDetails}
+                                maxTags={3}
+                              />
                             )}
                           </div>
                         </button>
                       ))
                     )}
-                  </div>
+                  </Card>
                 )}
               </div>
             )}
diff --git a/src/components/ui/StatusBadge.tsx b/src/components/ui/StatusBadge.tsx
new file mode 100644
index 0000000..584ae18
--- /dev/null
+++ b/src/components/ui/StatusBadge.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { TaskStatus } from '@/lib/types';
+import { getStatusConfig, getStatusBadgeClasses } from '@/lib/status-config';
+
+interface StatusBadgeProps {
+  status: TaskStatus;
+  className?: string;
+}
+
+export function StatusBadge({ status, className = '' }: StatusBadgeProps) {
+  const config = getStatusConfig(status);
+  const badgeClasses = getStatusBadgeClasses(status);
+  
+  return (
+    <span className={`text-xs px-2 py-0.5 rounded font-medium border ${badgeClasses} ${className}`}>
+      {config.icon} {config.label}
+    </span>
+  );
+}
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index c3b4e81..1b1d4ed 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -25,6 +25,7 @@ export { DropZone } from './DropZone';
 // Composants Weekly Manager
 export { Tabs } from './Tabs';
 export { PriorityBadge } from './PriorityBadge';
+export { StatusBadge } from './StatusBadge';
 export { AchievementCard } from './AchievementCard';
 export { ChallengeCard } from './ChallengeCard';