docs(06-chat-ui-redesign): create phase 6 plans
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
3d57acbc7d
commit
3364dba5aa
4 files changed
+722
No files matched your search
@@ -0,0 +1,214 @@
|
||||
---
|
||||
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>
|
||||
Reference in new issue
Block a user