fix dem bugs

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

@@ -7,10 +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, monitorIcon } from '$lib/components/icons';
+	import { chatIcon } 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 { sharedDevice } from '$lib/stores/shared-device.svelte';
 	import { themeShades } from '$lib/theme';
 	import '$lib/theme-patterns.css';
 	import { themeDraft } from '$lib/stores/theme.svelte';
@@ -44,59 +44,13 @@
 			.map((m: any) => ({ id: m.id, name: m.name, color: m.color, username: m.username }))
 	);
 
-	// 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 || !sharedOn || lockMins <= 0 || data.picker) return;
+		if (!isChild || !sharedDevice.on || lockMins <= 0 || data.picker) return;
 		installLockTracking();
 		if (lockDue(lockMins)) pickerOpen = true;
 		if (!lockTimer) {
@@ -306,25 +260,13 @@
 				announcement={disabled && !activating ? accessMessage(accessReason, isParent) : ''}
 				connected={!famStore.connectionDown}
 			>
-				{#snippet left()}
-					<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>
-				{/snippet}
 				<button class="chat-toggle" onclick={() => chatStore.toggle()} aria-label="Open chat">
 					{@html chatIcon}
 					{#if chatStore.unread > 0}
 						<span class="chat-badge">{chatStore.unread > 9 ? '9+' : chatStore.unread}</span>
 					{/if}
 				</button>
-				{#if data.session && sharedOn && (data.deviceChildIds?.length || 0) > 0}
+				{#if data.session && sharedDevice.on && (data.deviceChildIds?.length || 0) > 0}
 					<button
 						class="kid-switch"
 						onclick={() => (pickerOpen = true)}
@@ -370,9 +312,6 @@
 					{claimToast} — view dashboard →
 				</a>
 			{/if}
-			{#if sharedToast}
-				<div class="shared-toast" role="status">{sharedToast}</div>
-			{/if}
 			<Footer sidebar />
 		</div>
 		{#if chatStore.open}
@@ -578,42 +517,6 @@
 		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%;