Skip to content

Restyle Inventory page as Pocket Ledger mobile concept - #280

Merged
Monster0506 merged 2 commits into
mainfrom
feat/inventory-pocket-ledger-mobile
Sep 20, 2026
Merged

Monster0506 merged 2 commits into
mainfrom
feat/inventory-pocket-ledger-mobile

Conversation

@Monster0506

@Monster0506 Monster0506 commented Sep 20, 2026

Copy link
Copy Markdown
Member

Summary

Restyles the Inventory page (/inventory) using the "Pocket Ledger" mobile design concept explored in design/mobile-mockups/c-pocket-ledger.html — a big total-value hero, floating item cards with category-inferred icon badges, and a pill "Add item" CTA — then reconciled it against the site's real design-system tokens so it matches the rest of the app's colorscheme (Pitt Royal blue / gold, glass surfaces) at every width, not a separate palette.

Changes

  • Features/PhysicalAssets/Inventory.razor / Inventory.razor.css — page header restyled; no page-eyebrow (matches Physical Assets); desktop switches to the shared serif --font-display title and row layout.
  • Features/PhysicalAssets/InventoryList.razor / InventoryList.razor.css — total-value hero card, item rows with category icon badges (electronics/housewares/pantry/furniture/apparel/generic), Edit/Delete moved into the expanded detail panel for a cleaner collapsed row (Revalue stayed in place). On desktop (min-width: 48rem) the item list becomes one glass pane with hairline-divided rows, matching NetWorthCalculator's .records-card pattern instead of floating cards.
  • Components/App.razor — added Sora/Inter Google Fonts link (scoped .razor.css files can't use @import).
  • Colors are token-driven end to end: the --pl-* custom properties resolve to the shared --brand/--glass-bg/--text/--accent-text tokens, so mobile and desktop render the identical palette — only the layout (floating cards vs. glass pane with hairlines, column vs. row header) differs by breakpoint.

Preserved

Every test-critical selector (.asset-row, .asset-row-summary, button.btn-primary, input[placeholder='Name'/'Category']) and all @code logic are untouched aside from two new pure helper methods (CategoryIconKey/CategoryIconMarkup).

Verification

  • 240/240 tests pass (dotnet test)
  • dotnet format / prettier --check clean
  • Live-verified against the running container at 390px and 1440px viewports: empty state, populated list with real AI valuations, expand/collapse, Edit/Delete/Revalue all functional; desktop visually matches Physical Assets/Financial (same glass card, serif title, brand-blue buttons).

@Monster0506
Monster0506 merged commit d803251 into main Sep 20, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant