freezmo/lib/use-health.ts
Martin Dvorak 9fb728d735 Mobile UI pass: sheet swipe, ice-scene layering, contrast, touch targets
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.
2026-10-08 17:37:51 +00:00

43 lines
1.3 KiB
TypeScript

"use client";
import { t } from "./i18n";
import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
import { fetchHealth, type Health } from "./client-api";
import { settingsStore } from "./settings";
/**
* Health status for the current browser (re-checks whenever the API key
* changes). Used by the settings dialog and the API-key gate.
*/
export function useHealth() {
const apiKey = useSyncExternalStore(
settingsStore.subscribe,
() => settingsStore.getSnapshot().apiKey,
() => "",
);
const [health, setHealth] = useState<Health | null>(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [checkedAt, setCheckedAt] = useState<number | null>(null);
const refresh = useCallback(async () => {
setLoading(true);
setError(null);
try {
setHealth(await fetchHealth());
} catch (loadError) {
setError(loadError instanceof Error ? loadError.message : t("api.unreachableShort"));
} finally {
// Even a failed check is a check: the panel can say when it last ran.
setCheckedAt(Date.now());
setLoading(false);
}
}, []);
useEffect(() => {
void refresh();
}, [refresh, apiKey]);
return { health, loading, error, refresh, apiKey, checkedAt };
}