Martin Dvorak
3f52ab47c2
- Production now runs from ~/freezmo-prod/current (release symlink) as a standalone server on :3207; releases are exported by scripts/deploy.sh, built and e2e-verified on a temp port, switched atomically, health- checked via the new /api/healthz (commit + build time) and rolled back automatically on failure. Last 5 releases kept; scripts/rollback.sh for manual rollback. Shared env + data live in ~/freezmo-prod/shared/ and are symlinked into every release (existing sync/push data migrated and verified identical). - Dev runs from ~/freezmo via freezmo-dev.service: next dev on :3217 (LAN only), its own build folder (.next-dev via NEXT_DIST_DIR), its own data (~/freezmo/.freezmo-dev), DEV badge, dev favicon/theme colour, "Freezmo Dev" PWA identity and never the production service worker. - /api/healthz + the Settings Details version row (short commit + build time). output: standalone in next.config (next start still works). - AGENTS.md documents the workflow rules: only dev updates during a task, temporary dirs/ports for test builds, and deploy-at-the-end as the only production path. README gains an Environments and deploy section. - Fix found by the rehearsal: lib/dev-mode.ts must not be a client module (a server component importing a constant from a "use client" module gets a truthy proxy, which baked dev metadata into production builds). - SW -> freezmo-v34.
91 lines
3.5 KiB
TypeScript
91 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { SettingsDialog } from "@/components/SettingsDialog";
|
|
import { TabBar } from "@/components/TabBar";
|
|
import { ThemeToggle } from "@/components/ThemeToggle";
|
|
import { IS_DEV_INSTANCE } from "@/lib/dev-mode";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import { OPEN_SETTINGS_EVENT } from "@/lib/ui-events";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* Minimal, sticky frosted top bar: brand on the left, theme chip on the
|
|
* right. Phones navigate with the bottom tab bar (also mounted here, so every
|
|
* screen that has a header gets it); the desktop rail carries navigation.
|
|
*/
|
|
export function AppHeader({ className, compact = false }: { className?: string; compact?: boolean }) {
|
|
const { t } = useI18n();
|
|
const [settingsOpen, setSettingsOpen] = useState(false);
|
|
const [settingsFocus, setSettingsFocus] = useState<{ field: "key"; nonce: number } | null>(null);
|
|
|
|
useEffect(() => {
|
|
const onOpen = (event: Event) => {
|
|
setSettingsOpen(true);
|
|
const focus = (event as CustomEvent<{ focus?: string }>).detail?.focus;
|
|
if (focus === "key") setSettingsFocus({ field: "key", nonce: Date.now() });
|
|
};
|
|
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">
|
|
<Link
|
|
href="/"
|
|
className="group flex min-w-0 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 shrink-0 rounded-[0.6rem] transition-transform group-hover:scale-[1.04]"
|
|
/>
|
|
<span className="flex min-w-0 items-baseline gap-2">
|
|
<span className="text-[15px] font-semibold tracking-[-0.01em] text-[var(--text)]">Freezmo</span>
|
|
{IS_DEV_INSTANCE ? (
|
|
<span className="rounded-md border border-amber-400/60 bg-amber-400/15 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-amber-700 dark:text-amber-300">
|
|
DEV
|
|
</span>
|
|
) : null}
|
|
{!compact ? (
|
|
<span className="hidden truncate text-[13px] text-[var(--text-subtle)] sm:inline">
|
|
{t("header.tagline")}
|
|
</span>
|
|
) : null}
|
|
</span>
|
|
</Link>
|
|
|
|
<div className="flex shrink-0 items-center gap-1">
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<TabBar />
|
|
<SettingsDialog
|
|
open={settingsOpen}
|
|
onClose={() => setSettingsOpen(false)}
|
|
focusField={settingsFocus}
|
|
/>
|
|
</>
|
|
);
|
|
}
|