dvorakmortonxd/freezmo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Chat layout: history in the main sidebar, consistent header, cleaner icon

Browse source 
- Desktop: on /chat the main sidebar shows the chat list (search, New chat,
  items with rename/delete, active highlight) in place of the deck
  navigation; the separate second column is gone and the chat uses the full
  width. The expand/collapse chevron sits outside the swappable section and
  a collapsed rail stays clean (the highlighted Chat row already opens a
  new chat). Active conversation travels via a tiny store (lib/chat-active)
  so the sidebar needs no useSearchParams and pages stay static.
- Header (phones): history, theme and New chat are now identical chips -
  same 44px hit area, rounded-2xl, border/surface tokens, size-5 icons,
  even spacing; the title block truncates cleanly. ThemeToggle gained a
  'plain' variant so the header styles it without touching other pages.
- ChatIcon redrawn (clean message-circle, no inner lines) and the empty
  state uses the app's icon-chip pattern (size-12 chip, accent-600/200)
  instead of the bare oversized glyph; the model chip icon follows.
- Also fixed a pre-existing dev-only breakage found while verifying: the
  tab-bar bounce animated three keyframes with a spring, which framer
  motion's dev build throws on - breaking client updates in the dev
  instance (library tab switching, sheet Escape). It now uses a tween.
- Dev metadata keeps the Apple icons in both branches.
- SW -> freezmo-v35.
This commit is contained in:
Martin Dvořák 2026-10-11 20:11:11 +00:00
commit 8a3bef0add
9 changed files with 192 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

9
components/ThemeToggle.tsx
View file

@ -61,7 +61,7 @@ export function useTheme() {
return { theme, toggle: () => apply(theme === "dark" ? "light" : "dark") };
}
export function ThemeToggle({ className }: { className?: string }) {
export function ThemeToggle({ className, plain = false }: { className?: string; plain?: boolean }) {
const { theme, toggle } = useTheme();
const { t } = useI18n();
const dark = theme === "dark";
@ -77,8 +77,11 @@ export function ThemeToggle({ className }: { className?: string }) {
title={dark ? t("common.lightMode") : t("common.darkMode")}
className={cn(
// A bordered chip with a press affordance: the bare sun/moon glyph was
// easy to read as decoration rather than a control.
"touch-target inline-flex size-9 items-center justify-center rounded-full border border-[var(--hairline)] bg-[var(--surface-strong)] text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)] active:scale-95",
// easy to read as decoration rather than a control. `plain` drops the
// chip chrome so a header can style the button itself (chat header).
plain
? "text-[var(--text-muted)] transition hover:text-[var(--text)] active:scale-95"
: "touch-target inline-flex size-9 items-center justify-center rounded-full border border-[var(--hairline)] bg-[var(--surface-strong)] text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)] active:scale-95",
className,
)}
>