Admin SPA: extract shared components (Button, Spinner, Banner) and CSS design tokens

[waynesun09]

Summary

Extract duplicated UI patterns from route-level Svelte files into shared components under web/admin/src/lib/components/, and convert hardcoded hex values into CSS custom properties in app.css. This eliminates copy-paste drift and gives upcoming features (#510–#514) a consistent component foundation.

Prerequisite: PR #624 (DESIGN.md) and PR #625 (ESLint/Prettier/Stylelint + Husky) should merge first. DESIGN.md defines the token palette; the linter enforces component size limits.

Depends on: PR #617 (Barak's org list + OAuth worker) — the extraction targets App.svelte and OrgList.svelte as they exist on that branch.

Estimated effort: 14–16 hours (~2 days)

Problem

The admin SPA has zero shared components. Every file re-implements buttons, spinners, and banners with slight inconsistencies:

Pattern	Duplicated in	Drift
.btn base	App.svelte, OrgList.svelte	padding 0.35rem vs 0.4rem; border #aaa vs #888
.btn.primary	App.svelte, OrgList.svelte	bg #24292f (emphasis) vs #0969da (accent)
@keyframes spin	App.svelte (spin), OrgList.svelte (org-spin)	Duplicate animation definitions
Spinners	6 different sizes across 2 files	0.95rem, 1.1rem, 1.25rem, 2rem, 2.25rem, 2.75rem
.banner	App.svelte (error + warning), OrgList.svelte (error only)	Slight gap and border differences
.sr-only	OrgList.svelte only	Missing from App.svelte
Hardcoded hex values	~55 across both files	No design tokens

OrgList.svelte is 1,155 lines. App.svelte is 473 lines. Both exceed the 150-line component limit from PR #625.

Phases

Phase 1: CSS custom properties token file

Expand app.css from 6 lines into the token foundation. Every color, spacing, typography, and radius value from DESIGN.md becomes a CSS custom property under :root. Includes .sr-only utility and prefers-reduced-motion media query.

~55 hardcoded hex values across App.svelte and OrgList.svelte map to tokens. GitHub sign-in button colors (#0d1117 etc.) stay local — they're GitHub brand colors, not part of the design system.

Phase 2: Shared component extraction

Create web/admin/src/lib/components/ with:

Component	Props	Replaces
Spinner.svelte	size: 'sm'|'md'|'lg'|'xl', label: string	6 spinner implementations (normalized to 4 sizes)
Button.svelte	variant: 'default'|'primary'|'accent'|'muted'|'link', children, leading (snippet slot for spinner)	All .btn / .link-btn duplication
ButtonLink.svelte	href, variant, children	<a class="btn"> patterns in OrgList
Banner.svelte	variant: 'error'|'warning'|'success'|'info', dismissible, children, actions (snippet slot)	All .banner duplication
Card.svelte	children, heading snippet	Section containers
index.ts	—	Barrel export

All components use Svelte 5 runes ($props()) and follow DESIGN.md accessibility requirements (focus rings, ARIA attributes, reduced motion).

Spinner sizes normalized:

Size	Value	Replaces
sm	1rem	btn-refresh-spinner (0.95rem), App spinner (1.1rem)
md	1.25rem	row-spinner-disc (1.25rem)
lg	2rem	org-more-spinner (2rem), org-loading-spinner (2.25rem)
xl	2.75rem	boot-spinner (2.75rem)

Button variants:

• default — secondary actions (sign out, dismiss)
• primary — emphasis/dark bg (--bg-emphasis)
• accent — blue CTA for deploy/action (--fg-accent)
• muted — subtle, less prominent
• link — text-styled inline action (replaces .link-btn)

Phase 3: Migration

Replace inline implementations in App.svelte and OrgList.svelte with shared component imports. Delete duplicate CSS. Each route file should drop well below the 150-line limit after extraction.

Migration example (spinner):

<!-- Before -->
<span class="spinner" aria-hidden="true"></span>

<!-- After -->
<Spinner size="sm" label="Loading session" />

Migration example (button with spinner):

<!-- Before -->
<button type="button" class="btn btn-refresh" disabled={loading}>
  {#if loading}<span class="btn-refresh-spinner" aria-hidden="true"></span>{/if}
  Refresh
</button>

<!-- After -->
<Button disabled={loading} aria-busy={loading}
  onclick={() => void loadOrgs(true)}>
  {#snippet leading()}
    {#if loading}<Spinner size="sm" label="Refreshing" />{/if}
  {/snippet}
  Refresh
</Button>

Phase 4: Verification

• All linters pass (npm run lint, npm run format:check, npm run stylelint)
• svelte-check passes with zero errors
• No hardcoded hex values remain in component files (verified by grep)
• All components under 150 lines
• Visual regression check in browser at 1280px, 768px, 375px

Relationship to other issues

• Blocks Admin web: pick and search organizations you administer #510–Admin web: onboard and offboard repos from the org dashboard #514: These upcoming features will create new Svelte components that need buttons, spinners, and banners. Without this extraction, each feature would either duplicate styles or do ad-hoc extraction.
• After PR feat(admin): Worker OAuth, installations org list, and per-org layer analysis #617: The extraction targets files modified by PR feat(admin): Worker OAuth, installations org list, and per-org layer analysis #617 (App.svelte, OrgList.svelte). Should be implemented after feat(admin): Worker OAuth, installations org list, and per-org layer analysis #617 merges to avoid conflicts.
• After PR feat(admin): add DESIGN.md design system for admin SPA #624: DESIGN.md defines the canonical token values.
• After PR feat(admin): add ESLint, Prettier, and Stylelint for admin SPA #625: Linting enforces the 150-line component limit and code quality rules.

[fullsend-ai-triage]

RICE Priority Score: 0.3

Score breakdown

Dimension	Score	Reasoning
Reach	0.5	This is an internal admin SPA refactoring issue filed by a team member (waynesun09). It does not directly affect any of the three strategic customers (konflux-ci, openkaiden, guacsec) — they interact with fullsend-ai through the platform, not the admin SPA. The primary beneficiaries are the internal development team, and indirectly future features (#510–#514) that will build on the extracted components.
Impact	1	The issue addresses real code quality problems — duplicated UI patterns, 55 hardcoded hex values, and files exceeding the 150-line component limit. Extracting shared components eliminates copy-paste drift and gives upcoming features a consistent foundation. However, this is a developer-experience and maintainability improvement, not a fix for user-facing functionality or a customer-blocking issue.
Confidence	0.9	Very high confidence. The issue is exceptionally well-documented with specific files, line counts, a phased plan, migration examples, and an explicit effort estimate (14–16 hours). The scope is clearly bounded and the dependencies (PRs #617, #624, #625) are enumerated.
Effort	1.5	The author estimates 14–16 hours (~2 days), which aligns with the scope: creating 5 new shared components, extracting ~55 hardcoded values into CSS custom properties, migrating two large files (1,155 and 473 lines), and verifying across three breakpoints. Multiple dependencies (PRs #617, #624, #625) must merge first, adding coordination overhead.

Formula: (0.5 × 1 × 0.9) / 1.5 = 0.3