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

keep-notes/components/recent-notes-section.tsx

@@ -0,0 +1,153 @@
+'use client'
+
+import { Note } from '@/lib/types'
+import { Clock, FileText, Tag } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { useLanguage } from '@/lib/i18n'
+
+interface RecentNotesSectionProps {
+  recentNotes: Note[]
+  onEdit?: (note: Note, readOnly?: boolean) => void
+}
+
+export function RecentNotesSection({ recentNotes, onEdit }: RecentNotesSectionProps) {
+  const { language } = useLanguage()
+
+  // Show only the 3 most recent notes
+  const topThree = recentNotes.slice(0, 3)
+
+  if (topThree.length === 0) return null
+
+  return (
+    <section data-testid="recent-notes-section" className="mb-6">
+      {/* Minimalist header - matching your app style */}
+      <div className="flex items-center gap-2 mb-3 px-1">
+        <Clock className="w-3.5 h-3.5 text-muted-foreground" />
+        <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+          {language === 'fr' ? 'Récent' : 'Recent'}
+        </span>
+        <span className="text-xs text-muted-foreground">
+          · {topThree.length}
+        </span>
+      </div>
+
+      {/* Compact 3-card row */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+        {topThree.map((note, index) => (
+          <CompactCard
+            key={note.id}
+            note={note}
+            index={index}
+            onEdit={onEdit}
+          />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+// Compact card - matching your app's clean design
+function CompactCard({ 
+  note, 
+  index,
+  onEdit 
+}: { 
+  note: Note
+  index: number
+  onEdit?: (note: Note, readOnly?: boolean) => void 
+}) {
+  const { language } = useLanguage()
+  // NOTE: Using updatedAt here, but note-card.tsx uses createdAt
+  // If times are incorrect, consider using createdAt instead or ensure dates are properly parsed
+  const timeAgo = getCompactTime(note.updatedAt, language)
+  const isFirstNote = index === 0
+
+  return (
+    <button
+      onClick={() => onEdit?.(note)}
+      className={cn(
+        "group relative text-left p-4 bg-card border rounded-xl shadow-sm hover:shadow-md transition-all duration-200 min-h-[44px]",
+        isFirstNote && "ring-2 ring-primary/20"
+      )}
+    >
+      {/* Subtle left accent - colored based on recency */}
+      <div className={cn(
+        "absolute left-0 top-0 bottom-0 w-1 rounded-l-xl",
+        isFirstNote 
+          ? "bg-gradient-to-b from-blue-500 to-indigo-500" 
+          : index === 1
+          ? "bg-blue-400 dark:bg-blue-500"
+          : "bg-gray-300 dark:bg-gray-600"
+      )} />
+
+      {/* Content with left padding for accent line */}
+      <div className="pl-2">
+        {/* Title */}
+        <h3 className="text-sm font-semibold text-foreground line-clamp-1 mb-2">
+          {note.title || (language === 'fr' ? 'Sans titre' : 'Untitled')}
+        </h3>
+
+        {/* Preview - 2 lines max */}
+        <p className="text-xs text-muted-foreground line-clamp-2 mb-3 min-h-[2.5rem]">
+          {note.content?.substring(0, 80) || ''}
+          {note.content && note.content.length > 80 && '...'}
+        </p>
+
+        {/* Footer with time and indicators */}
+        <div className="flex items-center justify-between pt-2 border-t border-border">
+          {/* Time - left */}
+          <span className="text-xs text-muted-foreground flex items-center gap-1">
+            <Clock className="w-3 h-3" />
+            <span className="font-medium">{timeAgo}</span>
+          </span>
+
+          {/* Indicators - right */}
+          <div className="flex items-center gap-1.5">
+            {/* Notebook indicator */}
+            {note.notebookId && (
+              <div className="w-1.5 h-1.5 rounded-full bg-blue-500 dark:bg-blue-400" title="In notebook" />
+            )}
+            {/* Labels indicator */}
+            {note.labels && note.labels.length > 0 && (
+              <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400" title={`${note.labels.length} ${language === 'fr' ? 'étiquettes' : 'labels'}`} />
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Hover indicator - top right */}
+      <div className="absolute top-3 right-3 w-2 h-2 rounded-full bg-primary opacity-0 group-hover:opacity-100 transition-opacity duration-200" />
+    </button>
+  )
+}
+
+// Compact time display - matching your app's style
+// NOTE: Ensure dates are properly parsed from database (may come as strings)
+function getCompactTime(date: Date | string, language: string): string {
+  const now = new Date()
+  const then = date instanceof Date ? date : new Date(date)
+  
+  // Validate date
+  if (isNaN(then.getTime())) {
+    console.warn('Invalid date provided to getCompactTime:', date)
+    return language === 'fr' ? 'date invalide' : 'invalid date'
+  }
+  
+  const seconds = Math.floor((now.getTime() - then.getTime()) / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const hours = Math.floor(minutes / 60)
+
+  if (language === 'fr') {
+    if (seconds < 60) return 'à l\'instant'
+    if (minutes < 60) return `il y a ${minutes}m`
+    if (hours < 24) return `il y a ${hours}h`
+    const days = Math.floor(hours / 24)
+    return `il y a ${days}j`
+  } else {
+    if (seconds < 60) return 'just now'
+    if (minutes < 60) return `${minutes}m ago`
+    if (hours < 24) return `${hours}h ago`
+    const days = Math.floor(hours / 24)
+    return `${days}d ago`
+  }
+}