From 35db118ec7c2bded59d4cbe944c93dbbbfb42967 Mon Sep 17 00:00:00 2001 From: Oleh Omelchenko Date: Fri, 17 Oct 2025 23:23:09 +0300 Subject: [PATCH] chore: move website files to web/ folder --- CLAUDE.md | 22 +++++++--- docs/dev-plan.md | 56 +++++++++++++++++--------- index.html => web/index.html | 2 +- {src => web/src}/favicon.svg | 0 {src => web/src}/js/app.js | 0 {src => web/src}/js/config.js | 0 {src => web/src}/js/dataset-manager.js | 0 {src => web/src}/js/editor.js | 0 {src => web/src}/js/panel-manager.js | 0 {src => web/src}/js/snippet-manager.js | 0 {src => web/src}/js/user-settings.js | 0 {src => web/src}/styles.css | 0 12 files changed, 55 insertions(+), 25 deletions(-) rename index.html => web/index.html (99%) rename {src => web/src}/favicon.svg (100%) rename {src => web/src}/js/app.js (100%) rename {src => web/src}/js/config.js (100%) rename {src => web/src}/js/dataset-manager.js (100%) rename {src => web/src}/js/editor.js (100%) rename {src => web/src}/js/panel-manager.js (100%) rename {src => web/src}/js/snippet-manager.js (100%) rename {src => web/src}/js/user-settings.js (100%) rename {src => web/src}/styles.css (100%) diff --git a/CLAUDE.md b/CLAUDE.md index 0962ce2..4fcfcda 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -13,13 +13,14 @@ Instructions for Claude Code when working on this project. - **Snippets**: localStorage with Phase 0 schema (id, name, created, modified, spec, draftSpec, comment, tags, datasetRefs, meta) - **Datasets**: IndexedDB (unlimited size, multi-format: JSON/CSV/TSV/TopoJSON, inline & URL sources) - **Structure**: Three resizable panels (snippet library, Monaco editor, live preview) + Dataset Manager modal -- **No build tools**: Open `index.html` directly in browser (needs local server for IndexedDB) +- **Deployment**: Web app files in `/web` folder; `/docs` folder contains development documentation only +- **No build tools**: Open `web/index.html` directly in browser (needs local server for IndexedDB) ## Current Status -**Completed**: Phases 0-12 (Core functionality + Dataset Management + Advanced Dataset 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 +**Completed**: Phases 0-13 (Core functionality + Dataset Management + Advanced Dataset Features + Polish & UX Refinements) +**In Progress**: GitHub Pages deployment preparation +**Next**: Phase 14 - Advanced Snippet Features or additional refinements ### Key Features Implemented - ✅ Snippet management with draft/published workflow @@ -37,12 +38,21 @@ 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)** +- ✅ **Polish & UX Features (Phase 13)** - 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 + - Enhanced Help modal with 6 sections (About, Features, Getting Started, Shortcuts, Storage, Privacy) - Data persistence warnings + - **User Settings System** + - Configurable editor options (font size 10-18px, tab size, minimap, word wrap, line numbers) + - Performance tuning (render debounce delay 300-3000ms) + - Date formatting options (smart/relative, locale, ISO, custom with tokens) + - UI theme selection (Light, Dark Experimental) + - **Theme System** + - Light theme (Windows 2000 classic aesthetic) + - Experimental dark theme with CSS variables for theming + - Automatic editor theme synchronization with UI theme 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 d4c824c..98abe73 100644 --- a/docs/dev-plan.md +++ b/docs/dev-plan.md @@ -324,17 +324,15 @@ Astrolabe is a focused tool for managing, editing, and previewing Vega-Lite visu --- -### **Phase 13: Polish & UX Refinements** ⏳ **IN PROGRESS** +### **Phase 13: Polish & UX Refinements** ✅ **COMPLETE** **Goal**: Professional feel and usability - [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) -- [ ] Improved visual design (minimal but polished CSS) -- [ ] Cross-browser testing (Chrome, Firefox, Safari) +- [x] **Enhanced Help documentation** - Comprehensive help modal with About, Features, Getting Started, Shortcuts, Storage, and Privacy sections +- [x] **User Settings System** - Configurable editor options, performance tuning, date formatting, and theme selection +- [x] **Theme System** - Light theme (Windows 2000) and experimental dark theme with CSS variables **Deliverable**: Polished, production-ready MVP @@ -345,7 +343,13 @@ Astrolabe is a focused tool for managing, editing, and previewing Vega-Lite visu - 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 +- Help modal with 6 sections covering full app functionality (About, Features, Getting Started, Keyboard Shortcuts, Storage, Privacy & Data) +- User settings with localStorage persistence and validation +- Light theme (Windows 2000 aesthetic) and experimental dark theme +- Automatic editor theme synchronization with UI theme +- Custom date formatting with smart/relative times, locale, ISO, and token-based formats +- Size sorting for snippets (blob-based calculation) +- Accessibility improvements with proper ARIA labels and color contrast --- @@ -417,21 +421,30 @@ Astrolabe is a focused tool for managing, editing, and previewing Vega-Lite visu ## Code Organization +**Web Application** (`/web` directory): - **index.html**: Main HTML structure with semantic markup -- **app.js**: Application initialization and event handler registration -- **config.js**: Global variables, settings management, and sample data -- **snippet-manager.js**: Storage wrapper and all snippet CRUD operations -- **panel-manager.js**: Layout resizing, toggling, and persistence -- **editor.js**: Monaco and Vega library loading and rendering logic -- **styles.css**: Retro Windows 2000 aesthetic with component-based organization +- **src/app.js**: Application initialization and event handler registration +- **src/config.js**: Global variables, settings management, and sample data +- **src/snippet-manager.js**: Storage wrapper and all snippet CRUD operations +- **src/panel-manager.js**: Layout resizing, toggling, and persistence +- **src/editor.js**: Monaco and Vega library loading and rendering logic +- **src/dataset-manager.js**: Dataset CRUD and IndexedDB operations +- **src/user-settings.js**: Settings management with localStorage persistence and validation +- **src/styles.css**: Retro Windows 2000 aesthetic with CSS variables for theming + +**Documentation** (`/docs` directory - not served on GitHub Pages): +- **dev-plan.md**: Complete development roadmap and technical decisions +- **features-list.md**: Feature matrix and implementation status +- **storage-examples.md**: Data structure examples and schema documentation +- **CLAUDE.md**: Context and status summary for AI assistance --- ## 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) -**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 +**Completed**: Phases 0-13 (All core features, dataset management, advanced features, and UX refinements) +**In Progress**: GitHub Pages deployment preparation and project restructuring for public distribution +**Next**: Phase 14 - Advanced Snippet Features (tagging system, templates, bulk operations) or public launch **See**: `CLAUDE.md` for concise current state summary --- @@ -476,14 +489,21 @@ 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)_: +- **Polish & UX Refinements (Phase 13)**: - 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) + - Enhanced Help modal with 6 sections (About, Features, Getting Started, Shortcuts, Storage, Privacy & Data) - Data persistence warning in Help section + - User Settings System with localStorage persistence + - Configurable editor options (font size, tab size, minimap, word wrap, line numbers) + - Performance tuning (render debounce delay) + - Date formatting options (smart/relative, locale, ISO, custom tokens) + - Theme system (Light and experimental Dark themes) + - Automatic editor theme synchronization + - Size sorting for snippets - Retro Windows 2000 aesthetic throughout - Component-based CSS architecture with base classes diff --git a/index.html b/web/index.html similarity index 99% rename from index.html rename to web/index.html index 466d5f8..0a00777 100644 --- a/index.html +++ b/web/index.html @@ -6,7 +6,7 @@ Astrolabe - Vega-Lite Snippet Manager - + diff --git a/src/favicon.svg b/web/src/favicon.svg similarity index 100% rename from src/favicon.svg rename to web/src/favicon.svg diff --git a/src/js/app.js b/web/src/js/app.js similarity index 100% rename from src/js/app.js rename to web/src/js/app.js diff --git a/src/js/config.js b/web/src/js/config.js similarity index 100% rename from src/js/config.js rename to web/src/js/config.js diff --git a/src/js/dataset-manager.js b/web/src/js/dataset-manager.js similarity index 100% rename from src/js/dataset-manager.js rename to web/src/js/dataset-manager.js diff --git a/src/js/editor.js b/web/src/js/editor.js similarity index 100% rename from src/js/editor.js rename to web/src/js/editor.js diff --git a/src/js/panel-manager.js b/web/src/js/panel-manager.js similarity index 100% rename from src/js/panel-manager.js rename to web/src/js/panel-manager.js diff --git a/src/js/snippet-manager.js b/web/src/js/snippet-manager.js similarity index 100% rename from src/js/snippet-manager.js rename to web/src/js/snippet-manager.js diff --git a/src/js/user-settings.js b/web/src/js/user-settings.js similarity index 100% rename from src/js/user-settings.js rename to web/src/js/user-settings.js diff --git a/src/styles.css b/web/src/styles.css similarity index 100% rename from src/styles.css rename to web/src/styles.css