feat: enhance dropdown components by integrating useClickOutside hook for improved user experience and accessibility in NewWorkshopDropdown and WorkshopTabs

src/components/swot/ActionPanel.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useTransition } from 'react';
 import type { SwotItem, Action, ActionLink, SwotCategory } from '@prisma/client';
-import { Button, Badge, Modal, ModalFooter, Input, Textarea } from '@/components/ui';
+import { Button, Badge, Modal, ModalFooter, Input, Textarea, Select } from '@/components/ui';
 import { createAction, updateAction, deleteAction } from '@/actions/swot';
 
 type ActionWithLinks = Action & {
@@ -40,11 +40,11 @@ const categoryShort: Record<SwotCategory, string> = {
 };
 
 const priorityLabels = ['Basse', 'Moyenne', 'Haute'];
-const statusLabels: Record<string, string> = {
-  todo: 'À faire',
-  in_progress: 'En cours',
-  done: 'Terminé',
-};
+const statusOptions = [
+  { value: 'todo', label: '📋 À faire' },
+  { value: 'in_progress', label: '⏳ En cours' },
+  { value: 'done', label: '✅ Terminé' },
+];
 
 export function ActionPanel({
   sessionId,
@@ -279,16 +279,15 @@ export function ActionPanel({
                 >
                   {priorityLabels[action.priority]}
                 </Badge>
-                <select
+                <Select
                   value={action.status}
                   onChange={(e) => handleStatusChange(action, e.target.value)}
-                  className="rounded border border-border bg-card px-2 py-1 text-xs text-foreground"
+                  options={statusOptions}
+                  size="xs"
+                  wrapperClassName="!w-auto shrink-0"
+                  className="!w-auto"
                   disabled={isPending}
-                >
-                  <option value="todo">{statusLabels.todo}</option>
-                  <option value="in_progress">{statusLabels.in_progress}</option>
-                  <option value="done">{statusLabels.done}</option>
-                </select>
+                />
               </div>
             </div>
           ))}