Polish sidebar UI and clean up implementation

[AnthonyRonning]

Summary

• Cherry-picks the two non-merge commits from UI: sidebar chat list, credit usage, theme #498 for the sidebar, history list, and credit usage visual polish.
• Removes dev/mock-only sidebar chats and credit preview code.
• Keeps project API calls on the existing OpenSecret context client and preserves production billing semantics while retaining the new footer design.

Verification

• Prettier via pre-commit
• bun run build
• bun test

Original PR: #498

---

Summary by CodeRabbit

• Style

  • Increased base markdown text size, line-height, and slight letter-spacing for improved readability
  • Updated sidebar sizing/spacing, refined hover/focus visuals, and tightened component positioning
  • Theme-driven scrollbar styling and font-family variable for consistent appearance

• Refactor

  • Unified credit-usage display and simplified account menu trigger
  • Centralized sidebar layout constants and theme application for more consistent layout behavior
  • Streamlined chat and history sidebar rendering and icon styling

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 67d55cb0-96b8-48d4-a0e2-6d5775b12978

📥 Commits

Reviewing files that changed from the base of the PR and between 003d4d8 and 7b463d6.

📒 Files selected for processing (6)

• frontend/src/components/AccountMenu.tsx
• frontend/src/components/ProjectDetailView.tsx
• frontend/src/components/Sidebar.tsx
• frontend/src/components/UnifiedChat.tsx
• frontend/src/constants/layout.ts
• frontend/src/routes/_auth.chat.$chatId.tsx

🚧 Files skipped from review as they are similar to previous changes (3)

• frontend/src/routes/_auth.chat.$chatId.tsx
• frontend/src/components/ProjectDetailView.tsx
• frontend/src/components/Sidebar.tsx

---

📝 Walkthrough

Walkthrough

Introduces centralized sidebar layout constants (width now 296px), increases markdown typography (font-size 15px, line-height 1.65, letter-spacing 0.1px), centralizes theme root application, replaces several hardcoded sidebar/grid sizes with shared constants, and updates CreditUsage and Markdown component APIs.

Changes

Cohort / File(s)	Summary
Layout constants & sidebar wiring frontend/src/constants/layout.ts, frontend/src/components/Sidebar.tsx, frontend/src/components/ProjectDetailView.tsx, frontend/src/components/UnifiedChat.tsx, frontend/src/routes/_auth.chat.$chatId.tsx	Adds layout.ts with SIDEBAR_* constants and helpers; replaces hardcoded 280px grid/width classes with CSS-variable-driven classes and inline SIDEBAR_LAYOUT_STYLE; adjusts overflow clipping and flex sizing for sidebar and main layouts.
Chat history / sidebar rows frontend/src/components/ChatHistoryList.tsx	Removes SIDEBAR_TITLE_FADE overlay system; centralizes ellipsis trigger visibility via helper; separates selection checkbox into absolute layer; standardizes Lucide icon strokeWidth to 2; adjusts pull-to-refresh container and pinned header.
Account menu & billing UI frontend/src/components/AccountMenu.tsx, frontend/src/components/CreditUsage.tsx	Replaces plan-Badge + ring usage UI with a single CreditUsage link to /pricing; CreditUsage no longer accepts layout prop and unifies to one view, computes planLabel from billingStatus, derives percentUsed when data present, and omits dev/mock-credit logic.
Markdown & chat typography frontend/src/chat.css, frontend/src/components/markdown.tsx	Increases .markdown-body selectors from 14→15px and line-height 1.5→1.65, adds letter-spacing: 0.1px; removes fontSize/fontFamily props from Markdown; adds maple-thin-scrollbar class to ResponsiveTable wrapper.
Theme & stylesheet variables frontend/src/contexts/ThemeContext.tsx, frontend/src/index.css, frontend/tailwind.config.js	Introduces applyRootTheme to set document.documentElement.dark and color-scheme; moves body font to --app-font-family and sets form controls to inherit; adds themed sidebar scrollbar variables and .maple-thin-scrollbar/.sidebar-scrollbar styling; configures Tailwind fontFamily.sans to use --app-font-family.
Branding & small UI tweaks frontend/src/components/TopNav.tsx, frontend/src/components/MapleWordmark.tsx	Refines TopNav brand layout sizing and image containment; shifts MapleWordmark SVG glyphs down via translated <g> and increases viewBox height.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 minutes

Possibly related PRs

• Usage visibility #30: Related to CreditUsage and billing UI changes (shared changes to token/usage display and component API).
• fix: implement responsive table wrapper to prevent chat layout overflow #117: Related to Markdown/ResponsiveTable behavior—this PR adds maple-thin-scrollbar and removes Markdown font props.
• feat: add simple pull-to-refresh to chat history sidebar #368: Related to ChatHistoryList and pull-to-refresh/sidebar layout adjustments; shares row/overflow/ellipsis logic changes.

Poem

🐰 Sidebar grows to breathe and hum,
Fonts stretch their legs — a clearer drum,
Scrollbars gleam in theme-tamed hue,
Credits sing where badges flew,
Hoppity tweaks — the UI’s done! ✨

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main focus of the changeset: visual polish and implementation cleanup across sidebar UI components and layout constants.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch pr-498-sidebar-credit-ui-polish

---

_{Review rate limit: 3/5 reviews remaining, refill in 13 minutes and 24 seconds.}

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

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 6 additional findings.

[cloudflare-workers-and-pages]

Deploying maple with    Cloudflare Pages

Latest commit:	7b463d6
Status:	✅  Deploy successful!
Preview URL:	https://f2faad7a.maple-ca8.pages.dev
Branch Preview URL:	https://pr-498-sidebar-credit-ui-pol.maple-ca8.pages.dev

View logs

[marksftw]

Looks good. New text size, spacing, and color makes the entire app easier to read.

[marksftw]

Minor edge case, the usage meter truncates on "Tomorrow". Not a blocker. I think we release it and can iterate.