Skip to content

Rebuild the UI in the Workshop design - #7

Merged
kroqdotdev merged 2 commits into
mainfrom
feat/workshop-ui
Nov 9, 2026
Merged

Rebuild the UI in the Workshop design#7
kroqdotdev merged 2 commits into
mainfrom
feat/workshop-ui

Conversation

@kroqdotdev

@kroqdotdev kroqdotdev commented Nov 7, 2026 •
edited
Loading

Copy link
Copy Markdown
Owner

Summary

Rebuilds the whole app against the Workshop design spec (https://stowage-mockups.ouicu.app/workshop/): concrete background, charcoal sidebar, one amber primary, ink for selection, 2px rules under titles and sheet headings, cards only for objects, sheets for lists, status colour only on exceptions.

  • Foundation: new tokens and globals; Switch and Badge restyled; new primitives Panel, SheetHeading, StatStrip, TagChip, DueTag, StatusText, Eyebrow.
  • Shell: new login (AuthShell); sidebar on desktop, rail on tablet (768–1023), top bar and bottom nav on phone; new user menu.
  • Pages: dashboard, assets list, asset detail, locations, services (schedule, calendar, service plans, providers), labels, settings, taxonomy, tags, asset create/edit, and scan.
  • Asset detail: adds next-service, label preview and photo panels, plus inline status and location pickers.
  • Locations: rebuilt as a tree with rolled-up counts and a detail panel. location-tree is removed.
  • Copy: "service group" is now "service plan" in the UI.
  • Client-only values: the hydrated flag, media queries and the hint flag read through useSyncExternalStore, so server and client render the same markup. Query data is gated until hydration.

Removed on purpose

  • Dashboard: the location breakdown and quick-actions cards (the spec has service due, assets by category, recently updated).
  • Scheduled list: the separate "Due soon" reminder badge; rows sit in Overdue / Due this week / Due this month / Later instead.
  • Service history: the "Logged … on {date}" line per record.
  • Calendar: "Last {date}" on day chips.
  • Category and keyword colour picker. The server still needs a colour, so new rows get a neutral default; crud/color-field.tsx is deleted.

Review fixes

Two independent reviews found issues that are fixed in the follow-up commit:

  • One global search dialog and shortcut (it was mounted three times).
  • The old header is gone from the service plan detail page.
  • Delete is blocked, with the reason shown, for locations that still hold assets or sub-locations. Category and keyword delete copy matches the server rule.
  • The nav overdue badge refreshes after services are logged and when scheduling is toggled.
  • The Services header and the list share one due-bucket rule.
  • The dashboard date renders after hydration. "Changed in the last day" uses a real count instead of the 10-item list.
  • Keyboard focus outline restored on buttons, inputs, selects and checkboxes.
  • Phone asset cards have a visible actions button again, and modifier-clicks open new tabs.
  • The photo slot shows processing and updates when the image is ready.
  • "Log other service" copy now states that it moves the next service date.
  • The location tree expands to show the selection.
  • Label panel no longer re-seeds templates you deleted.
  • Accessibility fixes: template list semantics, the covered phone top bar is made inert, overdue counts are in nav accessible names, and the scan field gets autofocus.
  • Smaller fixes: users table loading state, link button sizing, the status menu position, New location on the phone top bar only for admins, and the asset-change invalidation key.
  • Playwright specs updated for the new UI.

Test plan

  • pnpm typecheck clean
  • pnpm lint clean
  • pnpm test: 91 files, 418 tests passing
  • pnpm test:e2e (desktop and Pixel 7 projects): 76 passed, 6 skipped, 0 failed
  • All 14 routes loaded at 1440 and 390 wide: no horizontal scroll, no page errors
  • Manual pass on a real phone (scan, long-press select, bottom nav)

🤖 Generated with Claude Code

@kroqdotdev @claude
Rebuild the UI in the Workshop design
5fe3cfb 
Replace the old shadcn look with the Workshop spec: concrete background,
charcoal sidebar, one amber primary, ink for selection, 2px rules under
titles and sheet headings, cards only for objects and sheets for lists.

- Tokens, globals, Switch and Badge restyled; new Panel, SheetHeading,
  StatStrip, TagChip, DueTag, StatusText and Eyebrow primitives
- Login and app shell rebuilt (sidebar, tablet rail, phone top bar and
  bottom nav, user menu)
- Dashboard, assets list and detail, locations, services (schedule,
  calendar, plans, providers), labels, settings, catalog, tags, asset
  forms and scan redone against the spec
- Asset detail gains next-service, label and photo panels plus inline
  status and location pickers
- Locations page reworked into a tree with rolled-up counts and a
  detail panel; the old location-tree component is removed
- "Service group" copy renamed to "service plan"
- Hydration-safe client-only values via useSyncExternalStore
- Tests updated for the new markup

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Nov 7, 2026 •
edited
Loading

Copy link
Copy Markdown

Important

  • Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

Run configuration

  • Source mode: Auto
  • Repository: Unavailable
  • Branch: Unavailable
  • File: No configuration file from this repository applied
  • Commit: Unavailable
  • Layers: defaults
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: ad277b1d-5f5a-45d3-a109-10943b90985e
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

@kroqdotdev @claude
Address review findings on the Workshop UI
0752c83 
Fixes from the two PR #7 reviews:

- One global search dialog mounted in the shell; triggers share a store
- Plan detail header rendered by the client only, no stale server copy
- Overdue nav badge and dashboard refetch after service, location and
  feature changes (invalidate ["dashboard"], fix by-asset record key)
- Shared schedule buckets so "due this week" matches between the
  services header and the scheduled list; header count only on /services
  and /services/calendar
- Dashboard date rendered after hydration; changed-in-24h count no longer
  capped at 10
- Focus ring can't be cancelled by outline-none; link buttons lose padding
- Mobile top bar controls inert while a MobileBar covers them; rail and
  bottom nav announce "Services, N overdue"; action sheets honour autofocus
- Status picker opens as a popper so it stays on screen
- Photo slot polls while processing; Log other service copy explains the
  schedule effect; card kebab is a visible, named button and only plain
  clicks on the card open the asset
- Label template list uses list semantics; panel no longer reseeds
  templates; default template shows why it can't be deleted
- Users table shows skeleton rows while loading; Log service waits for
  settings and schedule queries
- Locations: delete disabled with a reason when a location has contents,
  409 handled, selection reveals ancestors, counts only located assets,
  "Show all" past 50, non-admin ?new=1 gets a toast; taxonomy default
  colour; unused color-field removed
- Mobile top bar offers New location only to admins
- E2E specs updated for the new markup (shared helpers, exact locators,
  row click instead of link)

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@kroqdotdev
kroqdotdev merged commit fd6e349 into main Nov 9, 2026
2 checks passed
@kroqdotdev
kroqdotdev deleted the feat/workshop-ui branch November 9, 2026 12:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@kroqdotdev