215 lines
8.9 KiB
Markdown
215 lines
8.9 KiB
Markdown
---
|
|
phase: 06-chat-ui-redesign
|
|
plan: 03
|
|
type: execute
|
|
wave: 2
|
|
depends_on: [06-01]
|
|
files_modified:
|
|
- tauri-app/src/features/settings/SettingsPage.tsx
|
|
- tauri-app/src/features/settings/SettingsPage.css
|
|
autonomous: true
|
|
requirements: [UI-03]
|
|
|
|
must_haves:
|
|
truths:
|
|
- "Settings page left nav panel uses Manus surface color (#1E1E1E) and correct border color (#262626)"
|
|
- "Settings cards/sections use Manus elevated color (#262626) background"
|
|
- "Section titles use Manus primary text (#F3F4F6), descriptions use secondary text (#9CA3AF)"
|
|
- "Two-panel layout is preserved and fully functional"
|
|
artifacts:
|
|
- path: "tauri-app/src/features/settings/SettingsPage.css"
|
|
provides: "Updated sp-nav, sp-card, sp-section CSS with Manus tokens"
|
|
contains: "var(--manus-surface)"
|
|
- path: "tauri-app/src/features/settings/SettingsPage.tsx"
|
|
provides: "SettingsPage with Manus Tailwind token classes applied"
|
|
key_links:
|
|
- from: "tauri-app/src/features/settings/SettingsPage.css"
|
|
to: "tauri-app/src/index.css"
|
|
via: "var(--manus-surface), var(--manus-elevated), var(--manus-tx), var(--manus-tx2)"
|
|
pattern: "var\\(--manus-"
|
|
---
|
|
|
|
<objective>
|
|
Apply Manus design tokens to the Settings page: update the left-nav panel, card/section backgrounds, and text colors while preserving the existing two-panel layout.
|
|
|
|
Purpose: Visual consistency — Settings must match the chat UI's Manus dark theme.
|
|
Output: Updated SettingsPage.css (sp-nav, sp-card, sp-section selectors) and SettingsPage.tsx (Tailwind token classes on inline-styled elements). The --manus-* CSS vars (created in plan 06-02) are the token source.
|
|
</objective>
|
|
|
|
<execution_context>
|
|
@$HOME/.config/opencode/get-shit-done/workflows/execute-plan.md
|
|
@$HOME/.config/opencode/get-shit-done/templates/summary.md
|
|
</execution_context>
|
|
|
|
<context>
|
|
@.planning/PROJECT.md
|
|
@.planning/phases/06-chat-ui-redesign/06-RESEARCH.md
|
|
@.planning/phases/06-chat-ui-redesign/06-01-SUMMARY.md
|
|
|
|
@tauri-app/src/features/settings/SettingsPage.tsx
|
|
@tauri-app/src/features/settings/SettingsPage.css
|
|
@tauri-app/src/index.css
|
|
</context>
|
|
|
|
<interfaces>
|
|
<!-- Key CSS classes used in SettingsPage. Executor targets these. -->
|
|
|
|
SettingsPage BEM class mapping to update (from SettingsPage.css):
|
|
```
|
|
.sp-nav → left panel container → bg: var(--manus-surface) border: var(--manus-elevated)
|
|
.sp-nav-item → nav list items → text: var(--manus-tx2) hover bg: var(--manus-elevated)
|
|
.sp-nav-item.active → active nav item → text: var(--manus-tx) bg: var(--manus-elevated)
|
|
.sp-card → content cards → bg: var(--manus-elevated) border: var(--manus-hover)
|
|
.sp-section → section wrappers → no change needed (inherit)
|
|
.sp-section-title → section headings → color: var(--manus-tx)
|
|
.sp-section-desc → section descriptions → color: var(--manus-tx2)
|
|
.sp-label → field labels → color: var(--manus-tx2)
|
|
.sp-input → text inputs → bg: var(--manus-surface) border: var(--manus-elevated) color: var(--manus-tx)
|
|
.sp-select → select elements → bg: var(--manus-surface) border: var(--manus-elevated) color: var(--manus-tx)
|
|
.sp-page → full page container → bg: var(--bg) [already set via --bg]
|
|
```
|
|
|
|
Manus design tokens available after plan 06-02:
|
|
```css
|
|
var(--manus-base): #171717 /* page bg */
|
|
var(--manus-surface): #1E1E1E /* nav, inputs, cards bg */
|
|
var(--manus-elevated): #262626 /* card bg, borders */
|
|
var(--manus-hover): #333333 /* hover states, borders on cards */
|
|
var(--manus-tx): #F3F4F6 /* primary text */
|
|
var(--manus-tx2): #9CA3AF /* secondary text, labels */
|
|
var(--manus-tx3): #52525B /* muted text */
|
|
var(--manus-blue): #3B82F6 /* accent */
|
|
```
|
|
|
|
SettingsPage.tsx — inline Tailwind patterns (lines ~571-644 already use Tailwind):
|
|
- HF search area uses classes like `flex`, `gap-2`, `text-sm` — extend these with manus token classes
|
|
- Nav items in TSX that use inline styles — switch to `className` with manus token names
|
|
</interfaces>
|
|
|
|
<tasks>
|
|
|
|
<task type="auto">
|
|
<name>Task 1: Update SettingsPage.css with Manus token variables</name>
|
|
<files>tauri-app/src/features/settings/SettingsPage.css</files>
|
|
<action>
|
|
Read `SettingsPage.css` fully, then replace hardcoded hex values for the key class groups with Manus CSS vars. Do NOT restructure the CSS — only update background, border, and color property values. Target classes:
|
|
|
|
**Left nav panel:**
|
|
```css
|
|
.sp-nav {
|
|
background: var(--manus-surface); /* was hardcoded bg */
|
|
border-right: 1px solid var(--manus-elevated);
|
|
}
|
|
.sp-nav-item {
|
|
color: var(--manus-tx2);
|
|
}
|
|
.sp-nav-item:hover {
|
|
background: var(--manus-elevated);
|
|
color: var(--manus-tx);
|
|
}
|
|
.sp-nav-item.active, .sp-nav-item[data-active="true"] {
|
|
background: var(--manus-elevated);
|
|
color: var(--manus-tx);
|
|
}
|
|
```
|
|
|
|
**Content cards:**
|
|
```css
|
|
.sp-card {
|
|
background: var(--manus-elevated);
|
|
border: 1px solid var(--manus-hover);
|
|
}
|
|
```
|
|
|
|
**Section text:**
|
|
```css
|
|
.sp-section-title {
|
|
color: var(--manus-tx);
|
|
}
|
|
.sp-section-desc {
|
|
color: var(--manus-tx2);
|
|
}
|
|
.sp-label {
|
|
color: var(--manus-tx2);
|
|
}
|
|
```
|
|
|
|
**Form fields:**
|
|
```css
|
|
.sp-input, .sp-select {
|
|
background: var(--manus-surface);
|
|
border-color: var(--manus-elevated);
|
|
color: var(--manus-tx);
|
|
}
|
|
.sp-input:focus, .sp-select:focus {
|
|
border-color: var(--manus-blue);
|
|
outline: none;
|
|
}
|
|
```
|
|
|
|
**Page container:**
|
|
```css
|
|
.sp-page {
|
|
background: var(--bg); /* picks up updated #171717 */
|
|
}
|
|
```
|
|
|
|
Strategy: Read each targeted selector's current rules, replace ONLY the `background`, `border`, `color` values — keep all padding, margin, flex, font-size, and other layout properties exactly as-is. If a property uses `var(--bg)` or `var(--text)` already (and those were updated in plan 06-02), it will inherit the correct Manus value automatically — no change needed for those.
|
|
</action>
|
|
<verify>
|
|
<automated>cd tauri-app && npm run build 2>&1 | grep -E "error" | head -10</automated>
|
|
</verify>
|
|
<done>SettingsPage.css updated — .sp-nav uses var(--manus-surface), .sp-card uses var(--manus-elevated), text uses var(--manus-tx) / var(--manus-tx2). No layout changes.</done>
|
|
</task>
|
|
|
|
<task type="auto">
|
|
<name>Task 2: Update SettingsPage.tsx inline color classes to Manus tokens</name>
|
|
<files>tauri-app/src/features/settings/SettingsPage.tsx</files>
|
|
<action>
|
|
Read `SettingsPage.tsx`. Find all locations where color or background classes are applied inline in JSX as Tailwind utilities or inline style attributes — these should use Manus token Tailwind classes (added in plan 06-02).
|
|
|
|
**Specific replacements:**
|
|
1. Any `bg-[#0d1115]` or `bg-[#12171d]` or `bg-[#171d24]` → replace with `bg-manus-surface` or `bg-manus-elevated` as appropriate for the element role (nav bg = surface, card bg = elevated).
|
|
2. Any `text-[#a0a9b4]` or `text-gray-400` used for labels/descriptions → `text-manus-tx2`
|
|
3. Any `text-[#f2f4f7]` or `text-white` used for primary content text → `text-manus-tx`
|
|
4. Any `border-[#1e252d]` or similar border colors → `border-manus-elevated`
|
|
5. HF search area (lines ~571-644): If using raw hex Tailwind classes, switch to manus token versions
|
|
|
|
**Do NOT change:**
|
|
- Any `className` attributes that already use the existing `c-*` Tailwind token names (they inherit via CSS vars updated in plan 06-02)
|
|
- Layout properties (flex, grid, padding, gap, margin, width, height)
|
|
- Component structure, logic, or event handlers
|
|
- The `.sp-*` BEM class names (those are handled in Task 1 via CSS)
|
|
- Any dynamic or conditional class logic — preserve as-is
|
|
|
|
If SettingsPage.tsx has very few inline hex classes (the RESEARCH notes it mostly uses `.sp-*` BEM classes), this task may be small. Confirm by reading the file — if all coloring is done via `.sp-*` CSS classes (already handled in Task 1), this task only needs to verify correctness and make no changes. Still create the SUMMARY confirming the audit.
|
|
</action>
|
|
<verify>
|
|
<automated>cd tauri-app && npm run build 2>&1 | tail -10</automated>
|
|
</verify>
|
|
<done>TypeScript build passes. SettingsPage.tsx uses Manus token classes or inherits via updated CSS vars. No hardcoded hex colors for backgrounds/text remain in inline JSX.</done>
|
|
</task>
|
|
|
|
</tasks>
|
|
|
|
<verification>
|
|
- `npm run build` passes clean
|
|
- SettingsPage.css `.sp-nav` uses `var(--manus-surface)` for background
|
|
- SettingsPage.css `.sp-card` uses `var(--manus-elevated)` for background
|
|
- SettingsPage.css `.sp-section-title` uses `var(--manus-tx)` for color
|
|
- Two-panel layout is visually intact (no layout regressions)
|
|
- Settings page accessible and all sections navigable
|
|
</verification>
|
|
|
|
<success_criteria>
|
|
- Settings page left nav is #1E1E1E (Manus surface), not navy-black
|
|
- Cards/sections are #262626 (Manus elevated)
|
|
- Text hierarchy is correct: titles #F3F4F6, labels/descriptions #9CA3AF
|
|
- All form inputs, selects, and buttons remain functional
|
|
- Build passes clean
|
|
</success_criteria>
|
|
|
|
<output>
|
|
After completion, create `.planning/phases/06-chat-ui-redesign/06-03-SUMMARY.md`
|
|
</output>
|