update ui and other frontend updates

2026-07-29 09:41:52 +01:00
parent 04b83925e0
commit 57ef30d3a7
79 changed files with 7323 additions and 429 deletions
@@ -0,0 +1,134 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { dashboardIcon, choresIcon, rewardsIcon, bonusesIcon, homeIcon, settingsIcon, logoutIcon, prefsIcon } from './icons';
+
+	let { famName = '', session = null, isParent = false, role = 'child' } = $props();
+
+	let collapsed = $state(false);
+
+	let famSlug = $derived(page.params.fam);
+	let memberName = $derived(session?.memberName || page.params.username || '');
+
+	function toggle() { collapsed = !collapsed; }
+
+	let showChildItems = $derived(!!memberName);
+
+	let navItems = $derived(isParent && memberName
+		? [
+			{ href: `/${famSlug}/${memberName}`, label: 'Dashboard', icon: dashboardIcon },
+			{ href: `/${famSlug}/${memberName}/chores`, label: 'Chores', icon: choresIcon },
+			{ href: `/${famSlug}/${memberName}/rewards`, label: 'Rewards', icon: rewardsIcon },
+			{ href: `/${famSlug}/${memberName}/bonuses`, label: 'Bonuses', icon: bonusesIcon },
+			{ href: `/${famSlug}/${memberName}/preferences`, label: 'Preferences', icon: prefsIcon },
+		]
+		: showChildItems
+			? [
+				{ href: `/${famSlug}/${memberName}`, label: 'Dashboard', icon: dashboardIcon },
+				{ href: `/${famSlug}/${memberName}/preferences`, label: 'Preferences', icon: prefsIcon },
+			]
+			: []
+	);
+
+	let footerItems = $derived([
+		{ href: `/${famSlug}`, label: famName, icon: homeIcon },
+		...(isParent && memberName ? [{ href: `/${famSlug}/${memberName}/settings`, label: 'Settings', icon: settingsIcon }] : []),
+		{ href: session ? '/logout' : '/login', label: session ? 'Log out' : 'Log in', icon: logoutIcon },
+	]);
+</script>
+
+<aside class="sidebar" class:collapsed>
+	<button class="toggle-btn" onclick={toggle}>
+		{collapsed ? '☰' : '✕'}
+	</button>
+
+	<div class="sidebar-header">
+		<span class="app-icon">✦</span>
+		{#if !collapsed}<span class="app-name">FamChore</span>{/if}
+	</div>
+
+	<nav class="sidebar-nav">
+		{#each navItems as item}
+			<a href={item.href} class="nav-item" class:active={page.url.pathname === item.href}>
+				{@html item.icon}
+				{#if !collapsed}<span class="nav-label">{item.label}</span>{/if}
+			</a>
+		{/each}
+	</nav>
+
+	<div class="sidebar-footer">
+		{#each footerItems as item}
+			<a href={item.href} class="nav-item">
+				{@html item.icon}
+				{#if !collapsed}<span class="nav-label">{item.label}</span>{/if}
+			</a>
+		{/each}
+	</div>
+</aside>
+
+<style>
+	.sidebar {
+		position: fixed;
+		top: 0; left: 0;
+		height: 100vh;
+		width: 220px;
+		background: #1e1b4b;
+		color: #e0e7ff;
+		display: flex;
+		flex-direction: column;
+		transition: width 0.2s;
+		z-index: 100;
+		overflow: hidden;
+	}
+	.sidebar.collapsed { width: 56px; }
+	.toggle-btn {
+		position: absolute;
+		top: 0.5rem; right: 0.5rem;
+		background: none;
+		border: none;
+		color: #a5b4fc;
+		font-size: 1.1rem;
+		cursor: pointer;
+		padding: 0.25rem;
+		line-height: 1;
+	}
+	.sidebar-header {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 1rem 0.75rem;
+		border-bottom: 1px solid #3730a3;
+		min-height: 52px;
+	}
+	.app-icon { font-size: 1.3rem; flex-shrink: 0; }
+	.app-name { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
+	.sidebar-nav {
+		flex: 1;
+		padding: 0.5rem 0;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+	.sidebar-footer {
+		border-top: 1px solid #3730a3;
+		padding: 0.5rem 0;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+	.nav-item {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		padding: 0.5rem 0.75rem;
+		color: #c7d2fe;
+		text-decoration: none;
+		font-size: 0.9rem;
+		border-radius: 6px;
+		margin: 0 0.3rem;
+		white-space: nowrap;
+		transition: background 0.15s;
+	}
+	.nav-item:hover { background: #3730a3; color: #e0e7ff; }
+	.nav-item.active { background: #4338ca; color: #fff; font-weight: 600; }
+	.nav-label { overflow: hidden; }
+</style>