Martin Dvorak
9fb728d735
Phones (<=639px) only for layout/gestures; the theme-level fixes apply
everywhere, as they are token/design changes.
Settings sheet
- Swipe-to-dismiss reusing the InstallSheet gesture: the sheet follows the
finger, closes past ~90px or on a fast flick, snaps back otherwise. Drag
starts only from the handle/header and only while the body is scrolled to
the top. Backdrop tap still closes.
- Fixed header + scrollable body: pb-safe + spacer, so nothing is clipped;
a scroll cue (chevron) fades in while more content is below and out at
the end.
- Show/Save stack under the field at 44px on phones; close, Test connection
and Remove key are 44px too. Remove key is now a rose destructive action
with a confirmation that the full-screen key setup comes back.
- API key note split into a short privacy line plus a collapsible
'Using the local daemon?' tip (OLLAMA_AUTH=local / .env.local / signin).
- Fixed the missing space in the English tip ('ollama signin instead.').
- Health: kept the auto-check and banner; added a loading row and a
'Checked just now' / 'Checked at HH:MM' freshness label (also for errors).
Ice scene / readability
- Verified the orbs were never above content (fixed z-index:-1 layer,
pointer-events:none); they were just shining through the glass. Phones get
lower blob/orb opacity and orbs tucked to the edges; the bottom-right orb
is moved out from under the tab bar and the tab bar paints a more opaque
surface so its labels hold contrast.
Contrast / themes
- Dark --text-subtle raised to #9db1d0 (8.6:1 page, 7.2:1 glass); helper
text now uses the tokens.
- Disabled buttons are a visible muted chip (.btn-disabled) instead of a
40%-opacity ghost.
- One ice primary gradient in both themes; danger/success now actually show
their colour (bg-none strips the primary background-image that used to
paint over !bg-rose-600).
- Light mode: cool card rims instead of white-on-white, stronger shadow.
Redundancy / touch
- Removed only the header gear; the hamburger drawer (folders, Settings,
theme) and the tab-bar Settings stay.
- Theme toggle is a bordered chip with an action aria-label (drawer row too).
- Empty library hides the folder pills, demotes Import to a quiet link and
keeps a single primary CTA. 44px targets for nav rows, segmented control
and folder pills on phones.
- Fixed a pre-existing 16px horizontal overflow (header -mx-4 vs a
padding-less parent) and let info values wrap instead of truncating.
Verified: mobile suite 47/47 (EN+CS, 360/390px), pixel-sampled contrast
audit 0 runs below WCAG AA (8 runs, both themes/locales; axe marks the glass
'incomplete'), i18n 27/27, desktop regression 72/72, lint + build clean.
Service worker cache bumped to freezmo-v5.
84 lines
3.2 KiB
TypeScript
84 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { MenuIcon } from "@/components/icons";
|
|
import { SettingsDialog } from "@/components/SettingsDialog";
|
|
import { ThemeToggle } from "@/components/ThemeToggle";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import { sidebarOpen } from "@/lib/nav";
|
|
import { OPEN_SETTINGS_EVENT } from "@/lib/ui-events";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* Minimal, sticky frosted top bar: brand on the left, quiet actions on the
|
|
* right. The phone layout keeps the brand compact and relies on the tab bar
|
|
* for navigation.
|
|
*/
|
|
export function AppHeader({ className, compact = false }: { className?: string; compact?: boolean }) {
|
|
const { t } = useI18n();
|
|
const [settingsOpen, setSettingsOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const onOpen = () => setSettingsOpen(true);
|
|
window.addEventListener(OPEN_SETTINGS_EVENT, onOpen);
|
|
return () => window.removeEventListener(OPEN_SETTINGS_EVENT, onOpen);
|
|
}, []);
|
|
|
|
// Restore the desktop sidebar width preference once, on the client.
|
|
useEffect(() => {
|
|
void import("@/components/Sidebar").then((module) => module.sidebarCollapse.hydrate());
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<header
|
|
className={cn(
|
|
// No negative margins here: the header is a direct child of <main>,
|
|
// which has no horizontal padding — the -mx-4 made it 16px wider
|
|
// than the viewport and caused a horizontal scroll on phones.
|
|
"glass sticky top-0 z-40 mb-6 px-4 lg:hidden sm:px-6",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="mx-auto flex h-14 max-w-6xl items-center justify-between gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => sidebarOpen.toggle()}
|
|
aria-label={t("header.openMenu")}
|
|
className="mr-1 grid size-9 shrink-0 touch-target place-items-center rounded-full text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
|
|
>
|
|
<MenuIcon className="size-5" />
|
|
</button>
|
|
<Link href="/" className="group flex items-center gap-2.5 rounded-xl px-1 py-1" aria-label={t("header.home")}>
|
|
{/* eslint-disable-next-line @next/next/no-img-element -- static app icon, no optimisation needed */}
|
|
<img
|
|
src="/icons/icon-192.png"
|
|
alt=""
|
|
aria-hidden
|
|
className="size-8 rounded-[0.6rem] transition-transform group-hover:scale-[1.04]"
|
|
/>
|
|
<span className="flex items-baseline gap-2">
|
|
<span className="text-[15px] font-semibold tracking-[-0.01em] text-[var(--text)]">
|
|
Freezmo
|
|
</span>
|
|
{!compact ? (
|
|
<span className="hidden text-[13px] text-[var(--text-subtle)] sm:inline">
|
|
{t("header.tagline")}
|
|
</span>
|
|
) : null}
|
|
</span>
|
|
</Link>
|
|
|
|
<div className="flex items-center gap-1">
|
|
{/* Settings lives in the tab bar and the drawer; the old header
|
|
gear was the same control a third time. */}
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<SettingsDialog open={settingsOpen} onClose={() => setSettingsOpen(false)} />
|
|
</>
|
|
);
|
|
}
|