);
}
// ────────────────────────────────────────────────────────────────────────
// Uptime chart — 90 daily UptimeBuckets, hover scrubs
// ────────────────────────────────────────────────────────────────────────
function UptimeChart({ buckets, scheme }) {
const [hover, setHover] = React.useState(null);
const trackRef = React.useRef(null);
// Touch / pointer support — phones don't fire mouseenter, so we map
// the touch X coordinate into a bar index against the chart's width.
const indexFromClientX = React.useCallback((clientX) => {
const el = trackRef.current;
if (!el || !buckets || buckets.length === 0) return null;
const rect = el.getBoundingClientRect();
const x = Math.max(0, Math.min(rect.width, clientX - rect.left));
return Math.min(buckets.length - 1, Math.floor((x / rect.width) * buckets.length));
}, [buckets]);
const onPointerMove = React.useCallback((e) => {
setHover(indexFromClientX(e.clientX));
}, [indexFromClientX]);
const onPointerLeave = React.useCallback(() => setHover(null), []);
if (!buckets || buckets.length === 0) {
return
No data
;
}
return (
{buckets.map((b, i) => {
const ratio = b.fractionOn ?? 0;
const observedRatio = b.totalSeconds > 0 ? (b.observedSeconds / b.totalSeconds) : 1;
let bg;
if (observedRatio < 0.25) bg = scheme.outlineVariant;
else if (ratio === 0) bg = scheme.surfaceContainerHigh;
else if (ratio < 0.1) bg = scheme.primaryContainer;
else if (ratio < 0.25) bg = scheme.primary + '99';
else bg = scheme.primary;
const h = ratio === 0 ? 6 : 12 + ratio * 26;
return (
);
})}
{buckets.length} days ago
{hover !== null
? `Day ${hover + 1} · ${Math.round((buckets[hover].fractionOn ?? 0) * 24)} hot hrs`
: 'Today'}
);
}
// ────────────────────────────────────────────────────────────────────────
// Bottom Sheet — fetches uptime when opened, switches by tab
// ────────────────────────────────────────────────────────────────────────
function BottomSheet({ store, onClose, scheme, fetchUptimeBuckets }) {
const [tab, setTab] = React.useState('today');
const [hourly, setHourly] = React.useState(null);
const [daily, setDaily] = React.useState(null);
// ── share + notify ───────────────────────────────────────────────────
const [shareToast, setShareToast] = React.useState(null); // 'copied' | 'error' | null
const [notifyState, setNotifyState] = React.useState('idle'); // 'idle' | 'subscribed' | 'denied' | 'unsupported'
const pollIntervalRef = React.useRef(null);
const lastSeenStatusRef = React.useRef(store.currentStatus);
// ── swipe-to-dismiss + exit animation ────────────────────────────────
const [closing, setClosing] = React.useState(false);
const [dragY, setDragY] = React.useState(0);
const dragStartRef = React.useRef(null);
// Threshold past which a drag releases as a dismiss. ~80px feels right
// on phone-sized sheets — far enough to be intentional, near enough to
// not require a full-screen swipe.
const DISMISS_PX = 80;
const beginClose = React.useCallback(() => {
if (closing) return;
setClosing(true);
// Match the sheet-fall keyframe duration in the stylesheet.
setTimeout(onClose, 220);
}, [closing, onClose]);
const onHandlePointerDown = (e) => {
if (closing) return;
dragStartRef.current = e.clientY;
e.currentTarget.setPointerCapture(e.pointerId);
};
const onHandlePointerMove = (e) => {
if (dragStartRef.current == null) return;
setDragY(Math.max(0, e.clientY - dragStartRef.current));
};
const onHandlePointerUp = (e) => {
if (dragStartRef.current == null) return;
const dy = Math.max(0, e.clientY - dragStartRef.current);
dragStartRef.current = null;
if (dy > DISMISS_PX) beginClose();
else setDragY(0);
};
React.useEffect(() => {
let cancelled = false;
setHourly(null); setDaily(null);
fetchUptimeBuckets(store.id, 'hour').then(b => { if (!cancelled) setHourly(b); });
fetchUptimeBuckets(store.id, 'day').then(b => { if (!cancelled) setDaily(b); });
return () => { cancelled = true; };
}, [store.id, fetchUptimeBuckets]);
// Stop polling when the sheet unmounts (close, navigate, sheet swap).
React.useEffect(() => () => {
if (pollIntervalRef.current) {
clearInterval(pollIntervalRef.current);
pollIntervalRef.current = null;
}
}, []);
// ── share ─────────────────────────────────────────────────────────────
// Build a shareable deep link. Includes lat/lng so the recipient's
// /stores/nearby fetch will return this store regardless of where
// they are.
const buildShareUrl = () =>
`${window.location.origin}/?store=${store.id}` +
`&lat=${store.latitude.toFixed(4)}&lng=${store.longitude.toFixed(4)}`;
const onShare = async () => {
const url = buildShareUrl();
const data = {
title: `${window.shortName(store.name)} — Hot Light`,
text: store.currentStatus === 'on'
? `🔥 The Hot Light is ON at ${window.shortName(store.name)}!`
: `Track the Hot Light at ${window.shortName(store.name)}.`,
url,
};
try {
// navigator.share works on iOS Safari, Android Chrome, recent
// desktop Safari/Edge. We feature-detect canShare too — Firefox
// has the symbol but rejects most payloads on desktop.
if (navigator.share && (!navigator.canShare || navigator.canShare(data))) {
await navigator.share(data);
} else if (navigator.clipboard?.writeText) {
await navigator.clipboard.writeText(url);
setShareToast('copied');
setTimeout(() => setShareToast(null), 2200);
} else {
// Last-resort fallback: prompt with the URL preselected.
window.prompt('Copy this link:', url);
}
} catch (err) {
// AbortError = user cancelled the native share — silent.
if (err && err.name !== 'AbortError') {
setShareToast('error');
setTimeout(() => setShareToast(null), 2200);
}
}
};
// ── notify when hot ──────────────────────────────────────────────────
// Polls every 60s while subscribed; fires a browser notification on
// off→on transitions. Lifetime is tied to this BottomSheet instance —
// closing the sheet stops the polling. Real background pings need a
// service worker + Web Push backend; that work is in flight.
//
// iOS Safari (non-PWA) deliberately doesn't expose `Notification` at
// all. iOS 16.4+ supports web push but only after the page is added
// to the Home Screen as a PWA. We surface that distinction in the
// 'ios-pwa-needed' state so users get an actionable hint instead of
// a silently disabled button.
const onNotify = async () => {
if (notifyState === 'subscribed') {
setNotifyState('idle');
if (pollIntervalRef.current) {
clearInterval(pollIntervalRef.current);
pollIntervalRef.current = null;
}
return;
}
if (typeof Notification === 'undefined') {
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
const isStandalone =
window.matchMedia?.('(display-mode: standalone)').matches
|| window.navigator.standalone === true;
setNotifyState(isIOS && !isStandalone ? 'ios-pwa-needed' : 'unsupported');
return;
}
if (Notification.permission === 'denied') {
setNotifyState('denied');
return;
}
if (Notification.permission !== 'granted') {
const result = await Notification.requestPermission();
if (result !== 'granted') {
setNotifyState(result === 'denied' ? 'denied' : 'idle');
return;
}
}
setNotifyState('subscribed');
lastSeenStatusRef.current = store.currentStatus;
pollIntervalRef.current = setInterval(async () => {
try {
const dto = await window.KREMEING_API.fetchHotLight(store.id);
if (dto.status === 'on' && lastSeenStatusRef.current !== 'on') {
new Notification(`🔥 ${window.shortName(store.name)}`, {
body: 'Hot doughnuts ready now',
tag: `kremeing-${store.id}`, // collapses repeats per store
renotify: false,
});
}
lastSeenStatusRef.current = dto.status;
} catch (err) {
// transient upstream blip — keep polling
}
}, 60_000);
};
const hot = store.currentStatus === 'on';
const unknown = store.currentStatus === 'unknown';
const since = window.relativeTime(store.lastFlippedAt);
// Combine entrance, drag-follow, and exit. Closing wins over dragY so
// releasing past threshold animates cleanly to off-screen.
const sheetStyle = closing
? { animation: 'sheet-fall 220ms cubic-bezier(0.4, 0, 1, 1) forwards' }
: (dragY > 0
? { transform: `translateY(${dragY}px)` }
: { animation: 'sheet-rise 0.36s cubic-bezier(0.2, 0.9, 0.3, 1.05)' });
return (
{/* Drag affordance — gets the pointer events so finger swipes
dismiss the sheet. The `touch-action: none` prevents the
browser from interpreting the drag as a page scroll. */}