- Add color-coded category badges with consistent pastel colors
- Fix scroll jump issue when editing at bottom of note
- Add localStorage persistence for notes list width
- Prevent notes list from shrinking with flex-shrink-0
- Preserve cursor and scroll position during textarea resize
- Add IndexedDB storage layer for notes (src/db/localDB.ts)
- Implement sync manager with queue and conflict resolution (src/services/syncManager.ts)
- Add online/offline detection hook (src/hooks/useOnlineStatus.ts)
- Load notes from local storage immediately on app startup
- Add sync status UI indicators (offline badge, pending count)
- Auto-sync every 5 minutes when online
- Queue operations when offline, sync when connection restored
- Fix note content update when synced from server while viewing
- Retry failed sync operations up to 5 times
- Temporary IDs for offline-created notes
- Settings panel in categories sidebar now collapses/expands with toggle button
- Settings collapsed by default to save space
- Notes list column now resizable with drag handle (240px-600px range)
- Improved UI flexibility and space management
Categories sidebar:
- Collapsible first column with category management
- Create new categories directly from sidebar
- Thin tab when collapsed
- Moved user info, logout, and theme selector here
Note editor redesign:
- Clean toolbar with pill-style buttons
- Category dropdown with folder icon
- Preview toggle in toolbar
- Streamlined action buttons
Floating formatting toolbar:
- Appears on text selection
- Bold, italic, strikethrough, code, code block, quote, lists, link, headings
- Active state highlighting for applied formats
- Toggle behavior removes formatting if already applied
Focus mode:
- Hides sidebars for distraction-free writing
- Content centered with max-width
- Escape key to exit
- Scrolling works from anywhere in viewport
- Increased editor padding from 6 to 8 for better spacing
- Simplified preview generation to show first 100 characters
- Remove markdown syntax (#, *, `) from note previews for cleaner display
- Replaced multi-line filtering logic with direct substring approach
- Prevent delete button from working when there are unsaved changes on a different note
- Delete button now checks hasUnsavedChanges before allowing deletion
- Only the currently selected note can be deleted when it has unsaved changes
- Prevents accidental deletion of other notes when locked
- Added hasUnsavedChanges state tracking in App.tsx
- NoteEditor now notifies parent via onUnsavedChanges callback
- NotesList receives hasUnsavedChanges prop
- Clicking on other notes is prevented when current note has unsaved changes
- Visual feedback: other notes become semi-transparent with cursor-not-allowed
- Tooltip shows 'Save current note before switching' on disabled notes
- Much simpler and more reliable than trying to auto-save on switch
- Shows 'Click again to delete' text when delete button is clicked once
- Text appears next to the red delete button in confirmation state
- Makes the double-click deletion flow much more intuitive
- Button also stays visible (opacity-100) during confirmation state
- Text styled in red to match the delete action
- Replaced confusing browser confirm() dialog with double-click to delete
- First click highlights delete button in red (confirmation state)
- Second click within 3 seconds actually deletes the note
- Visual feedback with red background on confirmation state
- Tooltip changes to 'Click again to confirm deletion'
- Removed debug logging from delete handlers
- Much clearer and more intuitive deletion flow
- Removed category input field from note editor
- Removed category display from notes list
- Removed category state management from NoteEditor component
- Category field now always saved as empty string
- Simplified UI to focus on core note-taking features
- Fixed favorite star icon dark mode styling
- Fixed all formatting toolbar buttons to be visible in dark mode
- Added proper text colors (gray-700/gray-300) to all toolbar icons
- Fixed sync and new note button icons in sidebar
- Fixed divider colors between button groups
- All UI elements now properly visible in both light and dark modes
- Added theme state management (light/dark/system)
- Implemented OS theme detection and automatic sync
- Added theme toggle UI in sidebar with 3 buttons
- Applied dark mode styles to all components:
- Sidebar with dark backgrounds and borders
- Note editor with dark text and inputs
- Toolbar buttons with dark hover states
- TipTap editor with dark mode text and code blocks
- Theme preference saved to localStorage
- Enabled Tailwind dark mode with class strategy
- Smooth transitions between themes
- Added logout button at bottom of sidebar
- Display username with avatar (first letter)
- Clear all credentials and state on logout
- Username persists from saved credentials
- Clean logout flow returns to login screen
