feat(ui): redesign every module page to the HiFi design system + add Doctor page - #131
Merged
Conversation
…ystem Implements the emerald + teal design system from the Claude Design HiFi mock across the full surface — public, auth, and authenticated pages — and adds a new admin Doctor page that mirrors `sm doctor`. Design system primitives in packages/ui: - StatCard, SectionTitle, FilterPills (new) - PageShell, AuthCardShell, ErrorScreen (refreshed) - TONE map at packages/ui/src/lib/tone.ts — single source for semantic badge / chrome class triplets - Globals: emerald primary scale (oklch hue 158), Sora display font Pages redesigned: - Landing — mesh blobs, gradient hero, terminal CTA, 6-feature grid, quickstart split with terminal, gradient CTA strip, light footer - Auth (Login / Register / Forgot / Reset / AcceptInvite / VerifyEmail) — light glass card on emerald mesh blobs, simple_module / python lockup - Dashboard Home — 4 stat cards, system module grid, demo activity panels gated to `import.meta.env.DEV` - Doctor (NEW, /dashboard/doctor) — admin-only page with stat cards, static checks, recent migrations, dev server, sm CLI runner, env vars, installed modules. Wired into AdminLayout sidebar - Users Index — workspace-wide aggregate stat cards (active/pending), search + filters, avatar table with status badges; Roles tab with role cards - Users Edit / Invite — section cards with gradient accent bars, role pill picker, alert-dialog confirmation on Disable + reset-link - Permissions UserEdit / RoleEdit — 3 stat cards, search, per-module switch grid with proper grid borders for odd-length lists - Settings Browse / Create / Edit / ModulesEdit — uniform PageShell + Card forms; module navigator with search - Profile — gradient avatar, verified badge, role pills - Error (403/404/500) — gradient HTTP numerals + accent badge per status Backend additions: - UserService.count_user_states() — workspace-wide active/unverified counts served as `aggregates` prop so stat cards reflect totals not the page slice - Dashboard module registers Doctor in ADMIN_SIDEBAR; doctor route slimmed to only system_info + module_count Notable fixes from the simplify pass: - Reset-link generation requires AlertDialog confirmation (was firing on click) - ForgotPassword keeps anti-enumeration WHY comment - useMemo Sets / reduce / filter in permission editors (was rebuilt per keystroke in the search box) - Lookup table replaces ternary chains in Doctor CheckRow - Grid border math corrected for odd-length permission lists - Manage permissions link from User Edit now goes to /edit (was 405) - Vite dev port reflected as 5050 in README
Deploying simple-module-python with
|
| Latest commit: |
e8ba4bb
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://661a6c84.simple-module-python.pages.dev |
| Branch Preview URL: | https://feature-great-liskov-674388.simple-module-python.pages.dev |
The public landing nav and login form both relabeled in the redesign: - Public nav: "Get Started" → "Log in" / "Sign up" - Login form submit: "Sign in" → "Log in" Update the e2e _login helper to match the new role-based selectors.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements the SimpleModulePython HiFi design (emerald + teal palette, Sora display font, glass cards) across the full UI surface — public landing, all auth flows, and every authenticated module page. Adds a new Doctor admin page mirroring
sm doctor. Surfaces module-page consistency through a small set of sharedpackages/uiprimitives.Also fixes a handful of real bugs surfaced during the implementation pass — see Bug fixes below.
What changed
Design system (
packages/ui)StatCard,SectionTitle,FilterPillsPageShell,AuthCardShell(glass card + emerald mesh blobs),ErrorScreen(gradient HTTP numerals + accent badge),PublicLayout(light surface + simple_module/python lockup)TONEmap atpackages/ui/src/lib/tone.ts— single source of truth for semantic badge / chrome class tripletsPages redesigned
import.meta.env.DEV/dashboard/doctor, admin-only — stat cards, static checks, recent migrations, dev server status, sm CLI runner, env vars, installed modules gridBackend additions
UserService.count_user_states()— workspace-wide active/unverified counts served as newaggregatesprop on/users/adminADMIN_SIDEBAR; doctor route slimmed to send onlysystem_info+module_countBug fixes from the simplify pass
Active/Pending invitesstat cards now reflect workspace totals (were filtering the current page slice → wrong counts on page 2+)ForgotPasswordso future devs don't "fix" the always-show-confirmation behaviour/edit(was 405)Performance / cleanups
useMemoforSetconstructions andgroups.reduce/filterin permission editors (was rebuilt per keystroke)CheckRowTONEmap deduplicated acrossHome.tsxanddoctor-data.tsPublicLayout,AuthCardShell,Doctorslimmed below the 300-line cap by extractingDemoPlaceholdersandAccountStatusCardsiblingsTest plan
npx biome ci— clean (1 pre-existing warning inModuleForm.tsx, unrelated)tsc --noEmit -p host/client_app/tsconfig.json— cleanscripts/check_file_size.py— under 300 linesscripts/check_hardcoded_strings.py— clean/dashboard/,/file-storage,/users/admin,/feature_flags,/admin/background-tasks,/settings,/dashboard/doctor,/users/me,/users/admin/invite,/users/admin/<id>,/permissions/users/<id>/edit,/permissions/roles/<id>/edit,/users/login,/users/forgot-password) return 200