Sync shared components — sidebar scrollbar, Layout, AuthGate updates

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/AuthGate.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+function getInactivityMs() {
+    if (window.matchMedia('(display-mode: standalone)').matches)
+        return undefined;
+    const c = document.cookie.split(';').map(s => s.trim()).find(s => s.startsWith('hnf_inactivity_mins='));
+    if (!c)
+        return undefined;
+    const mins = parseInt(c.split('=')[1]);
+    return isNaN(mins) || mins <= 0 ? undefined : mins * 60 * 1000;
+}
+export function AuthGate({ children }) {
+    const [state, setState] = useState('checking');
+    const [user, setUser] = useState(null);
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+    const timerRef = useRef(null);
+    useEffect(() => {
+        fetch('/api/auth/verify?app=noticeboard', { credentials: 'include' })
+            .then(async (r) => {
+            if (r.ok) {
+                const data = await r.json();
+                setUser(data);
+                setState('authed');
+            }
+            else {
+                setState('login');
+            }
+        })
+            .catch(() => setState('login'));
+    }, []);
+    useEffect(() => {
+        const ms = getInactivityMs();
+        if (state !== 'authed' || !ms)
+            return;
+        async function forceLogout() {
+            await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' }).catch(() => { });
+            setUser(null);
+            setState('login');
+        }
+        function reset() {
+            if (timerRef.current)
+                clearTimeout(timerRef.current);
+            timerRef.current = setTimeout(forceLogout, ms);
+        }
+        const events = ['mousemove', 'keydown', 'click', 'touchstart'];
+        events.forEach(e => window.addEventListener(e, reset, { passive: true }));
+        reset();
+        return () => {
+            if (timerRef.current)
+                clearTimeout(timerRef.current);
+            events.forEach(e => window.removeEventListener(e, reset));
+        };
+    }, [state]);
+    async function login(e) {
+        e.preventDefault();
+        setLoading(true);
+        setError('');
+        try {
+            const res = await fetch('/api/auth/login', {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email, password }),
+            });
+            if (!res.ok) {
+                setError('Invalid email or password');
+                return;
+            }
+            const verify = await fetch('/api/auth/verify?app=noticeboard', { credentials: 'include' });
+            if (verify.ok) {
+                const data = await verify.json();
+                setUser(data);
+                setState('authed');
+            }
+            else {
+                setError("You don't have access to this app.");
+            }
+        }
+        catch {
+            setError('Connection error — please try again');
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    if (state === 'checking') {
+        return (_jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100dvh' }, children: _jsx("div", { style: { color: 'var(--text-muted)' }, children: "Loading\u2026" }) }));
+    }
+    if (state === 'login') {
+        return (_jsx("div", { style: {
+                display: 'flex', flexDirection: 'column', alignItems: 'center',
+                justifyContent: 'center', height: '100dvh', padding: '1.5rem',
+                background: 'var(--navy-dark)',
+            }, children: _jsxs("div", { style: {
+                    background: 'var(--navy)', borderRadius: 'var(--radius)',
+                    padding: '2rem', width: '100%', maxWidth: '360px',
+                    border: '1px solid var(--surface-2)',
+                }, children: [_jsx("h1", { style: { fontSize: '1.4rem', marginBottom: '0.25rem', color: 'var(--gold)' }, children: "Noticeboard" }), _jsx("p", { style: { color: 'var(--text-muted)', fontSize: '0.875rem', marginBottom: '1.5rem' }, children: import.meta.env.VITE_HOTEL_NAME }), _jsxs("form", { onSubmit: login, style: { display: 'flex', flexDirection: 'column', gap: '0.75rem' }, children: [_jsx("input", { type: "email", value: email, onChange: e => setEmail(e.target.value), placeholder: "Email", required: true, autoComplete: "email", style: inputStyle }), _jsx("input", { type: "password", value: password, onChange: e => setPassword(e.target.value), placeholder: "Password", required: true, autoComplete: "current-password", style: inputStyle }), error && _jsx("p", { style: { color: 'var(--danger)', fontSize: '0.875rem' }, children: error }), _jsx("button", { type: "submit", disabled: loading, style: btnStyle, children: loading ? 'Signing in…' : 'Sign in' })] })] }) }));
+    }
+    return _jsx(_Fragment, { children: children(user) });
+}
+const inputStyle = {
+    background: 'var(--navy-dark)', border: '1px solid var(--surface-2)',
+    borderRadius: '6px', color: 'var(--text)', padding: '0.625rem 0.75rem',
+    fontSize: '1rem', width: '100%', outline: 'none',
+};
+const btnStyle = {
+    background: 'var(--gold)', color: 'var(--navy-dark)', border: 'none',
+    borderRadius: '6px', padding: '0.625rem', fontSize: '1rem',
+    fontWeight: 600, marginTop: '0.25rem',
+};