add shared computer feature

frontend/src/routes/[fam]/+layout.svelte

@@ -7,9 +7,10 @@
 	import { chatStore } from '$lib/stores/chat.svelte';
 	import { notices } from '$lib/stores/notices.svelte';
 	import { Sidebar, TopNav, Footer, Chat, SharedPicker } from '$lib/components';
-	import { chatIcon } from '$lib/components/icons';
+	import { chatIcon, monitorIcon } from '$lib/components/icons';
 	import { recordShortcut } from '$lib/shortcut';
 	import { installLockTracking, lockDue } from '$lib/client/lock';
+	import { isSharedDevice, setSharedDevice } from '$lib/client/shared-device';
 	import { themeShades } from '$lib/theme';
 	import '$lib/theme-patterns.css';
 	import { themeDraft } from '$lib/stores/theme.svelte';
@@ -43,13 +44,59 @@
 			.map((m: any) => ({ id: m.id, name: m.name, color: m.color, username: m.username }))
 	);
 
-	// Idle lock (children only): return to the picker after `lockMins` of no
-	// interaction. localStorage-backed (see lib/client/lock.ts) so a closed
-	// browser still trips the lock on next launch.
+	// Shared-computer mode (per-device flag, NOT a fam setting — see
+	// lib/client/shared-device.ts). Makes the PIN system functional on this
+	// browser: profile switcher + idle lock. Anyone logged in (or not) can
+	// flip it; server sees the cookie mirror as data.sharedDevice.
+	let sharedOn = $state(
+		typeof localStorage !== 'undefined' ? isSharedDevice() : !!(data as any).sharedDevice
+	);
+	let sharedToast = $state('');
+
+	async function toggleShared() {
+		sharedOn = !sharedOn;
+		setSharedDevice(sharedOn);
+		if (!sharedOn) {
+			sharedToast = '';
+			return;
+		}
+		// Just enabled — remind about PIN state. Kids without a PIN can't be
+		// picked until one is set (picker shows "ask a parent"); kids with one
+		// get a nudge to remember it. Values never exposed — only set/unset.
+		try {
+			const res = await fetch('/api/pins/status');
+			if (!res.ok) throw new Error();
+			const s = await res.json();
+			if (Array.isArray(s.children)) {
+				// Parent view: roster of who still needs a PIN.
+				const missing = s.children.filter((c: any) => !c.hasPin).map((c: any) => c.name);
+				const ready = s.children.filter((c: any) => c.hasPin).map((c: any) => c.name);
+				sharedToast =
+					missing.length > 0
+						? `Shared mode on — still need a PIN: ${missing.join(', ')} (set in Settings → Members).` +
+							(ready.length > 0 ? ` Ready: ${ready.join(', ')}.` : '')
+						: `Shared mode on — PINs ready for ${ready.length > 0 ? ready.join(', ') : 'everyone'}. Remind the kids!`;
+			} else if (typeof s.hasPin === 'boolean') {
+				// Child view: only their own state.
+				sharedToast = s.hasPin
+					? 'Shared mode on — remember your 3-digit PIN to switch back in!'
+					: 'Shared mode on — you need a PIN first. Ask a parent to set one up.';
+			} else {
+				sharedToast = 'Shared mode on for this computer.';
+			}
+		} catch {
+			sharedToast = 'Shared mode on for this computer.';
+		}
+		setTimeout(() => (sharedToast = ''), 8000);
+	}
+
+	// Idle lock (children on shared devices only): return to the picker after
+	// `lockMins` of no interaction. localStorage-backed (see lib/client/lock.ts)
+	// so a closed browser still trips the lock on next launch.
 	$effect(() => {
 		const isChild = data.session?.role === 'child';
 		const lockMins = Number(data.lockMins) || 0;
-		if (!isChild || lockMins <= 0 || data.picker) return;
+		if (!isChild || !sharedOn || lockMins <= 0 || data.picker) return;
 		installLockTracking();
 		if (lockDue(lockMins)) pickerOpen = true;
 		if (!lockTimer) {
@@ -258,7 +305,7 @@
 						<span class="chat-badge">{chatStore.unread > 9 ? '9+' : chatStore.unread}</span>
 					{/if}
 				</button>
-				{#if data.session && (data.deviceChildIds?.length || 0) > 0}
+				{#if data.session && sharedOn && (data.deviceChildIds?.length || 0) > 0}
 					<button
 						class="kid-switch"
 						onclick={() => (pickerOpen = true)}
@@ -269,6 +316,16 @@
 						></span>
 					</button>
 				{/if}
+				<button
+					class="shared-toggle"
+					class:on={sharedOn}
+					onclick={toggleShared}
+					aria-label="Toggle shared computer mode"
+					aria-pressed={sharedOn}
+					title={sharedOn ? 'Shared computer mode is ON' : 'Mark this as a shared computer'}
+				>
+					{@html monitorIcon}
+				</button>
 			</TopNav>
 			<main class="app-main" class:join-page={page.url.pathname.split('/')[2] === 'join'}>
 				<div class="page-wrap">
@@ -304,6 +361,9 @@
 					{claimToast} — view dashboard →
 				</a>
 			{/if}
+			{#if sharedToast}
+				<div class="shared-toast" role="status">{sharedToast}</div>
+			{/if}
 			<Footer sidebar />
 		</div>
 		{#if chatStore.open}
@@ -491,6 +551,42 @@
 		border: 2px solid #fff;
 		box-shadow: 0 0 0 1px #e2e8f0;
 	}
+	.shared-toggle {
+		width: 40px;
+		height: 40px;
+		border: none;
+		border-radius: 10px;
+		background: #f3f4f6;
+		color: #9ca3af;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+	}
+	.shared-toggle:hover {
+		background: #e5e7eb;
+	}
+	.shared-toggle.on {
+		background: #6366f1;
+		color: #fff;
+		box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
+	}
+	.shared-toast {
+		position: fixed;
+		bottom: 1rem;
+		left: 50%;
+		transform: translateX(-50%);
+		background: #1f2937;
+		color: #fff;
+		padding: 0.6rem 1.2rem;
+		border-radius: 12px;
+		font-size: 0.85rem;
+		font-weight: 600;
+		z-index: 96;
+		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
+		max-width: min(92vw, 560px);
+		text-align: center;
+	}
 	.picker-stage {
 		min-height: 100vh;
 		width: 100%;