Attempt to fix note resizing with React keys and Muuri sync

This commit is contained in:
2026-01-24 19:52:13 +01:00
parent d59ec592eb
commit 8e35780717
48 changed files with 3369 additions and 279 deletions

View File

@@ -26,7 +26,7 @@ import { cn } from '@/lib/utils'
import { LabelFilter } from '@/components/label-filter'
export default function HomePage() {
console.log('[HomePage] Component rendering')
const searchParams = useSearchParams()
const router = useRouter()
// Force re-render when search params change (for filtering)
@@ -58,7 +58,7 @@ export default function HomePage() {
// Callback for NoteInput to trigger notebook suggestion and update UI
const handleNoteCreated = useCallback((note: Note) => {
console.log('[NotebookSuggestion] Note created:', { id: note.id, notebookId: note.notebookId, contentLength: note.content?.length })
// Update UI immediately by adding the note to the list if it matches current filters
setNotes((prevNotes) => {
@@ -120,19 +120,19 @@ export default function HomePage() {
// Only suggest if note has no notebook and has 20+ words
if (!note.notebookId) {
const wordCount = (note.content || '').trim().split(/\s+/).filter(w => w.length > 0).length
console.log('[NotebookSuggestion] Word count:', wordCount)
if (wordCount >= 20) {
console.log('[NotebookSuggestion] Triggering suggestion for note:', note.id)
setNotebookSuggestion({
noteId: note.id,
content: note.content || ''
})
} else {
console.log('[NotebookSuggestion] Not enough words, need 20+')
}
} else {
console.log('[NotebookSuggestion] Note has notebook, skipping')
}
// Refresh in background to ensure data consistency (non-blocking)
@@ -265,10 +265,10 @@ export default function HomePage() {
// Helper for Breadcrumbs
const Breadcrumbs = ({ notebookName }: { notebookName: string }) => (
<div className="flex items-center gap-2 text-sm text-gray-500 mb-1">
<div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
<span>Notebooks</span>
<ChevronRight className="w-4 h-4" />
<span className="font-medium text-blue-600">{notebookName}</span>
<span className="font-medium text-primary">{notebookName}</span>
</div>
)
@@ -283,12 +283,12 @@ export default function HomePage() {
<div className="flex items-start justify-between">
{/* Title Section */}
<div className="flex items-center gap-5">
<div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-xl">
<div className="p-3 bg-primary/10 dark:bg-primary/20 rounded-xl">
{(() => {
const Icon = getNotebookIcon(currentNotebook.icon || 'folder')
return (
<Icon
className={cn("w-8 h-8", !currentNotebook.color && "text-blue-600 dark:text-blue-400")}
className={cn("w-8 h-8", !currentNotebook.color && "text-primary dark:text-primary-foreground")}
style={currentNotebook.color ? { color: currentNotebook.color } : undefined}
/>
)
@@ -311,7 +311,7 @@ export default function HomePage() {
/>
<Button
onClick={() => setShowNoteInput(!showNoteInput)}
className="h-10 px-6 rounded-full bg-blue-600 hover:bg-blue-700 text-white font-medium shadow-sm gap-2 transition-all"
className="h-10 px-6 rounded-full bg-primary hover:bg-primary/90 text-primary-foreground font-medium shadow-sm gap-2 transition-all"
>
<Plus className="w-5 h-5" />
Add Note
@@ -329,7 +329,7 @@ export default function HomePage() {
{/* Title Section */}
<div className="flex items-center gap-5">
<div className="p-3 bg-white border border-gray-100 dark:bg-gray-800 dark:border-gray-700 rounded-xl shadow-sm">
<FileText className="w-8 h-8 text-blue-600" />
<FileText className="w-8 h-8 text-primary" />
</div>
<h1 className="text-4xl font-bold text-gray-900 dark:text-white tracking-tight">Notes</h1>
</div>
@@ -362,7 +362,7 @@ export default function HomePage() {
<Button
onClick={() => setShowNoteInput(!showNoteInput)}
className="h-10 px-6 rounded-full bg-blue-600 hover:bg-blue-700 text-white font-medium shadow-sm gap-2 transition-all"
className="h-10 px-6 rounded-full bg-primary hover:bg-primary/90 text-primary-foreground font-medium shadow-sm gap-2 transition-all"
>
<Plus className="w-5 h-5" />
Add Note