fix mcs
This commit is contained in:
JCEEE
@@ -6,9 +6,11 @@
|
||||
import { famStore } from '$lib/stores/fam.svelte';
|
||||
import { chatStore } from '$lib/stores/chat.svelte';
|
||||
import { notices } from '$lib/stores/notices.svelte';
|
||||
import { Sidebar, TopNav, Footer, Chat } from '$lib/components';
|
||||
import { chatIcon } from '$lib/components/icons';
|
||||
import { Sidebar, TopNav, Footer, Chat, SharedPicker } from '$lib/components';
|
||||
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';
|
||||
@@ -29,6 +31,87 @@
|
||||
// Pattern size in vw units ('' = untouched → pattern class default).
|
||||
let bgSize = $derived(themeDraft.size ?? (data.session?.memberThemeSize || ''));
|
||||
let bgSizeVw = $derived(Number(bgSize) > 0 ? bgSize : '');
|
||||
// Shared-device picker: standalone when the device has child sessions but
|
||||
// none is active (layout load redirects here); overlay when the idle lock
|
||||
// fires or the top-nav switcher is opened.
|
||||
const pickerMode = $derived(!!data.picker);
|
||||
let pickerOpen = $state(false);
|
||||
let lockTimer: ReturnType<typeof setInterval> | null = null;
|
||||
let deviceProfiles = $derived(
|
||||
(data.deviceChildIds || [])
|
||||
.map((id) => famStore.members.find((m) => m.id === id))
|
||||
.filter(Boolean)
|
||||
.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;
|
||||
installLockTracking();
|
||||
if (lockDue(lockMins)) pickerOpen = true;
|
||||
if (!lockTimer) {
|
||||
lockTimer = setInterval(() => {
|
||||
if (lockDue(lockMins)) pickerOpen = true;
|
||||
}, 15_000);
|
||||
}
|
||||
return () => {
|
||||
if (lockTimer) {
|
||||
clearInterval(lockTimer);
|
||||
lockTimer = null;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
let session = $state<Session | null>(data.session);
|
||||
let isParent = $state(data.isParent);
|
||||
let role = $state(data.role);
|
||||
@@ -199,70 +282,115 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="layout-stage" class:chat-open={chatStore.open} class:has-pattern={!!bgPattern}>
|
||||
<div
|
||||
class="app-shell {bgPattern ? `pattern-${bgPattern}` : ''}"
|
||||
style={`${bgSizeVw ? `--s:calc(${bgSizeVw} * 1vw);` : ''}--c1:${bgShades.c1};--c2:${bgShades.c2};--c3:${bgShades.c3};--c4:${bgShades.c4}`}
|
||||
>
|
||||
<Sidebar {famName} session={data.session} {isParent} {role} {isDemo} />
|
||||
<TopNav
|
||||
role={data.session ? role : ''}
|
||||
seasons={famStore.seasons.filter((s) => s.active !== false)}
|
||||
announcement={disabled && !activating ? accessMessage(accessReason, isParent) : ''}
|
||||
connected={!famStore.connectionDown}
|
||||
<!-- layout.svelte picker-mode branch -->
|
||||
{#if pickerMode}
|
||||
<main class="picker-stage">
|
||||
<SharedPicker
|
||||
standalone
|
||||
famSlug={data.famSlug}
|
||||
famName={data.pickerFamName}
|
||||
profiles={data.pickerChildren || []}
|
||||
/>
|
||||
</main>
|
||||
{:else}
|
||||
<div class="layout-stage" class:chat-open={chatStore.open} class:has-pattern={!!bgPattern}>
|
||||
<div
|
||||
class="app-shell {bgPattern ? `pattern-${bgPattern}` : ''}"
|
||||
style={`${bgSizeVw ? `--s:calc(${bgSizeVw} * 1vw);` : ''}--c1:${bgShades.c1};--c2:${bgShades.c2};--c3:${bgShades.c3};--c4:${bgShades.c4}`}
|
||||
>
|
||||
<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>
|
||||
</TopNav>
|
||||
<main class="app-main" class:join-page={page.url.pathname.split('/')[2] === 'join'}>
|
||||
<div class="page-wrap">
|
||||
<div class="page-content" class:locked>{@render children()}</div>
|
||||
|
||||
{#if locked}
|
||||
<div class="disabled-overlay">
|
||||
<div class="disabled-card">
|
||||
{#if !hasAuth}
|
||||
<h2>You need to be logged in to view this page</h2>
|
||||
{:else if activating}
|
||||
<div class="spinner" aria-hidden="true"></div>
|
||||
<strong>Activating your subscription…</strong>
|
||||
<span>Payment received — this usually only takes a few seconds.</span>
|
||||
{:else}
|
||||
<strong>Access paused</strong>
|
||||
<span>
|
||||
{isParent
|
||||
? 'Add an access code or resume your subscription to keep using FamDone.'
|
||||
: 'Your family access is paused.'}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
{#if claimToast}
|
||||
<a
|
||||
class="claim-toast"
|
||||
href={`/${page.params.fam}/${data.session?.username || page.params.username || ''}`}
|
||||
>
|
||||
<Sidebar {famName} session={data.session} {isParent} {role} {isDemo} />
|
||||
<TopNav
|
||||
role={data.session ? role : ''}
|
||||
seasons={famStore.seasons.filter((s) => s.active !== false)}
|
||||
announcement={disabled && !activating ? accessMessage(accessReason, isParent) : ''}
|
||||
connected={!famStore.connectionDown}
|
||||
>
|
||||
{claimToast} — view dashboard →
|
||||
</a>
|
||||
<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}
|
||||
<button
|
||||
class="kid-switch"
|
||||
onclick={() => (pickerOpen = true)}
|
||||
aria-label="Switch user (shared device)"
|
||||
title="Switch user"
|
||||
>
|
||||
<span class="kid-switch-dot" style="background:{data.session.memberColor || '#6366f1'}"
|
||||
></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">
|
||||
<div class="page-content" class:locked>{@render children()}</div>
|
||||
|
||||
{#if locked}
|
||||
<div class="disabled-overlay">
|
||||
<div class="disabled-card">
|
||||
{#if !hasAuth}
|
||||
<h2>You need to be logged in to view this page</h2>
|
||||
{:else if activating}
|
||||
<div class="spinner" aria-hidden="true"></div>
|
||||
<strong>Activating your subscription…</strong>
|
||||
<span>Payment received — this usually only takes a few seconds.</span>
|
||||
{:else}
|
||||
<strong>Access paused</strong>
|
||||
<span>
|
||||
{isParent
|
||||
? 'Add an access code or resume your subscription to keep using FamDone.'
|
||||
: 'Your family access is paused.'}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
{#if claimToast}
|
||||
<a
|
||||
class="claim-toast"
|
||||
href={`/${page.params.fam}/${data.session?.username || page.params.username || ''}`}
|
||||
>
|
||||
{claimToast} — view dashboard →
|
||||
</a>
|
||||
{/if}
|
||||
{#if sharedToast}
|
||||
<div class="shared-toast" role="status">{sharedToast}</div>
|
||||
{/if}
|
||||
<Footer sidebar />
|
||||
</div>
|
||||
{#if chatStore.open}
|
||||
<button class="chat-backdrop" onclick={() => chatStore.closeChat()} aria-label="Close chat"
|
||||
></button>
|
||||
{/if}
|
||||
<Chat {role} />
|
||||
{#if pickerOpen && deviceProfiles.length > 0}
|
||||
<SharedPicker
|
||||
profiles={deviceProfiles}
|
||||
activeId={data.session?.userId}
|
||||
famSlug={data.famSlug}
|
||||
oncancel={() => (pickerOpen = false)}
|
||||
/>
|
||||
{/if}
|
||||
{#if famStore.connectionDown}
|
||||
<div class="conn-toast" role="status">Reconnecting… live updates paused</div>
|
||||
{/if}
|
||||
<Footer sidebar />
|
||||
</div>
|
||||
{#if chatStore.open}
|
||||
<button class="chat-backdrop" onclick={() => chatStore.closeChat()} aria-label="Close chat"
|
||||
></button>
|
||||
{/if}
|
||||
<Chat {role} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.claim-toast {
|
||||
@@ -426,6 +554,69 @@
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.kid-switch {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background: #f3f4f6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.kid-switch:hover {
|
||||
background: #e5e7eb;
|
||||
}
|
||||
.kid-switch-dot {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
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%;
|
||||
background: whitesmoke;
|
||||
}
|
||||
.chat-toggle:hover {
|
||||
background: #e5e7eb;
|
||||
color: #4338ca;
|
||||
|
||||
Reference in New Issue
Block a user