Martin Dvorak
786d6cf1ae
The header and composer were full-bleed bands (flush to the top/right/bottom viewport edges, composer corners off-screen) next to a rail that floats with a 12px margin. The new --layout-gutter (12px) spaces the rail, header, empty-state card and composer identically on every side; --radius-panel/-control/-chip (-pill) replace the ad-hoc radii across the shared classes, so every panel is rounded on all four corners and shared controls match in every theme. The desktop-only ::after hairlines and the left-corner-only radius are gone. Aero: the rail and the chat chrome (answers included) share one even recipe - the wallpaper extra-blurred into a hue-free wash (background-glass.webp) under a uniform ~50% white veil and a whisper of gloss. Measured within ~10 RGB units across the rail top->bottom and the card/composer left->right; the blue->green smear and the teal composer are gone. The composer's field is a clean even tile with no wallpaper gradient inside it. Chat fixes: send is a filled primary tile shaped exactly like attach (dimmed while the input is empty), suggestion/context chips use the shared .chip token (40/44px target, visible rim, full-contrast text, raw model id in the tooltip), the AI note reads at 12px --text-muted (.ai-disclaimer), the selected sidebar row carries the accent border + accent icon, the theme toggle is back in Aero (the moon flips to Dark; Settings brings Aero back), and the empty state is centered exactly between header and composer. Outside CSS: the wallpaper's top-left HUD-circle decoration (it peeked through the 12px gutters on wide windows) was healed out of background.webp and background-blur.webp; the orbs/bubbles ride one masked .ice-floats layer that fades them under the chrome bands and the rail strip, so none is sliced by a panel edge (still parked under reduced motion). Version 0.6.0, SW -> freezmo-v82. Tests: chat suite pins the new geometry (12px gutter, 24px corners, even wash on all four panels, send-vs-attach shape, chips/input radii); mobile pins the phone chrome and the Aero toggle; bubbles pins the floats layer + its reduced-motion opt-out.
43 lines
1.8 KiB
TypeScript
43 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { MoonIcon, SunIcon } from "@/components/icons";
|
|
import { haptic } from "@/lib/haptics";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import { useTheme } from "@/lib/theme";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* The light/dark flip. Frutiger Aero keeps the same control in the same
|
|
* spot: it has no dark variant of its own, so from Aero the moon flips to
|
|
* Dark (the theme picker in Settings is how Aero comes back) — the toggle
|
|
* used to disappear there, which left the chat header and the rail with no
|
|
* theme control at all.
|
|
*/
|
|
export function ThemeToggle({ className, plain = false }: { className?: string; plain?: boolean }) {
|
|
const { theme, toggle } = useTheme();
|
|
const { t } = useI18n();
|
|
const dark = theme === "dark";
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
haptic("toggle");
|
|
toggle();
|
|
}}
|
|
aria-label={dark ? t("common.switchToLight") : t("common.switchToDark")}
|
|
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. `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,
|
|
)}
|
|
>
|
|
<span aria-hidden>{dark ? <SunIcon className="size-5" /> : <MoonIcon className="size-5" />}</span>
|
|
</button>
|
|
);
|
|
}
|