SaaS platform UX polish: layout, navigation, error handling #39

claude · 2026-04-09T19:52:59+02:00

claude commented

2026-04-09 19:52:59 +02:00

Summary

Comprehensive UX polish for the SaaS platform UI based on Playwright audit (22 screenshots) and source code analysis. 9 files changed across 7 commits.

Batch 1: Layout Fixes

Label/value collision fixed — "Slugdefault", "Max Agents3" etc. now properly spaced. Created platform.module.css with DS-variable-based classes (kvRow with explicit width: 100%).
Hardcoded text-white replaced — All Tailwind dark-only color classes (text-white, text-white/60, bg-white/5, border-white/10) replaced with DS CSS variables (--text-primary, --text-muted, --border-subtle). Light theme now works correctly.
Redundant "Open Server Dashboard" button removed from header (kept in Server Management card + sidebar footer).

Sidebar active state — Current page now highlighted via active prop on Sidebar.Section.
Breadcrumbs — Dynamic breadcrumbs based on route ("Dashboard", "License", "Admin > Tenants").
Sidebar collapse — Now functional (was hardcoded collapsed={false} with no-op handler).
Username fallback — Always shows user avatar/logout (was missing when username was null).
Lucide icons — Replaced 4 custom SVG components with lucide-react icons.
Server controls — TopBar still shows status filters/time range (DS limitation noted in code comment — requires DS change to make controls optional).

Batch 3: Error Handling & Components

OrgResolver — Error state now shows EmptyState + Retry button (was blank screen).
DashboardPage — Added error state for failed tenant/license fetch.
AdminTenantsPage — Added error state, date formatting, empty state.
License token — Raw <button> replaced with DS Button, copy-to-clipboard button with toast notification.

Batch 4: Polish

Tier colors unified — Single tierColor() utility in utils/tier.ts handles both uppercase (BUSINESS/HIGH/MID/LOW) and lowercase (enterprise/pro/starter) tier names.
Feature badges — Disabled features now use warning (amber) instead of auto (inconsistent hash-based color).
Admin tenant switch — AlertDialog confirmation before context switch.
Sign-in page — Password visibility toggle (eye icon), branding changed from "cameleer3" to "Cameleer".

Test Plan

Dashboard: label/value pairs properly spaced (Slug on left, "default" on right)
Toggle light theme: all text readable (no white-on-white)
Sidebar: current page highlighted, collapse works, breadcrumbs show
License: Show/Hide token button, Copy button with toast confirmation
Admin tenants: click row shows confirmation dialog before switching
Sign-in: password eye toggle works, branding says "Cameleer"
Error states: disconnect network briefly, OrgResolver shows retry button

## Summary Comprehensive UX polish for the SaaS platform UI based on Playwright audit (22 screenshots) and source code analysis. 9 files changed across 7 commits. ### Batch 1: Layout Fixes - **Label/value collision fixed** — "Slugdefault", "Max Agents3" etc. now properly spaced. Created `platform.module.css` with DS-variable-based classes (`kvRow` with explicit `width: 100%`). - **Hardcoded `text-white` replaced** — All Tailwind dark-only color classes (`text-white`, `text-white/60`, `bg-white/5`, `border-white/10`) replaced with DS CSS variables (`--text-primary`, `--text-muted`, `--border-subtle`). Light theme now works correctly. - **Redundant "Open Server Dashboard" button** removed from header (kept in Server Management card + sidebar footer). ### Batch 2: Navigation - **Sidebar active state** — Current page now highlighted via `active` prop on `Sidebar.Section`. - **Breadcrumbs** — Dynamic breadcrumbs based on route ("Dashboard", "License", "Admin > Tenants"). - **Sidebar collapse** — Now functional (was hardcoded `collapsed={false}` with no-op handler). - **Username fallback** — Always shows user avatar/logout (was missing when username was null). - **Lucide icons** — Replaced 4 custom SVG components with `lucide-react` icons. - **Server controls** — TopBar still shows status filters/time range (DS limitation noted in code comment — requires DS change to make controls optional). ### Batch 3: Error Handling & Components - **OrgResolver** — Error state now shows EmptyState + Retry button (was blank screen). - **DashboardPage** — Added error state for failed tenant/license fetch. - **AdminTenantsPage** — Added error state, date formatting, empty state. - **License token** — Raw `<button>` replaced with DS `Button`, copy-to-clipboard button with toast notification. ### Batch 4: Polish - **Tier colors unified** — Single `tierColor()` utility in `utils/tier.ts` handles both uppercase (BUSINESS/HIGH/MID/LOW) and lowercase (enterprise/pro/starter) tier names. - **Feature badges** — Disabled features now use `warning` (amber) instead of `auto` (inconsistent hash-based color). - **Admin tenant switch** — AlertDialog confirmation before context switch. - **Sign-in page** — Password visibility toggle (eye icon), branding changed from "cameleer3" to "Cameleer". ## Test Plan - [ ] Dashboard: label/value pairs properly spaced (Slug on left, "default" on right) - [ ] Toggle light theme: all text readable (no white-on-white) - [ ] Sidebar: current page highlighted, collapse works, breadcrumbs show - [ ] License: Show/Hide token button, Copy button with toast confirmation - [ ] Admin tenants: click row shows confirmation dialog before switching - [ ] Sign-in: password eye toggle works, branding says "Cameleer" - [ ] Error states: disconnect network briefly, OrgResolver shows retry button

claude added 10 commits 2026-04-09 19:52:59 +02:00

fix: platform label/value spacing and neutral license badge colors 5c4a84e64c

Disabled features on the license page now show 'Not included' with a
neutral (auto) badge color instead of 'Disabled' in error red, which
looked like an actionable error rather than a plan tier indicator.

Label/value spacing on DashboardPage already used flex justify-between
correctly — no change needed there.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Add SaaS platform UX polish design spec with audit findings 1133763520

Playwright audit (22 screenshots) + source code audit covering all
platform pages. Spec defines 4 batches: layout fixes (label/value
collision, hardcoded colors), header/navigation (hide server controls,
sidebar active state), error handling & components (DS adoption,
copy-to-clipboard, error states), and polish (tier colors, badges).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Add SaaS platform UX polish implementation plan (8 tasks) e84e53f835

Detailed step-by-step plan covering layout fixes (label/value collision,
DS variable adoption), header/navigation (sidebar active state,
breadcrumbs, collapse), error handling, DS component adoption, sign-in
improvements, and polish (tier colors, badges, confirmations).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

fix: add password visibility toggle and fix branding to 'Cameleer' f9b1628e14

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix: replace hardcoded text-white with DS variables, fix label/value layout 7c7d574aa7

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix: sidebar active state, breadcrumbs, collapse, username fallback, lucide icons e3d9a3bd18

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix: unify tier color mapping, fix feature badge colors 7d4126ad4e

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix: replace raw button with DS Button, add token copy-to-clipboard 798ec4850d

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix: add error states to OrgResolver, DashboardPage, AdminTenantsPage ce1655bba6

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix: add confirmation dialog before tenant context switch

CI / build (push) Successful in 1m18s

Details

CI / build (pull_request) Successful in 1m19s

Details

CI / docker (pull_request) Has been skipped

Details

CI / docker (push) Successful in 1m1s

Details

af7abc3eac

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

hsiegeln merged commit 0ba896ada4 into main

2026-04-09 19:56:24 +02:00

hsiegeln referenced this issue from a commit

2026-04-09 19:56:25 +02:00

Merge pull request 'SaaS platform UX polish: layout, navigation, error handling' (#39) from feature/saas-ux-polish into main

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: cameleer/cameleer-saas#39