next: reworked accounts page to use new layout components

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/layouts/split-layout/content.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-    import type { Snippet } from "svelte";
+    import type { Snippet } from 'svelte';
     import type { HTMLAttributes } from 'svelte/elements';
 
-    import { cn } from '$lib/utils';
-
     interface Props extends HTMLAttributes<HTMLDivElement> {
         children: Snippet;
         class?: string;
@@ -12,12 +10,6 @@
     let { children, class: className, ...props }: Props = $props();
 </script>
 
-<div
-    class={cn(
-        "flex-1",
-        className
-    )}
-    {...props}
->
+<div class={['flex-1', className]} {...props}>
     {@render children()}
 </div>

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/layouts/split-layout/root.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-    import type { Snippet } from "svelte";
+    import type { Snippet } from 'svelte';
     import type { HTMLAttributes } from 'svelte/elements';
 
-    import { cn } from '$lib/utils';
-
     interface Props extends HTMLAttributes<HTMLDivElement> {
         children: Snippet;
         class?: string;
@@ -12,12 +10,6 @@
     let { children, class: className, ...props }: Props = $props();
 </script>
 
-<div
-    class={cn(
-        "flex flex-col space-y-8 lg:flex-row lg:space-y-0 lg:space-x-12",
-        className
-    )}
-    {...props}
->
+<div class={['flex flex-col space-y-8 lg:flex-row lg:space-y-0 lg:space-x-12', className]} {...props}>
     {@render children()}
 </div>

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/layouts/split-layout/sidebar.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-    import type { Snippet } from "svelte";
+    import type { Snippet } from 'svelte';
     import type { HTMLAttributes } from 'svelte/elements';
 
-    import { cn } from '$lib/utils';
-
     interface Props extends HTMLAttributes<HTMLElement> {
         children: Snippet;
         width?: 'default' | 'narrow' | 'wide';
@@ -18,13 +16,6 @@
     };
 </script>
 
-<aside
-    class={cn(
-        "w-full",
-        widthClasses[width],
-        className
-    )}
-    {...props}
->
+<aside class={['w-full', widthClasses[width], className]} {...props}>
     {@render children()}
 </aside>

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/navigation/index.ts

@@ -0,0 +1,10 @@
+import NavContainer from './nav-container.svelte';
+import NavItem from './nav-item.svelte';
+
+export {
+    NavContainer as Container,
+    //
+    NavItem as Item,
+    NavContainer,
+    NavItem
+};

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/navigation/nav-container.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    interface Props extends HTMLAttributes<HTMLElement> {
+        children: Snippet;
+    }
+
+    let { children, class: className, ...props }: Props = $props();
+</script>
+
+<nav class={['flex space-x-2 lg:flex-col lg:space-y-1 lg:space-x-0', className]} {...props}>
+    {@render children()}
+</nav>

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/navigation/nav-item.svelte

@@ -19,12 +19,7 @@
     });
 </script>
 
-<Button
-    class={[!isActive && 'hover:underline', 'relative justify-start hover:bg-transparent', className]}
-    data-sveltekit-noscroll
-    {href}
-    variant="ghost"
->
+<Button class={[!isActive && 'hover:underline', 'relative justify-start hover:bg-transparent', className]} data-sveltekit-noscroll {href} variant="ghost">
     {#if isActive}
         <div class="bg-muted absolute inset-0 rounded-md" in:send={{ key: 'active-sidebar-tab' }} out:receive={{ key: 'active-sidebar-tab' }}></div>
     {/if}

src/Exceptionless.Web/ClientApp/src/lib/utils.ts

@@ -1,6 +1,7 @@
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
+// TODO: Convert to https://svelte.dev/docs/svelte/class#The-class:-directive
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
 }

src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/sidebar-nav.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    import * as Navigation from '$lib/features/shared/components/navigation';
+
+    import type { NavigationItem } from '../../routes';
+
+    interface Props extends HTMLAttributes<HTMLElement> {
+        routes: NavigationItem[];
+    }
+
+    let { routes, ...props }: Props = $props();
+</script>
+
+<Navigation.Container {...props}>
+    {#each routes as route (route.href)}
+        <Navigation.Item href={route.href} title={route.title} />
+    {/each}
+</Navigation.Container>

src/Exceptionless.Web/ClientApp/src/routes/(app)/account/+layout.svelte

@@ -2,11 +2,12 @@
     import * as Card from '$comp/ui/card';
     import { Separator } from '$comp/ui/separator';
     import { accessToken } from '$features/auth/index.svelte';
+    import * as SplitLayout from '$features/shared/components/layouts/split-layout';
     import { getMeQuery } from '$features/users/api.svelte';
 
     import type { NavigationItemContext } from '../../routes';
 
-    import SidebarNav from './(components)/sidebar-nav.svelte';
+    import SidebarNav from '../(components)/sidebar-nav.svelte';
     import { routes } from './routes';
 
     let { children } = $props();
@@ -19,21 +20,21 @@
     });
 </script>
 
-<Card.Root
-    ><Card.Header>
+<Card.Root>
+    <Card.Header>
         <Card.Title class="text-2xl" level={2}>Settings</Card.Title>
         <Card.Description>Manage your account settings and set e-mail preferences.</Card.Description>
     </Card.Header>
     <Separator class="mx-6 my-6 w-auto" />
 
     <Card.Content>
-        <div class="flex flex-col space-y-8 lg:flex-row lg:space-y-0 lg:space-x-12">
-            <aside class="-mx-4 lg:w-1/5">
+        <SplitLayout.Root>
+            <SplitLayout.Sidebar>
                 <SidebarNav routes={filteredRoutes} />
-            </aside>
-            <div class="flex-1">
+            </SplitLayout.Sidebar>
+            <SplitLayout.Content>
                 {@render children()}
-            </div>
-        </div>
+            </SplitLayout.Content>
+        </SplitLayout.Root>
     </Card.Content>
 </Card.Root>

src/Exceptionless.Web/ClientApp/src/routes/(app)/event/[id]/+page.svelte

@@ -11,6 +11,7 @@
     import { watch } from 'runed';
     import { toast } from 'svelte-sonner';
 
+    // TODO: Have this happen automatically when the organization changes.
     watch(
         () => organization.current,
         () => {