sepehr
640fcb26f7
## Bug Fixes ### Note Card Actions - Fix broken size change functionality (missing state declaration) - Implement React 19 useOptimistic for instant UI feedback - Add startTransition for non-blocking updates - Ensure smooth animations without page refresh - All note actions now work: pin, archive, color, size, checklist ### Markdown LaTeX Rendering - Add remark-math and rehype-katex plugins - Support inline equations with dollar sign syntax - Support block equations with double dollar sign syntax - Import KaTeX CSS for proper styling - Equations now render correctly instead of showing raw LaTeX ## Technical Details - Replace undefined currentNote references with optimistic state - Add optimistic updates before server actions for instant feedback - Use router.refresh() in transitions for smart cache invalidation - Install remark-math, rehype-katex, and katex packages ## Testing - Build passes successfully with no TypeScript errors - Dev server hot-reloads changes correctly
70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { useSearchParams } from 'next/navigation'
|
|
import { Note } from '@/lib/types'
|
|
import { getAllNotes, searchNotes } from '@/app/actions/notes'
|
|
import { NoteInput } from '@/components/note-input'
|
|
import { MasonryGrid } from '@/components/masonry-grid'
|
|
import { useLabels } from '@/context/LabelContext'
|
|
import { useNoteRefresh } from '@/context/NoteRefreshContext'
|
|
import { useReminderCheck } from '@/hooks/use-reminder-check'
|
|
|
|
export default function HomePage() {
|
|
const searchParams = useSearchParams()
|
|
const [notes, setNotes] = useState<Note[]>([])
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const { refreshKey } = useNoteRefresh()
|
|
const { labels } = useLabels()
|
|
|
|
// Enable reminder notifications
|
|
useReminderCheck(notes)
|
|
|
|
useEffect(() => {
|
|
const loadNotes = async () => {
|
|
setIsLoading(true)
|
|
const search = searchParams.get('search')
|
|
const labelFilter = searchParams.get('labels')?.split(',').filter(Boolean) || []
|
|
const colorFilter = searchParams.get('color')
|
|
|
|
let allNotes = search ? await searchNotes(search) : await getAllNotes()
|
|
|
|
// Filter by selected labels
|
|
if (labelFilter.length > 0) {
|
|
allNotes = allNotes.filter((note: any) =>
|
|
note.labels?.some((label: string) => labelFilter.includes(label))
|
|
)
|
|
}
|
|
|
|
// Filter by color (filter notes that have labels with this color)
|
|
// Note: We use a ref-like pattern to avoid including labels in dependencies
|
|
// This prevents dialog closing when adding new labels
|
|
if (colorFilter) {
|
|
const labelNamesWithColor = labels
|
|
.filter((label: any) => label.color === colorFilter)
|
|
.map((label: any) => label.name)
|
|
|
|
allNotes = allNotes.filter((note: any) =>
|
|
note.labels?.some((label: string) => labelNamesWithColor.includes(label))
|
|
)
|
|
}
|
|
|
|
setNotes(allNotes)
|
|
setIsLoading(false)
|
|
}
|
|
|
|
loadNotes()
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [searchParams, refreshKey]) // Intentionally omit 'labels' to prevent reload when adding tags
|
|
return (
|
|
<main className="container mx-auto px-4 py-8 max-w-7xl">
|
|
<NoteInput />
|
|
{isLoading ? (
|
|
<div className="text-center py-8 text-gray-500">Loading...</div>
|
|
) : (
|
|
<MasonryGrid notes={notes} />
|
|
)}
|
|
</main>
|
|
)
|
|
}
|