478a7f18e9
14 files in docs/wireframes/v2/ addressing 13 UX gaps from v1: - Theme spec with indigo brand, status tokens, terminal/diff tokens, dark mode, Geist typography, 6px radius, layered shadows - Wireframes for all pages with loading/error/empty states - Shared component specs (SaveIndicator, EmptyState, ErrorState, CommandPalette, ThemeToggle)
187 lines
9.3 KiB
Markdown
187 lines
9.3 KiB
Markdown
# Settings Pages (v2)
|
|
|
|
### Route: `/settings/*`
|
|
### Source: `packages/web/src/routes/settings.tsx`, `packages/web/src/routes/settings/projects.tsx`
|
|
|
|
---
|
|
|
|
## v1 -> v2 Changes
|
|
|
|
| Aspect | v1 | v2 |
|
|
|--------|----|----|
|
|
| Projects error state | None | `[AlertCircle]` + "Failed to load projects" + `[Retry]` |
|
|
| Delete button | Immediate (with `window.confirm`) | Shows `[spinner]` during mutation to prevent double-click |
|
|
| Health Check | Unchanged | Unchanged |
|
|
|
|
---
|
|
|
|
## Settings Layout (unchanged)
|
|
|
|
```
|
|
+=============================================================================+
|
|
| [CW] Initiatives Agents [*Settings*] [cmd-k] [sun] * |
|
|
+=============================================================================+
|
|
| |
|
|
| Settings |
|
|
| [ Health Check ] [*Projects*] |
|
|
| ----------------------------------------------------------------------- |
|
|
| |
|
|
| <Settings Page Outlet> |
|
|
| |
|
|
+=============================================================================+
|
|
```
|
|
|
|
`/settings` redirects to `/settings/health`.
|
|
|
|
---
|
|
|
|
## Projects -- Default State
|
|
|
|
```
|
|
+=============================================================================+
|
|
| Settings |
|
|
| [ Health Check ] [*Projects*] |
|
|
| ----------------------------------------------------------------------- |
|
|
| [ Register Project ] |
|
|
| |
|
|
| +-----------------------------------------------------------------------+ |
|
|
| | backend | |
|
|
| | github.com/org/backend-api | |
|
|
| | | |
|
|
| | Default branch: main [pencil] [trash] | |
|
|
| +-----------------------------------------------------------------------+ |
|
|
| |
|
|
| +-----------------------------------------------------------------------+ |
|
|
| | frontend | |
|
|
| | github.com/org/frontend-app | |
|
|
| | | |
|
|
| | Default branch: develop [pencil] [trash] | |
|
|
| +-----------------------------------------------------------------------+ |
|
|
| |
|
|
+=============================================================================+
|
|
```
|
|
|
|
### Project card anatomy
|
|
|
|
```
|
|
+------------------------------------------------------------------------+
|
|
| <project-name> |
|
|
| <project-url> |
|
|
| |
|
|
| Default branch: <branch> [pencil] [trash] |
|
|
+------------------------------------------------------------------------+
|
|
```
|
|
|
|
- `[pencil]` (Pencil icon): click to toggle inline edit mode
|
|
- `[trash]` (Trash2 icon): click triggers `window.confirm()`; Shift+click bypasses
|
|
|
|
### Inline branch editing (click pencil)
|
|
|
|
```
|
|
| Default branch: [develop________] [enter to save / esc to cancel] |
|
|
```
|
|
|
|
---
|
|
|
|
## Projects -- Error State
|
|
|
|
```
|
|
+=============================================================================+
|
|
| Settings |
|
|
| [ Health Check ] [*Projects*] |
|
|
| ----------------------------------------------------------------------- |
|
|
| |
|
|
| [AlertCircle] |
|
|
| Failed to load projects |
|
|
| |
|
|
| [ Retry ] |
|
|
| |
|
|
+=============================================================================+
|
|
```
|
|
|
|
- `[AlertCircle]` icon: `h-8 w-8 text-destructive`
|
|
- Error message: `text-sm text-destructive`
|
|
- `[ Retry ]` button: `variant="outline" size="sm"`, calls `projectsQuery.refetch()`
|
|
- `[ Register Project ]` button is hidden during error state
|
|
|
|
---
|
|
|
|
## Projects -- Delete In Progress
|
|
|
|
```
|
|
+------------------------------------------------------------------------+
|
|
| backend |
|
|
| github.com/org/backend-api |
|
|
| |
|
|
| Default branch: main [pencil] [spinner] |
|
|
+------------------------------------------------------------------------+
|
|
```
|
|
|
|
- `[trash]` icon replaced by `[spinner]` (`Loader2` with `animate-spin`) during `deleteMutation.isPending`
|
|
- Button is `disabled` to prevent double-click
|
|
- Only the card being deleted shows the spinner; other cards remain interactive
|
|
|
|
---
|
|
|
|
## Projects -- Empty State
|
|
|
|
```
|
|
+=============================================================================+
|
|
| Settings |
|
|
| [ Health Check ] [*Projects*] |
|
|
| ----------------------------------------------------------------------- |
|
|
| |
|
|
| +-----------------------------------------------------------------------+ |
|
|
| | | |
|
|
| | No projects registered | |
|
|
| | | |
|
|
| | [ Register Project ] | |
|
|
| | | |
|
|
| +-----------------------------------------------------------------------+ |
|
|
| |
|
|
+=============================================================================+
|
|
```
|
|
|
|
- `[ Register Project ]` button opens `RegisterProjectDialog`
|
|
- The top-right `[ Register Project ]` button is hidden when the empty state CTA is visible
|
|
|
|
---
|
|
|
|
## Projects -- Loading State
|
|
|
|
```
|
|
+=============================================================================+
|
|
| Settings |
|
|
| [ Health Check ] [*Projects*] |
|
|
| ----------------------------------------------------------------------- |
|
|
| [ Register Project ] |
|
|
| |
|
|
| +-----------------------------------------------------------------------+ |
|
|
| | ░░░░░░░░░░░░░░ | |
|
|
| | ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | |
|
|
| | | |
|
|
| | ░░░░░░░░░░░░░░░░░░░░░ ░░ ░░ | |
|
|
| +-----------------------------------------------------------------------+ |
|
|
| |
|
|
| +-----------------------------------------------------------------------+ |
|
|
| | ░░░░░░░░░░░░░░ | |
|
|
| | ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ | |
|
|
| | | |
|
|
| | ░░░░░░░░░░░░░░░░░░░░░ ░░ ░░ | |
|
|
| +-----------------------------------------------------------------------+ |
|
|
| |
|
|
+=============================================================================+
|
|
```
|
|
|
|
Skeleton cards mirror project card anatomy: name line, URL line, branch line with
|
|
pencil/trash placeholders. Shimmer animation sweeps left-to-right on a 1.5s loop.
|
|
|
|
---
|
|
|
|
## Source
|
|
|
|
- `packages/web/src/routes/settings.tsx`
|
|
- `packages/web/src/routes/settings/health.tsx`
|
|
- `packages/web/src/routes/settings/projects.tsx`
|
|
- `packages/web/src/components/RegisterProjectDialog.tsx`
|