Redesign UI with new design system (Trek)

[panteLx]

Summary

• Introduces a new flat, monochrome-first design system: reworked color tokens (with a distinct non-inverting brand canvas for the sign-in panel), Poppins/Geist type pairing, a tightened radius scale, and theme-scoped elevation
• Adds new shared primitives — list-row, segmented, entity-icon, micro-label, amount, admin-shell, quick-add-fab, appearance-card — and supporting utilities (lib/appearance.ts, lib/last-tracker.ts, hooks/use-local-storage-value.ts)
• Refreshes dashboard, admin, auth (login/register), trackers, schedules, statistics, and transactions pages to use the new system

Test plan

• npm run lint / npm run build
• Manually verify light/dark theme across dashboard, admin, auth, trackers, schedules, statistics, and transactions pages
• Check mobile nav, quick-add sheet/FAB, and command palette still function correctly

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added a redesigned dashboard with inline transaction editing and clearer summaries.
  • Added list/table views, improved filters, and balance totals for transactions.
  • Added appearance settings with theme and accent-color selection.
  • Added a desktop quick-add button and smarter tracker selection.
  • Added grouped schedules with streamlined actions and refreshed statistics charts.

• Improvements

  • Introduced a consistent visual design across authentication, profile, admin, tracker, and public pages.
  • Improved navigation layouts, list rows, badges, amounts, and responsive interactions.
  • Updated page titles and descriptions with clearer German wording.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 9e64ddb1-7629-413e-8c2f-5d8c48cdd494

📥 Commits

Reviewing files that changed from the base of the PR and between c23e537 and b238461.

📒 Files selected for processing (65)

• app/admin/logs/page.tsx
• app/admin/page.tsx
• app/admin/settings/page.tsx
• app/admin/trackers/page.tsx
• app/admin/users/page.tsx
• app/globals.css
• app/layout.tsx
• app/login/page.tsx
• app/page.tsx
• app/profile/page.tsx
• app/register/page.tsx
• app/schedules/page.tsx
• app/statistics/page.tsx
• app/t/[slug]/page.tsx
• app/trackers/[id]/settings/page.tsx
• app/transactions/page.tsx
• components/admin/admin-logs-client.tsx
• components/admin/admin-nav.tsx
• components/admin/admin-overview.tsx
• components/admin/admin-settings-client.tsx
• components/admin/admin-shell.tsx
• components/admin/admin-trackers-client.tsx
• components/auth/login-form.tsx
• components/dashboard/dashboard-client.tsx
• components/layout/app-footer.tsx
• components/layout/app-header.tsx
• components/layout/command-palette.tsx
• components/layout/mobile-nav.tsx
• components/layout/page-container.tsx
• components/layout/quick-add-fab.tsx
• components/layout/quick-add-sheet.tsx
• components/layout/theme-toggle.tsx
• components/layout/user-menu.tsx
• components/profile/appearance-card.tsx
• components/schedules/schedules-client.tsx
• components/statistics/statistics-client.tsx
• components/trackers/csv-import-dialog.tsx
• components/trackers/tracker-color-picker.tsx
• components/trackers/tracker-pill-row.tsx
• components/trackers/tracker-settings-client.tsx
• components/transactions/transaction-edit.tsx
• components/transactions/transactions-client.tsx
• components/ui/amount.tsx
• components/ui/badge.tsx
• components/ui/button.tsx
• components/ui/card.tsx
• components/ui/checkbox.tsx
• components/ui/direction-toggle.tsx
• components/ui/empty-state.tsx
• components/ui/entity-icon.tsx
• components/ui/input.tsx
• components/ui/list-row.tsx
• components/ui/micro-label.tsx
• components/ui/page-header.tsx
• components/ui/section-card.tsx
• components/ui/segmented.tsx
• components/ui/select.tsx
• components/ui/stat-tile.tsx
• components/ui/table.tsx
• components/ui/textarea.tsx
• hooks/use-local-storage-value.ts
• lib/appearance.ts
• lib/chart-colors.ts
• lib/last-tracker.ts
• lib/utils.ts

---

📝 Walkthrough

Walkthrough

This PR establishes a refreshed application UI system with new theme tokens and shared components, restructures navigation and admin layouts, adds appearance and quick-add controls, and refactors dashboard, transaction, schedule, statistics, tracker settings, and public tracker interfaces.

Changes

Theme and shared UI foundation

Layer / File(s)	Summary
Theme, appearance, and persistence foundation app/globals.css, app/layout.tsx, hooks/*, lib/*	Adds accent schemes, font setup, design tokens, local-storage synchronization, chart color updates, tracker recall, and date/grouping utilities.
Shared UI primitives and display contracts components/ui/*	Adds or updates Amount, EntityIcon, ListRow, Segmented, MicroLabel, StatTile, badges, buttons, cards, tables, and related styling contracts.

Navigation and administration

Layer / File(s)	Summary
Navigation and quick-add flow components/layout/*	Centralizes navigation metadata, adds responsive segmented navigation, introduces the quick-add FAB, updates tracker preselection, and adds theme toggle controls.
Admin shell and administration views app/admin/*, components/admin/*	Wraps admin pages in AdminShell, groups responsive admin navigation, updates overview tiles, and refreshes admin panel styling.
Authentication, profile, and page presentation app/login/*, app/register/*, app/profile/*, app/page.tsx, app/schedules/page.tsx, app/statistics/page.tsx, components/auth/*	Updates authentication branding, profile appearance settings, page metadata, session presentation, and shared login card styling.

Feature interfaces

Layer / File(s)	Summary
Transaction editing and dashboard workflow components/transactions/*, components/dashboard/*	Centralizes transaction edit and delete mutations, adds inline editing, replaces the dashboard booking sheet, and introduces refreshed dashboard list, schedule, and statistic sections.
Schedules and statistics views components/schedules/*, components/statistics/*	Reworks schedule filtering and actions with segmented controls and list rows, and updates statistics filters, summaries, empty states, tooltips, legends, and charts.
Tracker settings and public tracker presentation components/trackers/*, app/t/[slug]/page.tsx	Converts tracker settings collections to card and row layouts, updates tracker selection controls, and standardizes public tracker amounts and transaction rows.

Estimated code review effort: 5 (Critical) | ~120 minutes

Possibly related PRs

• panteLx/BetterTracker#12: Adds the schedule-to-transaction API flow used by the dashboard schedule booking changes.
• panteLx/BetterTracker#22: Shares transaction filtering and editing UI changes with this transaction client refactor.
• panteLx/BetterTracker#27: Introduces the admin hydration composition that this PR wraps in AdminShell.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch redesign/trek-design

Warning

Tools execution failed with the following error:

Failed to run tools: 14 UNAVAILABLE: read ECONNRESET

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}