collective-lists/apps/web/src/lib/components/layout/DesktopSidebar.svelte

<script lang="ts">
	import { page } from '$app/stores';
	import { displayName } from '$lib/stores/auth';
	import { currentCollective, userCollectives } from '$lib/stores/collective';
	import Avatar from '$lib/components/Avatar.svelte';
	import CreateCollectiveModal from '$lib/components/CreateCollectiveModal.svelte';
	import * as m from '$lib/paraglide/messages';
	import { ShoppingCart, CheckSquare, FileText, Search, Settings, Plus } from 'lucide-svelte';

	const navItems = [
		{ href: '/lists',  label: () => m.nav_lists(),  icon: ShoppingCart },
		{ href: '/tasks',  label: () => m.nav_tasks(),  icon: CheckSquare },
		{ href: '/notes',  label: () => m.nav_notes(),  icon: FileText },
		{ href: '/search', label: () => m.nav_search(), icon: Search }
	];

	let switcherOpen = $state(false);
	let showCreate = $state(false);

	const activePath = $derived($page.url.pathname);

	function switchCollective(id: string) {
		const c = $userCollectives.find((col) => col.id === id);
		if (c) {
			currentCollective.set(c);
			localStorage.setItem('activeCollectiveId', c.id);
			switcherOpen = false;
		}
	}

	function openCreateCollective() {
		switcherOpen = false;
		showCreate = true;
	}
</script>

<aside
	data-testid="desktop-sidebar"
	class="hidden md:flex w-56 flex-shrink-0 flex-col bg-surface-raised"
>
	<div class="relative">
		<button
			data-testid="sidebar-collective-switcher"
			class="flex h-14 w-full items-center gap-2 px-4 text-left hover:bg-black/5 dark:hover:bg-white/5"
			onclick={() => (switcherOpen = !switcherOpen)}
			aria-expanded={switcherOpen}
		>
			<span class="text-xl">{$currentCollective?.emoji ?? '🏠'}</span>
			<span class="min-w-0 flex-1 truncate text-sm font-semibold text-slate-900 dark:text-slate-50">
				{$currentCollective?.name ?? m.app_name()}
			</span>
			<span class="text-xs text-slate-400">⌄</span>
		</button>
		{#if switcherOpen}
			<div class="absolute left-0 right-0 top-full z-50 bg-surface-raised shadow-[0px_20px_40px_rgba(15,23,42,0.06)]">
				{#each $userCollectives as c}
					<button
						class="flex w-full items-center gap-2 px-4 py-2.5 text-left text-sm hover:bg-black/5 dark:hover:bg-white/5 {c.id === $currentCollective?.id ? 'font-semibold text-slate-900 dark:text-slate-50' : 'text-slate-600 dark:text-slate-400'}"
						onclick={() => switchCollective(c.id)}
					>
						<span class="text-base">{c.emoji}</span>
						<span class="truncate">{c.name}</span>
					</button>
				{/each}
				<button
					data-testid="sidebar-create-collective"
					class="flex w-full items-center gap-2 border-t border-black/5 px-4 py-2.5 text-left text-sm font-medium text-slate-700
						hover:bg-black/5 dark:border-white/5 dark:text-slate-300 dark:hover:bg-white/5"
					onclick={openCreateCollective}
				>
					<Plus size={14} strokeWidth={1.5} />
					{m.sidebar_create_collective()}
				</button>
			</div>
		{/if}
	</div>

	<nav class="flex-1 overflow-y-auto px-2 py-3">
		{#each navItems as { href, label, icon: Icon }}
			<a
				{href}
				class="mb-0.5 flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors {activePath.startsWith(href) ? 'bg-black/10 text-slate-900 dark:bg-white/10 dark:text-slate-50' : 'text-slate-500 hover:bg-black/5 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-white/5 dark:hover:text-slate-50'}"
			>
				<Icon size={16} strokeWidth={1.5} />
				{label()}
			</a>
		{/each}
	</nav>

	<div class="p-3 pt-2">
		<div class="flex items-center justify-between gap-2">
			<div class="flex min-w-0 items-center gap-2">
				<Avatar name={$displayName} size={32} />
				<span class="truncate text-sm font-medium text-slate-700 dark:text-slate-300">
					{$displayName}
				</span>
			</div>
			<a
				href="/settings"
				class="rounded-md p-1.5 text-slate-400 hover:bg-black/5 hover:text-slate-600 dark:hover:bg-white/5 dark:hover:text-slate-300"
				aria-label={m.nav_settings()}
			>
				<Settings size={16} strokeWidth={1.5} />
			</a>
		</div>
	</div>
</aside>

{#if showCreate}
	<CreateCollectiveModal onClose={() => (showCreate = false)} />
{/if}