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)
9.3 KiB
9.3 KiB
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 triggerswindow.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", callsprojectsQuery.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](Loader2withanimate-spin) duringdeleteMutation.isPending- Button is
disabledto 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 opensRegisterProjectDialog- 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.tsxpackages/web/src/routes/settings/health.tsxpackages/web/src/routes/settings/projects.tsxpackages/web/src/components/RegisterProjectDialog.tsx