sepehr/Momento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): resolve breadcrumb visibility and AI combobox layout issues
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 1m31s
Details

Browse Source
This commit is contained in:
Antigravity
2026-05-10 11:47:10 +00:00
parent 916fb78dfb
commit 890506d0b0
4 changed files with 40 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
memento-note/components/hierarchical-notebook-selector.tsx
View File

@@ -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>
)
}