Devlog: Local storage bugs and building a Cmd+K menu
For this update, I wanted to make the app actually usable without a mouse and fix a few state issues before shipping the MVP.
What I added
-
Auto-saving: Before this, if you accidentally refreshed the page, you lost all your notes. I hooked up Zustand’s
persistmiddleware so everything auto-saves straight tolocalStorageas you type. -
Cmd+K Menu: Built a global command palette from scratch. You can hit
Cmd+K, search your notes, use the up/down arrow keys to navigate, and hit enter to jump to an experiment or instantly create a new one.
Bugs I ran into
1. Local storage corruption
Right after setting up the persist middleware, the app gave me a blank screen and threw a TypeError: notes.filter is not a function error. Zustand was pulling some corrupted object from an old browser cache, which broke the array. I fixed it by changing the storage key to clear the cache, and wrapped my state in an Array.isArray() check so it won’t crash if it reads weird data in the future.
2. React hook order error
While testing the command palette, I got the classic React “Rules of Hooks” error. I accidentally put an early return (if (!isOpen) return null;) above my last useEffect. Whenever I opened the modal, React freaked out because the number of hooks rendered suddenly changed. I just moved the hook above the early return and it works perfectly now.
Everything is stable and the keyboard navigation is feeling really smooth.
Comments 0
No comments yet. Be the first!
Sign in to join the conversation.