feat: redesign authenticated UI with home overview and settings hub
- Add HomePage with open sessions grid, projects overview, and session composer - Add SettingsPage with tabs for General, SSH Keys, Tool Types, Tool Configs - Update navigation to Home, Projects, Settings - Redirect legacy routes (/sessions, /ssh-keys, /tool-types, /tool-configs) - Apply Inter font and warm editorial styling - Update tests for new dashboard and projects pages Quality gates: typecheck pass, lint pass, 15/15 tests pass Refs: openspec/changes/ui-redesign-home-settings
This commit is contained in:
@@ -0,0 +1,106 @@
|
||||
# UI Redesign - Design
|
||||
|
||||
## Information Architecture
|
||||
|
||||
```
|
||||
App
|
||||
├── Home
|
||||
│ ├── Hero / status
|
||||
│ ├── Open sessions
|
||||
│ ├── Available projects
|
||||
│ └── Session creation
|
||||
├── Projects
|
||||
├── Settings
|
||||
│ ├── General
|
||||
│ ├── SSH Keys
|
||||
│ ├── Tool Types
|
||||
│ └── Tool Configs
|
||||
└── Legacy routes
|
||||
└── Redirect to new locations
|
||||
```
|
||||
|
||||
## Home Page
|
||||
|
||||
### Purpose
|
||||
|
||||
Provide a fast, glanceable overview of the user's active work.
|
||||
|
||||
### Sections
|
||||
|
||||
1. **Hero**
|
||||
- Greeting
|
||||
- Short status line
|
||||
- Primary actions: New Project, Open Session, Settings
|
||||
|
||||
2. **Summary strip**
|
||||
- Small count cards for sessions, projects, and tooling state
|
||||
|
||||
3. **Open Sessions**
|
||||
- Primary section
|
||||
- Session cards with project, repository, tool type, status, and actions
|
||||
|
||||
4. **Available Projects**
|
||||
- Secondary section
|
||||
- Project cards with quick entry into the project workspace
|
||||
|
||||
5. **Session composer**
|
||||
- Optional compact create flow if it fits the page cleanly
|
||||
|
||||
## Settings Page
|
||||
|
||||
### Layout
|
||||
|
||||
Tabbed shell with one content area and four tabs:
|
||||
|
||||
- General
|
||||
- SSH Keys
|
||||
- Tool Types
|
||||
- Tool Configs
|
||||
|
||||
### Tab Responsibilities
|
||||
|
||||
**General**
|
||||
- Theme
|
||||
- Git identity
|
||||
- Default editor
|
||||
|
||||
**SSH Keys**
|
||||
- List keys
|
||||
- Create key
|
||||
- Copy public key
|
||||
- Delete key
|
||||
|
||||
**Tool Types**
|
||||
- Browse tool catalog
|
||||
- Edit custom tool types
|
||||
- Delete custom tool types
|
||||
|
||||
**Tool Configs**
|
||||
- Browse per-tool configurations
|
||||
- Add/edit/delete configs
|
||||
- Keep the existing config model and API behavior
|
||||
|
||||
## Visual Direction
|
||||
|
||||
- Font: Inter for UI text
|
||||
- Code font: monospace only for technical fields
|
||||
- Palette: warm light surfaces, forest green primary, muted utility accents
|
||||
- Dark mode: charcoal surfaces with softened accents
|
||||
- Styling: editorial, structured, high-contrast hierarchy, minimal chrome
|
||||
|
||||
## Routing
|
||||
|
||||
- `/` -> Home
|
||||
- `/sessions` -> redirect to `/`
|
||||
- `/settings` -> General tab
|
||||
- `/settings/ssh-keys` -> SSH Keys tab
|
||||
- `/settings/tool-types` -> Tool Types tab
|
||||
- `/settings/tool-configs` -> Tool Configs tab
|
||||
- legacy `/ssh-keys`, `/tool-types`, `/tool-configs` -> redirect to settings tabs
|
||||
|
||||
## Component Strategy
|
||||
|
||||
- Reuse shell and existing APIs
|
||||
- Replace the dashboard page with the new home overview
|
||||
- Convert the settings layout into a shared tab shell
|
||||
- Keep changes focused to the frontend layer
|
||||
Reference in New Issue
Block a user