nmemmertandClaude Sonnet 5.5
a2185ba1dd
Build and Push Docker Image / build-and-push (push) Successful in 5m7s
- Phones get a bottom tab bar (Studies, Bible, Plans, Prayer, Account); wider screens keep the header nav - The Account menu opens upward from the bar; toasts sit above it - Reader and study pages get a labelled Home button instead of a small arrow Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
63 lines
2.8 KiB
React
63 lines
2.8 KiB
React
// App-wide toasts: short messages at the bottom of the screen, optionally with one
|
|
// action button (usually "Undo"). Used instead of alert()/confirm() so a slip is
|
|
// reversible and nothing blocks the page.
|
|
import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { themeVars } from './reader/readerThemes.js';
|
|
|
|
const ToastContext = createContext(null);
|
|
|
|
// toast(message, { action: { label, onClick }, ms, tone: 'info' | 'error' }) -> id
|
|
// Outside a provider (a page rendered on its own in a test) it quietly does nothing.
|
|
const NOOP = { toast: () => 0, dismiss: () => {}, setTheme: () => {} };
|
|
export const useToast = () => useContext(ToastContext) ?? NOOP;
|
|
|
|
let nextId = 1;
|
|
|
|
export function ToastProvider({ children }) {
|
|
const [toasts, setToasts] = useState([]);
|
|
const [theme, setTheme] = useState('paper'); // set by the app so toasts match the reading theme
|
|
const timers = useRef(new Map());
|
|
|
|
const dismiss = useCallback((id) => {
|
|
window.clearTimeout(timers.current.get(id));
|
|
timers.current.delete(id);
|
|
setToasts((list) => list.filter((t) => t.id !== id));
|
|
}, []);
|
|
|
|
const toast = useCallback((message, { action, ms, tone = 'info' } = {}) => {
|
|
const id = nextId++;
|
|
// Messages with an action stay long enough to read and react to.
|
|
const duration = ms ?? (action ? 8000 : tone === 'error' ? 6000 : 3500);
|
|
setToasts((list) => [...list.slice(-2), { id, message, action, tone }]);
|
|
timers.current.set(id, window.setTimeout(() => dismiss(id), duration));
|
|
return id;
|
|
}, [dismiss]);
|
|
|
|
useEffect(() => {
|
|
const live = timers.current;
|
|
return () => live.forEach((t) => window.clearTimeout(t));
|
|
}, []);
|
|
|
|
const value = useMemo(() => ({ toast, dismiss, setTheme }), [toast, dismiss]);
|
|
|
|
return (
|
|
<ToastContext.Provider value={value}>
|
|
{children}
|
|
<div style={themeVars(theme)} className="pointer-events-none fixed inset-x-0 bottom-0 z-[100] flex flex-col items-center gap-2 px-4 pb-[calc(1rem+env(safe-area-inset-bottom,0px)+var(--bottom-nav,0px))] font-sans">
|
|
{toasts.map((t) => (
|
|
<div key={t.id} role={t.tone === 'error' ? 'alert' : 'status'}
|
|
className={`pointer-events-auto flex max-w-md items-center gap-3 rounded-full px-4 py-2.5 text-sm shadow-lg ${t.tone === 'error' ? 'bg-[var(--r-danger)] text-[var(--r-bg)]' : 'bg-[var(--r-text)] text-[var(--r-bg)]'}`}>
|
|
<span>{t.message}</span>
|
|
{t.action && (
|
|
<button type="button" onClick={() => { t.action.onClick(); dismiss(t.id); }}
|
|
className="shrink-0 rounded-full px-2 py-0.5 text-sm font-semibold underline underline-offset-2 hover:opacity-80">
|
|
{t.action.label}
|
|
</button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ToastContext.Provider>
|
|
);
|
|
}
|