WIP: Améliorations UX et corrections de bugs avant création des épiques

keep-notes/components/favorites-section.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { useState } from 'react'
+import { Note } from '@/lib/types'
+import { NoteCard } from './note-card'
+import { ChevronDown, ChevronUp } from 'lucide-react'
+
+interface FavoritesSectionProps {
+  pinnedNotes: Note[]
+  onEdit?: (note: Note, readOnly?: boolean) => void
+}
+
+export function FavoritesSection({ pinnedNotes, onEdit }: FavoritesSectionProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false)
+
+  // Don't show section if no pinned notes
+  if (pinnedNotes.length === 0) {
+    return null
+  }
+
+  return (
+    <section data-testid="favorites-section" className="mb-8">
+      {/* Collapsible Header */}
+      <button
+        onClick={() => setIsCollapsed(!isCollapsed)}
+        className="w-full flex items-center justify-between gap-2 mb-4 px-2 py-2 hover:bg-accent rounded-lg transition-colors min-h-[44px]"
+        aria-expanded={!isCollapsed}
+      >
+        <div className="flex items-center gap-2">
+          <span className="text-2xl">📌</span>
+          <h2 className="text-lg font-semibold text-foreground">
+            Pinned Notes
+            <span className="text-sm font-medium text-muted-foreground ml-2">
+              ({pinnedNotes.length})
+            </span>
+          </h2>
+        </div>
+        {isCollapsed ? (
+          <ChevronDown className="w-5 h-5 text-muted-foreground" />
+        ) : (
+          <ChevronUp className="w-5 h-5 text-muted-foreground" />
+        )}
+      </button>
+
+      {/* Collapsible Content */}
+      {!isCollapsed && (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {pinnedNotes.map((note) => (
+            <NoteCard
+              key={note.id}
+              note={note}
+              onEdit={onEdit}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  )
+}