src/lib/components/layout/WorkspaceShell.svelte - main - ncit/c4panelmodel

src/lib/components/layout/WorkspaceShell.svelte

50 строк2 KB

ncit

feat: rewrite hooks.server.ts to use Supabase Auth

07 июн 2026, 19:32

07 июн 2026, 19:32b6162ab

<script lang="ts">
	import TopBar from './TopBar.svelte';
	import { page } from '$app/state';
	import { Settings, Users, UsersRound, CreditCard, BarChart3 } from '@lucide/svelte';
	import type { Snippet } from 'svelte';

	interface Props {
		user: { name: string | null; email: string; avatarUrl: string | null };
		workspaces?: { id: string; name: string; slug: string }[];
		workspaceId: string;
		children: Snippet;
	}
	let { user, workspaces = [], workspaceId, children }: Props = $props();
	const currentWorkspace = $derived(workspaces.find((w) => w.id === workspaceId) ?? null);

	const items = [
		{ slug: 'settings', label: 'Settings', icon: Settings },
		{ slug: 'members', label: 'Members', icon: Users },
		{ slug: 'teams', label: 'Teams', icon: UsersRound },
		{ slug: 'billing', label: 'Billing', icon: CreditCard },
		{ slug: 'analytics', label: 'Analytics', icon: BarChart3 }
	];
	function href(slug: string) {
		return `/workspace/${workspaceId}/${slug}`;
	}
</script>

<div class="flex h-full flex-col bg-slate-50">
	<TopBar {user} {workspaces} {currentWorkspace} />
	<div class="flex min-h-0 flex-1">
		<aside class="w-52 shrink-0 border-r border-slate-200 bg-white p-3">
			<nav class="flex flex-col gap-0.5">
				{#each items as item}
					<a
						href={href(item.slug)}
						class="flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium transition-colors"
						class:bg-blue-50={page.url.pathname === href(item.slug)}
						class:text-blue-700={page.url.pathname === href(item.slug)}
						class:text-slate-600={page.url.pathname !== href(item.slug)}
						class:hover:bg-slate-100={page.url.pathname !== href(item.slug)}
					>
						<item.icon size={16} />
						{item.label}
					</a>
				{/each}
			</nav>
		</aside>
		<main class="min-h-0 flex-1 overflow-auto">{@render children()}</main>
	</div>
</div>