sass/root-org
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Mega push vol 4

Browse Source
This commit is contained in:
AlacrisDevs
2026-02-06 16:08:40 +02:00
parent b517bb975c
commit d8bbfd9dc3
95 changed files with 8019 additions and 3946 deletions
Download Patch File Download Diff File Expand all files Collapse all files

276
src/routes/[orgSlug]/+layout.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
import { page } from "$app/stores";
import { page, navigating } from "$app/stores";
import type { Snippet } from "svelte";
import { Avatar, Logo } from "$lib/components/ui";
interface Member {
id: string;
@@ -16,7 +17,12 @@
interface Props {
data: {
org: { id: string; name: string; slug: string };
org: {
id: string;
name: string;
slug: string;
avatar_url?: string | null;
};
role: string;
userRole: string;
members: Member[];
@@ -26,24 +32,25 @@
let { data, children }: Props = $props();
let sidebarCollapsed = $state(false);
const isAdmin = $derived(
data.userRole === "owner" || data.userRole === "admin",
);
// Sidebar collapses on all pages except org overview
const isOrgOverview = $derived($page.url.pathname === `/${data.org.slug}`);
let sidebarHovered = $state(false);
const sidebarCollapsed = $derived(!isOrgOverview && !sidebarHovered);
const navItems = $derived([
{ href: `/${data.org.slug}`, label: "Overview", icon: "home" },
{
href: `/${data.org.slug}/documents`,
label: "Documents",
icon: "file",
label: "Files",
icon: "cloud",
},
{ href: `/${data.org.slug}/kanban`, label: "Kanban", icon: "kanban" },
{
href: `/${data.org.slug}/calendar`,
label: "Calendar",
icon: "calendar",
icon: "calendar_today",
},
// Only show settings for admins
...(isAdmin
@@ -58,7 +65,7 @@
]);
function isActive(href: string): boolean {
return $page.url.pathname === href;
return $page.url.pathname.startsWith(href);
}
</script>
@@ -66,206 +73,107 @@
<div class="flex h-screen bg-background p-4 gap-4">
<!-- Organization Module -->
<aside
class="{sidebarCollapsed
? 'w-20'
: 'w-56'} bg-night rounded-[32px] flex flex-col px-3 py-5 transition-all duration-200 overflow-hidden"
class="
{sidebarCollapsed ? 'w-[72px]' : 'w-64'}
transition-all duration-300
bg-night rounded-[32px] flex flex-col px-4 py-5 gap-4 overflow-hidden shrink-0
"
onmouseenter={() => (sidebarHovered = true)}
onmouseleave={() => (sidebarHovered = false)}
>
<!-- Org Header -->
<div class="flex items-start gap-2 px-1 mb-2">
<a
href="/{data.org.slug}"
class="flex items-center gap-2 p-1 rounded-[32px] hover:bg-dark transition-colors"
>
<div
class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary text-xl font-heading shrink-0"
class="shrink-0 transition-all duration-300 {sidebarCollapsed
? 'w-8 h-8'
: 'w-12 h-12'}"
>
{data.org.name[0].toUpperCase()}
<Avatar
name={data.org.name}
src={data.org.avatar_url}
size="md"
/>
</div>
{#if !sidebarCollapsed}
<div class="min-w-0 flex-1">
<h1 class="font-heading text-xl text-light truncate">
{data.org.name}
</h1>
<p class="text-xs text-white capitalize">{data.role}</p>
</div>
{/if}
</div>
<div
class="min-w-0 flex-1 overflow-hidden transition-all duration-300 {sidebarCollapsed
? 'opacity-0 max-w-0'
: 'opacity-100 max-w-[200px]'}"
>
<h1
class="font-heading text-h3 text-white truncate whitespace-nowrap"
>
{data.org.name}
</h1>
<p
class="text-body-sm text-white font-body capitalize whitespace-nowrap"
>
{data.role}
</p>
</div>
</a>
<!-- Nav Items -->
<nav class="flex-1 space-y-0.5">
<nav class="flex-1 flex flex-col gap-1">
{#each navItems as item}
<a
href={item.href}
class="flex items-center gap-2 pl-1 pr-2 py-1 rounded-[50px] transition-colors {isActive(
class="flex items-center gap-2 h-10 pl-1 pr-2 py-1 rounded-[32px] transition-colors {isActive(
item.href,
)
? 'bg-primary/20'
: 'hover:bg-light/5'}"
? 'bg-primary'
: 'hover:bg-dark'}"
title={sidebarCollapsed ? item.label : undefined}
>
<!-- Icon circle -->
<div
class="w-8 h-8 rounded-full {isActive(item.href)
? 'bg-primary'
: 'bg-light'} flex items-center justify-center shrink-0"
class="w-8 h-8 flex items-center justify-center p-1 shrink-0"
>
{#if item.icon === "home"}
<svg
class="w-4 h-4 {isActive(item.href)
? 'text-white'
: 'text-night'}"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path
d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
/>
<polyline points="9,22 9,12 15,12 15,22" />
</svg>
{:else if item.icon === "file"}
<svg
class="w-4 h-4 {isActive(item.href)
? 'text-white'
: 'text-night'}"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
/>
<polyline points="14,2 14,8 20,8" />
</svg>
{:else if item.icon === "kanban"}
<svg
class="w-4 h-4 {isActive(item.href)
? 'text-white'
: 'text-night'}"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<rect
x="3"
y="3"
width="18"
height="18"
rx="2"
/>
<line x1="9" y1="3" x2="9" y2="21" />
<line x1="15" y1="3" x2="15" y2="21" />
</svg>
{:else if item.icon === "calendar"}
<svg
class="w-4 h-4 {isActive(item.href)
? 'text-white'
: 'text-night'}"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<rect
x="3"
y="4"
width="18"
height="18"
rx="2"
/>
<line x1="16" y1="2" x2="16" y2="6" />
<line x1="8" y1="2" x2="8" y2="6" />
<line x1="3" y1="10" x2="21" y2="10" />
</svg>
{:else if item.icon === "settings"}
<svg
class="w-4 h-4 {isActive(item.href)
? 'text-white'
: 'text-night'}"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="12" cy="12" r="3" />
<path
d="M12 1v2m0 18v2M4.2 4.2l1.4 1.4m12.8 12.8l1.4 1.4M1 12h2m18 0h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"
/>
</svg>
{/if}
</div>
{#if !sidebarCollapsed}
<span class="font-bold text-light truncate"
>{item.label}</span
<span
class="material-symbols-rounded {isActive(item.href)
? 'text-background'
: 'text-light'}"
style="font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;"
>
{/if}
{item.icon}
</span>
</div>
<span
class="font-body text-body truncate whitespace-nowrap transition-all duration-300 {isActive(
item.href,
)
? 'text-background'
: 'text-white'} {sidebarCollapsed
? 'opacity-0 max-w-0 overflow-hidden'
: 'opacity-100 max-w-[200px]'}">{item.label}</span
>
</a>
{/each}
</nav>
<!-- Team Members -->
{#if !sidebarCollapsed}
<div class="mt-4 pt-4 border-t border-light/10">
<p class="font-heading text-base text-light mb-2 px-1">Team</p>
{#if data.members && data.members.length > 0}
<div class="space-y-0.5">
{#each data.members.slice(0, 5) as member}
<div
class="flex items-center gap-2 pl-1 pr-2 py-1 rounded-[50px] hover:bg-light/5 transition-colors"
>
<div
class="w-5 h-5 rounded-full bg-gradient-to-br from-primary to-primary/50 flex items-center justify-center text-white text-xs font-medium"
>
{(member.profiles?.full_name ||
member.profiles?.email ||
"?")[0].toUpperCase()}
</div>
<span
class="text-sm font-bold text-light truncate flex-1"
>
{member.profiles?.full_name ||
member.profiles?.email?.split("@")[0] ||
"User"}
</span>
</div>
{/each}
</div>
{:else}
<p class="text-xs text-light/40 px-1">
No team members found
</p>
{/if}
</div>
{/if}
<!-- Back link -->
<div class="mt-auto pt-4">
<a
href="/"
class="flex items-center gap-2 pl-1 pr-2 py-1 rounded-[50px] text-light/50 hover:text-light hover:bg-light/5 transition-colors"
title={sidebarCollapsed ? "All Organizations" : undefined}
>
<div
class="w-5 h-5 rounded-full bg-light/20 flex items-center justify-center"
>
<svg
class="w-3 h-3"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="m15 18-6-6 6-6" />
</svg>
</div>
{#if !sidebarCollapsed}
<span class="text-sm">All Organizations</span>
{/if}
<!-- Logo at bottom -->
<div class="mt-auto">
<a href="/" title="Back to organizations">
<Logo size={sidebarCollapsed ? "sm" : "md"} />
</a>
</div>
</aside>
<!-- Main Content Area -->
<main class="flex-1 bg-night rounded-[32px] overflow-auto">
<main class="flex-1 bg-night rounded-[32px] overflow-auto relative">
{#if $navigating}
<div
class="absolute inset-0 z-10 flex items-center justify-center bg-night/80 backdrop-blur-sm"
>
<span
class="material-symbols-rounded text-primary animate-spin"
style="font-size: 40px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 40;"
>
progress_activity
</span>
</div>
{/if}
{@render children()}
</main>
</div>