From 10d95951a3edab158ab442acd9430bf5ec536029 Mon Sep 17 00:00:00 2001 From: matt Date: Fri, 17 Oct 2025 12:27:20 -0700 Subject: [PATCH] feat: implement QoL features (toast notifications, command palette, auto-save) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add three major quality-of-life features to improve user experience: Toast Notification System: - Non-blocking notifications for all major actions - Four variants: success, error, warning, info - Auto-dismiss with progress bar - Bottom-right positioning with smooth animations - Replaced old status messages throughout the app Command Palette (Ctrl+P): - Keyboard-driven quick access to all actions - 14 built-in commands across 5 categories - Real-time fuzzy search with arrow key navigation - Shows keyboard shortcuts for each command - Grouped by category with visual feedback Auto-save & Recovery: - Automatic draft saving (1s debounce) - Per-character draft storage in localStorage - Auto-recovery on app restart or character switch - Draft age display (e.g., "2 hours ago") - Auto-cleanup of drafts older than 7 days - Clears draft when message is sent Updated README with new Ctrl+P keyboard shortcut Updated ROADMAP with Phase 8: Quality of Life & Polish section 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- README.md | 1 + ROADMAP.md | 167 +++++++++++++- src/index.html | 27 +++ src/main.js | 613 ++++++++++++++++++++++++++++++++++++++++++++----- src/styles.css | 432 ++++++++++++++++++++++++++++++++++ 5 files changed, 1174 insertions(+), 66 deletions(-) diff --git a/README.md b/README.md index d2ba5d2..4545c38 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,7 @@ Config stored in `~/.config/claudia/config.json` - **Left/Right Arrow** - Navigate between response alternatives - **Escape** - Close panels/modals, cancel editing - **Ctrl+K** - Focus message input +- **Ctrl+P** - Open command palette (quick access to all actions) - **Ctrl+/** - Toggle Roleplay Tools panel ## Roadmap diff --git a/ROADMAP.md b/ROADMAP.md index 2981753..d81c2a6 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -19,11 +19,12 @@ - Enhanced Message Controls (delete, pin, hide, continue, regenerate any message) - Token Counter (real-time display with per-section breakdown) - Message Examples (character card examples injected into context) +- Chat Branching/Checkpoints (create, switch, delete, rename branches from any message) -### 🎯 Current Focus: Advanced Chat Management -**Next Up:** Implementing Chat Branching/Checkpoints to enable non-linear conversation exploration with the ability to save conversation states, create branches from any point, and switch between different conversation paths. +### 🎯 Current Focus: Quality of Life & Polish +**Next Up:** Implementing high-impact QoL features to reduce friction and improve user experience - starting with Toast Notifications, Command Palette, Auto-save, Drag & Drop, and Chat Search. -**Recent Completion:** Message Examples - character card message examples are now parsed, processed with template variable replacement, and injected into context at configurable positions to teach the AI the character's voice and writing style. +**Recent Completion:** Chat Branching/Checkpoints - Full conversation branching system allowing users to create and explore alternate conversation paths from any message point. Each branch maintains its own complete message history with a branch manager modal for easy navigation. ## Phase 1: Core Roleplay Infrastructure (High Priority) **Goal: Enable basic roleplay-focused prompt engineering** @@ -87,13 +88,14 @@ ## Phase 3: Advanced Chat Management (Medium Priority) **Goal: Non-linear conversation control** -### 1. Chat Branching/Checkpoints -- [ ] Save conversation state at any message -- [ ] Create branches from any point -- [ ] Switch between branches -- [ ] Visual branch indicator in UI -- [ ] Branch naming and organization -- [ ] Delete/merge branches +### 1. Chat Branching/Checkpoints ✅ +- [x] Save conversation state at any message +- [x] Create branches from any point +- [x] Switch between branches +- [x] Visual branch indicator in UI +- [x] Branch naming and organization +- [x] Delete branches +- [ ] Merge branches (deferred - nice to have) **Why Important:** Roleplay often involves exploring "what if" scenarios. Branching lets you explore different conversation paths without losing previous progress. @@ -252,6 +254,151 @@ **Why Important:** Better UI means less friction and more immersion in roleplay. +## Phase 8: Quality of Life & Polish (High Priority) +**Goal: Reduce friction, improve feedback, and enhance overall user experience** + +### 1. Toast Notification System +- [ ] Create toast component (bottom-right positioning) +- [ ] Success/error/info/warning variants +- [ ] Auto-dismiss with configurable timeout +- [ ] Queue multiple toasts +- [ ] Hook into all major actions (save, delete, import, export, etc.) + +**Why Important:** Users currently have no immediate feedback when actions succeed or fail. Toasts provide instant visual confirmation without blocking workflow. + +### 2. Command Palette +- [ ] Ctrl+P to open command palette modal +- [ ] Fuzzy search for all actions +- [ ] Keyboard navigation (arrow keys, enter, escape) +- [ ] Recent/frequent actions at top +- [ ] Show keyboard shortcuts in results +- [ ] Categories (Chat, Character, Settings, etc.) + +**Why Important:** Power users want keyboard-first workflow. Command palette dramatically speeds up common actions without memorizing shortcuts. + +### 3. Auto-save & Recovery +- [ ] Auto-save unsent message in input field +- [ ] Restore unsent message after app restart +- [ ] Draft system for in-progress edits +- [ ] Session recovery (restore scroll position, open panels) +- [ ] Crash recovery with last known state + +**Why Important:** Losing work due to crashes or accidental closes is extremely frustrating. Auto-save provides a safety net for all user work. + +### 4. Drag & Drop Support +- [ ] Drag character card PNGs to import +- [ ] Drag lorebook JSON files to import +- [ ] Drag chat history JSON to import +- [ ] Drag images to set as character avatar +- [ ] Drop zone overlay with visual feedback +- [ ] Support for multiple file drops + +**Why Important:** Drag & drop feels natural and is much faster than navigate-click-select workflow. Modern desktop apps are expected to support this. + +### 5. Search in Chat History +- [ ] Ctrl+F to open search bar +- [ ] Highlight all matches in messages +- [ ] Navigate between results (prev/next buttons) +- [ ] Case-insensitive search +- [ ] Search counter (e.g., "3 of 42 matches") +- [ ] Clear search and restore view + +**Why Important:** Long roleplay sessions can span hundreds of messages. Finding specific content without search is tedious and time-consuming. + +### 6. Context Menus (Right-Click) +- [ ] Right-click messages for actions (edit, delete, regenerate, branch, copy) +- [ ] Right-click character dropdown for quick actions +- [ ] Right-click World Info entries for edit/delete +- [ ] Right-click in message input for paste/clear/templates +- [ ] Context-aware menu items + +**Why Important:** Right-click is muscle memory for desktop users. Faster than hovering to reveal action buttons. + +### 7. Better Feedback & Confirmations +- [ ] Confirmation dialogs for destructive actions (delete character, clear chat) +- [ ] Loading spinners for API calls +- [ ] Progress bars for file imports +- [ ] "Saving..." / "Saved" indicators +- [ ] Success messages for completed actions + +**Why Important:** Users should never wonder if an action succeeded or is still processing. Clear feedback prevents confusion and repeated clicks. + +### 8. Undo/Redo System +- [ ] Undo message edit (Ctrl+Z) +- [ ] Undo message delete +- [ ] Undo character field changes +- [ ] Undo World Info changes +- [ ] Action history panel (optional) +- [ ] Redo support (Ctrl+Shift+Z) + +**Why Important:** Mistakes happen. An undo system provides a safety net and encourages experimentation without fear of losing work. + +### 9. Settings Search +- [ ] Search bar at top of settings panel +- [ ] Fuzzy search across all setting names and descriptions +- [ ] Highlight matching settings +- [ ] Collapse/expand sections based on matches +- [ ] "Recently changed" section + +**Why Important:** With 22+ features, finding specific settings is tedious. Search makes configuration much faster. + +### 10. Character Management Enhancements +- [ ] Recent characters quick-switch dropdown +- [ ] Character search/filter by name or tags +- [ ] Character folders/categories +- [ ] Duplicate character (as template) +- [ ] Favorite/star characters +- [ ] Sort options (name, date created, last used) + +**Why Important:** Managing 10+ characters becomes messy. Better organization tools scale with user's character collection. + +### 11. Enhanced Keyboard Support +- [ ] Full keyboard navigation in all modals (Tab, Arrow keys, Enter) +- [ ] Escape to close any open panel/modal +- [ ] Vim-style navigation mode (optional, j/k for scroll) +- [ ] Keyboard shortcut hints on hover +- [ ] Focus indicators for keyboard navigation + +**Why Important:** Keyboard navigation should work everywhere. Current implementation is inconsistent across different UI sections. + +### 12. Export/Share Enhancements +- [ ] Export conversation as formatted HTML +- [ ] Export conversation as formatted PDF +- [ ] Export as markdown with proper formatting +- [ ] Copy conversation to clipboard (formatted) +- [ ] Export individual messages + +**Why Important:** Users want to share and archive conversations in readable formats, not just JSON. + +### 13. Accessibility Improvements +- [ ] ARIA labels for all interactive elements +- [ ] Screen reader support +- [ ] High contrast mode option +- [ ] Larger click targets option (accessibility mode) +- [ ] Reduced motion mode (respect prefers-reduced-motion) +- [ ] Focus indicators for keyboard navigation + +**Why Important:** Accessibility makes the app usable for everyone, including users with disabilities. It's also often legally required. + +### 14. Better Visual Feedback +- [ ] Smooth transitions for panel open/close +- [ ] Hover states for all interactive elements +- [ ] Active state indicators (focused panel) +- [ ] Better empty states with helpful text +- [ ] Skeleton loaders for content loading +- [ ] Micro-animations for actions (delete, save, etc.) + +**Why Important:** Visual polish makes the app feel responsive and professional. Small animations provide context for state changes. + +### 15. Smart Defaults & Templates +- [ ] Scenario templates (fantasy RPG, sci-fi, modern, etc.) +- [ ] Pre-filled World Info templates +- [ ] Character card templates +- [ ] Quick-start wizard for new users +- [ ] Import from popular character repositories + +**Why Important:** Reduces friction for new users and speeds up common tasks. Templates provide starting points for customization. + ## Implementation Priority Ranking ### Must-Have for Basic Roleplay: diff --git a/src/index.html b/src/index.html index df4009a..7240d45 100644 --- a/src/index.html +++ b/src/index.html @@ -733,6 +733,33 @@ + +
+ + + +