refactor: factorisation peek panel — NotePeekPanel réutilisable

Architecture: - components/note-peek/use-note-peek.ts: hook (fetch + state + events) - components/note-peek/note-peek-content.tsx: rendu markdown/richtext/KaTeX - components/note-peek/note-peek-panel.tsx: panel (overlay + inline modes) - components/note-peek/index.ts: exports - lib/use-scroll-to-block.ts: utilitaire scroll vers data-id insights/page.tsx: - ~95 lignes (state + fetch + KaTeX useEffect + AnimatePresence) → 10 lignes - peek.open(noteId) remplace handleNoteClick complexe - <NotePeekPanel mode=overlay /> remplace tout le JSX du panel NotePeekPanel gère: - markdown (MarkdownContent) + richtext (DOMPurify + KaTeX lazy) - RTL (slide gauche pour fa/ar) - prefers-reduced-motion - role=dialog + aria-modal (overlay mode) - loading spinner - bouton Maximize2 + X - renderContent prop pour custom (éditeur read-only)
2026-07-04 23:37:37 +00:00
parent 45fc178589
commit 261eee2953
7 changed files with 299 additions and 121 deletions
--- a/memento-note/components/note-peek/note-peek-panel.tsx
+++ b/memento-note/components/note-peek/note-peek-panel.tsx
@@ -0,0 +1,136 @@
+'use client'
+
+import { type ReactNode } from 'react'
+import { motion, AnimatePresence, useReducedMotion } from 'motion/react'
+import { X, Maximize2, Loader2 } from 'lucide-react'
+import { useLanguage } from '@/lib/i18n'
+import type { Note } from '@/lib/types'
+import { NotePeekContent } from './note-peek-content'
+
+interface NotePeekPanelProps {
+  note: Note | null
+  blockId?: string
+  loading?: boolean
+  mode: 'overlay' | 'inline'
+  onClose: () => void
+  onOpenFully?: (note: Note) => void
+  labelKey?: string
+  renderContent?: (note: Note, blockId?: string) => ReactNode
+}
+
+export function NotePeekPanel({
+  note,
+  blockId,
+  loading = false,
+  mode,
+  onClose,
+  onOpenFully,
+  labelKey = 'notePeek.label',
+  renderContent,
+}: NotePeekPanelProps) {
+  const { t, language } = useLanguage()
+  const isRtl = language === 'fa' || language === 'ar'
+  const prefersReducedMotion = useReducedMotion()
+  const isOpen = note !== null || loading
+
+  const spring = prefersReducedMotion
+    ? { duration: 0 }
+    : { type: 'spring' as const, stiffness: 340, damping: 34 }
+
+  const content = (
+    <>
+      <div className="shrink-0 px-5 py-3 flex items-center justify-between gap-3 border-b border-black/[0.06] dark:border-white/[0.06] bg-white/80 dark:bg-zinc-900/80 backdrop-blur-sm">
+        <span className="text-[10px] font-bold uppercase tracking-[0.2em] text-concrete truncate">
+          {loading
+            ? (t('notePeek.loading') || 'Loading…')
+            : (note?.title || t('notePeek.untitled') || t('insightsView.unknownNote'))}
+        </span>
+        <div className="flex items-center gap-1 shrink-0">
+          {onOpenFully && note && (
+            <button
+              onClick={() => onOpenFully(note)}
+              className="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-wide text-blue-600 dark:text-blue-400 hover:bg-blue-500/10 transition-colors cursor-pointer focus-visible:ring-2 focus-visible:ring-brand-accent/50 focus-visible:outline-none"
+              title={t('notePeek.openFullyHelp') || 'Open full screen'}
+              aria-label={t('notePeek.openFully') || 'Open fully'}
+            >
+              <Maximize2 size={12} />
+            </button>
+          )}
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-lg text-concrete hover:text-ink dark:hover:text-dark-ink hover:bg-black/5 dark:hover:bg-white/5 transition-colors cursor-pointer focus-visible:ring-2 focus-visible:ring-brand-accent/50 focus-visible:outline-none"
+            aria-label={t('notePeek.close') || 'Close'}
+          >
+            <X size={16} />
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar">
+        {loading ? (
+          <div className="flex items-center justify-center h-full">
+            <Loader2 className="animate-spin text-brand-accent/40" size={28} />
+          </div>
+        ) : note ? (
+          <div className="max-w-2xl mx-auto w-full px-6 sm:px-8 py-8 pb-24">
+            {renderContent ? (
+              renderContent(note, blockId)
+            ) : (
+              <>
+                <h2 className="text-xl font-serif font-medium text-ink dark:text-dark-ink mb-6">
+                  {note.title || t('notePeek.untitled') || 'Untitled'}
+                </h2>
+                <NotePeekContent note={note} />
+              </>
+            )}
+          </div>
+        ) : null}
+      </div>
+    </>
+  )
+
+  if (mode === 'overlay') {
+    return (
+      <AnimatePresence>
+        {isOpen && (
+          <motion.aside
+            key="note-peek-overlay"
+            initial={{ x: isRtl ? '-100%' : '100%', opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            exit={{ x: isRtl ? '-100%' : '100%', opacity: 0 }}
+            transition={spring}
+            className={`fixed top-0 ${isRtl ? 'left-0' : 'right-0'} z-[80] h-full w-full sm:w-[min(50vw,640px)] bg-[#fafaf9] dark:bg-zinc-950 flex flex-col overflow-hidden shadow-2xl ${isRtl ? 'border-r' : 'border-l'} border-black/10 dark:border-white/10`}
+            role="dialog"
+            aria-modal="true"
+            aria-label={t(labelKey) || 'Note preview'}
+          >
+            {content}
+          </motion.aside>
+        )}
+      </AnimatePresence>
+    )
+  }
+
+  // inline mode
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.aside
+          key="note-peek-inline"
+          initial={{ width: 0, opacity: 0 }}
+          animate={{ width: 'min(50vw, 720px)', opacity: 1 }}
+          exit={{ width: 0, opacity: 0 }}
+          transition={spring}
+          className={`shrink-0 h-full min-h-0 bg-[#fafaf9] dark:bg-zinc-950 flex flex-col overflow-hidden z-40 ${
+            isRtl
+              ? 'border-r border-black/10 dark:border-white/10 shadow-[4px_0_24px_-12px_rgba(0,0,0,0.12)]'
+              : 'border-l border-black/10 dark:border-white/10 shadow-[-4px_0_24px_-12px_rgba(0,0,0,0.12)]'
+          }`}
+          aria-label={t(labelKey) || 'Note preview'}
+        >
+          {content}
+        </motion.aside>
+      )}
+    </AnimatePresence>
+  )
+}