feat(ai): localize AI features

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { Note } from '@/lib/types'
-import { Clock, FileText, Tag } from 'lucide-react'
+import { Clock } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { useLanguage } from '@/lib/i18n'
 
@@ -11,27 +11,24 @@ interface RecentNotesSectionProps {
 }
 
 export function RecentNotesSection({ recentNotes, onEdit }: RecentNotesSectionProps) {
-  const { language } = useLanguage()
+  const { t } = 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'}
+          {t('notes.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
@@ -46,7 +43,6 @@ export function RecentNotesSection({ recentNotes, onEdit }: RecentNotesSectionPr
   )
 }
 
-// Compact card - matching your app's clean design
 function CompactCard({
   note,
   index,
@@ -56,9 +52,8 @@ function CompactCard({
   index: number
   onEdit?: (note: Note, readOnly?: boolean) => void
 }) {
-  const { language } = useLanguage()
-  // Use contentUpdatedAt - only reflects actual content changes, not property changes (size, color, etc.)
-  const timeAgo = getCompactTime(note.contentUpdatedAt || note.updatedAt, language)
+  const { t } = useLanguage()
+  const timeAgo = getCompactTime(note.contentUpdatedAt || note.updatedAt, t)
   const isFirstNote = index === 0
 
   return (
@@ -69,7 +64,6 @@ function CompactCard({
         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
@@ -79,74 +73,54 @@ function CompactCard({
             : "bg-muted dark:bg-muted/60"
       )} />
 
-      {/* 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')}
+          {note.title || t('notes.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-primary dark:bg-primary/70" title="In notebook" />
+              <div className="w-1.5 h-1.5 rounded-full bg-primary dark:bg-primary/70" title={t('notes.inNotebook')} />
             )}
-            {/* 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 className="w-1.5 h-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400" title={t('labels.count', { count: note.labels.length })} />
             )}
           </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 {
+function getCompactTime(date: Date | string, t: (key: string, params?: Record<string, any>) => 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'
+    return t('common.error')
   }
 
   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`
-  }
+  if (seconds < 60) return t('time.justNow')
+  if (minutes < 60) return t('time.minutesAgo', { count: minutes })
+  if (hours < 24) return t('time.hoursAgo', { count: hours })
+  const days = Math.floor(hours / 24)
+  return t('time.daysAgo', { count: days })
 }