Keep/keep-notes/context/NoteRefreshContext.tsx
sepehr 640fcb26f7 fix: improve note interactions and markdown LaTeX support
## 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
2026-01-09 22:13:49 +01:00

34 lines
939 B
TypeScript

'use client'
import { createContext, useContext, useState, useCallback } from 'react'
interface NoteRefreshContextType {
refreshKey: number
triggerRefresh: () => void
}
const NoteRefreshContext = createContext<NoteRefreshContextType | undefined>(undefined)
export function NoteRefreshProvider({ children }: { children: React.ReactNode }) {
const [refreshKey, setRefreshKey] = useState(0)
const triggerRefresh = useCallback(() => {
console.log('[NOTE_REFRESH] Triggering refresh, key:', refreshKey, '->', refreshKey + 1)
setRefreshKey(prev => prev + 1)
}, [refreshKey])
return (
<NoteRefreshContext.Provider value={{ refreshKey, triggerRefresh }}>
{children}
</NoteRefreshContext.Provider>
)
}
export function useNoteRefresh() {
const context = useContext(NoteRefreshContext)
if (!context) {
throw new Error('useNoteRefresh must be used within NoteRefreshProvider')
}
return context
}