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 { enabledSections } from '$lib/stores/features';
	import { isServerAdmin } from '$lib/stores/serverAdmin';
	import type { SectionKey } from '@colectivo/types';
	import Avatar from '$lib/components/Avatar.svelte';
	import CreateCollectiveModal from '$lib/components/CreateCollectiveModal.svelte';
	import OfflineChip from '$lib/components/OfflineChip.svelte';
	import * as m from '$lib/paraglide/messages';
	import { ShoppingCart, CheckSquare, FileText, Search, Settings, Plus, Shield, Users } from 'lucide-svelte';

	// Fase 12.3.1: nav items declared with their section key so we can filter
	// by $enabledSections (precedence resolved client-side; see features.ts).
	// Force "lists" through unconditionally in case every flag layer says OFF
	// — matches the BottomTabBar / MobileDrawer "always one safe landing"
	// rule documented in §12.3.4.
	const allNavItems: Array<{ section: SectionKey; href: string; label: () => string; icon: typeof ShoppingCart }> = [
		{ section: 'lists',  href: '/lists',  label: () => m.nav_lists(),  icon: ShoppingCart },
		{ section: 'tasks',  href: '/tasks',  label: () => m.nav_tasks(),  icon: CheckSquare },
		{ section: 'notes',  href: '/notes',  label: () => m.nav_notes(),  icon: FileText },
		{ section: 'search', href: '/search', label: () => m.nav_search(), icon: Search }
	];

	const navItems = $derived(
		allNavItems.filter((item) => item.section === 'lists' || $enabledSections[item.section])
	);

	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 { section, href, label, icon: Icon } (section)}
			<a
				{href}
				data-section={section}
				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}

		<!-- Spacer + manage-collective entry, last in nav. Always visible
		     (no section-flag gating) since membership management is orthogonal
		     to feature toggles. -->
		<div class="my-2 border-t border-black/10 dark:border-white/10" aria-hidden="true"></div>
		<a
			href="/collective/manage"
			data-testid="sidebar-manage-link"
			class="mb-0.5 flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors {activePath.startsWith('/collective/manage') ? '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'}"
		>
			<Users size={16} strokeWidth={1.5} />
			{m.manage_title()}
		</a>
	</nav>

	<div class="p-3 pt-2">
		<div class="mb-2 flex justify-end">
			<OfflineChip />
		</div>
		{#if $isServerAdmin}
			<!-- Fase 13.4: server-admin entry. Distinct red icon so it doesn't
			     blend with normal app nav. Hidden for non-admins. -->
			<a
				href="/admin"
				data-testid="sidebar-admin-link"
				class="mb-2 flex items-center gap-2 rounded-md border border-red-200 bg-red-50/50 px-3 py-2 text-sm font-medium text-red-700 hover:bg-red-50 dark:border-red-900/60 dark:bg-red-950/20 dark:text-red-300 dark:hover:bg-red-950/40"
			>
				<Shield size={14} strokeWidth={1.5} />
				{m.admin_menu_entry()}
			</a>
		{/if}
		<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}