JCEEE/famdone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add fixes to claims and seasons

Browse Source
This commit is contained in:
JCEEE
2026-07-30 11:12:35 +01:00
parent 57ef30d3a7
commit b254564436
24 changed files with 2517 additions and 704 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/Sidebar.svelte
+3 -3
View File
@@ -15,22 +15,22 @@
let navItems = $derived(isParent && memberName
? [
{ href: `/${famSlug}`, label: famName, icon: homeIcon },
{ 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}`, label: famName, icon: homeIcon },
{ href: `/${famSlug}/${memberName}`, label: 'Dashboard', icon: dashboardIcon },
{ href: `/${famSlug}/${memberName}/preferences`, label: 'Preferences', icon: prefsIcon },
]
: []
);
let footerItems = $derived([
{ href: `/${famSlug}`, label: famName, icon: homeIcon },
...(memberName ? [{ href: `/${famSlug}/${memberName}/preferences`, label: 'Preferences', icon: prefsIcon }] : []),
...(isParent && memberName ? [{ href: `/${famSlug}/${memberName}/settings`, label: 'Settings', icon: settingsIcon }] : []),
{ href: session ? '/logout' : '/login', label: session ? 'Log out' : 'Log in', icon: logoutIcon },
]);
frontend/src/lib/components/TopNav.svelte
+52 -1
View File
@@ -1,12 +1,36 @@
<script lang="ts">
let { announcement = '', children }: { announcement?: string; children?: any } = $props();
let {
announcement = '',
role = '',
seasons = [],
children,
}: {
announcement?: string
role?: string
seasons?: { id: string; name: string; color: string; active: boolean }[]
children?: any
} = $props();
</script>
<header class="topnav">
<div class="topnav-left">
{#if role}
<span class="role-pill {role}">{role}</span>
{/if}
</div>
<div class="topnav-announcement">
{#if announcement}<span class="announcement-text">{announcement}</span>{/if}
</div>
<div class="topnav-actions">
{#each seasons as s}
<span
class="season-pill"
class:active={s.active}
style="--season-color: {s.color}"
>
{s.name}
</span>
{/each}
{@render children?.()}
</div>
</header>
@@ -23,8 +47,35 @@
padding: 0 1.5rem;
z-index: 90;
transition: left 0.2s;
gap: 0.75rem;
}
.topnav-left { display: flex; align-items: center; gap: 0.5rem; }
.topnav-announcement { flex: 1; text-align: center; }
.announcement-text { font-size: 0.85rem; color: #6b7280; }
.topnav-actions { display: flex; align-items: center; gap: 0.5rem; }
.role-pill {
font-size: 0.7rem;
padding: 0.15rem 0.5rem;
border-radius: 999px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.03em;
}
.role-pill.parent { background: #fef3c7; color: #b45309; }
.role-pill.child { background: #dbeafe; color: #1d4ed8; }
.season-pill {
font-size: 0.75rem;
padding: 0.2rem 0.6rem;
border-radius: 999px;
border: 1.5px solid var(--season-color, #d1d5db);
background: transparent;
color: #374151;
font-weight: 500;
transition: all 0.15s;
}
.season-pill.active {
background: var(--season-color, #6366f1);
color: #fff;
border-color: var(--season-color, #6366f1);
}
</style>