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,109 @@
+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;
+}
+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(--hk-green)', color: '#fff', border: 'none',
+    borderRadius: '6px', padding: '0.625rem', fontSize: '1rem',
+    fontWeight: 600, marginTop: '0.25rem', width: '100%',
+};
+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=hk-planner', { credentials: 'include' })
+            .then(async (r) => {
+            if (r.ok) {
+                setUser(await r.json());
+                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=hk-planner', { credentials: 'include' });
+            if (verify.ok) {
+                setUser(await verify.json());
+                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: '#74c69d' }, children: "HK Planner" }), _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: '#f87171', 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) });
+}

frontend/src/components/AuthGate.tsx

@@ -1,10 +1,12 @@
 import { useEffect, useRef, useState } from 'react'
 import type { User } from '../types'
 
-const SHARED_TIMEOUT_MS = 10 * 60 * 1000
+function getInactivityMs(): number | undefined {
-
+  if (window.matchMedia('(display-mode: standalone)').matches) return undefined
-function isSharedDevice() {
+  const c = document.cookie.split(';').map(s => s.trim()).find(s => s.startsWith('hnf_inactivity_mins='))
-  return document.cookie.split(';').some(c => c.trim() === 'hnf_shared_device=1')
+  if (!c) return undefined
+  const mins = parseInt(c.split('=')[1])
+  return isNaN(mins) || mins <= 0 ? undefined : mins * 60 * 1000
 }
 
 
@@ -42,7 +44,8 @@ export function AuthGate({ children }: Props) {
   }, [])
 
   useEffect(() => {
-    if (state !== 'authed' || !isSharedDevice()) return
+    const ms = getInactivityMs()
+    if (state !== 'authed' || !ms) return
 
     async function forceLogout() {
       await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' }).catch(() => {})
@@ -52,7 +55,7 @@ export function AuthGate({ children }: Props) {
 
     function reset() {
       if (timerRef.current) clearTimeout(timerRef.current)
-      timerRef.current = setTimeout(forceLogout, SHARED_TIMEOUT_MS)
+      timerRef.current = setTimeout(forceLogout, ms)
     }
 
     const events = ['mousemove', 'keydown', 'click', 'touchstart'] as const

frontend/src/components/Layout.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NavLink } from 'react-router-dom';
+import { CalendarClock, Settings, LogOut } from 'lucide-react';
+import { can } from '../types';
+export function Layout({ user, children }) {
+    async function logout() {
+        await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' });
+        window.location.href = '/';
+    }
+    return (_jsxs("div", { style: { display: 'flex', height: '100dvh', overflow: 'hidden' }, children: [_jsxs("nav", { style: {
+                    width: '200px', flexShrink: 0, background: 'var(--navy)',
+                    display: 'flex', flexDirection: 'column', padding: '1rem 0',
+                    borderRight: '1px solid var(--surface-2)',
+                }, children: [_jsxs("div", { style: { padding: '0 1rem 1rem', borderBottom: '1px solid var(--surface-2)' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [_jsx(CalendarClock, { size: 20, strokeWidth: 1.75, color: "#74c69d" }), _jsx("span", { style: { color: '#74c69d', fontWeight: 700, fontSize: '0.95rem' }, children: "HK Planner" })] }), _jsx("p", { style: { color: 'var(--text-muted)', fontSize: '0.72rem', marginTop: '0.2rem' }, children: user.name })] }), _jsxs("div", { className: "nav-scroll", style: { flex: 1, padding: '0.5rem 0', overflowY: 'auto' }, children: [_jsx(NavItem, { to: "/planner", icon: CalendarClock, label: "Planner" }), can(user, 'settings') && _jsx(NavItem, { to: "/settings", icon: Settings, label: "Settings" })] }), _jsx("div", { style: { padding: '0.75rem 1rem', borderTop: '1px solid var(--surface-2)' }, children: _jsxs("button", { onClick: logout, style: {
+                                display: 'flex', alignItems: 'center', gap: '0.5rem',
+                                background: 'none', border: 'none', color: 'var(--text-muted)',
+                                fontSize: '0.875rem', padding: '0.375rem 0', width: '100%', cursor: 'pointer',
+                            }, children: [_jsx(LogOut, { size: 14, strokeWidth: 1.75 }), "Sign out"] }) })] }), _jsx("main", { style: { flex: 1, overflow: 'auto', background: 'var(--body-bg)' }, children: children })] }));
+}
+function NavItem({ to, icon: Icon, label }) {
+    return (_jsxs(NavLink, { to: to, style: ({ isActive }) => ({
+            display: 'flex', alignItems: 'center', gap: '0.625rem',
+            padding: '0.625rem 1rem', textDecoration: 'none',
+            color: isActive ? '#74c69d' : 'var(--text)',
+            background: isActive ? 'var(--surface)' : 'transparent',
+            borderLeft: isActive ? '2px solid #74c69d' : '2px solid transparent',
+            fontSize: '0.875rem', transition: 'background 0.15s',
+        }), children: [_jsx(Icon, { size: 15, strokeWidth: 1.75 }), label] }));
+}

frontend/src/components/Layout.tsx

@@ -29,7 +29,7 @@ export function Layout({ user, children }: Props) {
           <p style={{ color: 'var(--text-muted)', fontSize: '0.72rem', marginTop: '0.2rem' }}>{user.name}</p>
         </div>
 
-        <div style={{ flex: 1, padding: '0.5rem 0', overflowY: 'auto' }}>
+        <div className="nav-scroll" style={{ flex: 1, padding: '0.5rem 0', overflowY: 'auto' }}>
           <NavItem to="/planner" icon={CalendarClock} label="Planner" />
           {can(user, 'settings') && <NavItem to="/settings" icon={Settings} label="Settings" />}
         </div>

frontend/src/index.css

@@ -153,3 +153,18 @@ input, textarea, select { font-family: inherit; }
   border: 1px solid var(--card-border);
   box-shadow: var(--shadow-sm);
 }
+
+/* Sidebar scrollbar */
+.nav-scroll::-webkit-scrollbar,
+.sidebar::-webkit-scrollbar,
+.sidebar-nav::-webkit-scrollbar { width: 4px; }
+.nav-scroll::-webkit-scrollbar-track,
+.sidebar::-webkit-scrollbar-track,
+.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
+.nav-scroll::-webkit-scrollbar-thumb,
+.sidebar::-webkit-scrollbar-thumb,
+.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.35); border-radius: 2px; }
+.nav-scroll::-webkit-scrollbar-thumb:hover,
+.sidebar::-webkit-scrollbar-thumb:hover,
+.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.65); }
+.nav-scroll, .sidebar, .sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(201,168,76,0.35) transparent; }