varierty of implementstions based on platform droplet issuance

frontend/src/routes/[fam]/[username]/+page.svelte

@@ -124,7 +124,7 @@
 		setTimeout(() => (toast = ''), 4000);
 	}
 
-	function handleResult({ result }, onSuccess = null) {
+	function handleResult({ result }: any, onSuccess: ((d: any) => void) | null = null) {
 		const d = result.data || {};
 		if (d.error) showToast(d.error);
 		else if (result.type === 'success') {
@@ -273,6 +273,38 @@
 			})
 	);
 
+	// Celebration badge — completed todos from the last 24h, dismissed per-device
+	// via localStorage (no PB storage; auto-expires after 24h).
+	let celebrateDismissed = $state<string[]>([]);
+	if (typeof localStorage !== 'undefined') {
+		celebrateDismissed = JSON.parse(localStorage.getItem('celebrateDismissed') || '[]');
+	}
+	function dismissCelebrate(id: string) {
+		if (!celebrateDismissed.includes(id)) {
+			celebrateDismissed = [...celebrateDismissed, id];
+			try {
+				localStorage.setItem('celebrateDismissed', JSON.stringify(celebrateDismissed));
+			} catch {}
+		}
+	}
+	let celebrations = $derived.by(() => {
+		const cutoff = Date.now() - 24 * 3600 * 1000;
+		return completions
+			.filter((c: Completion) => {
+				if (c.id.startsWith('optimistic-')) return false;
+				const at = c.completedAt ? new Date(c.completedAt).getTime() : 0;
+				if (!at || at < cutoff) return false;
+				const chore = assigned.find((a) => a.id === c.assignedChoreId);
+				return !!chore?.isTodo && !celebrateDismissed.includes(c.id);
+			})
+			.map((c: Completion) => {
+				const chore = assigned.find((a) => a.id === c.assignedChoreId);
+				const emoji =
+					chore?.type === 'emoji' ? chore.emoji || '🎉' : chore?.type === 'money' ? '💸' : '⭐';
+				return { id: c.id, emoji, name: chore?.customName || 'Todo' };
+			});
+	});
+
 	let dailyPending = $derived(
 		memberChores.filter((a) => a.frequency === 'daily' && !isCompleted(a.id, todayChild))
 	);
@@ -640,11 +672,13 @@
 							<div class="card-header">
 								<span class="dot" style="background:{m.color}"></span>
 								<span class="member-name">{m.name}</span>
-								<Button
-									href="/{famSlug}/{username}/bonuses?s=pocketmoney"
-									variant="secondary"
-									size="sm">Pocket money</Button
-								>
+								{#if !(pm && pm.rewardValue)}
+									<Button
+										href="/{famSlug}/{username}/bonuses?s=pocketmoney"
+										variant="secondary"
+										size="sm">Pocket money</Button
+									>
+								{/if}
 							</div>
 							<div class="stats">
 								<span>Points: {s?.pointsEarned ?? 0}</span>
@@ -1163,6 +1197,17 @@ const res = await fetch('/api/members', {
 				</div>
 			</div>
 		{:else}
+		{#if celebrations.length > 0}
+			<div class="celebrations">
+				{#each celebrations as cel}
+					<div class="celebrate-card">
+						<span class="celebrate-emoji">{cel.emoji}</span>
+						<span class="celebrate-text"><strong>{cel.name}</strong> complete — amazing work!</span>
+						<button class="celebrate-close" onclick={() => dismissCelebrate(cel.id)}>✕</button>
+					</div>
+				{/each}
+			</div>
+		{/if}
 		<div class="kanban">
 			<div class="column col-daily">
 				<h2>🎯 Daily ({dailyPending.length})</h2>
@@ -1206,7 +1251,7 @@ const res = await fetch('/api/members', {
 								<span class="checkbox">📋</span>
 								<span class="chore-name">{todo.customName || 'Todo'}</span>
 								<span class="todo-label">todo</span>
-								<span class="chore-value">🎯</span>
+								<span class="chore-value">{todo.emoji || '🎯'}</span>
 							</div>
 						{:else}
 							<button
@@ -1222,7 +1267,11 @@ const res = await fetch('/api/members', {
 								<span class="checkbox">📋</span>
 								<span class="chore-name">{todo.customName || 'Todo'}</span>
 								<span class="todo-label">todo</span>
-								<span class="chore-value">{todo.value} {todo.type}</span>
+								<span class="chore-value">
+									{todo.type === 'money'
+										? `£${Number(todo.value).toFixed(2)}`
+										: `${todo.value} pts`}
+								</span>
 							</button>
 						{/if}
 					{/each}
@@ -1879,6 +1928,48 @@ const res = await fetch('/api/members', {
 	}
 
 	/* ── Kanban ── */
+	.celebrations {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin-bottom: 0.75rem;
+	}
+	.celebrate-card {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		background: linear-gradient(90deg, #fef3c7, #fce7f3);
+		border: 1px solid #fcd34d;
+		border-radius: 12px;
+		padding: 0.55rem 0.85rem;
+		animation: celebrate-pop 0.35s ease-out;
+	}
+	@keyframes celebrate-pop {
+		from {
+			transform: scale(0.9);
+			opacity: 0;
+		}
+		to {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+	.celebrate-emoji {
+		font-size: 1.6rem;
+	}
+	.celebrate-text {
+		flex: 1;
+		font-size: 0.85rem;
+		color: #78350f;
+	}
+	.celebrate-close {
+		background: none;
+		border: none;
+		color: #92400e;
+		cursor: pointer;
+		font-size: 0.85rem;
+		padding: 0.15rem;
+	}
 	.kanban {
 		display: grid;
 		grid-template-columns: 1fr 1fr 1fr;

frontend/src/routes/[fam]/[username]/bonuses/+page.server.ts

@@ -198,7 +198,8 @@ export const actions = {
 			criteriaValue: parseInt(fd.get('criteriaValue') as string, 10) || 0,
 			period: fd.get('period') || '',
 			memberId: fd.get('memberId') || '',
-			status
+			status,
+			isPocketMoney: !!fd.get('isPocketMoney')
 		};
 		if (data.occurrence === 'once') data.period = '';
 		try {

frontend/src/routes/[fam]/[username]/bonuses/+page.svelte

@@ -4,6 +4,8 @@
 	import { enhance } from '$app/forms';
 	import { famStore } from '$lib/stores/fam.svelte';
 	import { ViewHeader, CardGrid, Card, Button } from '$lib/components';
+	import TemplateIcon from '$lib/components/TemplateIcon.svelte';
+	import Clock from '@lucide/svelte/icons/clock';
 	import type {
 		BonusConfig,
 		BonusTemplate,
@@ -15,10 +17,8 @@
 
 	let { data }: { data: PageData } = $props();
 
-	let showCreateModal = $state(false);
 	let showEditModal = $state(false);
 	let editingConfig = $state<BonusConfig | null>(null);
-	let editingTemplate = $state<BonusTemplate | null>(null);
 	let creatingFromTemplate = $state<BonusTemplate | null>(null);
 
 	let createVals = $state({
@@ -74,7 +74,7 @@
 	let createIsPercent = $derived(createVals.type === 'threshold' && createVals.thresholdType === 'percent');
 	let editIsPercent = $derived(editVals.type === 'threshold' && editVals.thresholdType === 'percent');
 
-	let templateConfigs = $derived(templates as BonusTemplate[]);
+	let templateConfigs = $derived((templates as BonusTemplate[]).filter((t) => t.global));
 	let allBonusConfigs = $derived(
 		configs.filter((c: BonusConfig) => c.status !== 'completed') as BonusConfig[]
 	);
@@ -137,7 +137,6 @@
 		if (!tpl) return;
 		creatingFromTemplate = tpl;
 		editingConfig = null;
-		editingTemplate = null;
 		editVals = {
 			name: tpl.name,
 			description: tpl.description || '',
@@ -173,26 +172,18 @@
 		if (raw) openCreateFromTemplate(raw, 'collaborative');
 	}
 
-	function handleCreate() {
-		return async ({ result }: any) => {
-			if (result.type === 'success') showCreateModal = false;
-		};
-	}
-
 	function handleUpdate() {
 		return async ({ result }: any) => {
 			if (result.type === 'success') {
 				showEditModal = false;
 				creatingFromTemplate = null;
 				editingConfig = null;
-				editingTemplate = null;
 			}
 		};
 	}
 
 	function openEditConfig(cfg: BonusConfig) {
 		editingConfig = cfg;
-		editingTemplate = null;
 		creatingFromTemplate = null;
 		editVals = {
 			name: cfg.name,
@@ -245,58 +236,32 @@
 		<div class="template-section">
 			<h3>Templates — Drag to assign</h3>
 			<div class="template-list">
-				{#each templateConfigs as cfg}
-					<div class="template-card" draggable="true" ondragstart={(e) => handleDragStart(e, cfg)}>
-						<div class="card-head">
-							<strong>{cfg.name}</strong>
-						</div>
-						<div class="badges">
-							<span class="badge {badgeClass(cfg)}">{cfg.target}</span>
-							<span class="badge">{cfg.type}</span>
-							<span class="badge">{cfg.occurrence}</span>
-							{#if cfg.period}
-								<span class="badge period">{cfg.period}</span>
-							{/if}
-							{#if cfg.isPocketMoney}
-								<span class="badge pocket">Pocket Money</span>
-							{/if}
-						</div>
-						<div class="reward-preview">
-							{formatReward(cfg.rewardType, cfg.rewardValue)}
-						</div>
-						<Button
-							variant="ghost"
-							size="sm"
-							onclick={() => {
-								editingTemplate = cfg;
-								editingConfig = null;
-								creatingFromTemplate = null;
-								editVals = {
-									name: cfg.name,
-									description: cfg.description || '',
-									target: cfg.target,
-									memberId: '',
-									type: cfg.type,
-									thresholdType: cfg.thresholdType || 'points',
-									occurrence: cfg.occurrence,
-									rewardType: cfg.rewardType,
-									rewardValue: cfg.rewardValue,
-									criteriaValue: cfg.criteriaValue || 10,
-									period: cfg.occurrence === 'once' ? '' : cfg.period || '',
-									startMode: 'today'
-								};
-								showEditModal = true;
-							}}
-						>
-							Edit
-						</Button>
+			{#each templateConfigs as cfg}
+				<div class="template-card" draggable="true" ondragstart={(e) => handleDragStart(e, cfg)} style="border-left-color:{cfg.color}">
+					<div class="card-head">
+						<TemplateIcon name={cfg.icon} size={18} color={cfg.color} />
+						<strong>{cfg.name}</strong>
 					</div>
-				{/each}
+					<div class="badges">
+						<span class="badge {badgeClass(cfg)}">{cfg.target}</span>
+						<span class="badge">{cfg.type}</span>
+						<span class="badge">{cfg.occurrence}</span>
+						{#if cfg.period}
+							<span class="badge period">{cfg.period}</span>
+						{/if}
+						{#if cfg.isPocketMoney}
+							<span class="badge pocket">Pocket Money</span>
+						{/if}
+					</div>
+					<div class="reward-preview">
+						{formatReward(cfg.rewardType, cfg.rewardValue)}
+					</div>
+				</div>
+			{/each}
 				{#if templateConfigs.length === 0}
 					<p class="empty">No templates yet</p>
 				{/if}
 			</div>
-			<Button onclick={() => (showCreateModal = true)}>New Template</Button>
 		</div>
 	</Card>
 	<Card cols={3} scrollX>
@@ -305,7 +270,14 @@
 			<div class="column member-col" ondragover={handleDragOver} ondrop={handleDropToMember}>
 				<h3>Member</h3>
 				{#each allBonusConfigs.filter((c) => c.target === 'individual' && !doneConfigs.includes(c)) as cfg}
-					<div class="col-card" class:disabled={disabledIds.has(cfg.id)}>
+					<div
+						class="col-card"
+						class:disabled={disabledIds.has(cfg.id)}
+						role="button"
+						tabindex="0"
+						onclick={() => openEditConfig(cfg)}
+						onkeydown={(e) => e.key === 'Enter' && openEditConfig(cfg)}
+					>
 						<div class="col-card-head">
 							<strong>{cfg.name}</strong>
 							<div class="badges">
@@ -316,6 +288,9 @@
 									<span class="badge pocket">Pocket Money</span>
 								{/if}
 							</div>
+							<span class="reward-total {cfg.rewardType}">
+								{cfg.rewardType === 'cash' ? `£${Number(cfg.rewardValue).toFixed(2)}` : `${cfg.rewardValue} pts`}
+							</span>
 						</div>
 						{#each members as m}
 							{#if !cfg.memberId || cfg.memberId === m.id}
@@ -344,16 +319,14 @@
 											</div>
 										{/if}
 										<span class="stat {p?.state ?? 'pending'}">
-											{p ? p.state : 'Pending'}
+											{#if !p || p.state === 'pending'}<Clock size={13} />{:else}{p.state}{/if}
 										</span>
 									</div>
 								{/if}
 							{/if}
 						{/each}
 						<div class="col-card-foot">
-							<Button variant="secondary" size="sm" onclick={() => openEditConfig(cfg)}>
-								Edit
-							</Button>
+							<span class="click-edit">Click to edit</span>
 						</div>
 					</div>
 				{/each}
@@ -367,7 +340,14 @@
 				<h3>Competition</h3>
 				{#each allBonusConfigs.filter((c) => c.target === 'competitive' && !doneConfigs.includes(c)) as cfg}
 					{@const prog = progressByConfigId.get(cfg.id)}
-					<div class="col-card" class:disabled={disabledIds.has(cfg.id)}>
+					<div
+						class="col-card"
+						class:disabled={disabledIds.has(cfg.id)}
+						role="button"
+						tabindex="0"
+						onclick={() => openEditConfig(cfg)}
+						onkeydown={(e) => e.key === 'Enter' && openEditConfig(cfg)}
+					>
 						<div class="col-card-head">
 							<strong>{cfg.name}</strong>
 							<div class="badges">
@@ -375,6 +355,9 @@
 								<span class="badge">{cfg.type}</span>
 								<span class="badge">{cfg.occurrence}</span>
 							</div>
+							<span class="reward-total {cfg.rewardType}">
+								{cfg.rewardType === 'cash' ? `£${Number(cfg.rewardValue).toFixed(2)}` : `${cfg.rewardValue} pts`}
+							</span>
 						</div>
 						{#if prog}
 							<div class="leaderboard">
@@ -397,16 +380,14 @@
 											</div>
 										{/if}
 										<span class="stat {p.state}">
-											{p.state}
+											{#if p.state === 'pending'}<Clock size={13} />{:else}{p.state}{/if}
 										</span>
 									</div>
 								{/each}
 							</div>
 						{/if}
 						<div class="col-card-foot">
-							<Button variant="secondary" size="sm" onclick={() => openEditConfig(cfg)}>
-								Edit
-							</Button>
+							<span class="click-edit">Click to edit</span>
 						</div>
 					</div>
 				{/each}
@@ -420,7 +401,14 @@
 				<h3>Collaboration</h3>
 				{#each allBonusConfigs.filter((c) => c.target === 'collaborative') as cfg}
 					{@const prog = progressByConfigId.get(cfg.id)}
-					<div class="col-card" class:disabled={disabledIds.has(cfg.id)}>
+					<div
+						class="col-card"
+						class:disabled={disabledIds.has(cfg.id)}
+						role="button"
+						tabindex="0"
+						onclick={() => openEditConfig(cfg)}
+						onkeydown={(e) => e.key === 'Enter' && openEditConfig(cfg)}
+					>
 						<div class="col-card-head">
 							<strong>{cfg.name}</strong>
 							<div class="badges">
@@ -428,6 +416,9 @@
 								<span class="badge">{cfg.type}</span>
 								<span class="badge">{cfg.occurrence}</span>
 							</div>
+							<span class="reward-total {cfg.rewardType}">
+								{cfg.rewardType === 'cash' ? `£${Number(cfg.rewardValue).toFixed(2)}` : `${cfg.rewardValue} pts`}
+							</span>
 						</div>
 						{#if prog}
 							{@const team = prog.progress[0]}
@@ -453,15 +444,13 @@
 										{cfg.type === 'threshold' ? 'pts' : 'chores'}</span
 									>
 									<span class="stat {team.state}">
-										{team.state}
+										{#if team.state === 'pending'}<Clock size={13} />{:else}{team.state}{/if}
 									</span>
 								</div>
 							{/if}
 						{/if}
 						<div class="col-card-foot">
-							<Button variant="secondary" size="sm" onclick={() => openEditConfig(cfg)}>
-								Edit
-							</Button>
+							<span class="click-edit">Click to edit</span>
 						</div>
 					</div>
 				{/each}
@@ -471,146 +460,32 @@
 			</div>
 		</div>
 
-		{#if showCreateModal}
-			<div class="overlay" onclick={() => (showCreateModal = false)} role="presentation">
-				<div class="modal" onclick={(e) => e.stopPropagation()} role="dialog">
-					<h3>New Bonus Template</h3>
-					<form method="POST" action="?/createTemplate" use:enhance={handleCreate}>
-						<label>Name <input name="name" bind:value={createVals.name} required /></label>
-						<label
-							>Description <input name="description" bind:value={createVals.description} /></label
-						>
-						<label
-							>Target
-							<select name="target" bind:value={createVals.target}>
-								<option value="individual">Individual</option>
-								<option value="competitive">Competition</option>
-								<option value="collaborative">Collaborative</option>
-							</select>
-						</label>
-						<label
-							>Type
-							<select name="type" bind:value={createVals.type}>
-								<option value="threshold">Threshold</option>
-								<option value="count">Count</option>
-								<option value="manual">Manual</option>
-							</select>
-						</label>
-						{#if createVals.type === 'threshold'}
-							<label
-								>Threshold by
-								<select name="thresholdType" bind:value={createVals.thresholdType}>
-									<option value="points">Points</option>
-									<option value="percent">% of chores done</option>
-								</select>
-							</label>
-						{/if}
-						{#if showCriteriaForCreate}
-							{#if createIsPercent}
-								<label
-									>Chores completed (%)
-									<input
-										type="range"
-										min="0"
-										max="100"
-										name="criteriaValue"
-										bind:value={createVals.criteriaValue}
-									/>
-									<span class="hint">{createVals.criteriaValue}% of chores this week</span>
-								</label>
-							{:else}
-								<label
-									>Target Value
-									<input
-										type="number"
-										name="criteriaValue"
-										bind:value={createVals.criteriaValue}
-										required
-									/>
-									<span class="hint"
-										>{createVals.type === 'threshold' ? 'Points to reach' : 'Number of chores'}</span
-									>
-								</label>
-							{/if}
-						{/if}
-						<label
-							>Occurrence
-							<select name="occurrence" bind:value={createVals.occurrence}>
-								<option value="recurring">Recurring</option>
-								<option value="once">Once</option>
-							</select>
-						</label>
-						{#if showPeriodForCreate}
-							<label
-								>Period
-								<select name="period" bind:value={createVals.period}>
-									<option value="">None</option>
-									<option value="daily">Daily</option>
-									<option value="weekly">Weekly</option>
-									<option value="monthly">Monthly</option>
-								</select>
-							</label>
-						{/if}
-						<label
-							>Reward Type
-							<select name="rewardType" bind:value={createVals.rewardType}>
-								<option value="points">Points</option>
-								<option value="cash">Cash</option>
-								<option value="prize">Prize</option>
-							</select>
-						</label>
-						<label
-							>Reward Value
-							<input name="rewardValue" bind:value={createVals.rewardValue} required />
-							<span class="hint"
-								>{createVals.rewardType === 'cash'
-									? 'Amount in £ (e.g. 2.00 = £2.00)'
-									: createVals.rewardType === 'points'
-										? 'Points to award'
-										: 'Prize description'}</span
-							>
-						</label>
-						<div class="modal-actions">
-							<button type="button" onclick={() => (showCreateModal = false)}>Cancel</button>
-							<button type="submit">Create</button>
-						</div>
-					</form>
-				</div>
-			</div>
-		{/if}
-
 		<!-- Edit / Create-from-Template Modal -->
-		{#if showEditModal && (editingConfig || editingTemplate || creatingFromTemplate)}
-			{@const targetCfg = creatingFromTemplate || editingConfig || editingTemplate!}
+		{#if showEditModal && (editingConfig || creatingFromTemplate)}
+			{@const targetCfg = creatingFromTemplate || editingConfig!}
 			<div
 				class="overlay"
 				onclick={() => {
 					showEditModal = false;
 					creatingFromTemplate = null;
 					editingConfig = null;
-					editingTemplate = null;
 				}}
 				role="presentation"
 			>
 				<div class="modal" onclick={(e) => e.stopPropagation()} role="dialog">
 					<h3>
-						{creatingFromTemplate
-							? 'Create from: '
-							: editingTemplate
-								? 'Edit Template: '
-								: 'Edit: '}{targetCfg.name}
+						{creatingFromTemplate ? 'Create from: ' : 'Edit: '}{targetCfg.name}
 					</h3>
 					<form
 						method="POST"
-						action={editingTemplate
-							? '?/updateTemplate'
-							: creatingFromTemplate
-								? '?/createFromTemplate'
-								: '?/updateConfig'}
+						action={creatingFromTemplate ? '?/createFromTemplate' : '?/updateConfig'}
 						use:enhance={handleUpdate}
 					>
-						{#if editingConfig || editingTemplate}
-							<input type="hidden" name="id" value={editingConfig?.id || editingTemplate!.id} />
+						{#if editingConfig}
+							<input type="hidden" name="id" value={editingConfig?.id} />
+						{/if}
+						{#if creatingFromTemplate}
+							<input type="hidden" name="isPocketMoney" value={creatingFromTemplate.isPocketMoney ? '1' : ''} />
 						{/if}
 						<label>Name <input name="name" bind:value={editVals.name} required /></label>
 						<label>Description <input name="description" bind:value={editVals.description} /></label
@@ -804,7 +679,7 @@
 									Delete
 								</button>
 							{/if}
-							<button type="submit">{creatingFromTemplate ? 'Confirm' : 'Save'}</button>
+							<button type="submit">{creatingFromTemplate ? 'Assign' : 'Save'}</button>
 						</div>
 					</form>
 				</div>
@@ -822,22 +697,14 @@
 		font-size: 1rem;
 	}
 	.template-list {
-		display: grid;
+		display: flex;
+		flex-wrap: wrap;
 		gap: 0.5rem;
 		margin-bottom: 0.75rem;
-		grid-template-columns: repeat(4, minmax(0, 1fr));
-	}
-	@media (max-width: 1100px) {
-		.template-list {
-			grid-template-columns: repeat(3, minmax(0, 1fr));
-		}
-	}
-	@media (max-width: 720px) {
-		.template-list {
-			grid-template-columns: repeat(2, minmax(0, 1fr));
-		}
 	}
 	.template-card {
+		flex: 0 1 auto;
+		min-width: 160px;
 		background: white;
 		border: 1px solid #e5e7eb;
 		border-left: 4px solid #8b5cf6;
@@ -877,8 +744,9 @@
 	}
 	.card-head {
 		display: flex;
-		justify-content: space-between;
+		justify-content: flex-start;
 		align-items: center;
+		gap: 0.4rem;
 		margin-bottom: 0.4rem;
 	}
 	.card-head strong {
@@ -957,6 +825,7 @@
 		border-radius: 10px;
 		padding: 0.65rem 0.85rem;
 		margin-bottom: 0.6rem;
+		cursor: pointer;
 		transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
 	}
 	.col-card:hover {
@@ -964,6 +833,27 @@
 		box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
 		border-color: #c7d2fe;
 	}
+	.col-card:focus-visible {
+		outline: 2px solid #6366f1;
+		outline-offset: 2px;
+	}
+	.reward-total {
+		margin-left: auto;
+		font-size: 0.8rem;
+		font-weight: 700;
+		white-space: nowrap;
+	}
+	.reward-total.cash {
+		color: #16a34a;
+	}
+	.reward-total.points {
+		color: #9333ea;
+	}
+	.click-edit {
+		margin-left: auto;
+		font-size: 0.68rem;
+		color: #9ca3af;
+	}
 	.col-card.done {
 		opacity: 0.75;
 	}
@@ -986,6 +876,7 @@
 	.col-card-foot {
 		margin-top: 0.5rem;
 		display: flex;
+		justify-content: flex-end;
 		gap: 0.3rem;
 	}
 	.member-progress {
@@ -1027,6 +918,9 @@
 		padding: 0.1rem 0.25rem;
 		border-radius: 0.25rem;
 		background: #e5e7eb;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.15rem;
 	}
 	.stat.pending {
 		background: #e5e7eb;

frontend/src/routes/[fam]/[username]/chores/+page.server.ts

@@ -7,7 +7,7 @@ export async function load(event) {
 	const famId = event.locals.user.famId;
 	const pb = pbUser(event);
 	const [templates, members, assigned, seasons, completions] = await Promise.all([
-		pb.collection('chore_templates').getFullList({ filter: `famId = '${famId}'` }),
+		pb.collection('chore_templates').getFullList({ filter: `(famId = '${famId}' || global = true)` }),
 		pb.collection('users').getFullList({
 			filter: `famId = '${famId}' && role = 'child'`
 		}),
@@ -111,8 +111,10 @@ export const actions = {
 			const completeBy = fd.get('completeBy') as string;
 			const startDate = fd.get('startDate') as string;
 			if (type) data.type = type;
-			if (type === 'emoji') data.value = 0;
-			else if (fd.get('value')) data.value = parseFloat(fd.get('value') as string) || 0;
+			if (type === 'emoji') {
+				data.value = 0;
+				data.emoji = (fd.get('emoji') as string) || '🎉';
+			} else if (fd.get('value')) data.value = parseFloat(fd.get('value') as string) || 0;
 			data.customName = customName || undefined;
 			if (completeBy) data.completeBy = completeBy;
 			if (startDate) data.startDate = startDate;
@@ -146,6 +148,7 @@ export const actions = {
 		const name = fd.get('name') as string;
 		const type = fd.get('type') as string;
 		const value = type === 'emoji' ? 0 : (parseFloat(fd.get('value') as string) || 0);
+		const emoji = type === 'emoji' ? ((fd.get('emoji') as string) || '🎉') : '';
 		const todoStart = fd.get('todoStart') as string;
 		const todoCompleteBy = fd.get('todoCompleteBy') as string;
 		const customDate = fd.get('customDate') as string;
@@ -181,6 +184,7 @@ export const actions = {
 			value,
 			customName: name,
 			isTodo: true,
+			emoji,
 			startDate,
 			completeBy
 		};

frontend/src/routes/[fam]/[username]/chores/+page.svelte

@@ -3,6 +3,7 @@
 	import { page } from '$app/state';
 	import { famStore } from '$lib/stores/fam.svelte';
 	import { ViewHeader, CardGrid, Card } from '$lib/components';
+	import TemplateIcon from '$lib/components/TemplateIcon.svelte';
 	import { formatHumanDate } from '$lib/format';
 	import type { ChoreTemplate, AssignedChore, Member, Season, Completion } from '$lib/types';
 
@@ -14,48 +15,53 @@
 
 	let { data, form } = $props();
 
-	let showCreateModal = $state(false);
 	let showEditModal = $state(false);
-	let showEditTemplateModal = $state(false);
 	let showTodoModal = $state(false);
 	let editingAssignment = $state<AssignedChore | null>(null);
-	let editingTemplate = $state<ChoreTemplate | null>(null);
 	let editMemberId = $state('');
 	let draggedTemplateId = $state<string | null>(null);
 	let todoMemberId = $state('');
 
-	let createName = $state('');
-	let createFreq = $state('daily');
-	let createType = $state('points');
-	let createValue = $state(10);
+	// Assign-from-template modal (platform templates are copied into the family
+	// as assigned chores; the fam admin amends before saving).
+	let assignModal = $state<{ t: ChoreTemplate; memberId: string } | null>(null);
+	let assignFreq = $state('daily');
+	let assignType = $state('points');
+	let assignValue = $state(10);
+	let assignSeasonIds = $state<string[]>([]);
 
 	// Todo form state
 	let todoName = $state('');
-	let todoType = $state<'points' | 'emoji'>('points');
+	let todoType = $state<'points' | 'money' | 'emoji'>('points');
 	let todoValue = $state(10);
+	let todoEmoji = $state('🎉');
+	let showTodoEmojiPicker = $state(false);
 	let todoStart = $state<'now' | 'next-week'>('now');
 	let todoCompleteBy = $state<'next-week' | 'custom'>('next-week');
 	let todoCustomDate = $state('');
 
+	// Curated celebration emojis for todos
+	const EMOJI_CHOICES = [
+		'🎉', '⭐', '🏆', '💪', '🧹', '📚', '🦸', '✨', '🌟', '🥇',
+		'🎯', '💚', '🚀', '🦄', '🌈', '🍀', '🎨', '🎸', '⚽', '🍰'
+	];
+
 	let editFreq = $state('daily');
 	let editType = $state('points');
 	let editValue = $state(10);
 	let editCustomName = $state('');
+	let editEmoji = $state('🎉');
 	let editTodoCompleteBy = $state('');
 	let editTodoStartDate = $state('');
 
-	let editTplName = $state('');
-	let editTplFreq = $state('daily');
-	let editTplType = $state('points');
-	let editTplValue = $state(10);
-
 	let seasonFilter = $state('all');
 	let editSeasonIds = $state<string[]>([]);
 
-	let templates = $state(
-		famStore.initialized
-			? (famStore.templates as ChoreTemplate[])
-			: (data.templates as ChoreTemplate[]) || []
+	// Platform-owned templates only — families assign these, they don't create.
+	let templates = $derived(
+		((famStore.initialized ? (famStore.templates as ChoreTemplate[]) : (data.templates as ChoreTemplate[])) || []).filter(
+			(t: ChoreTemplate) => t.global
+		)
 	);
 	let members = $state(
 		famStore.initialized ? (famStore.members as Member[]) : (data.members as Member[]) || []
@@ -122,20 +128,29 @@
 	async function handleDrop(e: DragEvent, memberId: string) {
 		e.preventDefault();
 		const tid = e.dataTransfer?.getData('text/plain') || draggedTemplateId;
-		if (!tid) return;
 		draggedTemplateId = null;
+		if (!tid) return;
+		const t = templates.find((x) => x.id === tid);
+		if (!t) return;
+		assignModal = { t, memberId };
+		assignFreq = t.defaultFrequency;
+		assignType = t.defaultType;
+		assignValue = t.defaultValue;
+		assignSeasonIds = seasonFilter !== 'all' ? [seasonFilter] : [];
+	}
 
+	async function assignChore() {
+		if (!assignModal) return;
 		const s = page.data.session as any;
 		if (!s) return;
-		const def = getDefault(tid);
 		const body: Record<string, unknown> = {
-			memberId,
-			templateId: tid,
-			frequency: def.frequency,
-			type: def.type,
-			value: def.value
+			memberId: assignModal.memberId,
+			templateId: assignModal.t.id,
+			frequency: assignFreq,
+			type: assignType,
+			value: assignValue
 		};
-		if (seasonFilter !== 'all') body.seasonIds = [seasonFilter];
+		if (assignSeasonIds.length) body.seasonIds = assignSeasonIds;
 		await fetch(`/api/admin/${s.famId}/assigned-chores`, {
 			method: 'POST',
 			headers: {
@@ -145,6 +160,7 @@
 			},
 			body: JSON.stringify(body)
 		});
+		assignModal = null;
 	}
 
 	// Accordion state per member: which section is open
@@ -160,6 +176,8 @@
 		todoName = '';
 		todoType = 'points';
 		todoValue = 10;
+		todoEmoji = '🎉';
+		showTodoEmojiPicker = false;
 		todoStart = 'now';
 		todoCompleteBy = 'custom';
 		todoCustomDate = defaultCompleteByDate();
@@ -209,6 +227,7 @@
 		editType = a.type;
 		editValue = a.value;
 		editCustomName = a.customName || '';
+		editEmoji = a.emoji || '🎉';
 		editSeasonIds = a.seasonIds ? [...a.seasonIds] : [];
 		editTodoCompleteBy = a.completeBy || '';
 		editTodoStartDate = a.startDate || '';
@@ -220,32 +239,6 @@
 		editingAssignment = null;
 	}
 
-	function openEditTemplate(t: ChoreTemplate) {
-		editingTemplate = t;
-		editTplName = t.name;
-		editTplFreq = t.defaultFrequency;
-		editTplType = t.defaultType;
-		editTplValue = t.defaultValue;
-		showEditTemplateModal = true;
-	}
-
-	function closeEditTemplate() {
-		showEditTemplateModal = false;
-		editingTemplate = null;
-	}
-
-	function enhanceCreate() {
-		return async ({ result }: any) => {
-			if (result.type === 'success') {
-				showCreateModal = false;
-				const rec = result.data?.record;
-				if (rec) {
-					templates = [rec as ChoreTemplate, ...templates];
-				}
-			}
-		};
-	}
-
 	function enhanceUpdateAssigned() {
 		return async ({ result }: any) => {
 			if (result.type === 'success' && editingAssignment) {
@@ -256,7 +249,8 @@
 					};
 					if (editingAssignment.isTodo) {
 						updates.type = editType;
-						updates.value = editValue;
+						updates.value = editType === 'emoji' ? 0 : editValue;
+						updates.emoji = editType === 'emoji' ? editEmoji : undefined;
 						updates.completeBy = editTodoCompleteBy;
 						updates.startDate = editTodoStartDate;
 					} else {
@@ -271,30 +265,6 @@
 			closeEdit();
 		};
 	}
-
-	function enhanceUpdateTemplate() {
-		return async ({ result, formData }: any) => {
-			if (result.type === 'success' && editingTemplate) {
-				const tid = editingTemplate!.id;
-				const idx = templates.findIndex((t: any) => t.id === tid);
-				if (idx !== -1) {
-					templates[idx] = {
-						...templates[idx],
-						name: editTplName,
-						defaultFrequency: editTplFreq,
-						defaultType: editTplType,
-						defaultValue: editTplValue
-					} as ChoreTemplate;
-					assigned = assigned.map((a: any) =>
-						a.templateId === tid
-							? { ...a, frequency: editTplFreq, type: editTplType, value: editTplValue }
-							: a
-					) as AssignedChore[];
-					closeEditTemplate();
-				}
-			}
-		};
-	}
 </script>
 
 <ViewHeader title="Chore Assignment" hero />
@@ -321,8 +291,9 @@
 			</div>
 			<div class="template-list">
 				{#each templates as t}
-					<div class="card template" draggable="true" ondragstart={(e) => handleDragStart(e, t.id)}>
-						<div class="card-body" onclick={() => openEditTemplate(t)} role="button" tabindex="0">
+					<div class="card template" draggable="true" ondragstart={(e) => handleDragStart(e, t.id)} style="border-left-color:{t.color}">
+						<div class="card-body">
+							<TemplateIcon name={t.icon} size={18} color={t.color} />
 							<strong>{t.name}</strong>
 							<span class="badge">{t.defaultFrequency}</span>
 							<span class="badge type">{t.defaultType}</span>
@@ -330,18 +301,12 @@
 						<div class="card-value">
 							{t.defaultType === 'money' ? `£${Number(t.defaultValue).toFixed(2)}` : t.defaultValue}
 						</div>
-						<div class="card-actions">
-							<button onclick={() => openEditTemplate(t)} class="edit-btn" title="Edit template"
-								>✎</button
-							>
-						</div>
 					</div>
 				{/each}
 				{#if templates.length === 0}
 					<p class="empty">No templates yet</p>
 				{/if}
 			</div>
-			<button class="add-inline" onclick={() => (showCreateModal = true)}>＋ New template</button>
 		</div>
 	</Card>
 
@@ -389,7 +354,9 @@
 											<strong class="todo-admin-name">{a.customName || 'Todo'}</strong>
 											<div class="todo-admin-meta">
 												{#if a.type === 'emoji'}
-													<span class="todo-admin-type">🎯 emoji</span>
+													<span class="todo-admin-type">{a.emoji || '🎉'} celebration</span>
+												{:else if a.type === 'money'}
+													<span class="todo-admin-type">£{Number(a.value).toFixed(2)} cash</span>
 												{:else}
 													<span class="todo-admin-type"
 														><span class="badge badge-pts">{a.value} pts</span></span
@@ -484,101 +451,36 @@
 	</Card>
 </CardGrid>
 
-<!-- Create Template Modal -->
-{#if showCreateModal}
-	<div class="overlay" onclick={() => (showCreateModal = false)} role="presentation">
+<!-- Assign from Template Modal -->
+{#if assignModal}
+	<div class="overlay" onclick={() => (assignModal = null)} role="presentation">
 		<div class="modal" onclick={(e) => e.stopPropagation()} role="dialog">
-			<h3>New Chore Template</h3>
-			<form method="POST" action="?/createTemplate" use:enhance={enhanceCreate}>
-				<label>
-					Name
-					<input name="name" bind:value={createName} required />
-				</label>
-				<label>
-					Frequency
-					<select name="defaultFrequency" bind:value={createFreq}>
-						<option value="daily">Daily</option>
-						<option value="weekly">Weekly</option>
-					</select>
-				</label>
-				<label>
-					Type
-					<select name="defaultType" bind:value={createType}>
-						<option value="points">Points</option>
-						<option value="money">Money</option>
-					</select>
-				</label>
-				<label>
-					Default Value
-					<input name="defaultValue" type="number" step="any" bind:value={createValue} required />
-				</label>
-				<div class="modal-actions">
-					<button type="button" onclick={() => (showCreateModal = false)}>Cancel</button>
-					<button type="submit">Create</button>
-				</div>
-			</form>
-		</div>
-	</div>
-{/if}
-
-<!-- Edit Template Modal -->
-{#if showEditTemplateModal && editingTemplate}
-	<div class="overlay" onclick={closeEditTemplate} role="presentation">
-		<div class="modal" onclick={(e) => e.stopPropagation()} role="dialog">
-			<h3>Edit Template: {editingTemplate.name}</h3>
-			<p class="hint">Changes will also update all existing assigned chores using this template.</p>
-			<form id="updateTplForm" method="POST" action="?/updateTemplate" use:enhance={enhanceUpdateTemplate}>
-				<input name="id" type="hidden" value={editingTemplate.id} />
-				<label>
-					Name
-					<input name="name" bind:value={editTplName} required />
-				</label>
-				<label>
-					Frequency
-					<select name="defaultFrequency" bind:value={editTplFreq}>
-						<option value="daily">Daily</option>
-						<option value="weekly">Weekly</option>
-					</select>
-				</label>
-				<label>
-					Type
-					<select name="defaultType" bind:value={editTplType}>
-						<option value="points">Points</option>
-						<option value="money">Money</option>
-					</select>
-				</label>
-				<label>
-					Default Value
-					<input name="defaultValue" type="number" step="any" bind:value={editTplValue} required />
-				</label>
-			</form>
+			<h3>Assign: {assignModal.t.name}</h3>
+			<p class="hint">
+				Copies this platform template into {members.find((m) => m.id === assignModal?.memberId)?.name}'s
+				chores. Amend, then Assign.
+			</p>
+			<label>
+				Frequency
+				<select bind:value={assignFreq}>
+					<option value="daily">Daily</option>
+					<option value="weekly">Weekly</option>
+				</select>
+			</label>
+			<label>
+				Type
+				<select bind:value={assignType}>
+					<option value="points">Points</option>
+					<option value="money">Money</option>
+				</select>
+			</label>
+			<label>
+				Value
+				<input type="number" step="any" bind:value={assignValue} />
+			</label>
 			<div class="modal-actions">
-				<button type="button" onclick={closeEditTemplate}>Cancel</button>
-				<form
-					method="POST"
-					action="?/deleteTemplate"
-					use:enhance={() => {
-						return async ({ result, formData }) => {
-							if (result.type === 'success') {
-								const id = formData.get('id');
-								templates = templates.filter((t) => t.id !== id) as ChoreTemplate[];
-								closeEditTemplate();
-							}
-						};
-					}}
-				>
-					<input type="hidden" name="id" value={editingTemplate.id} />
-					<button
-						type="submit"
-						class="delete-btn"
-						onclick={(e) => {
-							if (!confirm('Delete this template? This cannot be undone.')) {
-								e.preventDefault();
-							}
-						}}>Delete</button
-					>
-				</form>
-				<button type="submit" form="updateTplForm">Save</button>
+				<button type="button" onclick={() => (assignModal = null)}>Cancel</button>
+				<button type="button" onclick={assignChore}>Assign</button>
 			</div>
 		</div>
 	</div>
@@ -608,7 +510,8 @@
 						Type
 						<select name="type" bind:value={editType}>
 							<option value="points">Points</option>
-							<option value="emoji">Emoji</option>
+							<option value="money">Cash</option>
+							<option value="emoji">Celebration</option>
 						</select>
 					</label>
 					{#if editType === 'points'}
@@ -616,6 +519,37 @@
 							Points value
 							<input name="value" type="number" bind:value={editValue} required />
 						</label>
+					{:else if editType === 'money'}
+						<label>
+							Cash amount (£)
+							<input name="value" type="number" step="0.01" min="0.01" bind:value={editValue} required />
+						</label>
+					{:else}
+						<input type="hidden" name="emoji" value={editEmoji} />
+						<div class="emoji-field">
+							<span class="emoji-preview">{editEmoji}</span>
+							<button
+								type="button"
+								class="link-btn"
+								onclick={() => (showTodoEmojiPicker = !showTodoEmojiPicker)}>
+								{showTodoEmojiPicker ? 'Hide' : 'Choose'}
+							</button>
+						</div>
+						{#if showTodoEmojiPicker}
+							<div class="emoji-grid">
+								{#each EMOJI_CHOICES as e}
+									<button
+										type="button"
+										class="emoji-opt"
+										class:selected={e === editEmoji}
+										onclick={() => {
+											editEmoji = e;
+											showTodoEmojiPicker = false;
+										}}>{e}</button
+									>
+								{/each}
+							</div>
+						{/if}
 					{/if}
 					<label>
 						Start date
@@ -721,7 +655,8 @@
 					Type
 					<select name="type" bind:value={todoType}>
 						<option value="points">Points</option>
-						<option value="emoji">Emoji</option>
+						<option value="money">Cash</option>
+						<option value="emoji">Celebration</option>
 					</select>
 				</label>
 				{#if todoType === 'points'}
@@ -729,6 +664,34 @@
 						Points value
 						<input name="value" type="number" bind:value={todoValue} required />
 					</label>
+				{:else if todoType === 'money'}
+					<label>
+						Cash amount (£)
+						<input name="value" type="number" step="0.01" min="0.01" bind:value={todoValue} required />
+					</label>
+				{:else}
+					<input type="hidden" name="emoji" value={todoEmoji} />
+					<div class="emoji-field">
+						<span class="emoji-preview">{todoEmoji}</span>
+						<button type="button" class="link-btn" onclick={() => (showTodoEmojiPicker = !showTodoEmojiPicker)}>
+							{showTodoEmojiPicker ? 'Hide' : 'Choose'}
+						</button>
+					</div>
+					{#if showTodoEmojiPicker}
+						<div class="emoji-grid">
+							{#each EMOJI_CHOICES as e}
+								<button
+									type="button"
+									class="emoji-opt"
+									class:selected={e === todoEmoji}
+									onclick={() => {
+										todoEmoji = e;
+										showTodoEmojiPicker = false;
+									}}>{e}</button
+								>
+							{/each}
+						</div>
+					{/if}
 				{/if}
 				<label>
 					Starts
@@ -786,20 +749,20 @@
 		font-weight: 700;
 	}
 	.template-list {
-		display: grid;
+		display: flex;
+		flex-wrap: wrap;
 		gap: 0.5rem;
 		margin-bottom: 0.75rem;
-		grid-template-columns: repeat(4, minmax(0, 1fr));
 	}
-	@media (max-width: 1100px) {
-		.template-list {
-			grid-template-columns: repeat(3, minmax(0, 1fr));
-		}
+	.template-list .card.template {
+		flex: 0 1 auto;
+		min-width: 150px;
 	}
-	@media (max-width: 720px) {
-		.template-list {
-			grid-template-columns: repeat(2, minmax(0, 1fr));
-		}
+	.template-list .card.template .card-body {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.4rem;
 	}
 
 	/* ── Kanban (3 columns, scrolls via Card scrollX) ── */
@@ -877,6 +840,7 @@
 	.card {
 		background: white;
 		border: 1px solid #e5e7eb;
+		border-left: 4px solid #8b5cf6;
 		border-radius: 8px;
 		padding: 0.5rem 0.75rem;
 		margin-bottom: 0.4rem;
@@ -896,9 +860,11 @@
 	.card-body {
 		flex: 1;
 		min-width: 0;
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
 	}
 	.card-body strong {
-		display: block;
 		font-size: 0.85rem;
 		white-space: nowrap;
 		overflow: hidden;
@@ -1192,6 +1158,38 @@
 		font-size: 0.7rem;
 		margin-top: 0.15rem;
 	}
+	.emoji-field {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+	.emoji-preview {
+		font-size: 1.4rem;
+	}
+	.emoji-grid {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.25rem;
+		padding: 0.4rem;
+		border: 1px solid #e5e7eb;
+		border-radius: 8px;
+		margin-bottom: 0.5rem;
+	}
+	.emoji-opt {
+		font-size: 1.2rem;
+		background: none;
+		border: 1px solid transparent;
+		border-radius: 6px;
+		padding: 0.15rem 0.3rem;
+		cursor: pointer;
+	}
+	.emoji-opt:hover {
+		background: #f3f4f6;
+	}
+	.emoji-opt.selected {
+		border-color: #6366f1;
+		background: #eef2ff;
+	}
 	.todo-admin-type {
 		color: #6b7280;
 		font-weight: 600;