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

2026-01-17 11:10:50 +01:00
parent 772dc77719
commit ef60dafd73
84 changed files with 11846 additions and 230 deletions
--- a/keep-notes/components/favorites-section.tsx
+++ b/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>
+  )
+}
--- a/keep-notes/components/header.tsx
+++ b/keep-notes/components/header.tsx
@@ -77,6 +77,41 @@ export function Header({
    setNotebookId(currentNotebook || null)
  }, [currentNotebook, setNotebookId])

+  // Prevent body scroll when mobile menu is open
+  useEffect(() => {
+    if (isSidebarOpen) {
+      document.body.style.overflow = 'hidden'
+      document.body.style.position = 'fixed'
+      document.body.style.width = '100%'
+    } else {
+      document.body.style.overflow = ''
+      document.body.style.position = ''
+      document.body.style.width = ''
+    }
+    return () => {
+      document.body.style.overflow = ''
+      document.body.style.position = ''
+      document.body.style.width = ''
+    }
+  }, [isSidebarOpen])
+
+  // Close mobile menu on Esc key press
+  useEffect(() => {
+    const handleEscapeKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isSidebarOpen) {
+        setIsSidebarOpen(false)
+      }
+    }
+
+    if (isSidebarOpen) {
+      document.addEventListener('keydown', handleEscapeKey)
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscapeKey)
+    }
+  }, [isSidebarOpen])
+
  // Simple debounced search with URL update (150ms for more responsiveness)
  const debouncedSearchQuery = useDebounce(searchQuery, 150)

@@ -224,6 +259,8 @@ export function Header({
              ? "bg-[#EFB162] text-amber-900"
              : "hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-700 dark:text-gray-300"
          )}
+          style={{ minHeight: '44px' }}
+          aria-pressed={active}
        >
          {content}
        </button>
@@ -240,6 +277,8 @@ export function Header({
            ? "bg-[#EFB162] text-amber-900"
            : "hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-700 dark:text-gray-300"
        )}
+        style={{ minHeight: '44px' }}
+        aria-current={active ? 'page' : undefined}
      >
        {content}
      </Link>
@@ -250,20 +289,36 @@ export function Header({

  return (
    <>
-      <header className="h-20 bg-background-light/90 dark:bg-background-dark/90 backdrop-blur-sm border-b border-transparent flex items-center justify-between px-6 lg:px-12 flex-shrink-0 z-30 sticky top-0">
+      <header className="h-20 bg-background/90 backdrop-blur-sm border-b border-transparent flex items-center justify-between px-6 lg:px-12 flex-shrink-0 z-30 sticky top-0">
        {/* Mobile Menu Button */}
        <Sheet open={isSidebarOpen} onOpenChange={setIsSidebarOpen}>
          <SheetTrigger asChild>
-            <Button variant="ghost" size="icon" className="lg:hidden mr-4 text-slate-500 dark:text-slate-400">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="lg:hidden mr-4 text-muted-foreground"
+            aria-label="Open menu"
+            aria-expanded={isSidebarOpen}
+          >
              <Menu className="h-6 w-6" />
            </Button>
          </SheetTrigger>
          <SheetContent side="left" className="w-[280px] sm:w-[320px] p-0 pt-4">
-            <SheetHeader className="px-4 mb-4">
+            <SheetHeader className="px-4 mb-4 flex items-center justify-between">
              <SheetTitle className="flex items-center gap-2 text-xl font-normal">
-                <StickyNote className="h-6 w-6 text-amber-500" />
+                <StickyNote className="h-6 w-6 text-primary" />
                {t('nav.workspace')}
              </SheetTitle>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setIsSidebarOpen(false)}
+                className="text-muted-foreground hover:text-foreground"
+                aria-label="Close menu"
+                style={{ width: '44px', height: '44px' }}
+              >
+                <X className="h-5 w-5" />
+              </Button>
            </SheetHeader>
            <div className="flex flex-col gap-1 py-2">
              <NavItem
@@ -280,7 +335,7 @@ export function Header({
              />

              <div className="my-2 px-4 flex items-center justify-between">
-                <span className="text-xs font-medium text-gray-500 uppercase tracking-wider">{t('labels.title')}</span>
+                <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">{t('labels.title')}</span>
              </div>

              {labels.map(label => (
@@ -312,10 +367,10 @@ export function Header({
        </Sheet>

        {/* Search Bar */}
-        <div className="flex-1 max-w-2xl flex items-center bg-white dark:bg-slate-800/80 rounded-2xl px-4 py-3 shadow-sm border border-transparent focus-within:border-indigo-500/50 focus-within:ring-2 ring-indigo-500/10 transition-all">
-          <Search className="text-slate-400 dark:text-slate-500 text-xl" />
+        <div className="flex-1 max-w-2xl flex items-center bg-card rounded-lg px-4 py-3 shadow-sm border border-transparent focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/10 transition-all">
+          <Search className="text-muted-foreground text-xl" />
          <input
-            className="bg-transparent border-none outline-none focus:ring-0 w-full text-sm text-slate-700 dark:text-slate-200 ml-3 placeholder-slate-400"
+            className="bg-transparent border-none outline-none focus:ring-0 w-full text-sm text-foreground ml-3 placeholder-muted-foreground"
            placeholder={t('search.placeholder') || "Search notes, tags, or notebooks..."}
            type="text"
            value={searchQuery}
@@ -327,11 +382,11 @@ export function Header({
            onClick={handleSemanticSearch}
            disabled={!searchQuery.trim() || isSemanticSearching}
            className={cn(
-              "flex items-center gap-1 px-2 py-1.5 rounded-md text-xs font-medium transition-colors",
-              "hover:bg-indigo-100 dark:hover:bg-indigo-900/30",
+              "flex items-center gap-1 px-2 py-1.5 rounded-md text-xs font-medium transition-colors min-h-[36px]",
+              "hover:bg-accent",
              searchParams.get('semantic') === 'true'
-                ? "bg-indigo-200 dark:bg-indigo-900/50 text-indigo-900 dark:text-indigo-100"
-                : "text-gray-500 dark:text-gray-400 hover:text-indigo-700 dark:hover:text-indigo-300",
+                ? "bg-primary/20 text-primary"
+                : "text-muted-foreground hover:text-primary",
              "disabled:opacity-50 disabled:cursor-not-allowed"
            )}
            title={t('search.semanticTooltip')}
@@ -342,7 +397,7 @@ export function Header({
          {searchQuery && (
            <button
              onClick={() => handleSearch('')}
-              className="ml-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"
+              className="ml-2 text-muted-foreground hover:text-foreground"
            >
              <X className="h-4 w-4" />
            </button>
@@ -358,14 +413,14 @@ export function Header({
          />

          {/* Grid View Button */}
-          <button className="p-2.5 text-slate-500 hover:bg-white hover:shadow-sm dark:text-slate-400 dark:hover:bg-slate-700 rounded-xl transition-all duration-200">
+          <button className="p-2.5 text-muted-foreground hover:bg-accent rounded-lg transition-colors duration-200 min-h-[44px] min-w-[44px]">
            <Grid3x3 className="text-xl" />
          </button>

          {/* Theme Toggle */}
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
-              <button className="p-2.5 text-slate-500 hover:bg-white hover:shadow-sm dark:text-slate-400 dark:hover:bg-slate-700 rounded-xl transition-all duration-200">
+              <button className="p-2.5 text-muted-foreground hover:bg-accent rounded-lg transition-colors duration-200 min-h-[44px] min-w-[44px]">
                {theme === 'light' ? <Sun className="text-xl" /> : <Moon className="text-xl" />}
              </button>
            </DropdownMenuTrigger>
@@ -384,12 +439,12 @@ export function Header({

      {/* Active Filters Bar */}
      {hasActiveFilters && (
-        <div className="px-6 lg:px-12 pb-3 flex items-center gap-2 overflow-x-auto border-t border-gray-100 dark:border-zinc-800 pt-2 bg-white/50 dark:bg-zinc-900/50 backdrop-blur-sm animate-in slide-in-from-top-2">
+        <div className="px-6 lg:px-12 pb-3 flex items-center gap-2 overflow-x-auto border-t border-border pt-2 bg-background/50 backdrop-blur-sm animate-in slide-in-from-top-2">
          {currentColor && (
            <Badge variant="secondary" className="flex items-center gap-1 h-7 whitespace-nowrap pl-2 pr-1">
              <div className={cn("w-3 h-3 rounded-full border border-black/10", `bg-${currentColor}-500`)} />
              {t('notes.color')}: {currentColor}
-              <button onClick={removeColorFilter} className="ml-1 hover:bg-black/10 dark:hover:bg-white/10 rounded-full p-0.5">
+              <button onClick={removeColorFilter} className="ml-1 hover:bg-black/10 dark:hover:bg-white/10 rounded-full p-0.5 min-h-[24px] min-w-[24px]">
                <X className="h-3 w-3" />
              </button>
            </Badge>
@@ -409,7 +464,7 @@ export function Header({
              variant="ghost"
              size="sm"
              onClick={clearAllFilters}
-              className="h-7 text-xs text-indigo-600 hover:text-indigo-700 hover:bg-indigo-50 dark:text-indigo-400 dark:hover:bg-indigo-900/20 whitespace-nowrap ml-auto"
+              className="h-7 text-xs text-primary hover:text-primary hover:bg-accent whitespace-nowrap ml-auto"
            >
              {t('labels.clearAll')}
            </Button>
--- a/keep-notes/components/masonry-grid.tsx
+++ b/keep-notes/components/masonry-grid.tsx
@@ -157,12 +157,15 @@ export function MasonryGrid({ notes, onEdit }: MasonryGridProps) {
      if (!isMounted) return;

      // Detect if we are on a touch device (mobile behavior)
-      const isMobile = window.matchMedia('(pointer: coarse)').matches;
+      const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+      const isMobileWidth = window.innerWidth < 768;
+      const isMobile = isTouchDevice || isMobileWidth;

      const layoutOptions = {
        dragEnabled: true,
-        // Always use specific drag handle to avoid conflicts
-        dragHandle: '.muuri-drag-handle',
+        // Use drag handle for mobile devices to allow smooth scrolling
+        // On desktop, whole card is draggable (no handle needed)
+        dragHandle: isMobile ? '.muuri-drag-handle' : undefined,
        dragContainer: document.body,
        dragStartPredicate: {
          distance: 10,
--- a/keep-notes/components/note-card.tsx
+++ b/keep-notes/components/note-card.tsx
@@ -32,6 +32,7 @@ import { useConnectionsCompare } from '@/hooks/use-connections-compare'
 import { useLabels } from '@/context/LabelContext'
 import { useLanguage } from '@/lib/i18n'
 import { useNotebooks } from '@/context/notebooks-context'
+import { toast } from 'sonner'

 // Mapping of supported languages to date-fns locales
 const localeMap: Record<string, Locale> = {
@@ -135,7 +136,7 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on
  const handleMoveToNotebook = async (notebookId: string | null) => {
    await moveNoteToNotebookOptimistic(note.id, notebookId)
    setShowNotebookMenu(false)
-    router.refresh()
+    // No need for router.refresh() - triggerRefresh() is already called in moveNoteToNotebookOptimistic
  }
  const colorClasses = NOTE_COLORS[note.color as NoteColor] || NOTE_COLORS.default

@@ -198,6 +199,13 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on
      addOptimisticNote({ isPinned: !note.isPinned })
      await togglePin(note.id, !note.isPinned)
      router.refresh()
+
+      // Show toast notification
+      if (!note.isPinned) {
+        toast.success('Note épinglée')
+      } else {
+        toast.info('Note désépinglée')
+      }
    })
  }

@@ -263,8 +271,7 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on
    <Card
      data-testid="note-card"
      className={cn(
-        'note-card-main group relative p-4 transition-all duration-200 border cursor-move',
-        'hover:shadow-md',
+        'note-card group relative rounded-lg p-4 transition-all duration-200 border shadow-sm hover:shadow-md',
        colorClasses.bg,
        colorClasses.card,
        colorClasses.hover,
@@ -273,12 +280,21 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on
      onClick={(e) => {
        // Only trigger edit if not clicking on buttons
        const target = e.target as HTMLElement
-        if (!target.closest('button') && !target.closest('[role="checkbox"]') && !target.closest('.drag-handle')) {
+        if (!target.closest('button') && !target.closest('[role="checkbox"]') && !target.closest('.muuri-drag-handle') && !target.closest('.drag-handle')) {
          // For shared notes, pass readOnly flag
          onEdit?.(note, !!isSharedNote) // Pass second parameter as readOnly flag (convert to boolean)
        }
      }}
    >
+      {/* Drag Handle - Only visible on mobile/touch devices */}
+      <div
+        className="muuri-drag-handle absolute top-2 left-2 z-20 cursor-grab active:cursor-grabbing p-2 md:hidden"
+        aria-label={t('notes.dragToReorder') || 'Drag to reorder'}
+        title={t('notes.dragToReorder') || 'Drag to reorder'}
+      >
+        <GripVertical className="h-5 w-5 text-muted-foreground" />
+      </div>
+
      {/* Move to Notebook Dropdown Menu */}
      <div onClick={(e) => e.stopPropagation()} className="absolute top-2 right-2 z-20">
        <DropdownMenu open={showNotebookMenu} onOpenChange={setShowNotebookMenu}>
@@ -321,7 +337,7 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on
        variant="ghost"
        size="sm"
        className={cn(
-          "absolute top-2 right-12 z-20 h-8 w-8 p-0 rounded-full transition-opacity",
+          "absolute top-2 right-12 z-20 min-h-[44px] min-w-[44px] h-8 w-8 p-0 rounded-md transition-opacity",
          optimisticNote.isPinned ? "opacity-100" : "opacity-0 group-hover:opacity-100"
        )}
        onClick={(e) => {
@@ -330,14 +346,14 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on
        }}
      >
        <Pin
-          className={cn("h-4 w-4", optimisticNote.isPinned ? "fill-current text-blue-600" : "text-gray-400")}
+          className={cn("h-4 w-4", optimisticNote.isPinned ? "fill-current text-primary" : "text-muted-foreground")}
        />
      </Button>

      {/* Reminder Icon - Move slightly if pin button is there */}
      {note.reminder && new Date(note.reminder) > new Date() && (
        <Bell
-          className="absolute top-3 right-10 h-4 w-4 text-blue-600 dark:text-blue-400"
+          className="absolute top-3 right-10 h-4 w-4 text-primary"
        />
      )}

@@ -373,7 +389,7 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on

      {/* Title */}
      {optimisticNote.title && (
-        <h3 className="text-base font-medium mb-2 pr-10 text-gray-900 dark:text-gray-100">
+        <h3 className="text-base font-medium mb-2 pr-10 text-foreground">
          {optimisticNote.title}
        </h3>
      )}
@@ -446,7 +462,7 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on

      {/* Content */}
      {optimisticNote.type === 'text' ? (
-        <div className="text-sm text-gray-700 dark:text-gray-300 line-clamp-10">
+        <div className="text-sm text-foreground line-clamp-10">
          <MarkdownContent content={optimisticNote.content} />
        </div>
      ) : (
@@ -468,7 +484,7 @@ export function NoteCard({ note, onEdit, isDragging, isDragOver, onDragStart, on
      {/* Footer with Date only */}
      <div className="mt-3 flex items-center justify-end">
        {/* Creation Date */}
-        <div className="text-xs text-gray-500 dark:text-gray-400">
+        <div className="text-xs text-muted-foreground">
          {formatDistanceToNow(new Date(note.createdAt), { addSuffix: true, locale: getDateLocale(language) })}
        </div>
      </div>
--- a/keep-notes/components/notebook-suggestion-toast.tsx
+++ b/keep-notes/components/notebook-suggestion-toast.tsx
@@ -87,7 +87,7 @@ export function NotebookSuggestionToast({
    try {
      // Move note to suggested notebook
      await moveNoteToNotebookOptimistic(noteId, suggestion.id)
-      router.refresh()
+      // No need for router.refresh() - triggerRefresh() is already called in moveNoteToNotebookOptimistic
      handleDismiss()
    } catch (error) {
      console.error('Failed to move note to notebook:', error)
--- a/keep-notes/components/notebooks-list.tsx
+++ b/keep-notes/components/notebooks-list.tsx
@@ -59,11 +59,11 @@ export function NotebooksList() {

    if (noteId) {
      await moveNoteToNotebookOptimistic(noteId, notebookId)
-      router.refresh() // Refresh the page to show the moved note
+      // No need for router.refresh() - triggerRefresh() is already called in moveNoteToNotebookOptimistic
    }

    dragOver(null)
-  }, [moveNoteToNotebookOptimistic, dragOver, router])
+  }, [moveNoteToNotebookOptimistic, dragOver])

  // Handle drag over a notebook
  const handleDragOver = useCallback((e: React.DragEvent, notebookId: string | null) => {
--- a/keep-notes/components/recent-notes-section.tsx
+++ b/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`
+  }
+}
--- a/keep-notes/components/settings/SettingInput.tsx
+++ b/keep-notes/components/settings/SettingInput.tsx
@@ -0,0 +1,88 @@
+'use client'
+
+import { useState } from 'react'
+import { Label } from '@/components/ui/label'
+import { Loader2, Check } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { toast } from 'sonner'
+
+interface SettingInputProps {
+  label: string
+  description?: string
+  value: string
+  type?: 'text' | 'password' | 'email' | 'url'
+  onChange: (value: string) => Promise<void>
+  placeholder?: string
+  disabled?: boolean
+}
+
+export function SettingInput({
+  label,
+  description,
+  value,
+  type = 'text',
+  onChange,
+  placeholder,
+  disabled
+}: SettingInputProps) {
+  const [isLoading, setIsLoading] = useState(false)
+  const [isSaved, setIsSaved] = useState(false)
+
+  const handleChange = async (newValue: string) => {
+    setIsLoading(true)
+    setIsSaved(false)
+
+    try {
+      await onChange(newValue)
+      setIsSaved(true)
+      toast.success('Setting saved')
+
+      // Clear saved indicator after 2 seconds
+      setTimeout(() => setIsSaved(false), 2000)
+    } catch (err) {
+      console.error('Error updating setting:', err)
+      toast.error('Failed to save setting', {
+        description: 'Please try again'
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className={cn('py-4', 'border-b last:border-0 dark:border-gray-800')}>
+      <Label className="font-medium text-gray-900 dark:text-gray-100 block mb-1">
+        {label}
+      </Label>
+      {description && (
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+          {description}
+        </p>
+      )}
+      <div className="relative">
+        <input
+          type={type}
+          value={value}
+          onChange={(e) => handleChange(e.target.value)}
+          placeholder={placeholder}
+          disabled={disabled || isLoading}
+          className={cn(
+            'w-full px-3 py-2 border rounded-lg',
+            'focus:ring-2 focus:ring-primary-500 focus:border-transparent',
+            'disabled:opacity-50 disabled:cursor-not-allowed',
+            'bg-white dark:bg-gray-900',
+            'border-gray-300 dark:border-gray-700',
+            'text-gray-900 dark:text-gray-100',
+            'placeholder:text-gray-400 dark:placeholder:text-gray-600'
+          )}
+        />
+        {isLoading && (
+          <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-gray-500" />
+        )}
+        {isSaved && !isLoading && (
+          <Check className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-green-500" />
+        )}
+      </div>
+    </div>
+  )
+}
--- a/keep-notes/components/settings/SettingSelect.tsx
+++ b/keep-notes/components/settings/SettingSelect.tsx
@@ -0,0 +1,88 @@
+'use client'
+
+import { useState } from 'react'
+import { Label } from '@/components/ui/label'
+import { Loader2 } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { toast } from 'sonner'
+
+interface SelectOption {
+  value: string
+  label: string
+  description?: string
+}
+
+interface SettingSelectProps {
+  label: string
+  description?: string
+  value: string
+  options: SelectOption[]
+  onChange: (value: string) => Promise<void>
+  disabled?: boolean
+}
+
+export function SettingSelect({
+  label,
+  description,
+  value,
+  options,
+  onChange,
+  disabled
+}: SettingSelectProps) {
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleChange = async (newValue: string) => {
+    setIsLoading(true)
+
+    try {
+      await onChange(newValue)
+      toast.success('Setting saved', {
+        description: `${label} has been updated`
+      })
+    } catch (err) {
+      console.error('Error updating setting:', err)
+      toast.error('Failed to save setting', {
+        description: 'Please try again'
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className={cn('py-4', 'border-b last:border-0 dark:border-gray-800')}>
+      <Label className="font-medium text-gray-900 dark:text-gray-100 block mb-1">
+        {label}
+      </Label>
+      {description && (
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+          {description}
+        </p>
+      )}
+      <div className="relative">
+        <select
+          value={value}
+          onChange={(e) => handleChange(e.target.value)}
+          disabled={disabled || isLoading}
+          className={cn(
+            'w-full px-3 py-2 border rounded-lg',
+            'focus:ring-2 focus:ring-primary-500 focus:border-transparent',
+            'disabled:opacity-50 disabled:cursor-not-allowed',
+            'appearance-none bg-white dark:bg-gray-900',
+            'border-gray-300 dark:border-gray-700',
+            'text-gray-900 dark:text-gray-100'
+          )}
+        >
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        {isLoading && (
+          <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-gray-500" />
+        )}
+      </div>
+    </div>
+  )
+}
--- a/keep-notes/components/settings/SettingToggle.tsx
+++ b/keep-notes/components/settings/SettingToggle.tsx
@@ -0,0 +1,75 @@
+'use client'
+
+import { useState } from 'react'
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+import { Loader2, Check, X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { toast } from 'sonner'
+
+interface SettingToggleProps {
+  label: string
+  description?: string
+  checked: boolean
+  onChange: (checked: boolean) => Promise<void>
+  disabled?: boolean
+}
+
+export function SettingToggle({
+  label,
+  description,
+  checked,
+  onChange,
+  disabled
+}: SettingToggleProps) {
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState(false)
+
+  const handleChange = async (newChecked: boolean) => {
+    setIsLoading(true)
+    setError(false)
+
+    try {
+      await onChange(newChecked)
+      toast.success('Setting saved', {
+        description: `${label} has been ${newChecked ? 'enabled' : 'disabled'}`
+      })
+    } catch (err) {
+      console.error('Error updating setting:', err)
+      setError(true)
+      toast.error('Failed to save setting', {
+        description: 'Please try again'
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className={cn(
+      'flex items-center justify-between py-4',
+      'border-b last:border-0 dark:border-gray-800'
+    )}>
+      <div className="flex-1 pr-4">
+        <Label className="font-medium text-gray-900 dark:text-gray-100 cursor-pointer">
+          {label}
+        </Label>
+        {description && (
+          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+            {description}
+          </p>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        {isLoading && <Loader2 className="h-4 w-4 animate-spin text-gray-500" />}
+        {!isLoading && !error && checked && <Check className="h-4 w-4 text-green-500" />}
+        {!isLoading && !error && !checked && <X className="h-4 w-4 text-gray-400" />}
+        <Switch
+          checked={checked}
+          onCheckedChange={handleChange}
+          disabled={disabled || isLoading}
+        />
+      </div>
+    </div>
+  )
+}
--- a/keep-notes/components/settings/SettingsNav.tsx
+++ b/keep-notes/components/settings/SettingsNav.tsx
@@ -0,0 +1,89 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { Settings, Sparkles, Palette, User, Database, Info, Check } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface SettingsSection {
+  id: string
+  label: string
+  icon: React.ReactNode
+  href: string
+}
+
+interface SettingsNavProps {
+  className?: string
+}
+
+export function SettingsNav({ className }: SettingsNavProps) {
+  const pathname = usePathname()
+
+  const sections: SettingsSection[] = [
+    {
+      id: 'general',
+      label: 'General',
+      icon: <Settings className="h-5 w-5" />,
+      href: '/settings/general'
+    },
+    {
+      id: 'ai',
+      label: 'AI',
+      icon: <Sparkles className="h-5 w-5" />,
+      href: '/settings/ai'
+    },
+    {
+      id: 'appearance',
+      label: 'Appearance',
+      icon: <Palette className="h-5 w-5" />,
+      href: '/settings/appearance'
+    },
+    {
+      id: 'profile',
+      label: 'Profile',
+      icon: <User className="h-5 w-5" />,
+      href: '/settings/profile'
+    },
+    {
+      id: 'data',
+      label: 'Data',
+      icon: <Database className="h-5 w-5" />,
+      href: '/settings/data'
+    },
+    {
+      id: 'about',
+      label: 'About',
+      icon: <Info className="h-5 w-5" />,
+      href: '/settings/about'
+    }
+  ]
+
+  const isActive = (href: string) => pathname === href || pathname.startsWith(href + '/')
+
+  return (
+    <nav className={cn('space-y-1', className)}>
+      {sections.map((section) => (
+        <Link
+          key={section.id}
+          href={section.href}
+          className={cn(
+            'flex items-center gap-3 px-4 py-3 rounded-lg transition-colors',
+            'hover:bg-gray-100 dark:hover:bg-gray-800',
+            isActive(section.href)
+              ? 'bg-gray-100 dark:bg-gray-800 text-primary'
+              : 'text-gray-700 dark:text-gray-300'
+          )}
+        >
+          {isActive(section.href) && (
+            <Check className="h-4 w-4 text-primary" />
+          )}
+          {!isActive(section.href) && (
+            <div className="w-4" />
+          )}
+          {section.icon}
+          <span className="font-medium">{section.label}</span>
+        </Link>
+      ))}
+    </nav>
+  )
+}
--- a/keep-notes/components/settings/SettingsSearch.tsx
+++ b/keep-notes/components/settings/SettingsSearch.tsx
@@ -0,0 +1,38 @@
+'use client'
+
+import { useState } from 'react'
+import { Search } from 'lucide-react'
+import { Input } from '@/components/ui/input'
+import { cn } from '@/lib/utils'
+
+interface SettingsSearchProps {
+  onSearch: (query: string) => void
+  placeholder?: string
+  className?: string
+}
+
+export function SettingsSearch({
+  onSearch,
+  placeholder = 'Search settings...',
+  className
+}: SettingsSearchProps) {
+  const [query, setQuery] = useState('')
+
+  const handleChange = (value: string) => {
+    setQuery(value)
+    onSearch(value)
+  }
+
+  return (
+    <div className={cn('relative', className)}>
+      <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+      <Input
+        type="text"
+        value={query}
+        onChange={(e) => handleChange(e.target.value)}
+        placeholder={placeholder}
+        className="pl-10"
+      />
+    </div>
+  )
+}
--- a/keep-notes/components/settings/SettingsSection.tsx
+++ b/keep-notes/components/settings/SettingsSection.tsx
@@ -0,0 +1,36 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+interface SettingsSectionProps {
+  title: string
+  description?: string
+  icon?: React.ReactNode
+  children: React.ReactNode
+  className?: string
+}
+
+export function SettingsSection({
+  title,
+  description,
+  icon,
+  children,
+  className
+}: SettingsSectionProps) {
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          {icon}
+          {title}
+        </CardTitle>
+        {description && (
+          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+            {description}
+          </p>
+        )}
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {children}
+      </CardContent>
+    </Card>
+  )
+}
--- a/keep-notes/components/settings/index.ts
+++ b/keep-notes/components/settings/index.ts
@@ -0,0 +1,6 @@
+export { SettingsNav } from './SettingsNav'
+export { SettingsSection } from './SettingsSection'
+export { SettingToggle } from './SettingToggle'
+export { SettingSelect } from './SettingSelect'
+export { SettingInput } from './SettingInput'
+export { SettingsSearch } from './SettingsSearch'