[charlesponti]

Summary

Still's hand-rolled UI is replaced with the shared @ponti-studios/ui package (1.8.0, public npm) so it matches other Ponti apps.

• Styling: Tailwind v4 (@tailwindcss/vite) plus the package's styles.css and tokens. src/style.css went from 231 lines to a few imports. The custom palette and Google Fonts are gone.
• Components:
  • Sheets → Dialog (bottom sheet on phones, modal on desktop).
  • Row menus → DropdownMenu.
  • Buttons, badges and cards → Button, Badge, Card.
  • Forms → TextField and Select.
  • Desktop list → Table.
  • Stat tiles → MetricCard.
  • Empty, error and loading states → EmptyState, Alert, Spinner.
  • User avatar → Avatar.
• Dependencies: lucide-react bumped from 0.468 to 1.x to match the package. The package ships TS source, so Vite transpiles it.
• Unchanged: routing, store, API and auth.

Notes

• The phone bottom tab bar and the sidebar are still custom layout built from Button and tokens. The package's Tabs are panel tabs, and its Navigation is a top bar, so neither fits.
• Status badges no longer use per-status colours. They use the package's Badge variants.
• Item.color in mapping.ts is now unused by the UI. I left it alone to keep this diff focused.

Testing

• tsc -b, npm test (4 passed) and npm run build pass.
• Drove the app in Chromium with a mocked API at 390px and 1280px. The overview, add-item sheet and row menu render. The sheet closes on Escape and the menu shows Edit, Archive and Delete.
• Not checked: dark mode, real API data, and the ⌘K shortcut's focus behaviour.

🤖 Generated with Claude Code

https://claude.ai/code/session_01DacRXgSj6Gg58a5Md8nBup

---

Generated by Claude Code

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 2ebec60633

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[Copilot]

Copilot review overview

🟡 Changes recommended

Mobile dialog safe-area and breakpoint regressions, plus a category-filter collision, should be resolved before approval.

Review effort: Balanced
Findings: 3

Open (3)

• Prevent user category values from colliding with the all sentinel · New
• Align dialog breakpoint with the mobile shell at md · New
• Add safe-area bottom padding to mobile dialog content · New

What changed in this PR

Replaces the custom interface with the shared Ponti UI system and Tailwind v4.

Changes:

• Migrates controls, dialogs, tables, cards, and feedback states to shared components.
• Rebuilds responsive layouts using Tailwind utilities.
• Adds required UI and Tailwind dependencies.

File	Description
vite.config.ts	Enables Tailwind’s Vite plugin.
src/​style.css	Imports Tailwind and shared UI styles.
src/​components/​Sheet.tsx	Replaces custom sheets with Dialog.
src/​components/​Overview.tsx	Migrates metrics, cards, badges, and buttons.
src/​components/​Menu.tsx	Uses shared dropdown menus.
src/​components/​ItemSheet.tsx	Migrates item form controls.
src/​components/​ItemList.tsx	Adds shared selects, cards, badges, and table.
src/​components/​GroupSheet.tsx	Migrates group form controls.
src/​components/​Groups.tsx	Uses shared cards and empty states.
src/​App.tsx	Rebuilds application chrome and feedback states.
README.md	Documents the new UI conventions.
package.json	Adds UI and Tailwind dependencies.
package-lock.json	Locks the new dependency graph.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.