From 1b9732327908903117ba1c694472b730bbe17bd0 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Mon, 15 Sep 2025 09:15:10 +0200
Subject: [PATCH] refactor: improve layout and structure of KanbanFilters -
 Updated the layout of the expanded filters section to use a grid system for
 better responsiveness. - Enhanced the priority filter display with improved
 button styling and spacing. - Maintained tag filter functionality while
 ensuring consistent styling and layout adjustments.

---
 components/kanban/KanbanFilters.tsx | 85 +++++++++++++++--------------
 1 file changed, 44 insertions(+), 41 deletions(-)

diff --git a/components/kanban/KanbanFilters.tsx b/components/kanban/KanbanFilters.tsx
index 157b658..f361ed1 100644
--- a/components/kanban/KanbanFilters.tsx
+++ b/components/kanban/KanbanFilters.tsx
@@ -277,60 +277,63 @@ export function KanbanFilters({ filters, onFiltersChange }: KanbanFiltersProps)
 
         {/* Filtres étendus */}
         {isExpanded && (
-          <div className="mt-4 space-y-4 border-t border-slate-700/50 pt-4">
-            {/* Filtres par priorité */}
-            <div className="space-y-2">
-              <label className="block text-xs font-mono font-medium text-slate-300 uppercase tracking-wider">
-                Priorités
-              </label>
-              <div className="flex flex-wrap gap-2">
-                {priorityOptions.map((priority) => (
-                  <button
-                    key={priority.value}
-                    onClick={() => handlePriorityToggle(priority.value)}
-                    className={`flex items-center gap-2 px-2 py-1 rounded-lg border transition-all text-xs font-medium ${
-                      filters.priorities?.includes(priority.value)
-                        ? 'border-cyan-400 bg-cyan-400/10 text-cyan-400'
-                        : 'border-slate-600 bg-slate-800/50 text-slate-400 hover:border-slate-500'
-                    }`}
-                  >
-                    <div 
-                      className="w-2 h-2 rounded-full"
-                      style={{ backgroundColor: getPriorityColorHex(priority.color) }}
-                    />
-                    {priority.label} ({priority.count})
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            {/* Filtres par tags */}
-            {availableTags.length > 0 && (
-              <div className="space-y-2">
+          <div className="mt-4 border-t border-slate-700/50 pt-4">
+            {/* Grille responsive pour les filtres */}
+            <div className="grid grid-cols-1 lg:grid-cols-[auto_1fr] gap-6 lg:gap-8">
+              {/* Filtres par priorité */}
+              <div className="space-y-3">
                 <label className="block text-xs font-mono font-medium text-slate-300 uppercase tracking-wider">
-                  Tags
+                  Priorités
                 </label>
-                <div className="flex flex-wrap gap-2">
-                  {sortedTags.map((tag) => (
+                <div className="grid grid-cols-2 gap-2">
+                  {priorityOptions.map((priority) => (
                     <button
-                      key={tag.id}
-                      onClick={() => handleTagToggle(tag.name)}
-                      className={`flex items-center gap-2 px-2 py-1 rounded-lg border transition-all text-xs font-medium ${
-                        filters.tags?.includes(tag.name)
+                      key={priority.value}
+                      onClick={() => handlePriorityToggle(priority.value)}
+                      className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-all text-xs font-medium whitespace-nowrap ${
+                        filters.priorities?.includes(priority.value)
                           ? 'border-cyan-400 bg-cyan-400/10 text-cyan-400'
                           : 'border-slate-600 bg-slate-800/50 text-slate-400 hover:border-slate-500'
                       }`}
                     >
                       <div 
-                        className="w-2 h-2 rounded-full" 
-                        style={{ backgroundColor: tag.color }}
+                        className="w-2 h-2 rounded-full"
+                        style={{ backgroundColor: getPriorityColorHex(priority.color) }}
                       />
-                      {tag.name} ({tagCounts[tag.name] || 0})
+                      {priority.label} ({priority.count})
                     </button>
                   ))}
                 </div>
               </div>
-            )}
+
+              {/* Filtres par tags */}
+              {availableTags.length > 0 && (
+                <div className="space-y-3">
+                  <label className="block text-xs font-mono font-medium text-slate-300 uppercase tracking-wider">
+                    Tags
+                  </label>
+                  <div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto">
+                    {sortedTags.map((tag) => (
+                      <button
+                        key={tag.id}
+                        onClick={() => handleTagToggle(tag.name)}
+                        className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-all text-xs font-medium ${
+                          filters.tags?.includes(tag.name)
+                            ? 'border-cyan-400 bg-cyan-400/10 text-cyan-400'
+                            : 'border-slate-600 bg-slate-800/50 text-slate-400 hover:border-slate-500'
+                        }`}
+                      >
+                        <div 
+                          className="w-2 h-2 rounded-full" 
+                          style={{ backgroundColor: tag.color }}
+                        />
+                        {tag.name} ({tagCounts[tag.name] || 0})
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
 
             {/* Résumé des filtres actifs */}
             {activeFiltersCount > 0 && (