diff --git a/CLAUDE.md b/CLAUDE.md index e763f61..0962ce2 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -18,7 +18,8 @@ Instructions for Claude Code when working on this project. ## Current Status **Completed**: Phases 0-12 (Core functionality + Dataset Management + Advanced Dataset Features) -**Next**: Phase 13 - Polish & UX Refinements or Phase 14 - Advanced Snippet Features +**In Progress**: Phase 13 - Polish & UX Refinements (keyboard shortcuts, tooltips, notifications, help documentation) +**Next**: Complete Phase 13 or move to Phase 14 - Advanced Snippet Features ### Key Features Implemented - ✅ Snippet management with draft/published workflow @@ -36,6 +37,12 @@ Instructions for Claude Code when working on this project. - Import/Export datasets with auto-format detection - Table preview with type detection (🔢📅🔤✓) - On-demand URL preview loading with caching +- ✅ **Polish & UX Features (Phase 13 - In Progress)** + - Cross-platform keyboard shortcuts (Cmd/Ctrl+Shift+N, Cmd/Ctrl+K, Cmd/Ctrl+S, Escape) + - Toast notification system (error, success, warning, info) + - Comprehensive tooltips on all interactive elements + - Enhanced Help modal with 6 sections + - Data persistence warnings See `docs/dev-plan.md` for complete roadmap and technical details. - when updating documentation, do not record intermediate changes - write them always as a matter-of-fact information \ No newline at end of file diff --git a/docs/dev-plan.md b/docs/dev-plan.md index 5db989b..d4c824c 100644 --- a/docs/dev-plan.md +++ b/docs/dev-plan.md @@ -324,22 +324,32 @@ Astrolabe is a focused tool for managing, editing, and previewing Vega-Lite visu --- -### **Phase 12: Polish & UX Refinements** +### **Phase 13: Polish & UX Refinements** ⏳ **IN PROGRESS** **Goal**: Professional feel and usability -- [ ] Improved visual design (minimal but polished CSS) -- [ ] Keyboard shortcuts (Ctrl+S to publish, Ctrl+N for new, etc.) -- [ ] Better error messages and validation feedback +- [x] **Keyboard shortcuts** - Cross-platform support (Cmd/Ctrl+Shift+N, Cmd/Ctrl+K, Cmd/Ctrl+S, Escape) +- [x] **Tooltips for buttons and features** - Added to all interactive elements throughout the UI +- [x] **Better error messages and validation feedback** - Toast notification system with 4 types (error, success, warning, info) +- [x] **Enhanced Help documentation** - Comprehensive help modal with About, Features, Getting Started, Shortcuts, Storage, and Tips sections - [ ] Loading states for rendering - [ ] Empty states (no snippets, no datasets) -- [ ] Tooltips for buttons and features +- [ ] Improved visual design (minimal but polished CSS) - [ ] Cross-browser testing (Chrome, Firefox, Safari) **Deliverable**: Polished, production-ready MVP +**Completed Features**: +- Keyboard shortcut system with dual handlers (document-level + Monaco integration) +- Toast notification system (bottom-right, 4s auto-dismiss, slide animations) +- Replaced 19 `alert()` calls with contextual toasts +- Added success feedback for silent operations (publish, duplicate, delete, export, etc.) +- Comprehensive tooltips with keyboard shortcut hints +- Data persistence warning in Help section +- Help modal with 6 sections covering full app functionality + --- -### **Phase 13: Advanced Snippet Features** +### **Phase 14: Advanced Snippet Features** **Goal**: Power user functionality - [ ] Basic tagging system with tag filtering @@ -353,7 +363,7 @@ Astrolabe is a focused tool for managing, editing, and previewing Vega-Lite visu --- -### **Phase 14: Authentication & Backend** _(Future)_ +### **Phase 15: Authentication & Backend** _(Future)_ **Goal**: Multi-device sync and sharing - [ ] Design minimal backend API @@ -420,7 +430,8 @@ Astrolabe is a focused tool for managing, editing, and previewing Vega-Lite visu ## Current Status **Completed**: Phases 0-12 (Storage, UI, editor, rendering, persistence, CRUD, organization, draft/published workflow, storage monitoring, import/export, dataset management, URL state management, advanced dataset features) -**Next**: Phase 13 - Polish & UX Refinements or Phase 14 - Advanced Snippet Features +**In Progress**: Phase 13 - Polish & UX Refinements (keyboard shortcuts, tooltips, toast notifications, enhanced help complete) +**Next**: Complete Phase 13 (loading states, empty states) or move to Phase 14 - Advanced Snippet Features **See**: `CLAUDE.md` for concise current state summary --- @@ -465,6 +476,14 @@ Astrolabe is a focused tool for managing, editing, and previewing Vega-Lite visu - Table preview with type detection and formatting (🔢📅✓🔤) - On-demand URL preview loading with session cache - New Snippet creation from datasets +- **Polish & UX Refinements (Phase 13)** _(In Progress)_: + - Cross-platform keyboard shortcuts (Cmd/Ctrl+Shift+N, Cmd/Ctrl+K, Cmd/Ctrl+S, Escape) + - Dual keyboard handlers (document-level + Monaco integration) + - Toast notification system (error, success, warning, info) + - Contextual feedback for all major operations + - Comprehensive tooltips with keyboard hints + - Enhanced Help modal with 6 sections (About, Features, Getting Started, Shortcuts, Storage, Tips) + - Data persistence warning in Help section - Retro Windows 2000 aesthetic throughout - Component-based CSS architecture with base classes @@ -487,4 +506,7 @@ Astrolabe is a focused tool for managing, editing, and previewing Vega-Lite visu - **Modal UI**: Flexbox with overflow:auto, max-height responsive to viewport (80vh fixed height) - **Auto-detection**: URL validation, JSON/CSV/TSV parsing, confidence scoring, real-time feedback - **URL State Management**: Native Hash API with hashchange listener, initialized after editor ready -- **CSS Architecture**: Component-based with base classes (.btn, .input, .preview-box) and modifiers \ No newline at end of file +- **CSS Architecture**: Component-based with base classes (.btn, .input, .preview-box) and modifiers +- **Keyboard Shortcuts**: Dual system with document listeners + Monaco commands for full coverage +- **Toast Notifications**: Bottom-right positioned, 4s auto-dismiss, slide animations, 4 types (error/success/warning/info) +- **User Feedback**: Replaced 19 alert() calls with contextual toasts, kept confirm() for destructive actions \ No newline at end of file diff --git a/docs/features-list.md b/docs/features-list.md index 01e97ce..c047c4b 100644 --- a/docs/features-list.md +++ b/docs/features-list.md @@ -3,7 +3,7 @@ > **Purpose**: Comprehensive inventory of all implemented features for code review and optimization > **Created**: 2025-10-15 > **Updated**: 2025-10-16 -> **Status**: Phases 0-12 Complete +> **Status**: Phases 0-12 Complete, Phase 13 In Progress (Keyboard Shortcuts, Notifications, Tooltips, Help Documentation) --- @@ -293,13 +293,52 @@ src/ --- +### **13. Polish & UX Refinements (Phase 13)** ⏳ _In Progress_ + +**Keyboard Shortcuts**: +- Cmd/Ctrl+Shift+N: Create new snippet +- Cmd/Ctrl+K: Toggle dataset manager +- Cmd/Ctrl+S: Publish draft +- Escape: Close any open modal +- Dual handler system (document-level + Monaco integration) +- Cross-platform support (Cmd on Mac, Ctrl on Windows/Linux) + +**Toast Notification System**: +- Four types: error, success, warning, info +- Bottom-right positioning, 4-second auto-dismiss +- Slide-in/slide-out animations +- Manual close button +- Replaced 19 `alert()` calls with contextual toasts +- Kept `confirm()` dialogs for destructive actions + +**Tooltips**: +- Added to all interactive elements (buttons, links, controls) +- Keyboard shortcut hints included where applicable +- Consistent tooltip text across the application + +**Enhanced Help Documentation**: +- Comprehensive Help modal with 6 sections +- About Astrolabe (project vision and approach) +- Key Features (scannable highlights) +- Getting Started (4-step workflow guide) +- Keyboard Shortcuts (reference table) +- Storage & Limits (with data persistence warning) +- Tips & Tricks (power user features) + +**Files**: `app.js` (keyboard handlers), `config.js` (Toast utility), `styles.css` (toast/help styles), `index.html` (help modal) + +--- + ## 📝 **Next Steps** -### Phase 12 Complete! All dataset features implemented. +### Phase 13 In Progress! Keyboard shortcuts, notifications, tooltips, and help documentation complete. -**Potential Next Phases**: -- **Phase 13**: Polish & UX Refinements (keyboard shortcuts, tooltips, loading states) +**Remaining Phase 13 Tasks**: +- [ ] Loading states for rendering +- [ ] Empty states (no snippets, no datasets) +- [ ] Improved visual design polish +- [ ] Cross-browser testing + +**Future Phases**: - **Phase 14**: Advanced Snippet Features (tagging system, templates, bulk operations) - **Phase 15**: Authentication & Backend (cloud sync, sharing) - -**Current Priority**: Code review and optimization of Phase 12 features if needed.