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

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>