Move mobile filters to dropdown

Switch mobile filters from a drawer to a dropdown menu in the index page, updating the mobile UI to use DropdownMenu for filter controls and preserving existing category and stats content.

X-Lovable-Edit-ID: edt-e1cead34-6768-4650-90a9-90636614ab8d

src/pages/Index.tsx

@@ -11,7 +11,11 @@ import AddFeedModal from '@/components/AddFeedModal';
 import ArticleModal from '@/components/ArticleModal';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaginationEllipsis } from '@/components/ui/pagination';
 import { RefreshCw, Filter, Rss, Plus } from 'lucide-react';
 import { toast } from 'sonner';
@@ -243,58 +247,56 @@ const Index = () => {
               </div>
               
               <div className="flex items-center gap-2">
-                {/* Mobile Filter Drawer */}
+                {/* Mobile Filter Dropdown */}
                 {isMobile && (
-                  <Drawer>
-                    <DrawerTrigger asChild>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
                       <Button variant="outline" size="sm" className="gap-2">
                         <Filter className="h-4 w-4" />
                         Filtres
                       </Button>
-                    </DrawerTrigger>
-                    <DrawerContent>
-                      <div className="p-4 space-y-6">
-                        <CategoryFilter 
-                          categories={categories} 
-                          selectedCategory={selectedCategory} 
-                          onCategoryChange={setSelectedCategory} 
-                          newsCount={articles.length} 
-                          pinnedCount={pinnedCount} 
-                          articles={articles}
-                          pinnedArticles={pinnedArticles}
-                          dateFilter={dateFilter}
-                          onDateFilterChange={setDateFilter}
-                          showFollowedOnly={showFollowedOnly}
-                          showDiscoveryMode={showDiscoveryMode}
-                          onViewModeChange={handleViewModeChange}
-                          showReadArticles={showReadArticles}
-                          onShowReadArticlesChange={setShowReadArticles}
-                          onTogglePin={togglePin}
-                          onMarkAsRead={markAsRead}
-                          onDeleteArticle={deleteArticle}
-                          onOpenArticle={handleOpenArticle}
-                        />
-                        
-                        <div className="bg-card border rounded-lg p-4 space-y-3">
-                          <h3 className="font-semibold text-sm">Statistiques</h3>
-                          <div className="space-y-2 text-sm">
-                            <div className="flex justify-between">
-                              <span className="text-muted-foreground">Articles non lus</span>
-                              <Badge variant="outline">{unreadCount}</Badge>
-                            </div>
-                            <div className="flex justify-between">
-                              <span className="text-muted-foreground">Articles totaux</span>
-                              <Badge variant="outline">{articles.length}</Badge>
-                            </div>
-                            {user && <div className="flex justify-between">
-                                <span className="text-muted-foreground">Épinglés</span>
-                                <Badge variant="secondary">{pinnedCount}</Badge>
-                              </div>}
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="w-[320px] max-h-[70vh] overflow-y-auto p-4 space-y-4">
+                      <CategoryFilter 
+                        categories={categories} 
+                        selectedCategory={selectedCategory} 
+                        onCategoryChange={setSelectedCategory} 
+                        newsCount={articles.length} 
+                        pinnedCount={pinnedCount} 
+                        articles={articles}
+                        pinnedArticles={pinnedArticles}
+                        dateFilter={dateFilter}
+                        onDateFilterChange={setDateFilter}
+                        showFollowedOnly={showFollowedOnly}
+                        showDiscoveryMode={showDiscoveryMode}
+                        onViewModeChange={handleViewModeChange}
+                        showReadArticles={showReadArticles}
+                        onShowReadArticlesChange={setShowReadArticles}
+                        onTogglePin={togglePin}
+                        onMarkAsRead={markAsRead}
+                        onDeleteArticle={deleteArticle}
+                        onOpenArticle={handleOpenArticle}
+                      />
+                      
+                      <div className="bg-card border rounded-lg p-4 space-y-3">
+                        <h3 className="font-semibold text-sm">Statistiques</h3>
+                        <div className="space-y-2 text-sm">
+                          <div className="flex justify-between">
+                            <span className="text-muted-foreground">Articles non lus</span>
+                            <Badge variant="outline">{unreadCount}</Badge>
+                          </div>
+                          <div className="flex justify-between">
+                            <span className="text-muted-foreground">Articles totaux</span>
+                            <Badge variant="outline">{articles.length}</Badge>
                           </div>
+                          {user && <div className="flex justify-between">
+                              <span className="text-muted-foreground">Épinglés</span>
+                              <Badge variant="secondary">{pinnedCount}</Badge>
+                            </div>}
                         </div>
                       </div>
-                    </DrawerContent>
-                  </Drawer>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
                 )}
                 
                 {/* Desktop Filter Toggle - keep existing logic */}