feat: UI improvements and responsive layout for v0.1.3#57
Merged
tomymaritano merged 32 commits intomainfrom Jan 3, 2026
Merged
feat: UI improvements and responsive layout for v0.1.3#57tomymaritano merged 32 commits intomainfrom
tomymaritano merged 32 commits intomainfrom
Conversation
- Add NoteStatus type (active, completed, on_hold, dropped) - Add title field with validation (max 200 chars) - Add wordCount computed property - Add updateTitle operation - Update tests for new fields 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add migration 004 for new note fields - Update SQLiteNoteRepository to handle new fields - Map status enum to database string values 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add NavigationState type with global/notebook/tag/search kinds - Create navigationStore with Zustand for state management - Add editorPreferencesStore for view mode persistence - Create useNavigation hook for navigation actions - Add navigationStore tests 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace monolithic Sidebar with composable components - Add SidebarNav, SidebarSection, NotebookItem, NotebookList - Add CreateNotebookInput for inline notebook creation - Delete old Sidebar.tsx and NotebookTree.tsx 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add CodeMirror 6 markdown editor with syntax highlighting - Add split view (editor | preview | both) with toggle - Add EditorHeader with notebook selector and status dropdown - Add FormattingToolbar with markdown shortcuts - Add MarkdownPreview with react-markdown and GFM support - Add TitleInput component for note titles - Add EditorViewToggle with Eye/Columns icons - Lazy load MarkdownEditor for better initial performance 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Master-slave scroll sync between editor and preview: - Detects active panel via mouseenter - Handles lazy-loaded components with onReady callbacks - Fixes intermittent sync on mode transitions (split→eye→split) - Uses requestAnimationFrame for smooth sync - Skips sync when target can't scroll (short content) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Update App.tsx to use new sidebar and navigation - Add IPC handlers for notebooks in main process - Expose notebook APIs in preload - Update NoteList with status badges and icons - Add useNotebooks and useNotes hooks - Add CSS tokens and note-list styles - Add formatDate utility 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add react-markdown, remark-gfm for preview - Add zustand for state management - Add vitest config for desktop tests - Update CLAUDE.md with navigation architecture docs - Add CHANGELOG.md - Add utility scripts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Backend changes: - Tags are now persistent entities (exist independently of notes) - Add deleteTag() to remove tag from system - Add getAllTagsWithColors() and setTagColor() for tag colors - Add setManualTags() and getManualTags() for editor tag chips - Migrations: manual_tags (005), tag_colors (006) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Zustand store that: - Caches tag colors locally - Syncs with database on load - Provides getColor/setColor/removeTag actions 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- TagsList: color dot picker, context menu, delete button - TagsInput: editable tag chips in editor header - EditorHeader: integrate TagsInput component - Load tag colors on app mount - Invalidate tags query after changes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
First CSS Module in the project: - TagsContextMenu.tsx with scoped styles - Simplified class names (.menu, .item, .itemDanger) - Portal renders to document.body (valid HTML) - Removed context-menu.css from global imports Following CSS Audit plan: migrate components with logic to CSS Modules. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…SS Modules
- LicenseDialog: ~230 lines extracted from global.css
- ErrorBoundary: ~80 lines extracted from global.css
- TrialBanner: ~50 lines extracted from global.css
Each component now follows the standard structure:
ComponentName/
ComponentName.tsx
ComponentName.module.css
index.ts
Total: ~360 lines removed from global.css
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Previously, tag changes only invalidated noteKeys.tags() (sidebar), leaving NoteList with stale cached data until React Query's staleTime expired (~60s). Now both handleAddTag and handleRemoveTag also invalidate noteKeys.lists(), causing NoteList to refetch immediately. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Create ColorPicker component with CSS Module - Use ColorPicker in TagsContextMenu and TagsList - Remove color picker CSS from global.css (-56 lines) - Clean up redundant CSS from TagsContextMenu.module.css This completes the TagsContextMenu encapsulation by eliminating the last dependency on global.css. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Fix sidebar status filter visual state - Deselect note when status change removes it from current filter - Keep editor and note list consistent 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The note_tags table has PRIMARY KEY (note_id, tag_id) but the code was using ON CONFLICT(note_id, tag_id, source). When a tag existed as 'manual' and was also in content, syncExtractedTags would fail. Changed ON CONFLICT clause to match the primary key constraint. Tags already linked (regardless of source) are now skipped. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Preparing for freemium model - license validation no longer needed in UI. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…utton - Move traffic lights closer to window edge (x: 8, y: 8) - Enable SidebarHeader component with settings button - Increase settings icon size to 18px for better alignment 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- EditorHeader wraps tags to second row when width is reduced - Toolbar groups wrap to multiple rows instead of hiding - Remove overflow: hidden from tags-display-chips - Set toolbar breakpoints to 0 (always show all groups, CSS handles wrap) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- CodeMirror content padding: 24px → 12px - Preview padding: 24px → 12px - Split/Preview mode padding: 24px 48px → 12px 24px 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Inkdrop-style modal with search, centered design, and CSS variables. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Right-click context menu with move, duplicate, and delete options. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- ActionsPanel for additional editor actions - Updated FormattingToolbar with visibility management - Export new components from editor/index.ts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Infrastructure for performance optimization settings. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- App.tsx: remove licensing imports, add new component integrations - NoteEditor: integrate ActionsPanel and toolbar visibility - NoteList: integrate context menu and NotebookPicker 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Enhanced navigationStore with new state management - Updated useNavigation hook - Improved SidebarBreadcrumb and TagsList components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add new CSS variables and styles - Update note-list styling - Add design tokens 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
- Remove unused `offset` variable in toolbar-commands.ts - Remove unused `useNavigation` import in Sidebar.tsx - Remove unused `TAG_COLORS` import in TagsList.tsx 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This was referenced Jan 3, 2026
- Add CSS Modules type declaration (css-modules.d.ts) - Fix duplicate export of NoteWithExcerpt in useNavigation.ts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR includes multiple UI improvements and bug fixes preparing for v0.1.3 release.
Features
UI Polish
Cleanup
Refactoring
Test plan
🤖 Generated with Claude Code