docs: queue remaining style cleanup tasks
This commit is contained in:
Shantur Rathore
33
tasks/todo/049-unified-picker-refactor.md
Normal file
33
tasks/todo/049-unified-picker-refactor.md
Normal file
@@ -0,0 +1,33 @@
|
||||
# Task 049 - Unified & File Picker Tailwind Refactor
|
||||
|
||||
## Goal
|
||||
Replace the hardcoded gray/blue class stacks in `UnifiedPicker` and `FilePicker` with token-based Tailwind utilities and shared dropdown helpers.
|
||||
|
||||
## Prerequisites
|
||||
- Tasks 041-048 complete (tokens, message components, tabs, prompt input refactored).
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] `src/components/unified-picker.tsx` and `src/components/file-picker.tsx` reference token-backed utility classes for surfaces, borders, typography, and states.
|
||||
- [ ] A shared dropdown utility block lives in `src/styles/components.css` (e.g., `.dropdown-surface`, `.dropdown-item`, `.dropdown-highlight`).
|
||||
- [ ] Legacy class strings using `bg-white`, `bg-gray-*`, `dark:bg-gray-*`, etc., are removed from both components.
|
||||
- [ ] Loading/empty states, highlights, and diff chips preserve their current behavior in light/dark themes.
|
||||
|
||||
## Steps
|
||||
1. Inventory all className usages in the two picker components.
|
||||
2. Add reusable dropdown utilities to `components.css`, powered by the existing tokens.
|
||||
3. Update component markup to use the new helpers and Tailwind utilities with `var(--token)` references for color.
|
||||
4. Smoke test: open the picker, filter results, confirm loading/empty states and diff counts.
|
||||
|
||||
## Testing Checklist
|
||||
- [ ] Run `npm run build`.
|
||||
- [ ] In dev mode, trigger the picker from prompt input (file mention) and ensure keyboard navigation/hover states look correct.
|
||||
|
||||
## Dependencies
|
||||
- Blocks further cleanup of selector components and modals.
|
||||
|
||||
## Estimated Time
|
||||
0.75 hours
|
||||
|
||||
## Notes
|
||||
- Branch name suggestion: `feature/task-049-unified-picker-refactor`.
|
||||
- Include before/after light & dark screenshots in the PR description if any visual tweaks occur.
|
||||
34
tasks/todo/050-selector-popover-refactor.md
Normal file
34
tasks/todo/050-selector-popover-refactor.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# Task 050 - Selector Popover Tailwind Refactor
|
||||
|
||||
## Goal
|
||||
Bring `ModelSelector` and `OpencodeBinarySelector` popovers in line with the design tokens, eliminating manual light/dark class stacks.
|
||||
|
||||
## Prerequisites
|
||||
- Task 049 complete (dropdown utility helpers ready).
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] `src/components/model-selector.tsx` and `src/components/opencode-binary-selector.tsx` use token-backed utilities for surfaces, borders, focus rings, and typography.
|
||||
- [ ] Shared selector utilities live in `src/styles/components.css` (e.g., `.selector-trigger`, `.selector-option`, `.selector-section`).
|
||||
- [ ] All `dark:bg-gray-*` / `text-gray-*` combinations are removed in favor of tokens or newly added utilities.
|
||||
- [ ] Combobox states (highlighted, selected, disabled) and validation overlays preserve current UX.
|
||||
|
||||
## Steps
|
||||
1. Map all class usages in both selectors, noting duplicated patterns (trigger button, list items, badges).
|
||||
2. Create selector-specific helpers in `components.css` that rely on tokens.
|
||||
3. Update component markup to use the helpers and Tailwind utility additions.
|
||||
4. Verify validation/binary version chips and search input styling in both themes.
|
||||
|
||||
## Testing Checklist
|
||||
- [ ] Run `npm run build`.
|
||||
- [ ] In dev mode, open the selector popovers, search, and select options to confirm styling and focus rings.
|
||||
|
||||
## Dependencies
|
||||
- Depends on Task 049 dropdown helpers.
|
||||
- Blocks folder selection advanced settings refactor.
|
||||
|
||||
## Estimated Time
|
||||
1.0 hour
|
||||
|
||||
## Notes
|
||||
- Branch suggestion: `feature/task-050-selector-popover-refactor`.
|
||||
- Document any intentional color tweaks in the PR if tokens reveal contrast issues.
|
||||
34
tasks/todo/051-command-palette-refactor.md
Normal file
34
tasks/todo/051-command-palette-refactor.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# 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.
|
||||
34
tasks/todo/052-folder-info-panels-refactor.md
Normal file
34
tasks/todo/052-folder-info-panels-refactor.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# Task 052 - Folder Selection & Info Panels Refactor
|
||||
|
||||
## Goal
|
||||
Migrate the folder selection view, info view, and logs view to token-driven utilities, removing bespoke gray styling blocks.
|
||||
|
||||
## Prerequisites
|
||||
- Task 051 complete (modal/kbd helpers ready).
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] `src/components/folder-selection-view.tsx`, `src/components/info-view.tsx`, and `src/components/logs-view.tsx` use token-backed utilities or shared helpers from `components.css`.
|
||||
- [ ] Panel surfaces, headers, section dividers, and scroll containers reference tokens rather than raw Tailwind color values.
|
||||
- [ ] `.session-view` global rule in `src/index.css` is replaced with a utility/helper equivalent.
|
||||
- [ ] Loading/empty states and action buttons keep their existing behavior and contrast in both themes.
|
||||
|
||||
## Steps
|
||||
1. Catalog remaining raw color classes in the three components.
|
||||
2. Add reusable panel helpers (e.g., `.panel`, `.panel-header`, `.panel-body`) to `components.css` if helpful.
|
||||
3. Update component markup to use helpers and token-aware Tailwind classes.
|
||||
4. Remove residual `bg-gray-*` / `text-gray-*` from these components and clean up `index.css`.
|
||||
|
||||
## Testing Checklist
|
||||
- [ ] Run `npm run build`.
|
||||
- [ ] Manual spot check: recent folders list, info view logs, logs view streaming; confirm hover states and CTAs.
|
||||
|
||||
## Dependencies
|
||||
- Depends on Task 051.
|
||||
- Blocks final markdown/global CSS cleanup.
|
||||
|
||||
## Estimated Time
|
||||
1.25 hours
|
||||
|
||||
## Notes
|
||||
- Branch suggestion: `feature/task-052-folder-info-panels-refactor`.
|
||||
- Capture screenshots (light/dark) of folder selection and logs panels for review.
|
||||
34
tasks/todo/053-markdown-style-refactor.md
Normal file
34
tasks/todo/053-markdown-style-refactor.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# Task 053 - Markdown & Code Block Styling Refactor
|
||||
|
||||
## Goal
|
||||
Extract the remaining markdown/code-block styling from `src/index.css` into token-aware utilities and ensure all prose rendering uses the shared system.
|
||||
|
||||
## Prerequisites
|
||||
- Task 052 complete (panels cleaned up).
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] `src/index.css` no longer contains `.prose`, `.markdown-code-block`, `.code-block-header`, `.code-block-copy`, or `.code-block-inline` blocks; equivalent styling lives in a new `src/styles/markdown.css` (imported from `index.css`) and/or token helpers.
|
||||
- [ ] New markdown helpers rely on tokens for colors, borders, and typography (no hard-coded hex values).
|
||||
- [ ] Code block copy button, language label, and inline code maintain current interaction and contrast in both themes.
|
||||
- [ ] `MessagePart` markdown rendering (`src/components/markdown.tsx`) automatically picks up the new styling without component changes.
|
||||
|
||||
## Steps
|
||||
1. Move markdown-related CSS into a dedicated `styles/markdown.css` file, rewriting colors with tokens.
|
||||
2. Replace any legacy values (e.g., `text-gray-700`) with token references.
|
||||
3. Update `src/index.css` to import the new stylesheet after tokens/components layers.
|
||||
4. Verify formatted markdown in the message stream (headings, lists, code blocks, copy button).
|
||||
|
||||
## Testing Checklist
|
||||
- [ ] Run `npm run build`.
|
||||
- [ ] Manually view messages with markdown (headings, inline code, block code, tables) in both themes.
|
||||
|
||||
## Dependencies
|
||||
- Depends on Task 052.
|
||||
- Blocks final cleanup task for attachment/keyboard chips.
|
||||
|
||||
## Estimated Time
|
||||
0.75 hours
|
||||
|
||||
## Notes
|
||||
- Branch suggestion: `feature/task-053-markdown-style-refactor`.
|
||||
- If additional tokens are needed (e.g., `--surface-prose`), document them in the PR.
|
||||
34
tasks/todo/054-attachment-chip-refactor.md
Normal file
34
tasks/todo/054-attachment-chip-refactor.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# Task 054 - Attachment & Misc Chip Refactor
|
||||
|
||||
## Goal
|
||||
Standardize attachment chips and any remaining inline badge styles to use the shared token helpers.
|
||||
|
||||
## Prerequisites
|
||||
- Task 053 complete (markdown styling moved).
|
||||
|
||||
## Acceptance Criteria
|
||||
- [ ] `src/components/attachment-chip.tsx` uses the `.attachment-chip` and `.attachment-remove` helpers (or equivalent token-backed utilities) instead of hardcoded Tailwind color stacks.
|
||||
- [ ] Any other chip/badge helpers introduced in earlier tasks reference the same token palette (audit `folder-selection-view.tsx`, `unified-picker.tsx`, etc.).
|
||||
- [ ] No component contains inline `bg-blue-*` / `dark:bg-blue-*` combinations after the refactor.
|
||||
- [ ] Interaction states (hover, focus) remain consistent in both themes.
|
||||
|
||||
## Steps
|
||||
1. Update `attachment-chip.tsx` to import and use the shared helper classes.
|
||||
2. Search the codebase for remaining `bg-blue-`, `bg-gray-900`, `dark:bg-blue-` patterns; convert them to tokenized utilities or helpers.
|
||||
3. Adjust `components.css` helpers if needed (e.g., expose variations for neutral vs accent chips).
|
||||
4. Verify attachments display correctly in the prompt input and message list.
|
||||
|
||||
## Testing Checklist
|
||||
- [ ] Run `npm run build`.
|
||||
- [ ] Manually add/remove attachments via the prompt input, confirming chip styling survives theme toggle.
|
||||
|
||||
## Dependencies
|
||||
- Depends on Task 053.
|
||||
- Finalizes legacy styling removal.
|
||||
|
||||
## Estimated Time
|
||||
0.5 hours
|
||||
|
||||
## Notes
|
||||
- Branch suggestion: `feature/task-054-attachment-chip-refactor`.
|
||||
- Document any new helper names in the task PR for traceability.
|
||||
Reference in New Issue
Block a user