fix(ui): resolve breadcrumb visibility and AI combobox layout issues

2026-05-10 11:47:10 +00:00
parent 916fb78dfb
commit 890506d0b0
4 changed files with 40 additions and 44 deletions
--- a/memento-note/components/contextual-ai-chat.tsx
+++ b/memento-note/components/contextual-ai-chat.tsx
@@ -677,7 +677,7 @@ export function ContextualAIChat({
                
                {/* ── Chat Footer: Context + Tone + Input ── */}
                <div className="px-6 py-8 border-t border-border shrink-0 space-y-6">
-                  <div className="grid grid-cols-2 gap-4">
+                  <div className="flex flex-col gap-4">
                    <div className="space-y-3">
                      <label className="text-[10px] uppercase tracking-[0.25em] font-bold text-foreground/40 px-1">CONTEXTE</label>
                      <div className="flex flex-col gap-2">
@@ -703,6 +703,7 @@ export function ContextualAIChat({
                          onSelect={(id) => setChatScope(id)}
                          placeholder="Inclure un carnet..."
                          className="w-full"
+                          size="sm"
                          dropUp
                        />
                      </div>
--- a/memento-note/components/hierarchical-notebook-selector.tsx
+++ b/memento-note/components/hierarchical-notebook-selector.tsx
@@ -1,6 +1,6 @@
 'use client'

-import React, { useState, useMemo, useRef, useCallback, useLayoutEffect } from 'react'
+import React, { useState, useMemo, useRef, useCallback } from 'react'
 import {
  ChevronRight,
  ChevronDown,
@@ -11,16 +11,16 @@ import {
 } from 'lucide-react'
 import { Notebook } from '@/lib/types'
 import { motion, AnimatePresence } from 'motion/react'
-import { cn } from '@/lib/utils'
 import { createPortal } from 'react-dom'

 interface HierarchicalNotebookSelectorProps {
-  notebooks: Notebook[]
+  notebooks: { id: string; name: string; icon?: string | null; parentId?: string | null; trashedAt?: Date | string | null }[]
  selectedId: string | null
  onSelect: (id: string) => void
  className?: string
  placeholder?: string
  dropUp?: boolean
+  size?: 'default' | 'sm'
 }

 export function HierarchicalNotebookSelector({
@@ -30,19 +30,19 @@ export function HierarchicalNotebookSelector({
  className = '',
  placeholder = 'Select a notebook...',
  dropUp = false,
+  size = 'default',
 }: HierarchicalNotebookSelectorProps) {
  const [isOpen, setIsOpen] = useState(false)
  const [searchQuery, setSearchQuery] = useState('')
  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())
  const triggerRef = useRef<HTMLDivElement>(null)
-  const [dropdownStyle, setDropdownStyle] = useState<React.CSSProperties | null>(null)

-  const computeStyle = useCallback(() => {
-    if (!triggerRef.current) return null
+  const getDropdownStyle = useCallback((): React.CSSProperties => {
+    if (!triggerRef.current) return { position: 'fixed', top: 0, left: 0, width: 280, zIndex: 9999 }
    const rect = triggerRef.current.getBoundingClientRect()
    if (dropUp) {
      return {
-        position: 'fixed' as const,
+        position: 'fixed',
        bottom: window.innerHeight - rect.top + 8,
        left: rect.left,
        width: Math.max(rect.width, 280),
@@ -50,7 +50,7 @@ export function HierarchicalNotebookSelector({
      }
    }
    return {
-      position: 'fixed' as const,
+      position: 'fixed',
      top: rect.bottom + 8,
      left: rect.left,
      width: Math.max(rect.width, 280),
@@ -58,23 +58,12 @@ export function HierarchicalNotebookSelector({
    }
  }, [dropUp])

-  useLayoutEffect(() => {
-    if (isOpen) {
-      setDropdownStyle(computeStyle())
-      const handleResize = () => setDropdownStyle(computeStyle())
-      window.addEventListener('resize', handleResize)
-      return () => window.removeEventListener('resize', handleResize)
-    } else {
-      setDropdownStyle(null)
-    }
-  }, [isOpen, computeStyle])
-
  const selectedNotebook = notebooks.find(nb => nb.id === selectedId)

  const path = useMemo(() => {
    if (!selectedNotebook) return []
-    const trail: Notebook[] = []
-    let current: Notebook | undefined = selectedNotebook
+    const trail: typeof notebooks = []
+    let current: typeof notebooks[0] | undefined = selectedNotebook
    while (current) {
      trail.unshift(current)
      if (!current.parentId) break
@@ -93,7 +82,7 @@ export function HierarchicalNotebookSelector({
    setExpandedIds(next)
  }

-  const renderTree = (parentId: string | null | undefined, level = 0) => {
+  const renderTree = (parentId: string | null | undefined, level = 0): React.ReactNode => {
    const children = notebooks.filter(
      nb => (nb.parentId ?? null) === (parentId ?? null)
    )
@@ -167,10 +156,10 @@ export function HierarchicalNotebookSelector({
    <div className={`relative ${className}`}>
      <div
        ref={triggerRef}
-        onClick={() => setIsOpen(!isOpen)}
-        className="w-full bg-slate-50 dark:bg-white/5 border border-border/80 rounded-xl px-4 py-4 text-sm outline-none focus:ring-4 ring-blueprint/5 focus:border-blueprint/40 transition-all cursor-pointer text-ink flex items-center gap-3"
+        onClick={() => setIsOpen(prev => !prev)}
+        className={`w-full bg-slate-50 dark:bg-white/5 border border-border/80 rounded-xl outline-none focus:ring-4 ring-blueprint/5 focus:border-blueprint/40 transition-all cursor-pointer text-ink flex items-center gap-3 ${size === 'sm' ? 'px-3 py-2 text-xs' : 'px-4 py-3 text-sm'}`}
      >
-        <Folder size={16} className="text-blueprint/60 shrink-0" />
+        <Folder size={size === 'sm' ? 14 : 16} className="text-blueprint/60 shrink-0" />
        <div className="flex-1 flex items-center gap-1 min-w-0">
          {path.length > 0 ? (
            <div className="flex items-center gap-1.5 truncate">
@@ -190,15 +179,17 @@ export function HierarchicalNotebookSelector({
        <ChevronDown size={14} className={`transition-transform duration-300 text-concrete shrink-0 ${isOpen ? 'rotate-180' : ''}`} />
      </div>

-      <AnimatePresence>
-        {isOpen && dropdownStyle && typeof window !== 'undefined' && createPortal(
-          <>
-            <div className="fixed inset-0 z-[9998]" onClick={() => setIsOpen(false)} />
+      {isOpen && typeof window !== 'undefined' && createPortal(
+        <>
+          <div className="fixed inset-0 z-[9998]" onClick={() => setIsOpen(false)} />
+          <AnimatePresence>
            <motion.div
-              initial={{ opacity: 0, y: dropUp ? -10 : 10, scale: 0.98 }}
+              key="notebook-dropdown"
+              initial={{ opacity: 0, y: dropUp ? -8 : 8, scale: 0.98 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
-              exit={{ opacity: 0, y: dropUp ? -10 : 10, scale: 0.98 }}
-              style={dropdownStyle}
+              exit={{ opacity: 0, y: dropUp ? -8 : 8, scale: 0.98 }}
+              transition={{ duration: 0.15 }}
+              style={getDropdownStyle()}
              className="bg-card border border-border shadow-2xl rounded-2xl overflow-hidden flex flex-col"
            >
              <div className="p-3 border-b border-border/40 bg-slate-50/50 dark:bg-white/5">
@@ -231,10 +222,10 @@ export function HierarchicalNotebookSelector({
                </button>
              </div>
            </motion.div>
-          </>,
-          document.body
-        )}
-      </AnimatePresence>
+          </AnimatePresence>
+        </>,
+        document.body
+      )}
    </div>
  )
 }
--- a/memento-note/components/home-client.tsx
+++ b/memento-note/components/home-client.tsx
@@ -420,11 +420,14 @@ export function HomeClient({ initialNotes, initialSettings }: HomeClientProps) {
            <div className="flex justify-between items-start">
              <div>
                {currentNotebook && notebookPath.length > 0 && (
-                  <div className="flex items-center gap-2 text-base font-semibold mb-1">
+                  <div
+                    className="flex items-center gap-2 text-[12px] uppercase tracking-[.2em] font-bold mb-2"
+                    style={{ color: 'var(--color-ink)', opacity: 1 }}
+                  >
                    {notebookPath.map((nb: any, i: number) => (
                      <React.Fragment key={nb.id}>
-                        {i > 0 && <ChevronRight size={16} className="text-foreground/40" />}
-                        <span className={i === notebookPath.length - 1 ? 'text-foreground' : 'text-foreground/60'}>
+                        {i > 0 && <ChevronRight size={10} className="shrink-0" style={{ color: 'var(--color-concrete)' }} />}
+                        <span style={{ color: i === notebookPath.length - 1 ? 'var(--color-ink)' : 'var(--color-concrete)' }}>
                          {nb.name}
                        </span>
                      </React.Fragment>
--- a/memento-note/components/note-editor/note-editor-full-page.tsx
+++ b/memento-note/components/note-editor/note-editor-full-page.tsx
@@ -11,6 +11,7 @@ import { ReminderDialog } from '@/components/reminder-dialog'
 import { ContextualAIChat } from '@/components/contextual-ai-chat'
 import { NoteDocumentInfoPanel } from '@/components/note-document-info-panel'
 import { format } from 'date-fns'
+import { ChevronRight } from 'lucide-react'
 import { toast } from 'sonner'
 import { Note } from '@/lib/types'

@@ -40,10 +41,10 @@ export function NoteEditorFullPage({ onClose }: NoteEditorFullPageProps) {
            {/* Breadcrumb + Title block */}
            <div className="space-y-4">
              {/* Breadcrumb: Notebook › Date */}
-              <div className="flex items-center gap-3 text-[12px] text-foreground/50 uppercase tracking-[.25em] font-bold">
-                {notebookName && <span>{notebookName}</span>}
-                {notebookName && <span>›</span>}
-                <span suppressHydrationWarning>
+              <div className="flex items-center gap-3 text-[12px] uppercase tracking-[.25em] font-bold">
+                {notebookName && <span style={{ color: 'var(--color-ink)' }}>{notebookName}</span>}
+                {notebookName && <ChevronRight size={10} style={{ color: 'var(--color-concrete)' }} />}
+                <span suppressHydrationWarning style={{ color: 'var(--color-concrete)' }}>
                  {format(new Date(note.contentUpdatedAt), 'MMM d, yyyy')}
                </span>
              </div>