fix dem bugs
This commit is contained in:
JCEEE
@@ -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%;
|
||||
|
||||
@@ -5,11 +5,28 @@
|
||||
import { ViewHeader, CardGrid, Card } from '$lib/components';
|
||||
import { formatDDMMYY } from '$lib/format';
|
||||
import { famStore } from '$lib/stores/fam.svelte';
|
||||
import { sharedDevice } from '$lib/stores/shared-device.svelte';
|
||||
import { monitorIcon } from '$lib/components/icons';
|
||||
import { handleOf } from '@shared/slugify';
|
||||
import { addDaysStr, resolveTz, todayInTz } from '@shared/timezone';
|
||||
|
||||
Chart.register(...registerables);
|
||||
|
||||
// Time-of-day greeting, picked once per load (not a ticking clock).
|
||||
const GREETINGS: { from: number; to: number; lines: string[] }[] = [
|
||||
{ from: 5, to: 12, lines: ['Good morning', 'Rise and shine', 'Morning, crew'] },
|
||||
{ from: 12, to: 17, lines: ['Good afternoon', 'Back on it', 'Afternoon push'] },
|
||||
{ from: 17, to: 22, lines: ['Good evening', 'Welcome back', 'Evening shift'] },
|
||||
{ from: 22, to: 29, lines: ['Night owls', 'Still at it', 'Burning the midnight oil'] }
|
||||
];
|
||||
let greeting = $state(
|
||||
(() => {
|
||||
const h = new Date().getHours();
|
||||
const band = GREETINGS.find((g) => (h >= g.from && h < g.to) || (g.to > 24 && h < g.to - 24)) || GREETINGS[0];
|
||||
return band.lines[Math.floor(Math.random() * band.lines.length)];
|
||||
})()
|
||||
);
|
||||
|
||||
let { data } = $props();
|
||||
let famSlug = $derived(page.data.famSlug ?? page.params.fam);
|
||||
|
||||
@@ -314,8 +331,8 @@
|
||||
</script>
|
||||
|
||||
<ViewHeader
|
||||
title={page.data.fam?.name || famSlug}
|
||||
subtitle={summary?.weekStart ? `Week of ${formatDDMMYY(summary.weekStart)}` : 'Dashboard'}
|
||||
title={greeting}
|
||||
subtitle={`${page.data.fam?.name || famSlug}${summary?.weekStart ? ` · Week of ${formatDDMMYY(summary.weekStart)}` : ''}`}
|
||||
hero
|
||||
>
|
||||
<!-- All-time family totals, large in the header -->
|
||||
@@ -329,6 +346,19 @@
|
||||
<span class="vh-lbl">cash earned all time</span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- Shared-computer toggle, bottom-left of the hero -->
|
||||
<div class="vh-foot">
|
||||
<button
|
||||
class="shared-hero-toggle"
|
||||
class:on={sharedDevice.on}
|
||||
onclick={() => sharedDevice.toggle()}
|
||||
aria-pressed={sharedDevice.on}
|
||||
title={sharedDevice.on ? 'Shared computer mode is ON' : 'Mark this as a shared computer'}
|
||||
>
|
||||
{@html monitorIcon}
|
||||
<span>Shared computer {sharedDevice.on ? '· On' : '· Off'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</ViewHeader>
|
||||
|
||||
<!-- STAT TILES -->
|
||||
@@ -496,6 +526,36 @@
|
||||
letter-spacing: 0.08em;
|
||||
opacity: 0.85;
|
||||
}
|
||||
/* Shared-computer toggle row, bottom-left of the hero */
|
||||
.vh-foot {
|
||||
flex: 1 1 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.shared-hero-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.35);
|
||||
border-radius: 999px;
|
||||
padding: 0.4rem 0.95rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
.shared-hero-toggle:hover {
|
||||
background: rgba(255, 255, 255, 0.28);
|
||||
color: #fff;
|
||||
}
|
||||
.shared-hero-toggle.on {
|
||||
background: #fff;
|
||||
color: #4338ca;
|
||||
border-color: transparent;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* ── Chores card totals ── */
|
||||
.chores-totals {
|
||||
|
||||
@@ -242,10 +242,11 @@
|
||||
showTodoModal = true;
|
||||
}
|
||||
|
||||
function openCreateChore() {
|
||||
assignModal = { t: null as any, memberId: members[0]?.id || '' };
|
||||
function openCreateChore(memberId = '') {
|
||||
const target = memberId || members[0]?.id || '';
|
||||
assignModal = { t: null as any, memberId: target };
|
||||
assignStep = 1;
|
||||
assignTarget = 'member';
|
||||
assignTarget = target ? 'member' : 'shared';
|
||||
assignName = '';
|
||||
assignDescription = '';
|
||||
assignColor = '';
|
||||
@@ -390,12 +391,14 @@
|
||||
{/if}
|
||||
|
||||
<CardGrid stackTablet>
|
||||
<!-- Templates Section (at top, like bonuses) -->
|
||||
<Card cols={3}>
|
||||
<!-- Templates Section (at top, like bonuses). Desktop only — dragging
|
||||
needs pointer precision; below desktop each member card gets its own
|
||||
"Create a chore" button instead. -->
|
||||
<Card cols={3} class="chores-templates-card">
|
||||
<div class="template-section">
|
||||
<div class="template-header">
|
||||
<h3>Templates — Drag to assign</h3>
|
||||
<button class="add-inline" onclick={openCreateChore}>＋ Create a chore</button>
|
||||
<button class="add-inline" onclick={() => openCreateChore()}>＋ Create a chore</button>
|
||||
</div>
|
||||
<div class="template-list">
|
||||
{#each templates as t}
|
||||
@@ -607,6 +610,9 @@
|
||||
{#if assignedForMember(m.id).length === 0}
|
||||
<p class="empty">Drop a chore here</p>
|
||||
{/if}
|
||||
<button class="add-inline accordion-add" onclick={() => openCreateChore(m.id)}
|
||||
>＋ Create a chore</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -690,6 +696,9 @@
|
||||
{:else}
|
||||
<p class="empty">Drop a chore here</p>
|
||||
{/each}
|
||||
<button class="add-inline accordion-add" onclick={() => openCreateChore('')}
|
||||
>＋ Create a chore</button
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -1193,6 +1202,12 @@
|
||||
.template-list .card.template {
|
||||
width: 100%;
|
||||
}
|
||||
/* Below desktop there's no drag-and-drop — hide the templates strip
|
||||
(each member/shared card carries its own Create button instead).
|
||||
:global because the class lives on the Card component's root. */
|
||||
:global(.chores-templates-card) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* ── Kanban (3 columns, scrolls via Card scrollX) ── */
|
||||
.kanban {
|
||||
@@ -1266,6 +1281,7 @@
|
||||
.add-inline:hover {
|
||||
border-color: #6366f1;
|
||||
background: #eef2ff;
|
||||
color: #4338ca;
|
||||
}
|
||||
|
||||
.card {
|
||||
|
||||
Reference in New Issue
Block a user