init commit

resources/js/layouts/AppLayout.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import AppLayout from '@/layouts/app/AppSidebarLayout.svelte';
+    import type { BreadcrumbItemType } from '@/types';
+    import type { Snippet } from 'svelte';
+
+    interface Props {
+        breadcrumbs?: BreadcrumbItemType[];
+        children?: Snippet;
+    }
+
+    let { breadcrumbs = [], children }: Props = $props();
+</script>
+
+<AppLayout {breadcrumbs}>
+    {@render children?.()}
+</AppLayout>

resources/js/layouts/AuthLayout.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import AuthLayout from '@/layouts/auth/AuthSimpleLayout.svelte';
+    import type { Snippet } from 'svelte';
+
+    interface Props {
+        title: string;
+        description: string;
+        children?: Snippet;
+    }
+
+    let { title, description, children }: Props = $props();
+</script>
+
+<AuthLayout {title} {description}>
+    {@render children?.()}
+</AuthLayout>

resources/js/layouts/app/AppHeaderLayout.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import AppContent from '@/components/AppContent.svelte';
+    import AppHeader from '@/components/AppHeader.svelte';
+    import AppShell from '@/components/AppShell.svelte';
+    import type { BreadcrumbItemType } from '@/types';
+    import type { Snippet } from 'svelte';
+
+    interface Props {
+        breadcrumbs?: BreadcrumbItemType[];
+        children?: Snippet;
+    }
+
+    let { breadcrumbs = [], children }: Props = $props();
+</script>
+
+<AppShell variant="header">
+    <AppHeader {breadcrumbs} />
+    <AppContent variant="header">
+        {@render children?.()}
+    </AppContent>
+</AppShell>

resources/js/layouts/app/AppSidebarLayout.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import AppContent from '@/components/AppContent.svelte';
+    import AppShell from '@/components/AppShell.svelte';
+    import AppSidebar from '@/components/AppSidebar.svelte';
+    import AppSidebarHeader from '@/components/AppSidebarHeader.svelte';
+    import type { BreadcrumbItemType } from '@/types';
+    import type { Snippet } from 'svelte';
+
+    interface Props {
+        breadcrumbs?: BreadcrumbItemType[];
+        children?: Snippet;
+    }
+
+    let { breadcrumbs = [], children }: Props = $props();
+</script>
+
+<AppShell variant="sidebar">
+    <AppSidebar />
+    <AppContent variant="sidebar">
+        <AppSidebarHeader {breadcrumbs} />
+        {@render children?.()}
+    </AppContent>
+</AppShell>

resources/js/layouts/auth/AuthCardLayout.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import AppLogoIcon from '@/components/AppLogoIcon.svelte';
+    import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+    import { Link } from '@inertiajs/svelte';
+    import type { Snippet } from 'svelte';
+
+    interface Props {
+        title: string;
+        description: string;
+        children?: Snippet;
+    }
+
+    let { title, description, children }: Props = $props();
+</script>
+
+<div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+    <div class="flex w-full max-w-md flex-col gap-6">
+        <Link href={route('home')} class="flex items-center gap-2 self-center font-medium">
+            <div class="flex h-9 w-9 items-center justify-center">
+                <AppLogoIcon class="size-9 fill-current text-black dark:text-white" />
+            </div>
+        </Link>
+
+        <div class="flex flex-col gap-6">
+            <Card class="rounded-xl">
+                <CardHeader class="px-10 pb-0 pt-8 text-center">
+                    <CardTitle class="text-xl">{title}</CardTitle>
+                    <CardDescription>
+                        {description}
+                    </CardDescription>
+                </CardHeader>
+                <CardContent class="px-10 py-8">
+                    {@render children?.()}
+                </CardContent>
+            </Card>
+        </div>
+    </div>
+</div>

resources/js/layouts/auth/AuthSimpleLayout.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import AppLogoIcon from '@/components/AppLogoIcon.svelte';
+    import { Link } from '@inertiajs/svelte';
+    import type { Snippet } from 'svelte';
+
+    interface Props {
+        title: string;
+        description: string;
+        children?: Snippet;
+    }
+
+    let { title, description, children }: Props = $props();
+</script>
+
+<div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+    <div class="w-full max-w-sm">
+        <div class="flex flex-col gap-8">
+            <div class="flex flex-col items-center gap-4">
+                <Link href={route('home')} class="flex flex-col items-center gap-2 font-medium">
+                    <div class="mb-1 flex h-9 w-9 items-center justify-center rounded-md">
+                        <AppLogoIcon class="size-9 fill-current text-[var(--foreground)] dark:text-white" />
+                    </div>
+                    <span class="sr-only">{title}</span>
+                </Link>
+                <div class="space-y-2 text-center">
+                    <h1 class="text-xl font-medium">{title}</h1>
+                    <p class="text-center text-sm text-muted-foreground">{description}</p>
+                </div>
+            </div>
+            {@render children?.()}
+        </div>
+    </div>
+</div>

resources/js/layouts/auth/AuthSplitLayout.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import AppLogoIcon from '@/components/AppLogoIcon.svelte';
+    import { Link, page } from '@inertiajs/svelte';
+    import type { Snippet } from 'svelte';
+
+    const name = $page.props.name;
+    const quote = $page.props.quote;
+
+    interface Props {
+        title: string;
+        description: string;
+        children?: Snippet;
+    }
+
+    let { title, description, children }: Props = $props();
+</script>
+
+<div class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
+    <div class="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
+        <div class="absolute inset-0 bg-zinc-900"></div>
+        <Link href={route('home')} class="relative z-20 flex items-center text-lg font-medium">
+            <AppLogoIcon class="mr-2 size-8 fill-current text-white" />
+            {name}
+        </Link>
+        {#if quote}
+            <div class="relative z-20 mt-auto">
+                <blockquote class="space-y-2">
+                    <p class="text-lg">&ldquo;{quote.message}&rdquo;</p>
+                    <footer class="text-sm text-neutral-300">{quote.author}</footer>
+                </blockquote>
+            </div>
+        {/if}
+    </div>
+    <div class="lg:p-8">
+        <div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+            <div class="flex flex-col space-y-2 text-center">
+                {#if title}
+                    <h1 class="text-xl font-medium tracking-tight">{title}</h1>
+                {/if}
+                {#if description}
+                    <p class="text-sm text-muted-foreground">{description}</p>
+                {/if}
+            </div>
+            {@render children?.()}
+        </div>
+    </div>
+</div>

resources/js/layouts/settings/Layout.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    import Heading from '@/components/Heading.svelte';
+    import { Button } from '@/components/ui/button';
+    import { Separator } from '@/components/ui/separator';
+    import { cn } from '@/lib/utils';
+    import { type NavItem } from '@/types';
+    import { Link, page } from '@inertiajs/svelte';
+    import type { Snippet } from 'svelte';
+
+    const sidebarNavItems: NavItem[] = [
+        {
+            title: 'Profile',
+            href: '/settings/profile',
+        },
+        {
+            title: 'Password',
+            href: '/settings/password',
+        },
+        {
+            title: 'Appearance',
+            href: '/settings/appearance',
+        },
+        {
+            title: 'Permissions',
+            href: '/settings/permissions',
+        },
+        {
+            title: 'Roles',
+            href: '/settings/roles',
+        },
+    ];
+
+    const currentPath = $page.props.ziggy?.location ? new URL($page.props.ziggy.location).pathname : '';
+
+    interface Props {
+        children?: Snippet;
+    }
+
+    let { children }: Props = $props();
+</script>
+
+<div class="px-4 py-6">
+    <Heading title="Settings" description="Manage your profile and account settings" />
+
+    <div class="flex flex-col space-y-8 md:space-y-0 lg:flex-row lg:space-x-12 lg:space-y-0">
+        <aside class="w-full max-w-xl lg:w-48">
+            <nav class="flex flex-col space-x-0 space-y-1">
+                {#each sidebarNavItems as item (item.href)}
+                    <Link href={item.href}>
+                        <Button
+                            variant="ghost"
+                            class={cn('w-full justify-start', {
+                                'bg-muted': currentPath === item.href,
+                            })}
+                        >
+                            {item.title}
+                        </Button>
+                    </Link>
+                {/each}
+            </nav>
+        </aside>
+
+        <Separator class="my-6 md:hidden" />
+
+        <div class="flex-1 md:max-w-2xl">
+            <section class="max-w-xl space-y-12">
+                {@render children?.()}
+            </section>
+        </div>
+    </div>
+</div>