refactor: split NoteEditor into focused components + consolidate contexts

Phase 1: NoteEditor Split (64KB → 9 focused components)
- components/note-editor/: types.ts, context, toolbar, title-block,
  content-area, metadata-section, full-page, dialog compositions
- Maintains backwards compatibility via re-export from note-editor.tsx

Phase 2: Context Consolidation (5 → 3 contexts)
- NotebooksContext absorbs LabelContext (labels CRUD)
- EditorUIContext merges HomeViewContext + NotebookDragContext
- Removed: LabelContext, home-view-context, notebook-drag-context

Phase 3: React Query Infrastructure
- Added QueryProvider with @tanstack/react-query
- lib/query-keys.ts: centralized query key definitions
- lib/query-hooks.ts: useNotes, useNotebooksQuery, useLabelsQuery
- lib/use-refresh.ts: hybrid invalidateQueries + triggerRefresh helper
- NotebooksContext: invalidateQueries on mutations (with triggerRefresh fallback)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

memento-note/components/note-editor/note-title-block.tsx

@@ -0,0 +1,118 @@
+'use client'
+
+import { useNoteEditorContext } from './note-editor-context'
+import { TitleSuggestions } from '@/components/title-suggestions'
+import { Loader2, Sparkles } from 'lucide-react'
+import { useLanguage } from '@/lib/i18n'
+import { cn } from '@/lib/utils'
+import { toast } from 'sonner'
+
+export function NoteTitleBlock() {
+  const { state, actions, readOnly, fullPage } = useNoteEditorContext()
+  const { t } = useLanguage()
+
+  if (fullPage) {
+    return (
+      <div className="space-y-4">
+        {/* Title — auto-resizing textarea to prevent overflow */}
+        <div className="group relative">
+          <textarea
+            dir="auto"
+            rows={1}
+            placeholder={t('notes.titlePlaceholder') || 'Untitled…'}
+            value={state.title}
+            onChange={(e) => { actions.setTitle(e.target.value) }}
+            onInput={(e) => {
+              const el = e.currentTarget
+              el.style.height = 'auto'
+              el.style.height = el.scrollHeight + 'px'
+            }}
+            disabled={readOnly}
+            className={cn(
+              'w-full text-4xl md:text-5xl font-memento-serif font-bold border-0 outline-none px-0 bg-transparent text-foreground leading-tight',
+              'placeholder:text-foreground/20 resize-none overflow-hidden',
+              !readOnly && 'pr-12'
+            )}
+          />
+          {/* AI title generation — always visible on hover */}
+          {!readOnly && (
+            <button
+              type="button"
+              onClick={async () => {
+                const plain = state.content.replace(/<[^>]+>/g, ' ').trim()
+                const wordCount = plain.split(/\s+/).filter(Boolean).length
+                if (wordCount < 10) {
+                  toast.error('Ajoutez au moins 10 mots avant de générer un titre.')
+                  return
+                }
+                actions.setIsProcessingAI(true)
+                try {
+                  const res = await fetch('/api/ai/title-suggestions', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ content: plain }),
+                  })
+                  if (res.ok) {
+                    const data = await res.json()
+                    const s = data.suggestions?.[0]?.title ?? ''
+                    if (s) {
+                      actions.setTitle(s)
+                      toast.success('Titre généré !')
+                    } else {
+                      toast.error('Impossible de générer un titre.')
+                    }
+                  } else {
+                    toast.error('Erreur lors de la génération du titre.')
+                  }
+                } catch { toast.error('Erreur réseau.') } finally { actions.setIsProcessingAI(false) }
+              }}
+              disabled={state.isProcessingAI}
+              className="absolute right-0 top-2 opacity-0 group-hover:opacity-60 hover:!opacity-100 transition-opacity rounded-lg p-2 text-foreground/50 hover:bg-black/5"
+              title="Générer un titre automatique avec l'IA"
+            >
+              {state.isProcessingAI ? <Loader2 className="h-5 w-5 animate-spin" /> : <Sparkles className="h-5 w-5" />}
+            </button>
+          )}
+        </div>
+
+        {/* Auto title suggestions */}
+        {!state.title && !state.dismissedTitleSuggestions && state.titleSuggestions.length > 0 && (
+          <TitleSuggestions
+            suggestions={state.titleSuggestions}
+            onSelect={(s: string) => { actions.setTitle(s); actions.setDismissedTitleSuggestions(true) }}
+            onDismiss={() => actions.setDismissedTitleSuggestions(true)}
+          />
+        )}
+      </div>
+    )
+  }
+
+  // Dialog mode title block
+  return (
+    <div className="relative">
+      <input
+        dir="auto"
+        placeholder={t('notes.titlePlaceholder')}
+        value={state.title}
+        onChange={(e) => actions.setTitle(e.target.value)}
+        disabled={readOnly}
+        className={cn(
+          "w-full text-lg font-semibold border-0 focus-visible:ring-0 px-0 bg-transparent pr-10",
+          readOnly && "cursor-default"
+        )}
+      />
+      <button
+        onClick={actions.handleGenerateTitles}
+        disabled={state.isGeneratingTitles || readOnly}
+        className="absolute right-0 top-1/2 -translate-y-1/2 p-1 hover:bg-purple-100 dark:hover:bg-purple-900 rounded transition-colors"
+        title={state.isGeneratingTitles ? t('ai.titleGenerating') : t('ai.titleGenerateWithAI')}
+      >
+        {state.isGeneratingTitles ? (
+          <div className="w-4 h-4 border-2 border-purple-500 border-t-transparent rounded-full animate-spin" />
+        ) : (
+          <Sparkles className="w-4 h-4 text-purple-600 hover:text-purple-700 dark:text-purple-400" />
+        )}
+      </button>
+    </div>
+  )
+}