feature plus ux rearrangements

frontend/src/routes/admin/+page.server.ts

@@ -1,16 +1,17 @@
 import { pbAdmin } from '$lib/server/pocketbase';
 import { redirect, fail } from '@sveltejs/kit';
 import { PB_EMAIL, PB_PASSWORD } from '$app/env/private';
+import { getPlatformFlags, setPlatformFlag } from '$lib/server/platform';
 import type { Actions, PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ cookies }) => {
 	const session = cookies.get('platform_session');
 	if (!session) {
-		return { authenticated: false, fams: [], totalFams: 0, totalMembers: 0, totalRewards: 0 };
+		return { authenticated: false, fams: [], totalFams: 0, totalMembers: 0, totalRewards: 0, platformFlags: {} };
 	}
 
 	try {
-		const fams = await pbAdmin.getList('fams');
+		const [fams, platformFlags] = await Promise.all([pbAdmin.getList('fams'), getPlatformFlags()]);
 		const famsWithStats = await Promise.all(fams.map(async (fam: any) => {
 			const [members, rewards, parents] = await Promise.all([
 				pbAdmin.getList('users', `famId = '${fam.id}' && role = 'child'`),
@@ -23,7 +24,6 @@ export const load: PageServerLoad = async ({ cookies }) => {
 				requestedRewards: (rewards as any[]).filter((r: any) => r.status === 'requested').length,
 				totalRewards: rewards.length,
 				parentEmail: (parents as any[])?.[0]?.email || '',
-				featureFlags: fam.featureFlags || {},
 			};
 		}));
 
@@ -31,9 +31,9 @@ export const load: PageServerLoad = async ({ cookies }) => {
 		const totalMembers = famsWithStats.reduce((s: number, f: any) => s + f.memberCount, 0);
 		const totalRewards = famsWithStats.reduce((s: number, f: any) => s + f.totalRewards, 0);
 
-		return { authenticated: true, fams: famsWithStats, totalFams, totalMembers, totalRewards };
+		return { authenticated: true, fams: famsWithStats, totalFams, totalMembers, totalRewards, platformFlags };
 	} catch {
-		return { authenticated: false, fams: [], totalFams: 0, totalMembers: 0, totalRewards: 0 };
+		return { authenticated: false, fams: [], totalFams: 0, totalMembers: 0, totalRewards: 0, platformFlags: {} };
 	}
 };
 
@@ -60,19 +60,18 @@ export const actions: Actions = {
 		throw redirect(303, '/admin');
 	},
 
-	toggleFeatureFlag: async ({ request, cookies }) => {
+	// Toggles a platform-level feature flag on the singleton platform record.
+	togglePlatformFlag: async ({ request, cookies }) => {
 		const session = cookies.get('platform_session');
 		if (!session) return fail(401, { error: 'Not authenticated' });
 
 		const fd = await request.formData();
-		const famId = fd.get('famId') as string;
 		const flag = fd.get('flag') as string;
+		if (!flag) return fail(400, { error: 'Flag required' });
 
 		try {
-			const fam = await pbAdmin.getOne('fams', famId);
-			const flags = fam.featureFlags || {};
-			flags[flag] = !flags[flag];
-			await pbAdmin.update('fams', famId, { featureFlags: flags });
+			const flags = await getPlatformFlags();
+			await setPlatformFlag(flag, !flags[flag]);
 			return { success: true };
 		} catch (e) {
 			return fail(500, { error: e instanceof Error ? e.message : 'Failed to update' });

frontend/src/routes/admin/+page.svelte

@@ -49,6 +49,19 @@
 			</div>
 		</Card>
 
+		<Card cols={1} title="Platform Flags" accent="#f59e0b">
+			<p class="hint">Global feature flags (public read-only for fams; toggled here).</p>
+			<div class="flag-row">
+				<span class="flag-name">debug</span>
+				<form method="POST" action="?/togglePlatformFlag" use:enhance>
+					<input type="hidden" name="flag" value="debug" />
+					<button type="submit" class="toggle-btn" class:active={data.platformFlags?.debug}>
+						{data.platformFlags?.debug ? 'ON' : 'OFF'}
+					</button>
+				</form>
+			</div>
+		</Card>
+
 		<Card cols={2} title="Families" accent="#059669">
 			<table class="fam-table">
 				<thead>
@@ -57,7 +70,6 @@
 						<th>Parent</th>
 						<th>Members</th>
 						<th>Claims</th>
-						<th>Debug</th>
 						<th>Actions</th>
 					</tr>
 				</thead>
@@ -65,7 +77,7 @@
 					{#each data.fams as fam}
 						<tr>
 							<td>
-								<a href="/{fam.slug}/admin">{fam.name}</a>
+								<a href="/{fam.slug}">{fam.name}</a>
 								<span class="slug">/{fam.slug}</span>
 							</td>
 							<td>{fam.parentEmail || '—'}</td>
@@ -78,20 +90,7 @@
 								{/if}
 							</td>
 							<td>
-								<form method="POST" action="?/toggleFeatureFlag" use:enhance>
-									<input type="hidden" name="famId" value={fam.id} />
-									<input type="hidden" name="flag" value="debugMode" />
-									<button
-										type="submit"
-										class="toggle-btn"
-										class:active={fam.featureFlags?.debugMode}
-									>
-										{fam.featureFlags?.debugMode ? 'ON' : 'OFF'}
-									</button>
-								</form>
-							</td>
-							<td>
-								<a href="/{fam.slug}/admin" class="link">Dashboard</a>
+								<a href="/{fam.slug}" class="link">Dashboard</a>
 								<a href="/{fam.slug}" class="link">View</a>
 							</td>
 						</tr>
@@ -211,6 +210,18 @@
 		background: #059669;
 		color: white;
 	}
+	.flag-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		padding: 0.35rem 0;
+	}
+	.flag-name {
+		font-family: monospace;
+		font-size: 0.85rem;
+		color: #374151;
+	}
 	.link {
 		color: #2563eb;
 		text-decoration: none;