Fix: Improve filter button alignment

Restructures the filter button layout in `CategoryFilter.tsx` for better alignment and organization. Filters are now grouped into logical sections (display, date, pinned count) using a grid system, ensuring consistent alignment across all screen sizes and improving visual hierarchy.

.env

@@ -0,0 +1,3 @@
+VITE_SUPABASE_PROJECT_ID="wftyukugedtojizgatwj"
+VITE_SUPABASE_PUBLISHABLE_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6IndmdHl1a3VnZWR0b2ppemdhdHdqIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDkzNjIxNTEsImV4cCI6MjA2NDkzODE1MX0.KflrS6WiGksws1nO8NDm5i_Dav4u2JDSuEYtEnmKCRE"
+VITE_SUPABASE_URL="https://wftyukugedtojizgatwj.supabase.co"

src/components/CategoryFilter.tsx

@@ -97,75 +97,92 @@ const CategoryFilter = ({
       </div>
       
       {(onDateFilterChange || (user && onShowFollowedOnlyChange) || user) && (
-        <div className="pt-4 border-t">
-          <div className="flex flex-wrap items-center gap-2">
-            {/* Affichage (Tous / Suivis) */}
+        <div className="pt-4 border-t space-y-3">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 items-start">
+            
+            {/* Section 1: Filtres d'affichage */}
             {user && onShowFollowedOnlyChange && (
-              <div className="flex items-center gap-2 mr-2">
-                <Heart className="h-4 w-4 text-muted-foreground" />
-                <Button
-                  variant={!showFollowedOnly ? "default" : "outline"}
-                  size="sm"
-                  className="gap-2"
-                  onClick={() => onShowFollowedOnlyChange(false)}
-                >
-                  Tous les flux
-                </Button>
-                <Button
-                  variant={showFollowedOnly ? "default" : "outline"}
-                  size="sm"
-                  className="gap-2"
-                  onClick={() => onShowFollowedOnlyChange(true)}
-                >
-                  <Heart className="h-3 w-3" />
-                  Flux suivis uniquement
-                </Button>
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center gap-2 mb-1">
+                  <Heart className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-sm font-medium text-muted-foreground">Affichage</span>
+                </div>
+                <div className="flex flex-col sm:flex-row gap-2">
+                  <Button
+                    variant={!showFollowedOnly ? "default" : "outline"}
+                    size="sm"
+                    className="justify-start gap-2"
+                    onClick={() => onShowFollowedOnlyChange(false)}
+                  >
+                    Tous les flux
+                  </Button>
+                  <Button
+                    variant={showFollowedOnly ? "default" : "outline"}
+                    size="sm"
+                    className="justify-start gap-2"
+                    onClick={() => onShowFollowedOnlyChange(true)}
+                  >
+                    <Heart className="h-3 w-3" />
+                    Flux suivis uniquement
+                  </Button>
+                </div>
               </div>
             )}
 
-            {/* Date */}
+            {/* Section 2: Filtres de date */}
             {onDateFilterChange && (
-              <div className="flex items-center gap-2 mr-2">
-                <Calendar className="h-4 w-4 text-muted-foreground" />
-                <Button
-                  variant={dateFilter === null ? "default" : "outline"}
-                  size="sm"
-                  className="gap-2"
-                  onClick={() => onDateFilterChange(null)}
-                >
-                  Tous les articles
-                </Button>
-                <Button
-                  variant={dateFilter === 'today' ? "default" : "outline"}
-                  size="sm"
-                  className="gap-2"
-                  onClick={() => onDateFilterChange('today')}
-                >
-                  <Clock className="h-3 w-3" />
-                  Aujourd'hui
-                </Button>
-                <Button
-                  variant={dateFilter === 'yesterday' ? "default" : "outline"}
-                  size="sm"
-                  className="gap-2"
-                  onClick={() => onDateFilterChange('yesterday')}
-                >
-                  <Calendar className="h-3 w-3" />
-                  Hier
-                </Button>
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center gap-2 mb-1">
+                  <Calendar className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-sm font-medium text-muted-foreground">Période</span>
+                </div>
+                <div className="flex flex-col sm:flex-row gap-2">
+                  <Button
+                    variant={dateFilter === null ? "default" : "outline"}
+                    size="sm"
+                    className="justify-start gap-2"
+                    onClick={() => onDateFilterChange(null)}
+                  >
+                    Tous les articles
+                  </Button>
+                  <Button
+                    variant={dateFilter === 'today' ? "default" : "outline"}
+                    size="sm"
+                    className="justify-start gap-2"
+                    onClick={() => onDateFilterChange('today')}
+                  >
+                    <Clock className="h-3 w-3" />
+                    Aujourd'hui
+                  </Button>
+                  <Button
+                    variant={dateFilter === 'yesterday' ? "default" : "outline"}
+                    size="sm"
+                    className="justify-start gap-2"
+                    onClick={() => onDateFilterChange('yesterday')}
+                  >
+                    <Calendar className="h-3 w-3" />
+                    Hier
+                  </Button>
+                </div>
               </div>
             )}
 
-            {/* Épinglés (compteur) */}
+            {/* Section 3: Compteur d'épinglés */}
             {user && (
-              <div className="ml-auto flex items-center gap-2">
-                <Pin className="h-4 w-4 text-muted-foreground" />
-                <span className="text-sm font-medium">Épinglés</span>
-                <Badge variant="secondary">
+              <div className={cn(
+                "flex flex-col gap-2",
+                "lg:items-end lg:justify-end lg:ml-auto"
+              )}>
+                <div className="flex items-center gap-2 mb-1 lg:justify-end">
+                  <Pin className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-sm font-medium text-muted-foreground">Épinglés</span>
+                </div>
+                <Badge variant="secondary" className="w-fit lg:ml-auto">
                   {pinnedCount > 0 ? `${pinnedCount}` : 'Aucun'}
                 </Badge>
               </div>
             )}
+            
           </div>
         </div>
       )}