Feat: Show pinned count for authenticated users

Move the pinned count information to the feed type filters, and only show it to authenticated users.

src/components/CategoryFilter.tsx

@@ -8,14 +8,17 @@ import {
   Play, 
   Gamepad2, 
   Newspaper,
-  Filter
+  Filter,
+  Pin
 } from 'lucide-react';
+import { useAuth } from '@/hooks/useAuth';
 
 interface CategoryFilterProps {
   categories: NewsCategory[];
   selectedCategory: string | null;
   onCategoryChange: (categoryId: string | null) => void;
   newsCount: number;
+  pinnedCount?: number;
 }
 
 const iconMap = {
@@ -29,8 +32,11 @@ const CategoryFilter = ({
   categories, 
   selectedCategory, 
   onCategoryChange,
-  newsCount 
+  newsCount,
+  pinnedCount = 0
 }: CategoryFilterProps) => {
+  const { user } = useAuth();
+
   return (
     <div className="bg-card border rounded-lg p-6 space-y-4">
       <div className="flex items-center gap-2">
@@ -67,6 +73,18 @@ const CategoryFilter = ({
           );
         })}
       </div>
+
+      {user && (
+        <div className="pt-4 border-t">
+          <div className="flex items-center gap-2">
+            <Pin className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-medium">Épinglé</span>
+            <Badge variant="secondary" className="ml-auto">
+              {pinnedCount > 0 ? `${pinnedCount}` : 'Aucun'}
+            </Badge>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

src/components/Header.tsx

@@ -1,3 +1,4 @@
+
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
@@ -5,12 +6,14 @@ import { Search, Plus, Settings, User, Rss, List, LogOut, Shield } from 'lucide-
 import { Link } from 'react-router-dom';
 import { useAuth } from '@/hooks/useAuth';
 import { useSuperUser } from '@/hooks/useSuperUser';
+
 interface HeaderProps {
   searchQuery: string;
   onSearchChange: (query: string) => void;
   pinnedCount: number;
   onAddFeedClick: () => void;
 }
+
 const Header = ({
   searchQuery,
   onSearchChange,
@@ -24,34 +27,44 @@ const Header = ({
   const {
     isSuperUser
   } = useSuperUser();
+  
   const handleSignOut = async () => {
     await signOut();
   };
-  return <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50">
+  
+  return (
+    <header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50">
       <div className="container mx-auto px-4 py-4">
         <div className="flex items-center justify-between gap-4">
           <div className="flex items-center gap-3">
             <div className="flex items-center gap-2">
               <Rss className="h-6 w-6 text-primary" />
               <h1 className="text-xl font-bold">Feeds.Duhaz.fr</h1>
-              {isSuperUser && <Badge variant="destructive" className="gap-1">
+              {isSuperUser && (
+                <Badge variant="destructive" className="gap-1">
                   <Shield className="h-3 w-3" />
                   Admin
-                </Badge>}
+                </Badge>
+              )}
             </div>
             <div className="hidden sm:flex items-center gap-2 text-sm text-muted-foreground">
               <span>•</span>
-              
             </div>
           </div>
           
           <div className="flex items-center gap-3">
             <div className="relative">
               <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-              <Input placeholder="Rechercher..." value={searchQuery} onChange={e => onSearchChange(e.target.value)} className="pl-10 w-64" />
+              <Input 
+                placeholder="Rechercher..." 
+                value={searchQuery} 
+                onChange={e => onSearchChange(e.target.value)} 
+                className="pl-10 w-64" 
+              />
             </div>
             
-            {user ? <>
+            {user ? (
+              <>
                 <Link to="/feeds">
                   <Button variant="outline" size="sm" className="gap-2">
                     <List className="h-4 w-4" />
@@ -74,24 +87,20 @@ const Header = ({
                     <LogOut className="h-4 w-4" />
                   </Button>
                 </div>
-              </> : <Link to="/auth">
+              </>
+            ) : (
+              <Link to="/auth">
                 <Button variant="default" size="sm" className="gap-2">
                   <User className="h-4 w-4" />
                   Se connecter
                 </Button>
-              </Link>}
-          </div>
-        </div>
-        
-        <div className="flex items-center gap-4 mt-4">
-          <div className="flex items-center gap-2">
-            <span className="text-sm font-medium">Épinglé</span>
-            <Badge variant="secondary">
-              {pinnedCount > 0 ? `${pinnedCount}` : 'Aucun'}
-            </Badge>
+              </Link>
+            )}
           </div>
         </div>
       </div>
-    </header>;
+    </header>
+  );
 };
-export default Header;
+
+export default Header;

src/pages/Index.tsx

@@ -146,6 +146,7 @@ const Index = () => {
               selectedCategory={selectedCategory}
               onCategoryChange={setSelectedCategory}
               newsCount={articles.length}
+              pinnedCount={pinnedCount}
             />
             
             <div className="bg-card border rounded-lg p-4 space-y-3">
@@ -159,10 +160,12 @@ const Index = () => {
                   <span className="text-muted-foreground">Non lus</span>
                   <Badge variant="default">{unreadCount}</Badge>
                 </div>
-                <div className="flex justify-between">
-                  <span className="text-muted-foreground">Épinglés</span>
-                  <Badge variant="secondary">{pinnedCount}</Badge>
-                </div>
+                {user && (
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">Épinglés</span>
+                    <Badge variant="secondary">{pinnedCount}</Badge>
+                  </div>
+                )}
               </div>
             </div>
           </div>