user testing and fixing minor issues

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

@@ -6,6 +6,7 @@
 	import TemplateIcon from '$lib/components/TemplateIcon.svelte';
 	import { choresIcon, todoIcon, checkCircleIcon } from '$lib/components/icons';
 	import { formatHumanDate } from '$lib/format';
+	import { nextPaydayAfter, todayInTz, resolveTz } from '@shared/timezone';
 	import { TEMPLATE_COLORS, ICON_NAMES, accentBg, outlineColor } from '$lib/templateIcons';
 	import type { ChoreTemplate, AssignedChore, Member, Season, Completion } from '$lib/types';
 
@@ -228,13 +229,39 @@
 	}
 
 	// Sort todos by completeBy (soonest first), then by startDate
-	function sortedTodosForMember(memberId: string): AssignedChore[] {
-		return todosForMember(memberId).sort((a, b) => {
-			const da = a.completeBy || '9999-99-99';
-			const db = b.completeBy || '9999-99-99';
-			if (da !== db) return da.localeCompare(db);
-			return (a.startDate || '').localeCompare(b.startDate || '');
-		});
+	function todoSort(a: AssignedChore, b: AssignedChore): number {
+		const da = a.completeBy || '9999-99-99';
+		const db = b.completeBy || '9999-99-99';
+		if (da !== db) return da.localeCompare(db);
+		return (a.startDate || '').localeCompare(b.startDate || '');
+	}
+
+	// Family payday anchor + resolved tz for week-boundary maths.
+	const famPayday = $derived(
+		(famStore.fam as any as { payday?: number })?.payday != null
+			? Number((famStore.fam as any).payday)
+			: 1
+	);
+	const famTz = $derived(resolveTz((famStore.fam as any)?.timezone || 'auto'));
+
+	// A completed todo stays visible (green "TBC completed") for the rest of the
+	// week it was completed; once the next payday rolls around (a new week
+	// starts) it drops off the admin Todos list.
+	function comprisesTodo(todo: AssignedChore): boolean {
+		if (!isTodoCompleted(todo.id)) return false;
+		const completion = completions.find((c: Completion) => c.assignedChoreId === todo.id);
+		const done = (completion?.date || '').slice(0, 10);
+		if (!done) return true;
+		const nextPayday = nextPaydayAfter(done, famPayday, famTz);
+		return todayInTz(famTz) >= nextPayday;
+	}
+
+	// All todos shown for a member — but once the week they were completed in is
+	// over (payday has passed) the completed todo is hidden from the list.
+	function visibleTodosForMember(memberId: string): AssignedChore[] {
+		return todosForMember(memberId)
+			.filter((a) => !comprisesTodo(a))
+			.sort(todoSort);
 	}
 
 	// 7 days from today as YYYY-MM-DD for the todo modal default
@@ -400,11 +427,11 @@
 							>
 						</button>
 						<span class="accordion-count" style="background:{m.color}"
-							>{todosForMember(m.id).length}</span
+							>{visibleTodosForMember(m.id).length}</span
 						>
 						{#if accordionState[m.id]?.todos ?? true}
 							<div class="accordion-body">
-								{#each sortedTodosForMember(m.id) as a}
+								{#each visibleTodosForMember(m.id) as a}
 									{@const completed = isTodoCompleted(a.id)}
 									{@const urgency = todoUrgency(a)}
 									<div
@@ -766,15 +793,15 @@
 						</div>
 						<input type="hidden" name="color" value={editColor} />
 					</div>
-				<label class="icon-row"
-					><span class="icon-preview"
-						><TemplateIcon name={editIcon} size={22} color={outlineColor(editColor)} /></span
-					>
-					<select name="icon" bind:value={editIcon}>
-						<option value="">None</option>
-						{#each ICON_NAMES as n}<option value={n}>{n}</option>{/each}
-					</select>
-				</label>
+					<label class="icon-row"
+						><span class="icon-preview"
+							><TemplateIcon name={editIcon} size={22} color={outlineColor(editColor)} /></span
+						>
+						<select name="icon" bind:value={editIcon}>
+							<option value="">None</option>
+							{#each ICON_NAMES as n}<option value={n}>{n}</option>{/each}
+						</select>
+					</label>
 					<label>
 						Frequency
 						<select name="frequency" bind:value={editFreq}>