157449a9ad
Restored from origin/main (b4663fb): - .github/ workflows and issue templates - .gitignore (proper exclusions) - .opencode/agent/web_developer.md - AGENTS.md, BUILD.md, PROGRESS.md - dev-docs/ (9 architecture/implementation docs) - docs/screenshots/ (4 UI screenshots) - images/ (CodeNomad icons) - package-lock.json (dependency lockfile) - tasks/ (25+ project task files) Also restored original source files that were modified: - packages/ui/src/App.tsx - packages/ui/src/lib/logger.ts - packages/ui/src/stores/instances.ts - packages/server/src/server/routes/workspaces.ts - packages/server/src/workspaces/manager.ts - packages/server/src/workspaces/runtime.ts - packages/server/package.json Kept new additions: - Install-*.bat/.sh (enhanced installers) - Launch-*.bat/.sh (new launchers) - README.md (SEO optimized with GLM 4.7)
35 lines
1.6 KiB
Markdown
35 lines
1.6 KiB
Markdown
# Task 051 - Command Palette & Keyboard Hint Refactor
|
|
|
|
## Goal
|
|
Align the command palette modal and keyboard hint UI with the shared token system, removing bespoke gray/black overlay styling.
|
|
|
|
## Prerequisites
|
|
- Task 050 complete (selector helpers available for reuse).
|
|
|
|
## Acceptance Criteria
|
|
- [ ] `src/components/command-palette.tsx` uses token-backed utilities for overlay, surface, list items, and focus states.
|
|
- [ ] `src/components/keyboard-hint.tsx` and any inline `<kbd>` styling leverage reusable helpers (`.kbd` etc.) from `components.css`.
|
|
- [ ] Legacy utility combos in these components (`bg-gray-*`, `dark:bg-gray-*`, `text-gray-*`) are eliminated.
|
|
- [ ] Palette overlay opacity, search field, section headers, and highlighted items match existing behavior in both themes.
|
|
|
|
## Steps
|
|
1. Extract repeated modal/dropdown patterns into helpers (overlay, surface, list item) if not already present.
|
|
2. Update command palette markup to use the helpers and token-aware Tailwind classes.
|
|
3. Refactor `keyboard-hint.tsx` to rely on shared `.kbd` styling and tokens.
|
|
4. Verify keyboard navigation, highlighted items, and section headers visually.
|
|
|
|
## Testing Checklist
|
|
- [ ] Run `npm run build`.
|
|
- [ ] In dev mode, open the command palette, search, navigate with arrow keys, and confirm highlight/focus styling.
|
|
|
|
## Dependencies
|
|
- Depends on Task 050.
|
|
- Blocks folder selection advanced settings refactor (which reuses keyboard hints).
|
|
|
|
## Estimated Time
|
|
0.75 hours
|
|
|
|
## Notes
|
|
- Branch suggestion: `feature/task-051-command-palette-refactor`.
|
|
- Include GIF/screenshots if overlay opacity or highlight timing needed adjustment.
|