Implement Fluid Emerald app redesign

app/Actions/Projects/BuildProjectBoardPayload.php

@@ -29,6 +29,7 @@ class BuildProjectBoardPayload
                         'ticketStatuses',
                         'tickets' => fn ($query) => $query
                             ->with([
+                                'assignee',
                                 'ticketPriority',
                                 'ticketStatus.allowedTargetStatuses.boardColumn',
                                 'ticketStatus.boardColumn',

resources/css/app.css

@@ -37,8 +37,8 @@
         "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
         "Noto Color Emoji";
 
-    --radius-sm: 0.125rem;
+    --radius-sm: 0.25rem;
-    --radius-md: 0.375rem;
+    --radius-md: 0.25rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
 
@@ -51,11 +51,11 @@
     --text-headline-lg: 1.5rem;
     --text-headline-lg--line-height: 2rem;
     --text-headline-lg--font-weight: 600;
-    --text-headline-lg--letter-spacing: 0;
+    --text-headline-lg--letter-spacing: -0.025em;
     --text-headline-md: 1.125rem;
     --text-headline-md--line-height: 1.5rem;
     --text-headline-md--font-weight: 600;
-    --text-headline-md--letter-spacing: 0;
+    --text-headline-md--letter-spacing: -0.015em;
     --text-headline-lg-mobile: 1.25rem;
     --text-headline-lg-mobile--line-height: 1.75rem;
     --text-headline-lg-mobile--font-weight: 600;
@@ -275,50 +275,50 @@
 }
 
 .dark {
-    --background: #0f172a;
+    --background: #0b1326;
-    --foreground: #eff1f3;
+    --foreground: #e5eaf5;
-    --card: #111827;
+    --card: #131b2e;
-    --card-foreground: #eff1f3;
+    --card-foreground: #e5eaf5;
-    --popover: #111827;
+    --popover: #171f33;
-    --popover-foreground: #eff1f3;
+    --popover-foreground: #e5eaf5;
-    --primary: #4ae176;
+    --primary: #4be277;
     --primary-foreground: #002109;
-    --secondary: #1f2937;
+    --secondary: #222a3d;
-    --secondary-foreground: #eff1f3;
+    --secondary-foreground: #e5eaf5;
-    --muted: #1e293b;
+    --muted: #171f33;
-    --muted-foreground: #cbd5e1;
+    --muted-foreground: #aeb8cd;
-    --accent: #1e293b;
+    --accent: #222a3d;
-    --accent-foreground: #eff1f3;
+    --accent-foreground: #f3f6fc;
-    --destructive: #f87171;
+    --destructive: #ffb4ab;
-    --destructive-foreground: #ffffff;
+    --destructive-foreground: #690005;
-    --border: #334155;
+    --border: #3b4358;
-    --input: #334155;
+    --input: #4a5268;
-    --ring: #4ae176;
+    --ring: #4be277;
-    --chart-1: #4ae176;
+    --chart-1: #4be277;
     --chart-2: #60a5fa;
     --chart-3: #fbbf24;
     --chart-4: #f87171;
     --chart-5: #b7c8e1;
-    --surface: #0f172a;
+    --surface: #0b1326;
-    --surface-dim: #020617;
+    --surface-dim: #060e20;
-    --surface-bright: #111827;
+    --surface-bright: #2d3449;
-    --surface-container-lowest: #111827;
+    --surface-container-lowest: #060e20;
-    --surface-container-low: #1e293b;
+    --surface-container-low: #131b2e;
-    --surface-container: #263445;
+    --surface-container: #171f33;
-    --surface-container-high: #334155;
+    --surface-container-high: #222a3d;
-    --surface-container-highest: #475569;
+    --surface-container-highest: #2d3449;
-    --surface-variant: #334155;
+    --surface-variant: #2d3449;
-    --surface-tint: #4ae176;
+    --surface-tint: #4be277;
-    --on-surface: #eff1f3;
+    --on-surface: #e5eaf5;
-    --on-surface-variant: #cbd5e1;
+    --on-surface-variant: #aeb8cd;
-    --on-background: #eff1f3;
+    --on-background: #e5eaf5;
-    --outline: #94a3b8;
+    --outline: #8993aa;
-    --outline-variant: #334155;
+    --outline-variant: #3b4358;
-    --primary-container: #14532d;
+    --primary-container: #136c35;
     --on-primary: #002109;
     --on-primary-container: #bbf7d0;
     --primary-fixed: #6bff8f;
-    --primary-fixed-dim: #4ae176;
+    --primary-fixed-dim: #4be277;
     --on-primary-fixed: #002109;
     --on-primary-fixed-variant: #005321;
     --secondary-container: #1e3a5f;
@@ -343,15 +343,15 @@
     --inverse-surface: #eff1f3;
     --inverse-on-surface: #191c1e;
     --inverse-primary: #006e2f;
-    --sidebar-background: #111827;
+    --sidebar-background: #060e20;
-    --sidebar-foreground: #eff1f3;
+    --sidebar-foreground: #e5eaf5;
-    --sidebar-primary: #4ae176;
+    --sidebar-primary: #4be277;
     --sidebar-primary-foreground: #002109;
-    --sidebar-accent: #1e293b;
+    --sidebar-accent: #171f33;
-    --sidebar-accent-foreground: #eff1f3;
+    --sidebar-accent-foreground: #f3f6fc;
-    --sidebar-border: #334155;
+    --sidebar-border: #2d3449;
-    --sidebar-ring: #4ae176;
+    --sidebar-ring: #4be277;
-    --sidebar: #111827;
+    --sidebar: #060e20;
 }
 
 @layer base {
@@ -359,6 +359,74 @@
         @apply border-border outline-ring/50;
     }
     body {
-        @apply bg-background text-foreground;
+        @apply min-h-screen bg-background text-foreground antialiased;
+        letter-spacing: -0.006em;
+    }
+
+    ::selection {
+        background: color-mix(in srgb, var(--primary) 24%, transparent);
+        color: var(--foreground);
+    }
+
+    textarea,
+    select {
+        @apply border-input bg-surface-container-lowest text-foreground rounded-md border px-3 py-2 text-sm shadow-xs outline-none transition-[border-color,box-shadow,background-color];
+        background-color: var(--surface-container-lowest) !important;
+    }
+
+    textarea:focus-visible,
+    select:focus-visible {
+        @apply border-ring ring-ring/25 ring-3;
+    }
+
+    textarea:disabled,
+    select:disabled {
+        @apply cursor-not-allowed opacity-55;
+    }
+
+    table {
+        @apply w-full border-separate border-spacing-0;
+    }
+
+    thead {
+        @apply bg-surface-container-low text-on-surface-variant;
+    }
+
+    tbody tr {
+        @apply transition-colors hover:bg-primary/3;
+    }
+
+    th {
+        @apply text-label-uppercase font-bold tracking-[0.08em];
+    }
+}
+
+@layer components {
+    .app-page {
+        @apply mx-auto flex w-full max-w-[96rem] flex-1 flex-col gap-6 px-4 py-5 sm:px-6 sm:py-7 lg:px-8;
+    }
+
+    .app-page-narrow {
+        @apply mx-auto flex w-full max-w-5xl flex-1 flex-col gap-6 px-4 py-5 sm:px-6 sm:py-7 lg:px-8;
+    }
+
+    .page-actions {
+        @apply flex flex-wrap items-center gap-2;
+    }
+
+    .status-success {
+        @apply border-primary/25 bg-primary/8 text-on-primary-container rounded-lg border px-4 py-3 text-sm dark:text-primary-fixed;
+    }
+
+    .empty-state {
+        @apply border-outline-variant bg-surface-container-low text-on-surface-variant rounded-lg border border-dashed px-5 py-8 text-center text-sm;
+    }
+
+    .table-shell {
+        @apply border-outline-variant bg-surface-container-lowest overflow-hidden rounded-xl border;
+    }
+
+    .eyebrow {
+        @apply text-label-uppercase text-primary font-bold uppercase tracking-[0.12em];
     }
 }

resources/js/app.ts

@@ -20,7 +20,7 @@ createInertiaApp({
             .mount(el);
     },
     progress: {
-        color: '#4B5563',
+        color: '#22c55e',
     },
 });
 

resources/js/components/AppContent.vue

@@ -1,14 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { SidebarInset } from '@/components/ui/sidebar';
-import type { AppVariant } from '@/types';
+import type { AppContentProps } from '@/types';
 
-type Props = {
+const props = withDefaults(defineProps<AppContentProps>(), {
-    variant?: AppVariant;
-    class?: string;
-};
-
-const props = withDefaults(defineProps<Props>(), {
     variant: 'sidebar',
 });
 const className = computed(() => props.class);

resources/js/components/AppHeader.vue

@@ -5,7 +5,6 @@ import {
     LayoutGrid,
     Layers3,
     Menu,
-    Search,
     Shield,
     Users,
 } from 'lucide-vue-next';
@@ -33,16 +32,11 @@ import { index as adminUsers } from '@/routes/admin/users';
 import { index as projectTemplatesIndex } from '@/routes/project-templates';
 import { index as projectsIndex } from '@/routes/projects';
 import { index as teamsIndex } from '@/routes/teams';
-import type { BreadcrumbItem, NavItem } from '@/types';
+import type { AppHeaderProps, NavItem } from '@/types';
 
-const props = withDefaults(
+const props = withDefaults(defineProps<AppHeaderProps>(), {
-    defineProps<{
+    breadcrumbs: () => [],
-        breadcrumbs?: BreadcrumbItem[];
+});
-    }>(),
-    {
-        breadcrumbs: () => [],
-    },
-);
 
 const page = usePage();
 const auth = computed(() => page.props.auth);
@@ -131,19 +125,6 @@ const navItemClasses = (item: NavItem): string =>
                     </SheetHeader>
 
                     <div class="flex flex-col gap-5 p-4">
-                        <div class="relative">
-                            <Search
-                                class="text-on-surface-variant pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2"
-                            />
-                            <input
-                                disabled
-                                aria-label="Search"
-                                placeholder="Coming soon"
-                                class="border-outline-variant bg-surface-container-low text-on-surface placeholder:text-on-surface-variant h-10 w-full rounded-lg border py-2 pl-9 pr-3 text-sm disabled:cursor-not-allowed disabled:opacity-100"
-                                type="text"
-                            />
-                        </div>
-
                         <nav class="flex flex-col gap-1" aria-label="Main">
                             <Link
                                 v-for="item in mainNavItems"
@@ -191,19 +172,6 @@ const navItemClasses = (item: NavItem): string =>
             </nav>
 
             <div class="ml-auto flex items-center gap-3">
-                <div class="relative hidden sm:block">
-                    <Search
-                        class="text-on-surface-variant pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2"
-                    />
-                    <input
-                        disabled
-                        aria-label="Search"
-                        placeholder="Coming soon"
-                        class="border-outline-variant bg-surface-container-low text-on-surface placeholder:text-on-surface-variant h-10 w-48 rounded-lg border py-2 pl-9 pr-3 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-100 md:w-64"
-                        type="text"
-                    />
-                </div>
-
                 <DropdownMenu>
                     <DropdownMenuTrigger :as-child="true">
                         <Button

resources/js/components/AppShell.vue

@@ -1,13 +1,9 @@
 <script setup lang="ts">
 import { usePage } from '@inertiajs/vue3';
 import { SidebarProvider } from '@/components/ui/sidebar';
-import type { AppVariant } from '@/types';
+import type { AppShellProps } from '@/types';
 
-type Props = {
+withDefaults(defineProps<AppShellProps>(), {
-    variant?: AppVariant;
-};
-
-withDefaults(defineProps<Props>(), {
     variant: 'sidebar',
 });
 

resources/js/components/AppSidebar.vue

@@ -1,11 +1,18 @@
 <script setup lang="ts">
 import { Link, usePage } from '@inertiajs/vue3';
 import {
+    ArrowLeft,
+    BellRing,
     BookOpen,
+    CirclePlus,
     Folder,
     FolderGit2,
+    KanbanSquare,
     LayoutGrid,
     Layers3,
+    ListTodo,
+    SlidersHorizontal,
+    Tags,
     Shield,
     Users,
 } from 'lucide-vue-next';
@@ -26,12 +33,88 @@ import {
 import { dashboard } from '@/routes';
 import { index as adminUsers } from '@/routes/admin/users';
 import { index as projectTemplatesIndex } from '@/routes/project-templates';
-import { index as projectsIndex } from '@/routes/projects';
+import {
+    create as projectsCreate,
+    index as projectsIndex,
+    show as projectShow,
+} from '@/routes/projects';
+import { index as projectBacklog } from '@/routes/projects/backlog';
+import { index as projectBoard } from '@/routes/projects/board';
+import {
+    board as projectSettingsBoard,
+    general as projectSettingsGeneral,
+    metadata as projectSettingsMetadata,
+    notifications as projectSettingsNotifications,
+    repositories as projectSettingsRepositories,
+} from '@/routes/projects/settings';
 import { index as teamsIndex } from '@/routes/teams';
-import type { NavItem } from '@/types';
+import type { AppSidebarProps, NavItem } from '@/types';
+
+const props = defineProps<AppSidebarProps>();
 
 const page = usePage();
 
+const isProjectSettings = computed(() => page.url.includes('/settings/'));
+
+const projectNavItems = computed<NavItem[]>(() => {
+    if (!props.project) {
+        return [];
+    }
+
+    return [
+        {
+            title: 'Overview',
+            href: projectShow(props.project.id),
+            icon: LayoutGrid,
+            isActive: page.url === projectShow.url(props.project.id),
+        },
+        {
+            title: 'Board',
+            href: projectBoard(props.project.id),
+            icon: KanbanSquare,
+        },
+        {
+            title: 'Backlog',
+            href: projectBacklog(props.project.id),
+            icon: ListTodo,
+        },
+    ];
+});
+
+const projectSettingsNavItems = computed<NavItem[]>(() => {
+    if (!props.project || !isProjectSettings.value) {
+        return [];
+    }
+
+    return [
+        {
+            title: 'General',
+            href: projectSettingsGeneral(props.project.id),
+            icon: SlidersHorizontal,
+        },
+        {
+            title: 'Board',
+            href: projectSettingsBoard(props.project.id),
+            icon: KanbanSquare,
+        },
+        {
+            title: 'Metadata',
+            href: projectSettingsMetadata(props.project.id),
+            icon: Tags,
+        },
+        {
+            title: 'Repositories',
+            href: projectSettingsRepositories(props.project.id),
+            icon: FolderGit2,
+        },
+        {
+            title: 'Notifications',
+            href: projectSettingsNotifications(props.project.id),
+            icon: BellRing,
+        },
+    ];
+});
+
 const mainNavItems = computed<NavItem[]>(() => {
     const items: NavItem[] = [
         {
@@ -88,12 +171,12 @@ const footerNavItems: NavItem[] = [
 </script>
 
 <template>
-    <Sidebar collapsible="icon" variant="inset">
+    <Sidebar collapsible="icon" variant="sidebar" class="border-sidebar-border">
         <SidebarHeader>
             <SidebarMenu>
                 <SidebarMenuItem>
                     <SidebarMenuButton size="lg" as-child>
-                        <Link :href="dashboard()">
+                        <Link :href="project ? projectsIndex() : dashboard()">
                             <AppLogo />
                         </Link>
                     </SidebarMenuButton>
@@ -102,7 +185,60 @@ const footerNavItems: NavItem[] = [
         </SidebarHeader>
 
         <SidebarContent>
-            <NavMain :items="mainNavItems" />
+            <template v-if="project">
+                <div
+                    class="border-sidebar-border bg-sidebar-accent/60 mx-3 mb-3 rounded-lg border p-3 group-data-[collapsible=icon]:hidden"
+                >
+                    <div
+                        class="text-sidebar-foreground/55 text-[0.65rem] font-bold uppercase tracking-[0.12em]"
+                    >
+                        {{ project.key }}
+                    </div>
+                    <div class="mt-1 truncate text-sm font-semibold">
+                        {{ project.name }}
+                    </div>
+                </div>
+                <NavMain :items="projectNavItems" label="Project" />
+                <NavMain
+                    v-if="projectSettingsNavItems.length > 0"
+                    :items="projectSettingsNavItems"
+                    label="Project settings"
+                />
+                <div class="mt-auto px-3 pb-3">
+                    <SidebarMenu>
+                        <SidebarMenuItem>
+                            <SidebarMenuButton as-child tooltip="All projects">
+                                <Link :href="projectsIndex()">
+                                    <ArrowLeft />
+                                    <span>All projects</span>
+                                </Link>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    </SidebarMenu>
+                </div>
+            </template>
+            <template v-else>
+                <NavMain :items="mainNavItems" label="Workspace" />
+                <div
+                    v-if="page.props.auth.permissions.projectCreate"
+                    class="px-3 pt-3 group-data-[collapsible=icon]:px-2"
+                >
+                    <SidebarMenu>
+                        <SidebarMenuItem>
+                            <SidebarMenuButton
+                                as-child
+                                tooltip="New project"
+                                class="bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground"
+                            >
+                                <Link :href="projectsCreate()">
+                                    <CirclePlus />
+                                    <span>New project</span>
+                                </Link>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    </SidebarMenu>
+                </div>
+            </template>
         </SidebarContent>
 
         <SidebarFooter>

resources/js/components/AppSidebarHeader.vue

@@ -1,24 +1,21 @@
 <script setup lang="ts">
 import Breadcrumbs from '@/components/Breadcrumbs.vue';
 import { SidebarTrigger } from '@/components/ui/sidebar';
-import type { BreadcrumbItem } from '@/types';
+import type { AppSidebarHeaderProps } from '@/types';
 
-withDefaults(
+withDefaults(defineProps<AppSidebarHeaderProps>(), {
-    defineProps<{
+    breadcrumbs: () => [],
-        breadcrumbs?: BreadcrumbItem[];
+});
-    }>(),
-    {
-        breadcrumbs: () => [],
-    },
-);
 </script>
 
 <template>
     <header
-        class="border-sidebar-border/70 group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 flex h-16 shrink-0 items-center gap-2 border-b px-6 transition-[width,height] ease-linear md:px-4"
+        class="border-border/70 bg-background/92 sticky top-0 z-20 flex h-14 shrink-0 items-center gap-2 border-b px-4 backdrop-blur-xl transition-[width,height] ease-linear md:px-6"
     >
-        <div class="flex items-center gap-2">
+        <div class="flex min-w-0 items-center gap-3">
-            <SidebarTrigger class="-ml-1" />
+            <SidebarTrigger
+                class="text-muted-foreground hover:text-foreground -ml-1"
+            />
             <template v-if="breadcrumbs && breadcrumbs.length > 0">
                 <Breadcrumbs :breadcrumbs="breadcrumbs" />
             </template>

resources/js/components/AppearanceTabs.vue

@@ -13,17 +13,17 @@ const tabs = [
 
 <template>
     <div
-        class="inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800"
+        class="bg-surface-container-low border-outline-variant inline-flex gap-1 rounded-lg border p-1"
     >
         <button
             v-for="{ value, Icon, label } in tabs"
             :key="value"
             @click="updateAppearance(value)"
             :class="[
-                'flex items-center rounded-md px-3.5 py-1.5 transition-colors',
+                'flex items-center rounded-md px-3.5 py-2 text-sm font-medium transition-all',
                 appearance === value
-                    ? 'shadow-xs bg-white dark:bg-neutral-700 dark:text-neutral-100'
+                    ? 'bg-surface-container-lowest text-foreground shadow-xs ring-outline-variant ring-1'
-                    : 'text-neutral-500 hover:bg-neutral-200/60 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-700/60',
+                    : 'text-muted-foreground hover:bg-surface-container-high hover:text-foreground',
             ]"
         >
             <component :is="Icon" class="-ml-1 h-4 w-4" />

resources/js/components/Heading.vue

@@ -1,27 +1,26 @@
 <script setup lang="ts">
-type Props = {
+import type { HeadingProps } from '@/types';
-    title: string;
-    description?: string;
-    variant?: 'default' | 'small';
-};
 
-withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<HeadingProps>(), {
     variant: 'default',
 });
 </script>
 
 <template>
-    <header :class="variant === 'small' ? '' : 'mb-8 space-y-0.5'">
+    <header :class="variant === 'small' ? '' : 'space-y-1.5'">
         <h2
             :class="
                 variant === 'small'
-                    ? 'mb-0.5 text-base font-medium'
+                    ? 'mb-0.5 text-base font-semibold tracking-tight'
-                    : 'text-xl font-semibold tracking-tight'
+                    : 'text-2xl font-semibold tracking-[-0.025em] sm:text-[1.75rem]'
             "
         >
             {{ title }}
         </h2>
-        <p v-if="description" class="text-muted-foreground text-sm">
+        <p
+            v-if="description"
+            class="text-muted-foreground max-w-3xl text-sm leading-6"
+        >
             {{ description }}
         </p>
     </header>

resources/js/components/NavFooter.vue

@@ -25,7 +25,7 @@ defineProps<Props>();
             <SidebarMenu>
                 <SidebarMenuItem v-for="item in items" :key="item.title">
                     <SidebarMenuButton
-                        class="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100"
+                        class="text-sidebar-foreground/60 hover:text-sidebar-foreground"
                         as-child
                     >
                         <a

resources/js/components/NavMain.vue

@@ -8,23 +8,25 @@ import {
     SidebarMenuItem,
 } from '@/components/ui/sidebar';
 import { useCurrentUrl } from '@/composables/useCurrentUrl';
-import type { NavItem } from '@/types';
+import type { NavMainProps } from '@/types';
 
-defineProps<{
+withDefaults(defineProps<NavMainProps>(), {
-    items: NavItem[];
+    label: 'Workspace',
-}>();
+});
 
-const { isCurrentUrl } = useCurrentUrl();
+const { isCurrentOrParentUrl } = useCurrentUrl();
 </script>
 
 <template>
     <SidebarGroup class="px-2 py-0">
-        <SidebarGroupLabel>Platform</SidebarGroupLabel>
+        <SidebarGroupLabel>{{ label }}</SidebarGroupLabel>
         <SidebarMenu>
             <SidebarMenuItem v-for="item in items" :key="item.title">
                 <SidebarMenuButton
                     as-child
-                    :is-active="isCurrentUrl(item.href)"
+                    :is-active="
+                        item.isActive ?? isCurrentOrParentUrl(item.href)
+                    "
                     :tooltip="item.title"
                 >
                     <Link :href="item.href">

resources/js/components/UserInfo.vue

@@ -1,28 +1,14 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { useInitials } from '@/composables/useInitials';
-import type { User } from '@/types';
 import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
+import type { UserInfoProps } from '@/types';
 
-type Props = {
+withDefaults(defineProps<UserInfoProps>(), {
-    user: User;
-    showEmail?: boolean;
-};
-
-const props = withDefaults(defineProps<Props>(), {
     showEmail: false,
 });
-
-const { getInitials } = useInitials();
-
-// Compute whether we should show the avatar image
-const showAvatar = computed(
-    () => props.user.avatar && props.user.avatar !== '',
-);
 </script>
 
 <template>
-    <UserAvatar />
+    <UserAvatar :user="user" />
 
     <div class="grid flex-1 text-left text-sm leading-tight">
         <span class="truncate font-medium">{{ user.name }}</span>

resources/js/components/ui/alert/index.ts

@@ -1,24 +1,25 @@
-import type { VariantProps } from "class-variance-authority"
+import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority"
+import { cva } from "class-variance-authority";
 
-export { default as Alert } from "./Alert.vue"
+export { default as Alert } from "./Alert.vue";
-export { default as AlertDescription } from "./AlertDescription.vue"
+export { default as AlertDescription } from "./AlertDescription.vue";
-export { default as AlertTitle } from "./AlertTitle.vue"
+export { default as AlertTitle } from "./AlertTitle.vue";
 
 export const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+    "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-  {
+    {
-    variants: {
+        variants: {
-      variant: {
+            variant: {
-        default: "bg-card text-card-foreground",
+                default:
-        destructive:
+                    "border-outline-variant bg-surface-container-lowest text-card-foreground",
-          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+                destructive:
-      },
+                    "border-destructive/35 text-destructive bg-destructive/8 [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
     },
-    defaultVariants: {
+);
-      variant: "default",
-    },
-  },
-)
 
-export type AlertVariants = VariantProps<typeof alertVariants>
+export type AlertVariants = VariantProps<typeof alertVariants>;

resources/js/components/ui/avatar/UserAvatar.vue

@@ -6,36 +6,30 @@ import {
     AvatarImage,
 } from "@/components/ui/avatar/index";
 import { usePage } from "@inertiajs/vue3";
-import { computed, PropType } from "vue";
+import { computed } from "vue";
-import { UserModel } from "@/types/models/user-model";
+import type { UserAvatarProps } from "@/types";
 
-const props = defineProps({
+const props = withDefaults(defineProps<UserAvatarProps>(), {
-    user: {
+    rounded: true,
-        type: Object as PropType<UserModel>,
+});
-    },
-    rounded: {
-        type: Boolean,
-        default: false,
-    },
-})
 
 const page = usePage();
 const auth = computed(() => page.props.auth);
 
-const user = computed(() => props.user ?? auth.value.user)
+const user = computed(() => props.user ?? auth.value.user);
 </script>
 
 <template>
-    <Avatar class="size-8 overflow-hidden" :class="rounded ? 'rounded-full' : 'rounded-lg'">
+    <Avatar
-        <AvatarImage
+        class="border-outline-variant bg-surface-container-high size-8 overflow-hidden border"
-            v-if="user.avatar"
+        :class="rounded ? 'rounded-full' : 'rounded-lg'"
-            :src="user.avatar"
+    >
-            :alt="user.name"
+        <AvatarImage v-if="user.avatar" :src="user.avatar" :alt="user.name" />
-        />
         <AvatarFallback
-            class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white"
+            class="bg-primary/12 text-on-primary-container text-xs font-bold dark:text-primary-fixed"
+            :class="rounded ? 'rounded-full' : 'rounded-lg'"
         >
-            {{ getInitials(auth.user?.name) }}
+            {{ getInitials(user.name) }}
         </AvatarFallback>
     </Avatar>
 </template>

resources/js/components/ui/badge/index.ts

@@ -1,26 +1,26 @@
-import type { VariantProps } from "class-variance-authority"
+import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority"
+import { cva } from "class-variance-authority";
 
-export { default as Badge } from "./Badge.vue"
+export { default as Badge } from "./Badge.vue";
 
 export const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+    "inline-flex items-center justify-center rounded-full border px-2.5 py-1 text-[0.7rem] font-semibold leading-none w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/25 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
+    {
-    variants: {
+        variants: {
-      variant: {
+            variant: {
-        default:
+                default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+                    "border-primary/20 bg-primary/12 text-on-primary-container dark:text-primary-fixed [a&]:hover:bg-primary/18",
-        secondary:
+                secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+                    "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
+                destructive:
-         "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+                    "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
+                outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+                    "border-outline-variant bg-surface-container-lowest text-on-surface-variant [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      },
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
     },
-    defaultVariants: {
+);
-      variant: "default",
+export type BadgeVariants = VariantProps<typeof badgeVariants>;
-    },
-  },
-)
-export type BadgeVariants = VariantProps<typeof badgeVariants>

resources/js/components/ui/button/index.ts

@@ -1,38 +1,37 @@
-import type { VariantProps } from "class-variance-authority"
+import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority"
+import { cva } from "class-variance-authority";
 
-export { default as Button } from "./Button.vue"
+export { default as Button } from "./Button.vue";
 
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-semibold transition-all duration-150 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/25 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
+    {
-    variants: {
+        variants: {
-      variant: {
+            variant: {
-        default:
+                default:
-          "bg-primary text-primary-foreground hover:bg-primary/90",
+                    "bg-primary text-primary-foreground shadow-[0_6px_18px_rgba(0,110,47,0.14)] hover:-translate-y-px hover:bg-primary/90 hover:shadow-[0_8px_22px_rgba(0,110,47,0.2)]",
-        destructive:
+                destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+                    "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
+                outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+                    "border border-outline-variant bg-surface-container-lowest shadow-xs hover:border-outline hover:bg-surface-container-low hover:text-accent-foreground",
-        secondary:
+                secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                    "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
+                ghost: "hover:bg-accent hover:text-accent-foreground",
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+                link: "text-primary underline-offset-4 hover:underline",
-        link: "text-primary underline-offset-4 hover:underline",
+            },
-      },
+            size: {
-      size: {
+                default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
+                sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+                lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
+                icon: "size-9",
-        "icon": "size-9",
+                "icon-sm": "size-8",
-        "icon-sm": "size-8",
+                "icon-lg": "size-10",
-        "icon-lg": "size-10",
+            },
-      },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
     },
-    defaultVariants: {
+);
-      variant: "default",
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
-      size: "default",
-    },
-  },
-)
-export type ButtonVariants = VariantProps<typeof buttonVariants>

resources/js/components/ui/card/Card.vue

@@ -1,22 +1,22 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from "vue";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
+    class?: HTMLAttributes["class"];
-}>()
+}>();
 </script>
 
 <template>
-  <div
+    <div
-    data-slot="card"
+        data-slot="card"
-    :class="
+        :class="
-      cn(
+            cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+                'bg-surface-container-lowest text-card-foreground border-outline-variant flex flex-col gap-6 rounded-xl border py-6 shadow-[0_1px_2px_rgba(16,24,40,0.03)] transition-[border-color,box-shadow] hover:border-outline/65 hover:shadow-kanban-card',
-        props.class,
+                props.class,
-      )
+            )
-    "
+        "
-  >
+    >
-    <slot />
+        <slot />
-  </div>
+    </div>
 </template>

resources/js/components/ui/dialog/DialogContent.vue

@@ -1,53 +1,62 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { DialogContentEmits, DialogContentProps } from "reka-ui";
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core"
+import { reactiveOmit } from "@vueuse/core";
-import { X } from "lucide-vue-next"
+import { X } from "lucide-vue-next";
 import {
-  DialogClose,
+    DialogClose,
-  DialogContent,
+    DialogContent,
-  DialogPortal,
+    DialogPortal,
-  useForwardPropsEmits,
+    useForwardPropsEmits,
-} from "reka-ui"
+} from "reka-ui";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import DialogOverlay from "./DialogOverlay.vue"
+import DialogOverlay from "./DialogOverlay.vue";
 
 defineOptions({
-  inheritAttrs: false,
+    inheritAttrs: false,
-})
+});
 
-const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes["class"], showCloseButton?: boolean }>(), {
+const props = withDefaults(
-  showCloseButton: true,
+    defineProps<
-})
+        DialogContentProps & {
-const emits = defineEmits<DialogContentEmits>()
+            class?: HTMLAttributes["class"];
+            showCloseButton?: boolean;
+        }
+    >(),
+    {
+        showCloseButton: true,
+    },
+);
+const emits = defineEmits<DialogContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DialogPortal>
+    <DialogPortal>
-    <DialogOverlay />
+        <DialogOverlay />
-    <DialogContent
+        <DialogContent
-      data-slot="dialog-content"
+            data-slot="dialog-content"
-      v-bind="{ ...$attrs, ...forwarded }"
+            v-bind="{ ...$attrs, ...forwarded }"
-      :class="
+            :class="
-        cn(
+                cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+                    'bg-surface-container-lowest border-outline-variant data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border p-6 shadow-2xl duration-200 sm:max-w-lg',
-          props.class,
+                    props.class,
-        )"
+                )
-    >
+            "
-      <slot />
+        >
+            <slot />
 
-      <DialogClose
+            <DialogClose
-        v-if="showCloseButton"
+                v-if="showCloseButton"
-        data-slot="dialog-close"
+                data-slot="dialog-close"
-        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+                class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-      >
+            >
-        <X />
+                <X />
-        <span class="sr-only">Close</span>
+                <span class="sr-only">Close</span>
-      </DialogClose>
+            </DialogClose>
-    </DialogContent>
+        </DialogContent>
-  </DialogPortal>
+    </DialogPortal>
 </template>

resources/js/components/ui/dialog/DialogOverlay.vue

@@ -1,21 +1,28 @@
 <script setup lang="ts">
-import type { DialogOverlayProps } from "reka-ui"
+import type { DialogOverlayProps } from "reka-ui";
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core"
+import { reactiveOmit } from "@vueuse/core";
-import { DialogOverlay } from "reka-ui"
+import { DialogOverlay } from "reka-ui";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<
+    DialogOverlayProps & { class?: HTMLAttributes["class"] }
+>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <DialogOverlay
+    <DialogOverlay
-    data-slot="dialog-overlay"
+        data-slot="dialog-overlay"
-    v-bind="delegatedProps"
+        v-bind="delegatedProps"
-    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+        :class="
-  >
+            cn(
-    <slot />
+                'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/60 backdrop-blur-sm',
-  </DialogOverlay>
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </DialogOverlay>
 </template>

resources/js/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -1,39 +1,49 @@
 <script setup lang="ts">
-import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui"
+import type {
-import type { HTMLAttributes } from "vue"
+    DropdownMenuContentEmits,
-import { reactiveOmit } from "@vueuse/core"
+    DropdownMenuContentProps,
+} from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
 import {
-  DropdownMenuContent,
+    DropdownMenuContent,
-  DropdownMenuPortal,
+    DropdownMenuPortal,
-  useForwardPropsEmits,
+    useForwardPropsEmits,
-} from "reka-ui"
+} from "reka-ui";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 defineOptions({
-  inheritAttrs: false,
+    inheritAttrs: false,
-})
+});
 
 const props = withDefaults(
-  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
+    defineProps<
-  {
+        DropdownMenuContentProps & { class?: HTMLAttributes["class"] }
-    sideOffset: 4,
+    >(),
-  },
+    {
-)
+        sideOffset: 4,
-const emits = defineEmits<DropdownMenuContentEmits>()
+    },
+);
+const emits = defineEmits<DropdownMenuContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DropdownMenuPortal>
+    <DropdownMenuPortal>
-    <DropdownMenuContent
+        <DropdownMenuContent
-      data-slot="dropdown-menu-content"
+            data-slot="dropdown-menu-content"
-      v-bind="{ ...$attrs, ...forwarded }"
+            v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md', props.class)"
+            :class="
-    >
+                cn(
-      <slot />
+                    'bg-popover text-popover-foreground border-outline-variant data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border p-1.5 shadow-xl',
-    </DropdownMenuContent>
+                    props.class,
-  </DropdownMenuPortal>
+                )
+            "
+        >
+            <slot />
+        </DropdownMenuContent>
+    </DropdownMenuPortal>
 </template>

resources/js/components/ui/input/Input.vue

@@ -1,33 +1,35 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from "vue";
-import { useVModel } from "@vueuse/core"
+import { useVModel } from "@vueuse/core";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  defaultValue?: string | number
+    defaultValue?: string | number;
-  modelValue?: string | number | null
+    modelValue?: string | number | null;
-  class?: HTMLAttributes["class"]
+    class?: HTMLAttributes["class"];
-}>()
+}>();
 
 const emits = defineEmits<{
-  (e: "update:modelValue", payload: string | number): void
+    (e: "update:modelValue", payload: string | number): void;
-}>()
+}>();
 
 const modelValue = useVModel(props, "modelValue", emits, {
-  passive: true,
+    passive: true,
-  defaultValue: props.defaultValue,
+    defaultValue: props.defaultValue,
-})
+});
 </script>
 
 <template>
-  <input
+    <input
-    v-model="modelValue"
+        v-model="modelValue"
-    data-slot="input"
+        data-slot="input"
-    :class="cn(
+        :class="
-      'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+            cn(
-      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+                'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input bg-surface-container-lowest h-10 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow,background-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+                'focus-visible:border-ring focus-visible:ring-ring/25 focus-visible:ring-[3px]',
-      props.class,
+                'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-    )"
+                props.class,
-  >
+            )
+        "
+    />
 </template>

resources/js/components/ui/select/SelectContent.vue

@@ -1,51 +1,60 @@
 <script setup lang="ts">
-import type { SelectContentEmits, SelectContentProps } from "reka-ui"
+import type { SelectContentEmits, SelectContentProps } from "reka-ui";
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core"
+import { reactiveOmit } from "@vueuse/core";
 import {
-  SelectContent,
+    SelectContent,
-  SelectPortal,
+    SelectPortal,
-  SelectViewport,
+    SelectViewport,
-  useForwardPropsEmits,
+    useForwardPropsEmits,
-} from "reka-ui"
+} from "reka-ui";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { SelectScrollDownButton, SelectScrollUpButton } from "."
+import { SelectScrollDownButton, SelectScrollUpButton } from ".";
 
 defineOptions({
-  inheritAttrs: false,
+    inheritAttrs: false,
-})
+});
 
 const props = withDefaults(
-  defineProps<SelectContentProps & { class?: HTMLAttributes["class"] }>(),
+    defineProps<SelectContentProps & { class?: HTMLAttributes["class"] }>(),
-  {
+    {
-    position: "popper",
+        position: "popper",
-  },
+    },
-)
+);
-const emits = defineEmits<SelectContentEmits>()
+const emits = defineEmits<SelectContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <SelectPortal>
+    <SelectPortal>
-    <SelectContent
+        <SelectContent
-      data-slot="select-content"
+            data-slot="select-content"
-      v-bind="{ ...$attrs, ...forwarded }"
+            v-bind="{ ...$attrs, ...forwarded }"
-      :class="cn(
+            :class="
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+                cn(
-        position === 'popper'
+                    'bg-popover text-popover-foreground border-outline-variant data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-lg border shadow-xl',
-          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+                    position === 'popper' &&
-        props.class,
+                        'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-      )
+                    props.class,
-      "
+                )
-    >
+            "
-      <SelectScrollUpButton />
+        >
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1')">
+            <SelectScrollUpButton />
-        <slot />
+            <SelectViewport
-      </SelectViewport>
+                :class="
-      <SelectScrollDownButton />
+                    cn(
-    </SelectContent>
+                        'p-1',
-  </SelectPortal>
+                        position === 'popper' &&
+                            'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1',
+                    )
+                "
+            >
+                <slot />
+            </SelectViewport>
+            <SelectScrollDownButton />
+        </SelectContent>
+    </SelectPortal>
 </template>

resources/js/components/ui/select/SelectTrigger.vue

@@ -1,33 +1,40 @@
 <script setup lang="ts">
-import type { SelectTriggerProps } from "reka-ui"
+import type { SelectTriggerProps } from "reka-ui";
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core"
+import { reactiveOmit } from "@vueuse/core";
-import { ChevronDown } from "lucide-vue-next"
+import { ChevronDown } from "lucide-vue-next";
-import { SelectIcon, SelectTrigger, useForwardProps } from "reka-ui"
+import { SelectIcon, SelectTrigger, useForwardProps } from "reka-ui";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const props = withDefaults(
-  defineProps<SelectTriggerProps & { class?: HTMLAttributes["class"], size?: "sm" | "default" }>(),
+    defineProps<
-  { size: "default" },
+        SelectTriggerProps & {
-)
+            class?: HTMLAttributes["class"];
+            size?: "sm" | "default";
+        }
+    >(),
+    { size: "default" },
+);
 
-const delegatedProps = reactiveOmit(props, "class", "size")
+const delegatedProps = reactiveOmit(props, "class", "size");
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <SelectTrigger
+    <SelectTrigger
-    data-slot="select-trigger"
+        data-slot="select-trigger"
-    :data-size="size"
+        :data-size="size"
-    v-bind="forwardedProps"
+        v-bind="forwardedProps"
-    :class="cn(
+        :class="
-      'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+            cn(
-      props.class,
+                'border-input bg-surface-container-lowest data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/25 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-fit items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow,background-color] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-10 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-    )"
+                props.class,
-  >
+            )
-    <slot />
+        "
-    <SelectIcon as-child>
+    >
-      <ChevronDown class="size-4 opacity-50" />
+        <slot />
-    </SelectIcon>
+        <SelectIcon as-child>
-  </SelectTrigger>
+            <ChevronDown class="size-4 opacity-50" />
+        </SelectIcon>
+    </SelectTrigger>
 </template>

resources/js/components/ui/sheet/SheetContent.vue

@@ -1,62 +1,65 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { DialogContentEmits, DialogContentProps } from "reka-ui";
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core"
+import { reactiveOmit } from "@vueuse/core";
-import { X } from "lucide-vue-next"
+import { X } from "lucide-vue-next";
 import {
-  DialogClose,
+    DialogClose,
-  DialogContent,
+    DialogContent,
-  DialogPortal,
+    DialogPortal,
-  useForwardPropsEmits,
+    useForwardPropsEmits,
-} from "reka-ui"
+} from "reka-ui";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import SheetOverlay from "./SheetOverlay.vue"
+import SheetOverlay from "./SheetOverlay.vue";
 
 interface SheetContentProps extends DialogContentProps {
-  class?: HTMLAttributes["class"]
+    class?: HTMLAttributes["class"];
-  side?: "top" | "right" | "bottom" | "left"
+    side?: "top" | "right" | "bottom" | "left";
 }
 
 defineOptions({
-  inheritAttrs: false,
+    inheritAttrs: false,
-})
+});
 
 const props = withDefaults(defineProps<SheetContentProps>(), {
-  side: "right",
+    side: "right",
-})
+});
-const emits = defineEmits<DialogContentEmits>()
+const emits = defineEmits<DialogContentEmits>();
 
-const delegatedProps = reactiveOmit(props, "class", "side")
+const delegatedProps = reactiveOmit(props, "class", "side");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DialogPortal>
+    <DialogPortal>
-    <SheetOverlay />
+        <SheetOverlay />
-    <DialogContent
+        <DialogContent
-      data-slot="sheet-content"
+            data-slot="sheet-content"
-      :class="cn(
+            :class="
-        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+                cn(
-        side === 'right'
+                    'bg-surface-container-lowest data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-2xl transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-          && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+                    side === 'right' &&
-        side === 'left'
+                        'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
-          && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+                    side === 'left' &&
-        side === 'top'
+                        'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
-          && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+                    side === 'top' &&
-        side === 'bottom'
+                        'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
-          && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+                    side === 'bottom' &&
-        props.class)"
+                        'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
-      v-bind="{ ...$attrs, ...forwarded }"
+                    props.class,
-    >
+                )
-      <slot />
+            "
+            v-bind="{ ...$attrs, ...forwarded }"
+        >
+            <slot />
 
-      <DialogClose
+            <DialogClose
-        class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+                class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
-      >
+            >
-        <X class="size-4" />
+                <X class="size-4" />
-        <span class="sr-only">Close</span>
+                <span class="sr-only">Close</span>
-      </DialogClose>
+            </DialogClose>
-    </DialogContent>
+        </DialogContent>
-  </DialogPortal>
+    </DialogPortal>
 </template>

resources/js/components/ui/sheet/SheetOverlay.vue

@@ -1,21 +1,28 @@
 <script setup lang="ts">
-import type { DialogOverlayProps } from "reka-ui"
+import type { DialogOverlayProps } from "reka-ui";
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core"
+import { reactiveOmit } from "@vueuse/core";
-import { DialogOverlay } from "reka-ui"
+import { DialogOverlay } from "reka-ui";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+const props = defineProps<
+    DialogOverlayProps & { class?: HTMLAttributes["class"] }
+>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <DialogOverlay
+    <DialogOverlay
-    data-slot="sheet-overlay"
+        data-slot="sheet-overlay"
-    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+        :class="
-    v-bind="delegatedProps"
+            cn(
-  >
+                'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/60 backdrop-blur-sm',
-    <slot />
+                props.class,
-  </DialogOverlay>
+            )
+        "
+        v-bind="delegatedProps"
+    >
+        <slot />
+    </DialogOverlay>
 </template>

resources/js/components/ui/sidebar/index.ts

@@ -1,60 +1,63 @@
-import type { VariantProps } from "class-variance-authority"
+import type { VariantProps } from "class-variance-authority";
-import type { HTMLAttributes } from "vue"
+import type { HTMLAttributes } from "vue";
-import { cva } from "class-variance-authority"
+import { cva } from "class-variance-authority";
 
 export interface SidebarProps {
-  side?: "left" | "right"
+    side?: "left" | "right";
-  variant?: "sidebar" | "floating" | "inset"
+    variant?: "sidebar" | "floating" | "inset";
-  collapsible?: "offcanvas" | "icon" | "none"
+    collapsible?: "offcanvas" | "icon" | "none";
-  class?: HTMLAttributes["class"]
+    class?: HTMLAttributes["class"];
 }
 
-export { default as Sidebar } from "./Sidebar.vue"
+export { default as Sidebar } from "./Sidebar.vue";
-export { default as SidebarContent } from "./SidebarContent.vue"
+export { default as SidebarContent } from "./SidebarContent.vue";
-export { default as SidebarFooter } from "./SidebarFooter.vue"
+export { default as SidebarFooter } from "./SidebarFooter.vue";
-export { default as SidebarGroup } from "./SidebarGroup.vue"
+export { default as SidebarGroup } from "./SidebarGroup.vue";
-export { default as SidebarGroupAction } from "./SidebarGroupAction.vue"
+export { default as SidebarGroupAction } from "./SidebarGroupAction.vue";
-export { default as SidebarGroupContent } from "./SidebarGroupContent.vue"
+export { default as SidebarGroupContent } from "./SidebarGroupContent.vue";
-export { default as SidebarGroupLabel } from "./SidebarGroupLabel.vue"
+export { default as SidebarGroupLabel } from "./SidebarGroupLabel.vue";
-export { default as SidebarHeader } from "./SidebarHeader.vue"
+export { default as SidebarHeader } from "./SidebarHeader.vue";
-export { default as SidebarInput } from "./SidebarInput.vue"
+export { default as SidebarInput } from "./SidebarInput.vue";
-export { default as SidebarInset } from "./SidebarInset.vue"
+export { default as SidebarInset } from "./SidebarInset.vue";
-export { default as SidebarMenu } from "./SidebarMenu.vue"
+export { default as SidebarMenu } from "./SidebarMenu.vue";
-export { default as SidebarMenuAction } from "./SidebarMenuAction.vue"
+export { default as SidebarMenuAction } from "./SidebarMenuAction.vue";
-export { default as SidebarMenuBadge } from "./SidebarMenuBadge.vue"
+export { default as SidebarMenuBadge } from "./SidebarMenuBadge.vue";
-export { default as SidebarMenuButton } from "./SidebarMenuButton.vue"
+export { default as SidebarMenuButton } from "./SidebarMenuButton.vue";
-export { default as SidebarMenuItem } from "./SidebarMenuItem.vue"
+export { default as SidebarMenuItem } from "./SidebarMenuItem.vue";
-export { default as SidebarMenuSkeleton } from "./SidebarMenuSkeleton.vue"
+export { default as SidebarMenuSkeleton } from "./SidebarMenuSkeleton.vue";
-export { default as SidebarMenuSub } from "./SidebarMenuSub.vue"
+export { default as SidebarMenuSub } from "./SidebarMenuSub.vue";
-export { default as SidebarMenuSubButton } from "./SidebarMenuSubButton.vue"
+export { default as SidebarMenuSubButton } from "./SidebarMenuSubButton.vue";
-export { default as SidebarMenuSubItem } from "./SidebarMenuSubItem.vue"
+export { default as SidebarMenuSubItem } from "./SidebarMenuSubItem.vue";
-export { default as SidebarProvider } from "./SidebarProvider.vue"
+export { default as SidebarProvider } from "./SidebarProvider.vue";
-export { default as SidebarRail } from "./SidebarRail.vue"
+export { default as SidebarRail } from "./SidebarRail.vue";
-export { default as SidebarSeparator } from "./SidebarSeparator.vue"
+export { default as SidebarSeparator } from "./SidebarSeparator.vue";
-export { default as SidebarTrigger } from "./SidebarTrigger.vue"
+export { default as SidebarTrigger } from "./SidebarTrigger.vue";
 
-export { useSidebar } from "./utils"
+export { useSidebar } from "./utils";
 
 export const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+    "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding,background-color,color] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-primary/12 data-[active=true]:font-semibold data-[active=true]:text-primary dark:data-[active=true]:text-primary-fixed data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-  {
+    {
-    variants: {
+        variants: {
-      variant: {
+            variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                default:
-        outline:
+                    "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+                outline:
-      },
+                    "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
-      size: {
+            },
-        default: "h-8 text-sm",
+            size: {
-        sm: "h-7 text-xs",
+                default: "h-8 text-sm",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+                sm: "h-7 text-xs",
-      },
+                lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
     },
-    defaultVariants: {
+);
-      variant: "default",
-      size: "default",
-    },
-  },
-)
 
-export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>
+export type SidebarMenuButtonVariants = VariantProps<
+    typeof sidebarMenuButtonVariants
+>;

resources/js/components/ui/sidebar/utils.ts

@@ -1,8 +1,8 @@
-import { createContext } from "reka-ui"
+import { createContext } from "reka-ui";
-import type { ComputedRef, Ref } from 'vue';
+import type { ComputedRef, Ref } from "vue";
 
 export type SidebarContext = {
-    state: ComputedRef<'expanded' | 'collapsed'>;
+    state: ComputedRef<"expanded" | "collapsed">;
     open: Ref<boolean>;
     setOpen: (value: boolean) => void;
     isMobile: Ref<boolean>;
@@ -11,11 +11,12 @@ export type SidebarContext = {
     toggleSidebar: () => void;
 };
 
-export const SIDEBAR_COOKIE_NAME = "sidebar_state"
+export const SIDEBAR_COOKIE_NAME = "sidebar_state";
-export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-export const SIDEBAR_WIDTH = "16rem"
+export const SIDEBAR_WIDTH = "15.5rem";
-export const SIDEBAR_WIDTH_MOBILE = "18rem"
+export const SIDEBAR_WIDTH_MOBILE = "18rem";
-export const SIDEBAR_WIDTH_ICON = "3rem"
+export const SIDEBAR_WIDTH_ICON = "3rem";
-export const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
-export const [useSidebar, provideSidebarContext] = createContext<SidebarContext>("Sidebar")
+export const [useSidebar, provideSidebarContext] =
+    createContext<SidebarContext>("Sidebar");

resources/js/layouts/AppLayout.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
-import AppLayout from '@/layouts/app/AppHeaderLayout.vue';
+import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
-import type { BreadcrumbItem } from '@/types';
+import type { AppLayoutProps } from '@/types';
 
-type Props = {
+withDefaults(defineProps<AppLayoutProps>(), {
-    breadcrumbs?: BreadcrumbItem[];
-};
-
-withDefaults(defineProps<Props>(), {
     breadcrumbs: () => [],
 });
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
+    <AppLayout :breadcrumbs="breadcrumbs" :project="project">
         <slot />
     </AppLayout>
 </template>

resources/js/layouts/AuthLayout.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue';
+import AuthLayout from '@/layouts/auth/AuthCardLayout.vue';
+import type { AuthLayoutProps } from '@/types';
 
-defineProps<{
+defineProps<AuthLayoutProps>();
-    title?: string;
-    description?: string;
-}>();
 </script>
 
 <template>

resources/js/layouts/app/AppSidebarLayout.vue

@@ -3,21 +3,17 @@ import AppContent from '@/components/AppContent.vue';
 import AppShell from '@/components/AppShell.vue';
 import AppSidebar from '@/components/AppSidebar.vue';
 import AppSidebarHeader from '@/components/AppSidebarHeader.vue';
-import type { BreadcrumbItem } from '@/types';
+import type { AppLayoutProps } from '@/types';
 
-type Props = {
+withDefaults(defineProps<AppLayoutProps>(), {
-    breadcrumbs?: BreadcrumbItem[];
-};
-
-withDefaults(defineProps<Props>(), {
     breadcrumbs: () => [],
 });
 </script>
 
 <template>
     <AppShell variant="sidebar">
-        <AppSidebar />
+        <AppSidebar :project="project" />
-        <AppContent variant="sidebar" class="overflow-x-hidden">
+        <AppContent variant="sidebar" class="min-w-0 overflow-x-hidden">
             <AppSidebarHeader :breadcrumbs="breadcrumbs" />
             <slot />
         </AppContent>

resources/js/layouts/auth/AuthCardLayout.vue

@@ -9,41 +9,65 @@ import {
     CardTitle,
 } from '@/components/ui/card';
 import { home } from '@/routes/index';
+import type { AuthLayoutProps } from '@/types';
 
-defineProps<{
+defineProps<AuthLayoutProps>();
-    title?: string;
-    description?: string;
-}>();
 </script>
 
 <template>
     <div
-        class="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10"
+        class="bg-background relative flex min-h-svh flex-col items-center justify-center overflow-hidden p-5 sm:p-8"
     >
-        <div class="flex w-full max-w-md flex-col gap-6">
+        <div
+            class="pointer-events-none absolute inset-0 overflow-hidden"
+            aria-hidden="true"
+        >
+            <div
+                class="bg-primary/12 absolute -left-24 -top-24 size-80 rounded-full blur-3xl"
+            />
+            <div
+                class="bg-secondary/55 absolute -bottom-36 -right-20 size-[28rem] rounded-full blur-3xl"
+            />
+            <div
+                class="absolute inset-0 bg-[linear-gradient(to_right,var(--outline-variant)_1px,transparent_1px),linear-gradient(to_bottom,var(--outline-variant)_1px,transparent_1px)] bg-[size:48px_48px] opacity-[0.08]"
+            />
+        </div>
+
+        <div class="relative flex w-full max-w-[28rem] flex-col gap-7">
             <Link
                 :href="home()"
-                class="flex items-center gap-2 self-center font-medium"
+                class="group flex items-center gap-3 self-center font-semibold"
             >
-                <div class="flex h-9 w-9 items-center justify-center">
+                <div
-                    <AppLogoIcon
+                    class="bg-primary text-primary-foreground flex size-10 items-center justify-center rounded-lg shadow-[0_10px_28px_rgba(34,197,94,0.22)] transition-transform group-hover:-translate-y-0.5"
-                        class="size-9 fill-current text-black dark:text-white"
+                >
-                    />
+                    <AppLogoIcon class="size-5 fill-current" />
                 </div>
+                <span class="text-lg tracking-tight">KanbanGit</span>
             </Link>
 
-            <div class="flex flex-col gap-6">
+            <div class="flex flex-col gap-4">
-                <Card class="rounded-xl">
+                <Card
-                    <CardHeader class="px-10 pb-0 pt-8 text-center">
+                    class="border-outline-variant/80 rounded-xl py-0 shadow-[0_24px_70px_rgba(10,20,35,0.12)] hover:shadow-[0_24px_70px_rgba(10,20,35,0.12)]"
-                        <CardTitle class="text-xl">{{ title }}</CardTitle>
+                >
+                    <CardHeader
+                        class="px-6 pb-0 pt-7 text-center sm:px-9 sm:pt-9"
+                    >
+                        <CardTitle
+                            class="text-2xl font-semibold tracking-[-0.025em]"
+                            >{{ title }}</CardTitle
+                        >
                         <CardDescription>
                             {{ description }}
                         </CardDescription>
                     </CardHeader>
-                    <CardContent class="px-10 py-8">
+                    <CardContent class="px-6 pb-7 pt-7 sm:px-9 sm:pb-9">
                         <slot />
                     </CardContent>
                 </Card>
+                <p class="text-muted-foreground text-center text-xs">
+                    Open source project management, hosted on your terms.
+                </p>
             </div>
         </div>
     </div>

resources/js/layouts/settings/Layout.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
+import {
+    GitBranch,
+    KeyRound,
+    Palette,
+    ShieldCheck,
+    UserRound,
+} from 'lucide-vue-next';
 import Heading from '@/components/Heading.vue';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
@@ -16,22 +23,27 @@ const sidebarNavItems: NavItem[] = [
     {
         title: 'Profile',
         href: editProfile(),
+        icon: UserRound,
     },
     {
         title: 'Security',
         href: editSecurity(),
+        icon: ShieldCheck,
     },
     {
         title: 'Git connections',
         href: editGitConnections(),
+        icon: GitBranch,
     },
     {
         title: 'Applications',
         href: editApplications(),
+        icon: KeyRound,
     },
     {
         title: 'Appearance',
         href: editAppearance(),
+        icon: Palette,
     },
 ];
 
@@ -39,16 +51,16 @@ const { isCurrentOrParentUrl } = useCurrentUrl();
 </script>
 
 <template>
-    <div class="px-4 py-6">
+    <div class="app-page-narrow">
         <Heading
             title="Settings"
             description="Manage your profile, security, and Git integration settings"
         />
 
-        <div class="flex flex-col lg:flex-row lg:space-x-12">
+        <div class="grid gap-6 lg:grid-cols-[14rem_minmax(0,1fr)]">
-            <aside class="w-full max-w-xl lg:w-48">
+            <aside class="w-full">
                 <nav
-                    class="flex flex-col space-x-0 space-y-1"
+                    class="border-outline-variant bg-surface-container-lowest shadow-xs flex gap-1 overflow-x-auto rounded-xl border p-2 lg:flex-col"
                     aria-label="Settings"
                 >
                     <Button
@@ -56,8 +68,11 @@ const { isCurrentOrParentUrl } = useCurrentUrl();
                         :key="toUrl(item.href)"
                         variant="ghost"
                         :class="[
-                            'w-full justify-start',
+                            'shrink-0 justify-start lg:w-full',
-                            { 'bg-muted': isCurrentOrParentUrl(item.href) },
+                            {
+                                'bg-primary/12 text-on-primary-container hover:bg-primary/16 dark:text-primary-fixed':
+                                    isCurrentOrParentUrl(item.href),
+                            },
                         ]"
                         as-child
                     >
@@ -69,10 +84,12 @@ const { isCurrentOrParentUrl } = useCurrentUrl();
                 </nav>
             </aside>
 
-            <Separator class="my-6 lg:hidden" />
+            <Separator class="lg:hidden" />
 
-            <div class="flex-1 md:max-w-2xl">
+            <div class="min-w-0 flex-1">
-                <section class="max-w-xl space-y-12">
+                <section
+                    class="border-outline-variant bg-surface-container-lowest shadow-xs space-y-12 rounded-xl border p-5 sm:p-7"
+                >
                     <slot />
                 </section>
             </div>

resources/js/pages/Dashboard.vue

@@ -1,9 +1,24 @@
 <script setup lang="ts">
-import { Head } from '@inertiajs/vue3';
+import { Head, Link, usePage } from '@inertiajs/vue3';
-import PlaceholderPattern from '@/components/PlaceholderPattern.vue';
+import {
+    ArrowRight,
+    FolderKanban,
+    Layers3,
+    Plus,
+    ShieldCheck,
+    Users,
+} from 'lucide-vue-next';
 import AppLayout from '@/layouts/AppLayout.vue';
 import { dashboard } from '@/routes/index';
-import type { BreadcrumbItem } from '@/types';
+import { index as adminUsers } from '@/routes/admin/users';
+import { index as projectTemplates } from '@/routes/project-templates';
+import {
+    create as projectCreate,
+    index as projectsIndex,
+} from '@/routes/projects';
+import { index as teamsIndex } from '@/routes/teams';
+import type { BreadcrumbItem, NavItem } from '@/types';
+import { computed } from 'vue';
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -11,37 +26,131 @@ const breadcrumbs: BreadcrumbItem[] = [
         href: dashboard(),
     },
 ];
+
+const page = usePage();
+
+const quickLinks = computed<NavItem[]>(() => {
+    const items: NavItem[] = [
+        {
+            title: 'Browse projects',
+            href: projectsIndex(),
+            icon: FolderKanban,
+        },
+    ];
+
+    if (page.props.auth.permissions.projectCreate) {
+        items.push(
+            { title: 'Create a project', href: projectCreate(), icon: Plus },
+            {
+                title: 'Project templates',
+                href: projectTemplates(),
+                icon: Layers3,
+            },
+        );
+    }
+
+    if (page.props.auth.permissions.globalAdmin) {
+        items.push({
+            title: 'Manage users',
+            href: adminUsers(),
+            icon: ShieldCheck,
+        });
+    }
+
+    if (page.props.auth.permissions.canManageTeams) {
+        items.push({ title: 'Manage teams', href: teamsIndex(), icon: Users });
+    }
+
+    return items;
+});
 </script>
 
 <template>
     <Head title="Dashboard" />
 
     <AppLayout :breadcrumbs="breadcrumbs">
-        <div
+        <div class="app-page">
-            class="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4"
+            <section
-        >
+                class="border-outline-variant bg-surface-container-lowest shadow-xs relative overflow-hidden rounded-xl border px-5 py-8 sm:px-8 sm:py-10"
-            <div class="grid auto-rows-min gap-4 md:grid-cols-3">
-                <div
-                    class="border-sidebar-border/70 dark:border-sidebar-border relative aspect-video overflow-hidden rounded-xl border"
-                >
-                    <PlaceholderPattern />
-                </div>
-                <div
-                    class="border-sidebar-border/70 dark:border-sidebar-border relative aspect-video overflow-hidden rounded-xl border"
-                >
-                    <PlaceholderPattern />
-                </div>
-                <div
-                    class="border-sidebar-border/70 dark:border-sidebar-border relative aspect-video overflow-hidden rounded-xl border"
-                >
-                    <PlaceholderPattern />
-                </div>
-            </div>
-            <div
-                class="border-sidebar-border/70 dark:border-sidebar-border relative min-h-[100vh] flex-1 rounded-xl border md:min-h-min"
             >
-                <PlaceholderPattern />
+                <div
-            </div>
+                    class="bg-primary/12 absolute -right-16 -top-20 size-64 rounded-full blur-3xl"
+                    aria-hidden="true"
+                />
+                <div class="relative max-w-3xl">
+                    <div class="eyebrow">Your workspace</div>
+                    <h1
+                        class="mt-3 text-3xl font-semibold tracking-[-0.035em] sm:text-4xl"
+                    >
+                        Welcome back, {{ $page.props.auth.user.name }}.
+                    </h1>
+                    <p
+                        class="text-muted-foreground mt-3 max-w-2xl text-sm leading-6 sm:text-base"
+                    >
+                        Pick up a project, shape its workflow, or manage the
+                        people who make the work happen.
+                    </p>
+                </div>
+            </section>
+
+            <section>
+                <div class="mb-4 flex items-end justify-between gap-4">
+                    <div>
+                        <div class="eyebrow">Shortcuts</div>
+                        <h2 class="mt-1 text-xl font-semibold tracking-tight">
+                            Where do you want to go?
+                        </h2>
+                    </div>
+                </div>
+
+                <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+                    <Link
+                        v-for="item in quickLinks"
+                        :key="item.title"
+                        :href="item.href"
+                        class="border-outline-variant bg-surface-container-lowest shadow-xs hover:border-primary/45 hover:shadow-kanban-card group flex min-h-36 flex-col justify-between rounded-xl border p-5 transition-all hover:-translate-y-0.5"
+                    >
+                        <div
+                            class="bg-primary/10 text-primary flex size-10 items-center justify-center rounded-lg"
+                        >
+                            <component :is="item.icon" class="size-5" />
+                        </div>
+                        <div
+                            class="mt-6 flex items-center justify-between gap-4"
+                        >
+                            <span class="font-semibold">{{ item.title }}</span>
+                            <ArrowRight
+                                class="text-muted-foreground group-hover:text-primary size-4 transition-transform group-hover:translate-x-1"
+                            />
+                        </div>
+                    </Link>
+                </div>
+            </section>
+
+            <section
+                class="border-outline-variant bg-surface-container-low rounded-xl border p-5 sm:p-6"
+            >
+                <div
+                    class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
+                >
+                    <div>
+                        <h2 class="font-semibold">
+                            Built for focused delivery
+                        </h2>
+                        <p class="text-muted-foreground mt-1 text-sm">
+                            Projects keep boards, backlog, metadata,
+                            repositories, and notifications together.
+                        </p>
+                    </div>
+                    <Link
+                        :href="projectsIndex()"
+                        class="text-primary inline-flex items-center gap-2 text-sm font-semibold hover:underline"
+                    >
+                        View all projects
+                        <ArrowRight class="size-4" />
+                    </Link>
+                </div>
+            </section>
         </div>
     </AppLayout>
 </template>

resources/js/pages/Welcome.vue

@@ -1,436 +1,370 @@
 <script setup lang="ts">
 import { Head, Link } from '@inertiajs/vue3';
+import {
+    ArrowRight,
+    Check,
+    Code2,
+    GitBranch,
+    LayoutDashboard,
+    Server,
+    ShieldCheck,
+    Workflow,
+} from 'lucide-vue-next';
+import AppLogoIcon from '@/components/AppLogoIcon.vue';
 import { dashboard, login } from '@/routes/index';
 </script>
 
 <template>
-    <Head title="Welcome">
+    <Head title="Open source Kanban for Git teams" />
-        <link rel="preconnect" href="https://rsms.me/" />
+
-        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+    <div class="bg-background text-foreground min-h-screen overflow-hidden">
-    </Head>
-    <div
-        class="flex min-h-screen flex-col items-center bg-[#FDFDFC] p-6 text-[#1b1b18] lg:justify-center lg:p-8 dark:bg-[#0a0a0a]"
-    >
         <header
-            class="not-has-[nav]:hidden mb-6 w-full max-w-[335px] text-sm lg:max-w-4xl"
+            class="border-outline-variant/70 bg-background/90 sticky top-0 z-30 border-b backdrop-blur-xl"
         >
-            <nav class="flex items-center justify-end gap-4">
+            <div
+                class="mx-auto flex h-16 max-w-7xl items-center justify-between gap-6 px-4 sm:px-6 lg:px-8"
+            >
                 <Link
-                    v-if="$page.props.auth.user"
+                    :href="$page.props.auth.user ? dashboard() : login()"
-                    :href="dashboard()"
+                    class="flex items-center gap-3 font-semibold tracking-tight"
-                    class="inline-block rounded-sm border border-[#19140035] px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b]"
                 >
-                    Dashboard
+                    <span
-                </Link>
+                        class="bg-primary text-primary-foreground flex size-9 items-center justify-center rounded-lg shadow-[0_8px_22px_rgba(34,197,94,0.2)]"
-                <template v-else>
-                    <Link
-                        :href="login()"
-                        class="inline-block rounded-sm border border-transparent px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#19140035] dark:text-[#EDEDEC] dark:hover:border-[#3E3E3A]"
                     >
-                        Log in
+                        <AppLogoIcon class="size-5 fill-current" />
-                    </Link>
+                    </span>
-                </template>
+                    <span>KanbanGit</span>
-            </nav>
+                </Link>
+
+                <nav
+                    class="text-muted-foreground hidden items-center gap-7 text-sm md:flex"
+                    aria-label="Primary navigation"
+                >
+                    <a
+                        href="#product"
+                        class="hover:text-foreground transition-colors"
+                        >Product</a
+                    >
+                    <a
+                        href="#self-hosted"
+                        class="hover:text-foreground transition-colors"
+                        >Self-hosted</a
+                    >
+                    <a
+                        href="https://git.twyco.de/OpenSource/KanbanGit"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="hover:text-foreground transition-colors"
+                    >
+                        Repository
+                    </a>
+                </nav>
+
+                <Link
+                    :href="$page.props.auth.user ? dashboard() : login()"
+                    class="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex h-9 items-center justify-center gap-2 rounded-md px-4 text-sm font-semibold shadow-[0_8px_22px_rgba(34,197,94,0.18)] transition-all hover:-translate-y-px"
+                >
+                    {{ $page.props.auth.user ? 'Open dashboard' : 'Log in' }}
+                    <ArrowRight class="size-4" />
+                </Link>
+            </div>
         </header>
-        <div
+
-            class="duration-750 starting:opacity-0 flex w-full items-center justify-center opacity-100 transition-opacity lg:grow"
+        <main>
-        >
+            <section class="relative">
-            <main
+                <div
-                class="flex w-full max-w-[335px] flex-col-reverse overflow-hidden rounded-lg lg:max-w-4xl lg:flex-row"
+                    class="pointer-events-none absolute inset-0"
+                    aria-hidden="true"
+                >
+                    <div
+                        class="bg-primary/12 absolute left-[8%] top-12 size-80 rounded-full blur-3xl"
+                    />
+                    <div
+                        class="bg-secondary/65 absolute right-[4%] top-28 size-[28rem] rounded-full blur-3xl"
+                    />
+                </div>
+
+                <div
+                    class="relative mx-auto grid max-w-7xl gap-12 px-4 pb-16 pt-20 sm:px-6 sm:pt-24 lg:grid-cols-[0.9fr_1.1fr] lg:items-center lg:px-8 lg:pb-24 lg:pt-32"
+                >
+                    <div class="max-w-2xl">
+                        <div
+                            class="border-primary/20 bg-primary/10 text-on-primary-container dark:text-primary-fixed inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold"
+                        >
+                            <GitBranch class="size-3.5" />
+                            Open source and built for Git workflows
+                        </div>
+                        <h1
+                            class="mt-6 text-4xl font-semibold tracking-[-0.05em] sm:text-6xl sm:leading-[1.04]"
+                        >
+                            Move work forward without giving up control.
+                        </h1>
+                        <p
+                            class="text-muted-foreground mt-6 max-w-xl text-base leading-7 sm:text-lg"
+                        >
+                            KanbanGit brings projects, adaptable boards, ticket
+                            metadata, repository connections, and team access
+                            into one focused workspace you can host yourself.
+                        </p>
+                        <div class="mt-8 flex flex-wrap gap-3">
+                            <Link
+                                :href="
+                                    $page.props.auth.user
+                                        ? dashboard()
+                                        : login()
+                                "
+                                class="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex h-11 items-center gap-2 rounded-md px-5 text-sm font-semibold shadow-[0_10px_28px_rgba(34,197,94,0.22)] transition-all hover:-translate-y-px"
+                            >
+                                {{
+                                    $page.props.auth.user
+                                        ? 'Go to workspace'
+                                        : 'Log in to your workspace'
+                                }}
+                                <ArrowRight class="size-4" />
+                            </Link>
+                            <a
+                                href="https://git.twyco.de/OpenSource/KanbanGit"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                class="border-outline-variant bg-surface-container-lowest shadow-xs hover:bg-surface-container-low inline-flex h-11 items-center gap-2 rounded-md border px-5 text-sm font-semibold transition-colors"
+                            >
+                                <Code2 class="size-4" />
+                                View source
+                            </a>
+                        </div>
+                    </div>
+
+                    <div
+                        class="border-outline-variant bg-surface-container-lowest relative rounded-xl border p-3 shadow-[0_30px_90px_rgba(10,20,35,0.16)] sm:p-4"
+                    >
+                        <div
+                            class="border-outline-variant bg-surface-container-low flex items-center gap-2 rounded-lg border px-4 py-3"
+                        >
+                            <span class="bg-destructive size-2 rounded-full" />
+                            <span class="size-2 rounded-full bg-amber-400" />
+                            <span class="bg-primary size-2 rounded-full" />
+                            <div
+                                class="bg-outline-variant/50 ml-3 h-2 w-28 rounded-full"
+                            />
+                        </div>
+                        <div class="mt-3 grid gap-3 sm:grid-cols-3">
+                            <div
+                                v-for="(column, index) in [
+                                    'Ready',
+                                    'In progress',
+                                    'Review',
+                                ]"
+                                :key="column"
+                                class="bg-surface-container-low rounded-lg p-3"
+                            >
+                                <div
+                                    class="mb-3 flex items-center justify-between gap-2"
+                                >
+                                    <span class="text-xs font-semibold">{{
+                                        column
+                                    }}</span>
+                                    <span
+                                        class="bg-surface-container-highest text-muted-foreground rounded-full px-2 py-0.5 text-[0.65rem]"
+                                        >{{ index + 2 }}</span
+                                    >
+                                </div>
+                                <div class="space-y-2">
+                                    <article
+                                        v-for="ticket in index === 1 ? 3 : 2"
+                                        :key="ticket"
+                                        class="border-outline-variant bg-surface-container-lowest shadow-xs rounded-lg border p-3"
+                                    >
+                                        <div
+                                            class="text-primary text-[0.65rem] font-bold"
+                                        >
+                                            KG-{{ index * 3 + ticket + 10 }}
+                                        </div>
+                                        <div
+                                            class="bg-foreground/75 mt-2 h-2 w-4/5 rounded-full"
+                                        />
+                                        <div
+                                            class="bg-outline-variant/65 mt-2 h-2 w-2/3 rounded-full"
+                                        />
+                                        <div
+                                            class="mt-4 flex items-center justify-between"
+                                        >
+                                            <span
+                                                class="bg-primary/12 text-primary rounded-full px-2 py-1 text-[0.6rem] font-semibold"
+                                                >Feature</span
+                                            >
+                                            <span
+                                                class="bg-secondary text-secondary-foreground flex size-6 items-center justify-center rounded-full text-[0.6rem] font-bold"
+                                                >KG</span
+                                            >
+                                        </div>
+                                    </article>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section
+                id="product"
+                class="border-outline-variant bg-surface-container-low border-y"
             >
                 <div
-                    class="flex-1 rounded-bl-lg rounded-br-lg bg-white p-6 pb-12 text-[13px] leading-[20px] shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] lg:rounded-br-none lg:rounded-tl-lg lg:p-20 dark:bg-[#161615] dark:text-[#EDEDEC] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d]"
+                    class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8 lg:py-24"
                 >
-                    <h1 class="mb-1 font-medium">Let's get started</h1>
+                    <div class="max-w-2xl">
-                    <p class="mb-2 text-[#706f6c] dark:text-[#A1A09A]">
+                        <div class="eyebrow">One coherent workspace</div>
-                        Laravel has an incredibly rich ecosystem. <br />We
+                        <h2
-                        suggest starting with the following.
+                            class="mt-3 text-3xl font-semibold tracking-[-0.035em] sm:text-4xl"
+                        >
+                            Everything around the board stays connected.
+                        </h2>
+                        <p class="text-muted-foreground mt-4 leading-7">
+                            Keep the workflow visual while preserving the
+                            project structure your team needs.
+                        </p>
+                    </div>
+
+                    <div class="mt-10 grid gap-4 md:grid-cols-3">
+                        <article
+                            v-for="feature in [
+                                {
+                                    icon: LayoutDashboard,
+                                    title: 'Flexible workflows',
+                                    text: 'Shape board columns, backlog states, ticket types, priorities, and custom metadata per project.',
+                                },
+                                {
+                                    icon: GitBranch,
+                                    title: 'Repository context',
+                                    text: 'Connect repositories and keep ticket branches and pull requests visible beside the work.',
+                                },
+                                {
+                                    icon: ShieldCheck,
+                                    title: 'Controlled access',
+                                    text: 'Manage users, teams, and project permissions without turning the interface into an admin console.',
+                                },
+                            ]"
+                            :key="feature.title"
+                            class="border-outline-variant bg-surface-container-lowest shadow-xs rounded-xl border p-6"
+                        >
+                            <div
+                                class="bg-primary/10 text-primary flex size-11 items-center justify-center rounded-lg"
+                            >
+                                <component :is="feature.icon" class="size-5" />
+                            </div>
+                            <h3 class="mt-6 text-lg font-semibold">
+                                {{ feature.title }}
+                            </h3>
+                            <p
+                                class="text-muted-foreground mt-2 text-sm leading-6"
+                            >
+                                {{ feature.text }}
+                            </p>
+                        </article>
+                    </div>
+                </div>
+            </section>
+
+            <section
+                id="self-hosted"
+                class="mx-auto grid max-w-7xl gap-10 px-4 py-20 sm:px-6 lg:grid-cols-2 lg:items-center lg:px-8 lg:py-28"
+            >
+                <div>
+                    <div class="eyebrow">Run it on your infrastructure</div>
+                    <h2
+                        class="mt-3 text-3xl font-semibold tracking-[-0.035em] sm:text-4xl"
+                    >
+                        Self-hosted by design.
+                    </h2>
+                    <p class="text-muted-foreground mt-5 max-w-xl leading-7">
+                        Keep project data close, inspect the code, and evolve
+                        the installation with your own deployment practices.
                     </p>
-                    <ul class="mb-4 flex flex-col lg:mb-6">
+                    <ul class="mt-7 space-y-3 text-sm">
                         <li
-                            class="relative flex items-center gap-4 py-2 before:absolute before:bottom-0 before:left-[0.4rem] before:top-1/2 before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
+                            v-for="item in [
+                                'Open source codebase',
+                                'No external product dependency',
+                                'Designed around your Git repositories',
+                            ]"
+                            :key="item"
+                            class="flex items-center gap-3"
                         >
                             <span
-                                class="relative bg-white py-1 dark:bg-[#161615]"
+                                class="bg-primary/12 text-primary flex size-6 items-center justify-center rounded-full"
-                            >
+                                ><Check class="size-3.5"
-                                <span
+                            /></span>
-                                    class="flex h-3.5 w-3.5 items-center justify-center rounded-full border border-[#e3e3e0] bg-[#FDFDFC] shadow-[0px_0px_1px_0px_rgba(0,0,0,0.03),0px_1px_2px_0px_rgba(0,0,0,0.06)] dark:border-[#3E3E3A] dark:bg-[#161615]"
+                            {{ item }}
-                                >
-                                    <span
-                                        class="h-1.5 w-1.5 rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A]"
-                                    />
-                                </span>
-                            </span>
-                            <span>
-                                Read the
-                                <a
-                                    href="https://laravel.com/docs"
-                                    target="_blank"
-                                    class="ml-1 inline-flex items-center space-x-1 font-medium text-[#f53003] underline underline-offset-4 dark:text-[#FF4433]"
-                                >
-                                    <span>Documentation</span>
-                                    <svg
-                                        width="10"
-                                        height="11"
-                                        viewBox="0 0 10 11"
-                                        fill="none"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        class="h-2.5 w-2.5"
-                                    >
-                                        <path
-                                            d="M7.70833 6.95834V2.79167H3.54167M2.5 8L7.5 3.00001"
-                                            stroke="currentColor"
-                                            stroke-linecap="square"
-                                        />
-                                    </svg>
-                                </a>
-                            </span>
-                        </li>
-                        <li
-                            class="relative flex items-center gap-4 py-2 before:absolute before:bottom-1/2 before:left-[0.4rem] before:top-0 before:border-l before:border-[#e3e3e0] dark:before:border-[#3E3E3A]"
-                        >
-                            <span
-                                class="relative bg-white py-1 dark:bg-[#161615]"
-                            >
-                                <span
-                                    class="flex h-3.5 w-3.5 items-center justify-center rounded-full border border-[#e3e3e0] bg-[#FDFDFC] shadow-[0px_0px_1px_0px_rgba(0,0,0,0.03),0px_1px_2px_0px_rgba(0,0,0,0.06)] dark:border-[#3E3E3A] dark:bg-[#161615]"
-                                >
-                                    <span
-                                        class="h-1.5 w-1.5 rounded-full bg-[#dbdbd7] dark:bg-[#3E3E3A]"
-                                    />
-                                </span>
-                            </span>
-                            <span>
-                                Watch video tutorials at
-                                <a
-                                    href="https://laracasts.com"
-                                    target="_blank"
-                                    class="ml-1 inline-flex items-center space-x-1 font-medium text-[#f53003] underline underline-offset-4 dark:text-[#FF4433]"
-                                >
-                                    <span>Laracasts</span>
-                                    <svg
-                                        width="10"
-                                        height="11"
-                                        viewBox="0 0 10 11"
-                                        fill="none"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        class="h-2.5 w-2.5"
-                                    >
-                                        <path
-                                            d="M7.70833 6.95834V2.79167H3.54167M2.5 8L7.5 3.00001"
-                                            stroke="currentColor"
-                                            stroke-linecap="square"
-                                        />
-                                    </svg>
-                                </a>
-                            </span>
-                        </li>
-                    </ul>
-                    <ul class="flex gap-3 text-sm leading-normal">
-                        <li>
-                            <a
-                                href="https://cloud.laravel.com"
-                                target="_blank"
-                                class="inline-block rounded-sm border border-black bg-[#1b1b18] px-5 py-1.5 text-sm leading-normal text-white hover:border-black hover:bg-black dark:border-[#eeeeec] dark:bg-[#eeeeec] dark:text-[#1C1C1A] dark:hover:border-white dark:hover:bg-white"
-                            >
-                                Deploy now
-                            </a>
                         </li>
                     </ul>
                 </div>
+
                 <div
-                    class="relative -mb-px aspect-[335/364] w-full shrink-0 overflow-hidden rounded-t-lg bg-[#fff2f2] lg:-ml-px lg:mb-0 lg:aspect-auto lg:w-[438px] lg:rounded-r-lg lg:rounded-t-none dark:bg-[#1D0002]"
+                    class="border-outline-variant bg-surface-container-lowest overflow-hidden rounded-xl border shadow-[0_24px_70px_rgba(10,20,35,0.12)]"
                 >
-                    <!-- Laravel Logo -->
-                    <svg
-                        class="duration-750 starting:opacity-0 motion-safe:starting:translate-y-6 w-full max-w-none translate-y-0 text-[#F53003] opacity-100 transition-all dark:text-[#F61500]"
-                        viewBox="0 0 438 104"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                    >
-                        <path
-                            d="M17.2036 -3H0V102.197H49.5189V86.7187H17.2036V-3Z"
-                            fill="currentColor"
-                        />
-                        <path
-                            d="M110.256 41.6337C108.061 38.1275 104.945 35.3731 100.905 33.3681C96.8667 31.3647 92.8016 30.3618 88.7131 30.3618C83.4247 30.3618 78.5885 31.3389 74.201 33.2923C69.8111 35.2456 66.0474 37.928 62.9059 41.3333C59.7643 44.7401 57.3198 48.6726 55.5754 53.1293C53.8287 57.589 52.9572 62.274 52.9572 67.1813C52.9572 72.1925 53.8287 76.8995 55.5754 81.3069C57.3191 85.7173 59.7636 89.6241 62.9059 93.0293C66.0474 96.4361 69.8119 99.1155 74.201 101.069C78.5885 103.022 83.4247 103.999 88.7131 103.999C92.8016 103.999 96.8667 102.997 100.905 100.994C104.945 98.9911 108.061 96.2359 110.256 92.7282V102.195H126.563V32.1642H110.256V41.6337ZM108.76 75.7472C107.762 78.4531 106.366 80.8078 104.572 82.8112C102.776 84.8161 100.606 86.4183 98.0637 87.6206C95.5202 88.823 92.7004 89.4238 89.6103 89.4238C86.5178 89.4238 83.7252 88.823 81.2324 87.6206C78.7388 86.4183 76.5949 84.8161 74.7998 82.8112C73.004 80.8078 71.6319 78.4531 70.6856 75.7472C69.7356 73.0421 69.2644 70.1868 69.2644 67.1821C69.2644 64.1758 69.7356 61.3205 70.6856 58.6154C71.6319 55.9102 73.004 53.5571 74.7998 51.5522C76.5949 49.5495 78.738 47.9451 81.2324 46.7427C83.7252 45.5404 86.5178 44.9396 89.6103 44.9396C92.7012 44.9396 95.5202 45.5404 98.0637 46.7427C100.606 47.9451 102.776 49.5487 104.572 51.5522C106.367 53.5571 107.762 55.9102 108.76 58.6154C109.756 61.3205 110.256 64.1758 110.256 67.1821C110.256 70.1868 109.756 73.0421 108.76 75.7472Z"
-                            fill="currentColor"
-                        />
-                        <path
-                            d="M242.805 41.6337C240.611 38.1275 237.494 35.3731 233.455 33.3681C229.416 31.3647 225.351 30.3618 221.262 30.3618C215.974 30.3618 211.138 31.3389 206.75 33.2923C202.36 35.2456 198.597 37.928 195.455 41.3333C192.314 44.7401 189.869 48.6726 188.125 53.1293C186.378 57.589 185.507 62.274 185.507 67.1813C185.507 72.1925 186.378 76.8995 188.125 81.3069C189.868 85.7173 192.313 89.6241 195.455 93.0293C198.597 96.4361 202.361 99.1155 206.75 101.069C211.138 103.022 215.974 103.999 221.262 103.999C225.351 103.999 229.416 102.997 233.455 100.994C237.494 98.9911 240.611 96.2359 242.805 92.7282V102.195H259.112V32.1642H242.805V41.6337ZM241.31 75.7472C240.312 78.4531 238.916 80.8078 237.122 82.8112C235.326 84.8161 233.156 86.4183 230.614 87.6206C228.07 88.823 225.251 89.4238 222.16 89.4238C219.068 89.4238 216.275 88.823 213.782 87.6206C211.289 86.4183 209.145 84.8161 207.35 82.8112C205.554 80.8078 204.182 78.4531 203.236 75.7472C202.286 73.0421 201.814 70.1868 201.814 67.1821C201.814 64.1758 202.286 61.3205 203.236 58.6154C204.182 55.9102 205.554 53.5571 207.35 51.5522C209.145 49.5495 211.288 47.9451 213.782 46.7427C216.275 45.5404 219.068 44.9396 222.16 44.9396C225.251 44.9396 228.07 45.5404 230.614 46.7427C233.156 47.9451 235.326 49.5487 237.122 51.5522C238.917 53.5571 240.312 55.9102 241.31 58.6154C242.306 61.3205 242.806 64.1758 242.806 67.1821C242.805 70.1868 242.305 73.0421 241.31 75.7472Z"
-                            fill="currentColor"
-                        />
-                        <path
-                            d="M438 -3H421.694V102.197H438V-3Z"
-                            fill="currentColor"
-                        />
-                        <path
-                            d="M139.43 102.197H155.735V48.2834H183.712V32.1665H139.43V102.197Z"
-                            fill="currentColor"
-                        />
-                        <path
-                            d="M324.49 32.1665L303.995 85.794L283.498 32.1665H266.983L293.748 102.197H314.242L341.006 32.1665H324.49Z"
-                            fill="currentColor"
-                        />
-                        <path
-                            d="M376.571 30.3656C356.603 30.3656 340.797 46.8497 340.797 67.1828C340.797 89.6597 356.094 104 378.661 104C391.29 104 399.354 99.1488 409.206 88.5848L398.189 80.0226C398.183 80.031 389.874 90.9895 377.468 90.9895C363.048 90.9895 356.977 79.3111 356.977 73.269H411.075C413.917 50.1328 398.775 30.3656 376.571 30.3656ZM357.02 61.0967C357.145 59.7487 359.023 43.3761 376.442 43.3761C393.861 43.3761 395.978 59.7464 396.099 61.0967H357.02Z"
-                            fill="currentColor"
-                        />
-                    </svg>
-
-                    <!-- 13 -->
-                    <svg
-                        class="relative -ml-8 -mt-[6.6rem] w-[438px] max-w-none [--stroke-color:#1B1B18] lg:ml-0 dark:[--stroke-color:#FF750F]"
-                        viewBox="0 0 440 392"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                    >
-                        <g
-                            class="duration-750 starting:opacity-0 text-[#1B1B18] opacity-100 mix-blend-darken transition-all delay-300 dark:text-black dark:mix-blend-normal"
-                        >
-                            <mask
-                                id="path-1-mask"
-                                maskUnits="userSpaceOnUse"
-                                x="-0.328613"
-                                y="103"
-                                width="338"
-                                height="299"
-                                fill="black"
-                            >
-                                <rect
-                                    fill="white"
-                                    x="-0.328613"
-                                    y="103"
-                                    width="338"
-                                    height="299"
-                                />
-                                <path
-                                    d="M234.936 400.8C204.136 400.8 178.936 392.4 159.336 375.6C140.136 358.8 130.536 337 130.536 310.2H200.736C200.736 318.2 203.736 324.8 209.736 330C215.736 335.2 223.736 337.8 233.736 337.8C243.336 337.8 251.136 335 257.136 329.4C263.536 323.8 266.736 316.6 266.736 307.8C266.736 299.8 263.936 293.2 258.336 288C252.736 282.8 245.536 280.2 236.736 280.2H199.536V218.4H236.736C243.536 218.4 249.336 216 254.136 211.2C258.936 206.4 261.336 200.4 261.336 193.2C261.336 184.8 258.736 178.2 253.536 173.4C248.336 168.6 241.736 166.2 233.736 166.2C226.536 166.2 220.336 168.4 215.136 172.8C210.336 177.2 207.936 182.8 207.936 189.6H141.336C141.336 164.8 150.136 144.6 167.736 129C185.336 113 207.936 105 235.536 105C263.136 105 285.536 112.2 302.736 126.6C320.336 141 329.136 160 329.136 183.6C329.136 200.8 324.536 214.8 315.336 225.6C306.136 236 294.336 243.2 279.936 247.2C297.136 252 310.736 260.2 320.736 271.8C331.136 283.4 336.336 298 336.336 315.6C336.336 340.4 326.936 360.8 308.136 376.8C289.336 392.8 264.936 400.8 234.936 400.8Z"
-                                />
-                                <path
-                                    d="M26.8714 167.6H1.67139V105.2H94.6714V400.2H26.8714V167.6Z"
-                                />
-                            </mask>
-                            <path
-                                d="M234.936 400.8C204.136 400.8 178.936 392.4 159.336 375.6C140.136 358.8 130.536 337 130.536 310.2H200.736C200.736 318.2 203.736 324.8 209.736 330C215.736 335.2 223.736 337.8 233.736 337.8C243.336 337.8 251.136 335 257.136 329.4C263.536 323.8 266.736 316.6 266.736 307.8C266.736 299.8 263.936 293.2 258.336 288C252.736 282.8 245.536 280.2 236.736 280.2H199.536V218.4H236.736C243.536 218.4 249.336 216 254.136 211.2C258.936 206.4 261.336 200.4 261.336 193.2C261.336 184.8 258.736 178.2 253.536 173.4C248.336 168.6 241.736 166.2 233.736 166.2C226.536 166.2 220.336 168.4 215.136 172.8C210.336 177.2 207.936 182.8 207.936 189.6H141.336C141.336 164.8 150.136 144.6 167.736 129C185.336 113 207.936 105 235.536 105C263.136 105 285.536 112.2 302.736 126.6C320.336 141 329.136 160 329.136 183.6C329.136 200.8 324.536 214.8 315.336 225.6C306.136 236 294.336 243.2 279.936 247.2C297.136 252 310.736 260.2 320.736 271.8C331.136 283.4 336.336 298 336.336 315.6C336.336 340.4 326.936 360.8 308.136 376.8C289.336 392.8 264.936 400.8 234.936 400.8Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M26.8714 167.6H1.67139V105.2H94.6714V400.2H26.8714V167.6Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M234.936 400.8C204.136 400.8 178.936 392.4 159.336 375.6C140.136 358.8 130.536 337 130.536 310.2H200.736C200.736 318.2 203.736 324.8 209.736 330C215.736 335.2 223.736 337.8 233.736 337.8C243.336 337.8 251.136 335 257.136 329.4C263.536 323.8 266.736 316.6 266.736 307.8C266.736 299.8 263.936 293.2 258.336 288C252.736 282.8 245.536 280.2 236.736 280.2H199.536V218.4H236.736C243.536 218.4 249.336 216 254.136 211.2C258.936 206.4 261.336 200.4 261.336 193.2C261.336 184.8 258.736 178.2 253.536 173.4C248.336 168.6 241.736 166.2 233.736 166.2C226.536 166.2 220.336 168.4 215.136 172.8C210.336 177.2 207.936 182.8 207.936 189.6H141.336C141.336 164.8 150.136 144.6 167.736 129C185.336 113 207.936 105 235.536 105C263.136 105 285.536 112.2 302.736 126.6C320.336 141 329.136 160 329.136 183.6C329.136 200.8 324.536 214.8 315.336 225.6C306.136 236 294.336 243.2 279.936 247.2C297.136 252 310.736 260.2 320.736 271.8C331.136 283.4 336.336 298 336.336 315.6C336.336 340.4 326.936 360.8 308.136 376.8C289.336 392.8 264.936 400.8 234.936 400.8Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-1-mask)"
-                            />
-                            <path
-                                d="M26.8714 167.6H1.67139V105.2H94.6714V400.2H26.8714V167.6Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-1-mask)"
-                            />
-                        </g>
-
-                        <g
-                            class="delay-400 duration-750 starting:opacity-0 motion-safe:starting:-translate-x-[26px] text-[#F3BEC7] opacity-100 transition-all dark:text-[#4B0600]"
-                        >
-                            <mask
-                                id="path-2-mask"
-                                maskUnits="userSpaceOnUse"
-                                x="25.3357"
-                                y="103"
-                                width="338"
-                                height="299"
-                                fill="black"
-                            >
-                                <rect
-                                    fill="white"
-                                    x="25.3357"
-                                    y="103"
-                                    width="338"
-                                    height="299"
-                                />
-                                <path
-                                    d="M260.6 400.8C229.8 400.8 204.6 392.4 185 375.6C165.8 358.8 156.2 337 156.2 310.2H226.4C226.4 318.2 229.4 324.8 235.4 330C241.4 335.2 249.4 337.8 259.4 337.8C269 337.8 276.8 335 282.8 329.4C289.2 323.8 292.4 316.6 292.4 307.8C292.4 299.8 289.6 293.2 284 288C278.4 282.8 271.2 280.2 262.4 280.2H225.2V218.4H262.4C269.2 218.4 275 216 279.8 211.2C284.6 206.4 287 200.4 287 193.2C287 184.8 284.4 178.2 279.2 173.4C274 168.6 267.4 166.2 259.4 166.2C252.2 166.2 246 168.4 240.8 172.8C236 177.2 233.6 182.8 233.6 189.6H167C167 164.8 175.8 144.6 193.4 129C211 113 233.6 105 261.2 105C288.8 105 311.2 112.2 328.4 126.6C346 141 354.8 160 354.8 183.6C354.8 200.8 350.2 214.8 341 225.6C331.8 236 320 243.2 305.6 247.2C322.8 252 336.4 260.2 346.4 271.8C356.8 283.4 362 298 362 315.6C362 340.4 352.6 360.8 333.8 376.8C315 392.8 290.6 400.8 260.6 400.8Z"
-                                />
-                                <path
-                                    d="M52.5357 167.6H27.3357V105.2H120.336V400.2H52.5357V167.6Z"
-                                />
-                            </mask>
-                            <path
-                                d="M260.6 400.8C229.8 400.8 204.6 392.4 185 375.6C165.8 358.8 156.2 337 156.2 310.2H226.4C226.4 318.2 229.4 324.8 235.4 330C241.4 335.2 249.4 337.8 259.4 337.8C269 337.8 276.8 335 282.8 329.4C289.2 323.8 292.4 316.6 292.4 307.8C292.4 299.8 289.6 293.2 284 288C278.4 282.8 271.2 280.2 262.4 280.2H225.2V218.4H262.4C269.2 218.4 275 216 279.8 211.2C284.6 206.4 287 200.4 287 193.2C287 184.8 284.4 178.2 279.2 173.4C274 168.6 267.4 166.2 259.4 166.2C252.2 166.2 246 168.4 240.8 172.8C236 177.2 233.6 182.8 233.6 189.6H167C167 164.8 175.8 144.6 193.4 129C211 113 233.6 105 261.2 105C288.8 105 311.2 112.2 328.4 126.6C346 141 354.8 160 354.8 183.6C354.8 200.8 350.2 214.8 341 225.6C331.8 236 320 243.2 305.6 247.2C322.8 252 336.4 260.2 346.4 271.8C356.8 283.4 362 298 362 315.6C362 340.4 352.6 360.8 333.8 376.8C315 392.8 290.6 400.8 260.6 400.8Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M52.5357 167.6H27.3357V105.2H120.336V400.2H52.5357V167.6Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M260.6 400.8C229.8 400.8 204.6 392.4 185 375.6C165.8 358.8 156.2 337 156.2 310.2H226.4C226.4 318.2 229.4 324.8 235.4 330C241.4 335.2 249.4 337.8 259.4 337.8C269 337.8 276.8 335 282.8 329.4C289.2 323.8 292.4 316.6 292.4 307.8C292.4 299.8 289.6 293.2 284 288C278.4 282.8 271.2 280.2 262.4 280.2H225.2V218.4H262.4C269.2 218.4 275 216 279.8 211.2C284.6 206.4 287 200.4 287 193.2C287 184.8 284.4 178.2 279.2 173.4C274 168.6 267.4 166.2 259.4 166.2C252.2 166.2 246 168.4 240.8 172.8C236 177.2 233.6 182.8 233.6 189.6H167C167 164.8 175.8 144.6 193.4 129C211 113 233.6 105 261.2 105C288.8 105 311.2 112.2 328.4 126.6C346 141 354.8 160 354.8 183.6C354.8 200.8 350.2 214.8 341 225.6C331.8 236 320 243.2 305.6 247.2C322.8 252 336.4 260.2 346.4 271.8C356.8 283.4 362 298 362 315.6C362 340.4 352.6 360.8 333.8 376.8C315 392.8 290.6 400.8 260.6 400.8Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-2-mask)"
-                            />
-                            <path
-                                d="M52.5357 167.6H27.3357V105.2H120.336V400.2H52.5357V167.6Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-2-mask)"
-                            />
-                        </g>
-
-                        <g
-                            class="delay-400 duration-750 starting:opacity-0 motion-safe:starting:-translate-x-[51px] text-[#F8B803] opacity-100 mix-blend-color transition-all dark:text-[#391800] dark:mix-blend-hard-light"
-                        >
-                            <mask
-                                id="path-3-mask"
-                                maskUnits="userSpaceOnUse"
-                                x="51"
-                                y="103"
-                                width="338"
-                                height="299"
-                                fill="black"
-                            >
-                                <rect
-                                    fill="white"
-                                    x="51"
-                                    y="103"
-                                    width="338"
-                                    height="299"
-                                />
-                                <path
-                                    d="M286.264 400.8C255.464 400.8 230.264 392.4 210.664 375.6C191.464 358.8 181.864 337 181.864 310.2H252.064C252.064 318.2 255.064 324.8 261.064 330C267.064 335.2 275.064 337.8 285.064 337.8C294.664 337.8 302.464 335 308.464 329.4C314.864 323.8 318.064 316.6 318.064 307.8C318.064 299.8 315.264 293.2 309.664 288C304.064 282.8 296.864 280.2 288.064 280.2H250.864V218.4H288.064C294.864 218.4 300.664 216 305.464 211.2C310.264 206.4 312.664 200.4 312.664 193.2C312.664 184.8 310.064 178.2 304.864 173.4C299.664 168.6 293.064 166.2 285.064 166.2C277.864 166.2 271.664 168.4 266.464 172.8C261.664 177.2 259.264 182.8 259.264 189.6H192.664C192.664 164.8 201.464 144.6 219.064 129C236.664 113 259.264 105 286.864 105C314.464 105 336.864 112.2 354.064 126.6C371.664 141 380.464 160 380.464 183.6C380.464 200.8 375.864 214.8 366.664 225.6C357.464 236 345.664 243.2 331.264 247.2C348.464 252 362.064 260.2 372.064 271.8C382.464 283.4 387.664 298 387.664 315.6C387.664 340.4 378.264 360.8 359.464 376.8C340.664 392.8 316.264 400.8 286.264 400.8Z"
-                                />
-                                <path
-                                    d="M78.2 167.6H53V105.2H146V400.2H78.2V167.6Z"
-                                />
-                            </mask>
-                            <path
-                                d="M286.264 400.8C255.464 400.8 230.264 392.4 210.664 375.6C191.464 358.8 181.864 337 181.864 310.2H252.064C252.064 318.2 255.064 324.8 261.064 330C267.064 335.2 275.064 337.8 285.064 337.8C294.664 337.8 302.464 335 308.464 329.4C314.864 323.8 318.064 316.6 318.064 307.8C318.064 299.8 315.264 293.2 309.664 288C304.064 282.8 296.864 280.2 288.064 280.2H250.864V218.4H288.064C294.864 218.4 300.664 216 305.464 211.2C310.264 206.4 312.664 200.4 312.664 193.2C312.664 184.8 310.064 178.2 304.864 173.4C299.664 168.6 293.064 166.2 285.064 166.2C277.864 166.2 271.664 168.4 266.464 172.8C261.664 177.2 259.264 182.8 259.264 189.6H192.664C192.664 164.8 201.464 144.6 219.064 129C236.664 113 259.264 105 286.864 105C314.464 105 336.864 112.2 354.064 126.6C371.664 141 380.464 160 380.464 183.6C380.464 200.8 375.864 214.8 366.664 225.6C357.464 236 345.664 243.2 331.264 247.2C348.464 252 362.064 260.2 372.064 271.8C382.464 283.4 387.664 298 387.664 315.6C387.664 340.4 378.264 360.8 359.464 376.8C340.664 392.8 316.264 400.8 286.264 400.8Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M78.2 167.6H53V105.2H146V400.2H78.2V167.6Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M286.264 400.8C255.464 400.8 230.264 392.4 210.664 375.6C191.464 358.8 181.864 337 181.864 310.2H252.064C252.064 318.2 255.064 324.8 261.064 330C267.064 335.2 275.064 337.8 285.064 337.8C294.664 337.8 302.464 335 308.464 329.4C314.864 323.8 318.064 316.6 318.064 307.8C318.064 299.8 315.264 293.2 309.664 288C304.064 282.8 296.864 280.2 288.064 280.2H250.864V218.4H288.064C294.864 218.4 300.664 216 305.464 211.2C310.264 206.4 312.664 200.4 312.664 193.2C312.664 184.8 310.064 178.2 304.864 173.4C299.664 168.6 293.064 166.2 285.064 166.2C277.864 166.2 271.664 168.4 266.464 172.8C261.664 177.2 259.264 182.8 259.264 189.6H192.664C192.664 164.8 201.464 144.6 219.064 129C236.664 113 259.264 105 286.864 105C314.464 105 336.864 112.2 354.064 126.6C371.664 141 380.464 160 380.464 183.6C380.464 200.8 375.864 214.8 366.664 225.6C357.464 236 345.664 243.2 331.264 247.2C348.464 252 362.064 260.2 372.064 271.8C382.464 283.4 387.664 298 387.664 315.6C387.664 340.4 378.264 360.8 359.464 376.8C340.664 392.8 316.264 400.8 286.264 400.8Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-3-mask)"
-                            />
-                            <path
-                                d="M78.2 167.6H53V105.2H146V400.2H78.2V167.6Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-3-mask)"
-                            />
-                        </g>
-
-                        <g
-                            class="delay-400 duration-750 starting:opacity-0 motion-safe:starting:-translate-x-[78px] text-[#F3BEC7] opacity-100 mix-blend-multiply transition-all dark:text-[#733000] dark:mix-blend-normal"
-                        >
-                            <mask
-                                id="path-4-mask"
-                                maskUnits="userSpaceOnUse"
-                                x="76.6643"
-                                y="103"
-                                width="338"
-                                height="299"
-                                fill="black"
-                            >
-                                <rect
-                                    fill="white"
-                                    x="76.6643"
-                                    y="103"
-                                    width="338"
-                                    height="299"
-                                />
-                                <path
-                                    d="M311.929 400.8C281.129 400.8 255.929 392.4 236.329 375.6C217.129 358.8 207.529 337 207.529 310.2H277.729C277.729 318.2 280.729 324.8 286.729 330C292.729 335.2 300.729 337.8 310.729 337.8C320.329 337.8 328.129 335 334.129 329.4C340.529 323.8 343.729 316.6 343.729 307.8C343.729 299.8 340.929 293.2 335.329 288C329.729 282.8 322.529 280.2 313.729 280.2H276.529V218.4H313.729C320.529 218.4 326.329 216 331.129 211.2C335.929 206.4 338.329 200.4 338.329 193.2C338.329 184.8 335.729 178.2 330.529 173.4C325.329 168.6 318.729 166.2 310.729 166.2C303.529 166.2 297.329 168.4 292.129 172.8C287.329 177.2 284.929 182.8 284.929 189.6H218.329C218.329 164.8 227.129 144.6 244.729 129C262.329 113 284.929 105 312.529 105C340.129 105 362.529 112.2 379.729 126.6C397.329 141 406.129 160 406.129 183.6C406.129 200.8 401.529 214.8 392.329 225.6C383.129 236 371.329 243.2 356.929 247.2C374.129 252 387.729 260.2 397.729 271.8C408.129 283.4 413.329 298 413.329 315.6C413.329 340.4 403.929 360.8 385.129 376.8C366.329 392.8 341.929 400.8 311.929 400.8Z"
-                                />
-                                <path
-                                    d="M103.864 167.6H78.6643V105.2H171.664V400.2H103.864V167.6Z"
-                                />
-                            </mask>
-                            <path
-                                d="M311.929 400.8C281.129 400.8 255.929 392.4 236.329 375.6C217.129 358.8 207.529 337 207.529 310.2H277.729C277.729 318.2 280.729 324.8 286.729 330C292.729 335.2 300.729 337.8 310.729 337.8C320.329 337.8 328.129 335 334.129 329.4C340.529 323.8 343.729 316.6 343.729 307.8C343.729 299.8 340.929 293.2 335.329 288C329.729 282.8 322.529 280.2 313.729 280.2H276.529V218.4H313.729C320.529 218.4 326.329 216 331.129 211.2C335.929 206.4 338.329 200.4 338.329 193.2C338.329 184.8 335.729 178.2 330.529 173.4C325.329 168.6 318.729 166.2 310.729 166.2C303.529 166.2 297.329 168.4 292.129 172.8C287.329 177.2 284.929 182.8 284.929 189.6H218.329C218.329 164.8 227.129 144.6 244.729 129C262.329 113 284.929 105 312.529 105C340.129 105 362.529 112.2 379.729 126.6C397.329 141 406.129 160 406.129 183.6C406.129 200.8 401.529 214.8 392.329 225.6C383.129 236 371.329 243.2 356.929 247.2C374.129 252 387.729 260.2 397.729 271.8C408.129 283.4 413.329 298 413.329 315.6C413.329 340.4 403.929 360.8 385.129 376.8C366.329 392.8 341.929 400.8 311.929 400.8Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M103.864 167.6H78.6643V105.2H171.664V400.2H103.864V167.6Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M311.929 400.8C281.129 400.8 255.929 392.4 236.329 375.6C217.129 358.8 207.529 337 207.529 310.2H277.729C277.729 318.2 280.729 324.8 286.729 330C292.729 335.2 300.729 337.8 310.729 337.8C320.329 337.8 328.129 335 334.129 329.4C340.529 323.8 343.729 316.6 343.729 307.8C343.729 299.8 340.929 293.2 335.329 288C329.729 282.8 322.529 280.2 313.729 280.2H276.529V218.4H313.729C320.529 218.4 326.329 216 331.129 211.2C335.929 206.4 338.329 200.4 338.329 193.2C338.329 184.8 335.729 178.2 330.529 173.4C325.329 168.6 318.729 166.2 310.729 166.2C303.529 166.2 297.329 168.4 292.129 172.8C287.329 177.2 284.929 182.8 284.929 189.6H218.329C218.329 164.8 227.129 144.6 244.729 129C262.329 113 284.929 105 312.529 105C340.129 105 362.529 112.2 379.729 126.6C397.329 141 406.129 160 406.129 183.6C406.129 200.8 401.529 214.8 392.329 225.6C383.129 236 371.329 243.2 356.929 247.2C374.129 252 387.729 260.2 397.729 271.8C408.129 283.4 413.329 298 413.329 315.6C413.329 340.4 403.929 360.8 385.129 376.8C366.329 392.8 341.929 400.8 311.929 400.8Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-4-mask)"
-                            />
-                            <path
-                                d="M103.864 167.6H78.6643V105.2H171.664V400.2H103.864V167.6Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-4-mask)"
-                            />
-                        </g>
-
-                        <g
-                            class="delay-400 duration-750 starting:opacity-0 motion-safe:starting:-translate-x-[102px] text-[#F3BEC7] opacity-100 mix-blend-hard-light transition-all dark:text-[#4B0600]"
-                        >
-                            <mask
-                                id="path-5-mask"
-                                maskUnits="userSpaceOnUse"
-                                x="102.329"
-                                y="103"
-                                width="338"
-                                height="299"
-                                fill="black"
-                            >
-                                <rect
-                                    fill="white"
-                                    x="102.329"
-                                    y="103"
-                                    width="338"
-                                    height="299"
-                                />
-                                <path
-                                    d="M337.593 400.8C306.793 400.8 281.593 392.4 261.993 375.6C242.793 358.8 233.193 337 233.193 310.2H303.393C303.393 318.2 306.393 324.8 312.393 330C318.393 335.2 326.393 337.8 336.393 337.8C345.993 337.8 353.793 335 359.793 329.4C366.193 323.8 369.393 316.6 369.393 307.8C369.393 299.8 366.593 293.2 360.993 288C355.393 282.8 348.193 280.2 339.393 280.2H302.193V218.4H339.393C346.193 218.4 351.993 216 356.793 211.2C361.593 206.4 363.993 200.4 363.993 193.2C363.993 184.8 361.393 178.2 356.193 173.4C350.993 168.6 344.393 166.2 336.393 166.2C329.193 166.2 322.993 168.4 317.793 172.8C312.993 177.2 310.593 182.8 310.593 189.6H243.993C243.993 164.8 252.793 144.6 270.393 129C287.993 113 310.593 105 338.193 105C365.793 105 388.193 112.2 405.393 126.6C422.993 141 431.793 160 431.793 183.6C431.793 200.8 427.193 214.8 417.993 225.6C408.793 236 396.993 243.2 382.593 247.2C399.793 252 413.393 260.2 423.393 271.8C433.793 283.4 438.993 298 438.993 315.6C438.993 340.4 429.593 360.8 410.793 376.8C391.993 392.8 367.593 400.8 337.593 400.8Z"
-                                />
-                                <path
-                                    d="M129.529 167.6H104.329V105.2H197.329V400.2H129.529V167.6Z"
-                                />
-                            </mask>
-                            <path
-                                d="M337.593 400.8C306.793 400.8 281.593 392.4 261.993 375.6C242.793 358.8 233.193 337 233.193 310.2H303.393C303.393 318.2 306.393 324.8 312.393 330C318.393 335.2 326.393 337.8 336.393 337.8C345.993 337.8 353.793 335 359.793 329.4C366.193 323.8 369.393 316.6 369.393 307.8C369.393 299.8 366.593 293.2 360.993 288C355.393 282.8 348.193 280.2 339.393 280.2H302.193V218.4H339.393C346.193 218.4 351.993 216 356.793 211.2C361.593 206.4 363.993 200.4 363.993 193.2C363.993 184.8 361.393 178.2 356.193 173.4C350.993 168.6 344.393 166.2 336.393 166.2C329.193 166.2 322.993 168.4 317.793 172.8C312.993 177.2 310.593 182.8 310.593 189.6H243.993C243.993 164.8 252.793 144.6 270.393 129C287.993 113 310.593 105 338.193 105C365.793 105 388.193 112.2 405.393 126.6C422.993 141 431.793 160 431.793 183.6C431.793 200.8 427.193 214.8 417.993 225.6C408.793 236 396.993 243.2 382.593 247.2C399.793 252 413.393 260.2 423.393 271.8C433.793 283.4 438.993 298 438.993 315.6C438.993 340.4 429.593 360.8 410.793 376.8C391.993 392.8 367.593 400.8 337.593 400.8Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M129.529 167.6H104.329V105.2H197.329V400.2H129.529V167.6Z"
-                                fill="currentColor"
-                            />
-                            <path
-                                d="M337.593 400.8C306.793 400.8 281.593 392.4 261.993 375.6C242.793 358.8 233.193 337 233.193 310.2H303.393C303.393 318.2 306.393 324.8 312.393 330C318.393 335.2 326.393 337.8 336.393 337.8C345.993 337.8 353.793 335 359.793 329.4C366.193 323.8 369.393 316.6 369.393 307.8C369.393 299.8 366.593 293.2 360.993 288C355.393 282.8 348.193 280.2 339.393 280.2H302.193V218.4H339.393C346.193 218.4 351.993 216 356.793 211.2C361.593 206.4 363.993 200.4 363.993 193.2C363.993 184.8 361.393 178.2 356.193 173.4C350.993 168.6 344.393 166.2 336.393 166.2C329.193 166.2 322.993 168.4 317.793 172.8C312.993 177.2 310.593 182.8 310.593 189.6H243.993C243.993 164.8 252.793 144.6 270.393 129C287.993 113 310.593 105 338.193 105C365.793 105 388.193 112.2 405.393 126.6C422.993 141 431.793 160 431.793 183.6C431.793 200.8 427.193 214.8 417.993 225.6C408.793 236 396.993 243.2 382.593 247.2C399.793 252 413.393 260.2 423.393 271.8C433.793 283.4 438.993 298 438.993 315.6C438.993 340.4 429.593 360.8 410.793 376.8C391.993 392.8 367.593 400.8 337.593 400.8Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-5-mask)"
-                            />
-                            <path
-                                d="M129.529 167.6H104.329V105.2H197.329V400.2H129.529V167.6Z"
-                                stroke="var(--stroke-color)"
-                                stroke-width="2.4"
-                                mask="url(#path-5-mask)"
-                            />
-                        </g>
-                    </svg>
                     <div
-                        class="absolute inset-0 rounded-t-lg shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] lg:rounded-r-lg lg:rounded-t-none dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d]"
+                        class="border-outline-variant bg-surface-container-low text-muted-foreground flex items-center gap-3 border-b px-4 py-3 text-xs"
-                    ></div>
+                    >
+                        <Server class="size-4" />
+                        your-infrastructure
+                    </div>
+                    <div
+                        class="bg-surface-dim text-on-surface dark:bg-surface-container-lowest p-5 font-mono text-sm leading-7"
+                    >
+                        <p>
+                            <span class="text-primary">$</span> git clone
+                            kanbangit
+                        </p>
+                        <p>
+                            <span class="text-primary">$</span> configure your
+                            environment
+                        </p>
+                        <p>
+                            <span class="text-primary">$</span> deploy on your
+                            terms
+                        </p>
+                        <p class="text-muted-foreground mt-3">
+                            Workspace ready for your team.
+                        </p>
+                    </div>
                 </div>
-            </main>
+            </section>
-        </div>
+
-        <div class="h-14.5 hidden lg:block"></div>
+            <section
+                class="border-outline-variant bg-primary text-primary-foreground border-y"
+            >
+                <div
+                    class="mx-auto flex max-w-7xl flex-col gap-6 px-4 py-12 sm:px-6 md:flex-row md:items-center md:justify-between lg:px-8"
+                >
+                    <div>
+                        <h2 class="text-2xl font-semibold tracking-tight">
+                            Your work. Your workflow. Your server.
+                        </h2>
+                        <p class="mt-2 text-sm opacity-80">
+                            Open the workspace and keep delivery moving.
+                        </p>
+                    </div>
+                    <Link
+                        :href="$page.props.auth.user ? dashboard() : login()"
+                        class="bg-primary-foreground text-primary inline-flex h-10 items-center justify-center gap-2 rounded-md px-5 text-sm font-semibold shadow-lg transition-transform hover:-translate-y-px"
+                    >
+                        {{
+                            $page.props.auth.user ? 'Open dashboard' : 'Log in'
+                        }}
+                        <ArrowRight class="size-4" />
+                    </Link>
+                </div>
+            </section>
+        </main>
+
+        <footer
+            class="text-muted-foreground mx-auto flex max-w-7xl flex-col gap-4 px-4 py-8 text-sm sm:px-6 md:flex-row md:items-center md:justify-between lg:px-8"
+        >
+            <div class="text-foreground flex items-center gap-2 font-semibold">
+                <Workflow class="text-primary size-4" />
+                KanbanGit
+            </div>
+            <p>Open source project management for Git teams.</p>
+        </footer>
     </div>
 </template>

resources/js/pages/admin/users/Create.vue

@@ -34,7 +34,7 @@ const breadcrumbs: BreadcrumbItem[] = [
     <AppLayout :breadcrumbs="breadcrumbs">
         <Head title="Create user" />
 
-        <div class="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-6 p-4">
+        <div class="app-page-narrow max-w-3xl">
             <Heading
                 title="Create user"
                 description="Create a user account and optionally force a password change on the next login."
@@ -52,12 +52,16 @@ const breadcrumbs: BreadcrumbItem[] = [
                 <CardContent>
                     <Form
                         v-bind="UserManagementController.store.form()"
-                        :transform="(data) => ({
+                        :transform="
-                            ...data,
+                            (data) => ({
-                            must_change_password_on_next_login:
+                                ...data,
-                                data.must_change_password_on_next_login === true ||
+                                must_change_password_on_next_login:
-                                data.must_change_password_on_next_login === 'on',
+                                    data.must_change_password_on_next_login ===
-                        })"
+                                        true ||
+                                    data.must_change_password_on_next_login ===
+                                        'on',
+                            })
+                        "
                         class="space-y-6"
                         v-slot="{ errors, processing }"
                     >
@@ -128,13 +132,19 @@ const breadcrumbs: BreadcrumbItem[] = [
                                     <span class="block font-medium">
                                         Must change password on next login
                                     </span>
-                                    <span class="text-muted-foreground block text-sm">
+                                    <span
-                                        Redirect the user to the security settings page until they save a new password.
+                                        class="text-muted-foreground block text-sm"
+                                    >
+                                        Redirect the user to the security
+                                        settings page until they save a new
+                                        password.
                                     </span>
                                 </span>
                             </Label>
                             <InputError
-                                :message="errors.must_change_password_on_next_login"
+                                :message="
+                                    errors.must_change_password_on_next_login
+                                "
                             />
                         </div>
 

resources/js/pages/admin/users/Edit.vue

@@ -50,7 +50,7 @@ const submit = (): void => {
     <AppLayout :breadcrumbs="breadcrumbs">
         <Head :title="`Edit ${user.name}`" />
 
-        <div class="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-6 p-4">
+        <div class="app-page-narrow max-w-3xl">
             <Heading
                 :title="`Edit ${user.name}`"
                 description="Update user details, reset the password if needed, and control whether the user must change it on next login."

resources/js/pages/admin/users/Index.vue

@@ -45,7 +45,7 @@ const hasPermission = (actorId: number, permission: string) =>
     <AppLayout :breadcrumbs="breadcrumbs">
         <Head title="User management" />
 
-        <div class="flex flex-1 flex-col gap-6 p-4">
+        <div class="app-page">
             <div class="flex items-start justify-between gap-4">
                 <Heading
                     title="User management"
@@ -67,10 +67,7 @@ const hasPermission = (actorId: number, permission: string) =>
                 </div>
             </div>
 
-            <div
+            <div v-if="status" class="status-success">
-                v-if="status"
-                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-            >
                 {{ status }}
             </div>
 

resources/js/pages/project-templates/Create.vue

@@ -15,7 +15,10 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AppLayout from '@/layouts/AppLayout.vue';
-import { index as projectsIndex, show as projectShow } from '@/routes/projects/index';
+import {
+    index as projectsIndex,
+    show as projectShow,
+} from '@/routes/projects/index';
 import {
     create as projectTemplateCreate,
     store as projectTemplateStore,
@@ -40,7 +43,9 @@ const breadcrumbs: BreadcrumbItem[] = [
 ];
 
 const form = useForm({
-    copy_areas: props.copyAreaOptions.map((copyAreaOption) => copyAreaOption.value),
+    copy_areas: props.copyAreaOptions.map(
+        (copyAreaOption) => copyAreaOption.value,
+    ),
     name: `${props.project.name} template`,
     slug: `${props.project.key.toLowerCase()}-template`,
 });
@@ -48,7 +53,9 @@ const form = useForm({
 const copyAreasError = computed(() => {
     return (
         form.errors.copy_areas ??
-        Object.entries(form.errors).find(([key]) => key.startsWith('copy_areas.'))?.[1] ??
+        Object.entries(form.errors).find(([key]) =>
+            key.startsWith('copy_areas.'),
+        )?.[1] ??
         ''
     );
 });
@@ -61,12 +68,14 @@ const submit = (): void => {
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
+    <AppLayout :breadcrumbs="breadcrumbs" :project="project">
         <Head :title="`Save ${project.name} as new template`" />
 
-        <div class="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-6 p-4">
+        <div class="app-page-narrow max-w-3xl">
             <div class="space-y-3">
-                <Badge variant="outline" class="px-3 py-1">{{ project.key }}</Badge>
+                <Badge variant="outline" class="px-3 py-1">{{
+                    project.key
+                }}</Badge>
                 <Heading
                     :title="`Save ${project.name} as new template`"
                     description="Capture reusable project configuration without copying operational ticket data."
@@ -77,7 +86,8 @@ const submit = (): void => {
                 <CardHeader>
                     <CardTitle>Template details</CardTitle>
                     <CardDescription>
-                        Pick the configuration groups that should be reusable in future projects.
+                        Pick the configuration groups that should be reusable in
+                        future projects.
                     </CardDescription>
                 </CardHeader>
 
@@ -85,15 +95,26 @@ const submit = (): void => {
                     <form class="space-y-6" @submit.prevent="submit">
                         <div class="grid gap-2">
                             <Label for="name">Template name</Label>
-                            <Input id="name" v-model="form.name" required placeholder="Foundation template" />
+                            <Input
+                                id="name"
+                                v-model="form.name"
+                                required
+                                placeholder="Foundation template"
+                            />
                             <InputError :message="form.errors.name" />
                         </div>
 
                         <div class="grid gap-2">
                             <Label for="slug">Template slug</Label>
-                            <Input id="slug" v-model="form.slug" required placeholder="foundation-template" />
+                            <Input
+                                id="slug"
+                                v-model="form.slug"
+                                required
+                                placeholder="foundation-template"
+                            />
                             <p class="text-muted-foreground text-sm">
-                                Slugs are normalized automatically and used to identify reusable templates.
+                                Slugs are normalized automatically and used to
+                                identify reusable templates.
                             </p>
                             <InputError :message="form.errors.slug" />
                         </div>
@@ -102,7 +123,8 @@ const submit = (): void => {
                             <div>
                                 <Label>Configuration groups</Label>
                                 <p class="text-muted-foreground text-sm">
-                                    Only the selected groups will be stored in the template.
+                                    Only the selected groups will be stored in
+                                    the template.
                                 </p>
                             </div>
 
@@ -119,8 +141,12 @@ const submit = (): void => {
                                         class="mt-1"
                                     />
                                     <div class="space-y-1">
-                                        <div class="font-medium">{{ copyAreaOption.label }}</div>
+                                        <div class="font-medium">
-                                        <p class="text-muted-foreground text-sm">
+                                            {{ copyAreaOption.label }}
+                                        </div>
+                                        <p
+                                            class="text-muted-foreground text-sm"
+                                        >
                                             {{ copyAreaOption.description }}
                                         </p>
                                     </div>
@@ -135,7 +161,9 @@ const submit = (): void => {
                             </Button>
 
                             <Button as-child variant="outline">
-                                <Link :href="projectShow(project.id)">Cancel</Link>
+                                <Link :href="projectShow(project.id)"
+                                    >Cancel</Link
+                                >
                             </Button>
                         </div>
                     </form>

resources/js/pages/project-templates/Edit.vue

@@ -44,12 +44,16 @@ const form = useForm({
 const copyAreasError = computed(() => {
     return (
         form.errors.copy_areas ??
-        Object.entries(form.errors).find(([key]) => key.startsWith('copy_areas.'))?.[1] ??
+        Object.entries(form.errors).find(([key]) =>
+            key.startsWith('copy_areas.'),
+        )?.[1] ??
         ''
     );
 });
 
-const linkedProjectCount = computed(() => props.template.linked_project_count ?? 0);
+const linkedProjectCount = computed(
+    () => props.template.linked_project_count ?? 0,
+);
 
 const submit = (): void => {
     form.patch(projectTemplatesUpdate.url(props.template.id), {
@@ -62,12 +66,15 @@ const submit = (): void => {
     <AppLayout :breadcrumbs="breadcrumbs">
         <Head :title="`Edit ${template.name}`" />
 
-        <div class="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-6 p-4">
+        <div class="app-page-narrow max-w-3xl">
             <div class="space-y-3">
                 <div class="flex flex-wrap items-center gap-3">
-                    <Badge variant="outline" class="px-3 py-1">{{ template.slug }}</Badge>
+                    <Badge variant="outline" class="px-3 py-1">{{
+                        template.slug
+                    }}</Badge>
                     <Badge v-if="linkedProjectCount > 0" variant="secondary">
-                        {{ linkedProjectCount }} linked {{ linkedProjectCount === 1 ? 'project' : 'projects' }}
+                        {{ linkedProjectCount }} linked
+                        {{ linkedProjectCount === 1 ? 'project' : 'projects' }}
                     </Badge>
                 </div>
                 <Heading
@@ -81,10 +88,14 @@ const submit = (): void => {
                     <CardTitle>Template details</CardTitle>
                     <CardDescription>
                         <template v-if="template.source_project">
-                            This template baseline is rebuilt from {{ template.source_project.name }} ({{ template.source_project.key }}) when you save.
+                            This template baseline is rebuilt from
+                            {{ template.source_project.name }} ({{
+                                template.source_project.key
+                            }}) when you save.
                         </template>
                         <template v-else>
-                            This template baseline is rebuilt from its source project when you save.
+                            This template baseline is rebuilt from its source
+                            project when you save.
                         </template>
                     </CardDescription>
                 </CardHeader>
@@ -93,15 +104,25 @@ const submit = (): void => {
                     <form class="space-y-6" @submit.prevent="submit">
                         <div class="grid gap-2">
                             <Label for="name">Template name</Label>
-                            <Input id="name" v-model="form.name" required placeholder="Foundation template" />
+                            <Input
+                                id="name"
+                                v-model="form.name"
+                                required
+                                placeholder="Foundation template"
+                            />
                             <InputError :message="form.errors.name" />
                         </div>
 
                         <div class="grid gap-2">
                             <Label for="slug">Template slug</Label>
-                            <Input id="slug" :model-value="template.slug" disabled />
+                            <Input
+                                id="slug"
+                                :model-value="template.slug"
+                                disabled
+                            />
                             <p class="text-muted-foreground text-sm">
-                                The slug stays locked so existing template references remain stable.
+                                The slug stays locked so existing template
+                                references remain stable.
                             </p>
                         </div>
 
@@ -109,7 +130,8 @@ const submit = (): void => {
                             <div>
                                 <Label>Configuration groups</Label>
                                 <p class="text-muted-foreground text-sm">
-                                    Saving rebuilds the selected groups from the current source-project configuration.
+                                    Saving rebuilds the selected groups from the
+                                    current source-project configuration.
                                 </p>
                             </div>
 
@@ -126,8 +148,12 @@ const submit = (): void => {
                                         class="mt-1"
                                     />
                                     <div class="space-y-1">
-                                        <div class="font-medium">{{ copyAreaOption.label }}</div>
+                                        <div class="font-medium">
-                                        <p class="text-muted-foreground text-sm">
+                                            {{ copyAreaOption.label }}
+                                        </div>
+                                        <p
+                                            class="text-muted-foreground text-sm"
+                                        >
                                             {{ copyAreaOption.description }}
                                         </p>
                                     </div>
@@ -143,19 +169,39 @@ const submit = (): void => {
                             <div class="space-y-1">
                                 <div class="font-medium">Warning</div>
                                 <p class="text-sm">
-                                    Saving this template updates the baseline for {{ linkedProjectCount }} linked {{ linkedProjectCount === 1 ? 'project' : 'projects' }}.
+                                    Saving this template updates the baseline
-                                    Inherited areas will follow the new template version, while existing overrides stay untouched.
+                                    for {{ linkedProjectCount }} linked
+                                    {{
+                                        linkedProjectCount === 1
+                                            ? 'project'
+                                            : 'projects'
+                                    }}. Inherited areas will follow the new
+                                    template version, while existing overrides
+                                    stay untouched.
                                 </p>
                             </div>
 
-                            <Label class="flex cursor-pointer items-start gap-3">
+                            <Label
-                                <input v-model="form.confirm_linked_projects_update" type="checkbox" class="mt-1" />
+                                class="flex cursor-pointer items-start gap-3"
+                            >
+                                <input
+                                    v-model="
+                                        form.confirm_linked_projects_update
+                                    "
+                                    type="checkbox"
+                                    class="mt-1"
+                                />
                                 <span class="text-sm">
-                                    I understand that linked projects inheriting from this template will be affected.
+                                    I understand that linked projects inheriting
+                                    from this template will be affected.
                                 </span>
                             </Label>
 
-                            <InputError :message="form.errors.confirm_linked_projects_update" />
+                            <InputError
+                                :message="
+                                    form.errors.confirm_linked_projects_update
+                                "
+                            />
                         </div>
 
                         <div class="flex items-center gap-3">
@@ -164,7 +210,9 @@ const submit = (): void => {
                             </Button>
 
                             <Button as-child variant="outline">
-                                <Link :href="projectTemplatesIndex()">Cancel</Link>
+                                <Link :href="projectTemplatesIndex()"
+                                    >Cancel</Link
+                                >
                             </Button>
                         </div>
                     </form>

resources/js/pages/project-templates/Index.vue

@@ -16,7 +16,10 @@ import {
     edit as projectTemplatesEdit,
     index as projectTemplatesIndex,
 } from '@/routes/project-templates';
-import { create as projectsCreate, index as projectsIndex } from '@/routes/projects/index';
+import {
+    create as projectsCreate,
+    index as projectsIndex,
+} from '@/routes/projects/index';
 import type { BreadcrumbItem, ProjectTemplatesIndexPageProps } from '@/types';
 
 const props = defineProps<ProjectTemplatesIndexPageProps>();
@@ -39,8 +42,10 @@ const removeTemplate = (templateId: number): void => {
     <AppLayout :breadcrumbs="breadcrumbs">
         <Head title="Project templates" />
 
-        <div class="flex flex-1 flex-col gap-6 p-4">
+        <div class="app-page">
-            <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+            <div
+                class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
+            >
                 <Heading
                     title="Project templates"
                     description="Reusable published project templates. Internal project base templates stay hidden here by default."
@@ -57,30 +62,44 @@ const removeTemplate = (templateId: number): void => {
                 </div>
             </div>
 
-            <div
+            <div v-if="status" class="status-success">
-                v-if="status"
-                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-            >
                 {{ status }}
             </div>
 
-            <div v-if="templates.length === 0" class="text-muted-foreground text-sm">
+            <div v-if="templates.length === 0" class="empty-state">
                 No published project templates have been saved yet.
             </div>
 
             <div v-else class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-                <Card v-for="template in templates" :key="template.id" class="h-full">
+                <Card
+                    v-for="template in templates"
+                    :key="template.id"
+                    class="h-full"
+                >
                     <CardHeader>
                         <div class="flex flex-wrap items-center gap-2">
                             <CardTitle>{{ template.name }}</CardTitle>
-                            <Badge variant="secondary">{{ template.slug }}</Badge>
+                            <Badge variant="secondary">{{
-                            <Badge v-if="template.linked_project_count" variant="outline">
+                                template.slug
-                                {{ template.linked_project_count }} linked {{ template.linked_project_count === 1 ? 'project' : 'projects' }}
+                            }}</Badge>
+                            <Badge
+                                v-if="template.linked_project_count"
+                                variant="outline"
+                            >
+                                {{ template.linked_project_count }} linked
+                                {{
+                                    template.linked_project_count === 1
+                                        ? 'project'
+                                        : 'projects'
+                                }}
                             </Badge>
                         </div>
                         <CardDescription>
                             <template v-if="template.source_project">
-                                Saved from {{ template.source_project.name }} ({{ template.source_project.key }}).
+                                Saved from
+                                {{ template.source_project.name }} ({{
+                                    template.source_project.key
+                                }}).
                             </template>
                             <template v-else>
                                 Saved template configuration.
@@ -106,7 +125,13 @@ const removeTemplate = (templateId: number): void => {
                             </Button>
 
                             <Button as-child variant="outline">
-                                <Link :href="projectsCreate({ query: { template: template.id } })">
+                                <Link
+                                    :href="
+                                        projectsCreate({
+                                            query: { template: template.id },
+                                        })
+                                    "
+                                >
                                     Use template
                                 </Link>
                             </Button>

resources/js/pages/projects/Access.vue

@@ -41,10 +41,10 @@ const hasPermission = (
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
+    <AppLayout :breadcrumbs="breadcrumbs" :project="project">
         <Head :title="`${project.name} access`" />
 
-        <div class="flex flex-1 flex-col gap-6 p-4">
+        <div class="app-page">
             <div
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
@@ -75,10 +75,7 @@ const hasPermission = (
                 </div>
             </div>
 
-            <div
+            <div v-if="status" class="status-success">
-                v-if="status"
-                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-            >
                 {{ status }}
             </div>
 

resources/js/pages/projects/Backlog.vue

@@ -15,7 +15,10 @@ import AppLayout from '@/layouts/AppLayout.vue';
 import { index as boardIndex } from '@/routes/projects/board';
 import { index as backlogIndex } from '@/routes/projects/backlog';
 import { index, show } from '@/routes/projects/index';
-import { create as createTicket, show as showTicket } from '@/routes/projects/tickets';
+import {
+    create as createTicket,
+    show as showTicket,
+} from '@/routes/projects/tickets';
 import type { BreadcrumbItem, ProjectBacklogPageProps } from '@/types';
 import type { TicketModel } from '@/types/models/ticket-model';
 import type { TicketStatusModel } from '@/types/models/ticket-status-model';
@@ -64,10 +67,10 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
+    <AppLayout :breadcrumbs="breadcrumbs" :project="project">
         <Head :title="`${project.name} backlog`" />
 
-        <div class="flex flex-1 flex-col gap-6 p-4">
+        <div class="app-page">
             <div
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
@@ -105,15 +108,14 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
                 </div>
             </div>
 
-            <div
+            <div v-if="status" class="status-success">
-                v-if="status"
-                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-            >
                 {{ status }}
             </div>
 
-            <Card class="gap-0 overflow-hidden">
+            <Card class="gap-0 overflow-hidden py-0">
-                <CardHeader class="border-b">
+                <CardHeader
+                    class="border-outline-variant bg-surface-container-low border-b px-5 py-4"
+                >
                     <CardTitle>Backlog tickets</CardTitle>
                     <CardDescription>
                         Tickets remain here while their status belongs to
@@ -122,10 +124,7 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
                 </CardHeader>
 
                 <CardContent class="p-0">
-                    <div
+                    <div v-if="tickets.length === 0" class="empty-state m-4">
-                        v-if="tickets.length === 0"
-                        class="text-muted-foreground p-6 text-sm"
-                    >
                         No backlog tickets exist yet.
                     </div>
 
@@ -158,7 +157,7 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
                                 <tr
                                     v-for="ticket in tickets"
                                     :key="ticket.id"
-                                    class="bg-background"
+                                    class="bg-surface-container-lowest"
                                 >
                                     <td class="px-4 py-4">
                                         <Link

resources/js/pages/projects/Board.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { Form, Head, Link } from '@inertiajs/vue3';
+import { ArrowRight, CircleUserRound } from 'lucide-vue-next';
 import ProjectBoardController from '@/actions/App/Http/Controllers/ProjectBoardController';
 import Heading from '@/components/Heading.vue';
+import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -16,7 +18,10 @@ import { index as backlogIndex } from '@/routes/projects/backlog';
 import { index as projectIndex, show } from '@/routes/projects/index';
 import { board as boardSettings } from '@/routes/projects/settings';
 import { index as boardIndex } from '@/routes/projects/board';
-import { create as createTicket, show as showTicket } from '@/routes/projects/tickets';
+import {
+    create as createTicket,
+    show as showTicket,
+} from '@/routes/projects/tickets';
 import type { BreadcrumbItem, ProjectBoardPageProps } from '@/types';
 import type { TicketModel } from '@/types/models/ticket-model';
 import type { TicketStatusModel } from '@/types/models/ticket-status-model';
@@ -65,10 +70,10 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
+    <AppLayout :breadcrumbs="breadcrumbs" :project="project">
         <Head :title="`${project.name} board`" />
 
-        <div class="flex flex-1 flex-col gap-6 p-4">
+        <div class="app-page max-w-none">
             <div
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
@@ -108,10 +113,7 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
                 </div>
             </div>
 
-            <div
+            <div v-if="status" class="status-success">
-                v-if="status"
-                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-            >
                 {{ status }}
             </div>
 
@@ -131,13 +133,18 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
                 </CardContent>
             </Card>
 
-            <div v-else class="grid gap-4 xl:grid-cols-3">
+            <div
+                v-else
+                class="-mx-4 flex snap-x snap-proximity items-start gap-4 overflow-x-auto px-4 pb-5 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8"
+            >
                 <Card
                     v-for="boardColumn in boardColumns"
                     :key="boardColumn.id"
-                    class="flex h-full flex-col gap-0 overflow-hidden"
+                    class="bg-surface-container-low w-[min(21rem,calc(100vw-3rem))] shrink-0 snap-start gap-0 overflow-hidden border-0 py-0 shadow-none hover:shadow-none sm:w-[21rem]"
                 >
-                    <CardHeader class="bg-muted/20 border-b">
+                    <CardHeader
+                        class="border-outline-variant/60 sticky top-0 z-10 border-b px-4 py-4"
+                    >
                         <div class="flex items-start justify-between gap-3">
                             <div>
                                 <CardTitle>{{ boardColumn.name }}</CardTitle>
@@ -163,33 +170,38 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
                             </div>
 
                             <Badge variant="secondary">
-                                #{{ boardColumn.position }}
+                                {{ boardColumn.tickets?.length ?? 0 }}
                             </Badge>
                         </div>
                     </CardHeader>
 
-                    <CardContent class="flex flex-1 flex-col gap-4 p-4">
+                    <CardContent
+                        class="flex min-h-48 flex-1 flex-col gap-3 p-3"
+                    >
                         <div
                             v-if="(boardColumn.tickets?.length ?? 0) === 0"
-                            class="border-border text-muted-foreground rounded-xl border border-dashed px-4 py-6 text-sm"
+                            class="empty-state bg-transparent"
                         >
                             No tickets are currently in this column.
                         </div>
 
-                        <div v-else class="flex flex-col gap-4">
+                        <div v-else class="flex flex-col gap-3">
                             <Card
                                 v-for="ticket in boardColumn.tickets"
                                 :key="ticket.id"
                                 :class="[
-                                    'gap-0',
+                                    'shadow-xs gap-0 py-0 hover:-translate-y-0.5',
                                     ticket.is_blocked
                                         ? 'border-amber-300 bg-amber-50/70 dark:border-amber-700/60 dark:bg-amber-950/30'
                                         : '',
                                 ]"
                             >
-                                <CardHeader class="pb-4">
+                                <CardHeader class="gap-3 px-4 pb-3 pt-4">
                                     <div class="flex flex-wrap gap-2">
-                                        <Badge variant="outline">
+                                        <Badge
+                                            variant="outline"
+                                            class="text-primary"
+                                        >
                                             {{ ticket.ticket_key }}
                                         </Badge>
                                         <Badge
@@ -201,16 +213,6 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
                                         <Badge variant="secondary">
                                             {{ ticket.ticket_type.name }}
                                         </Badge>
-                                        <Badge variant="secondary">
-                                            {{ ticket.ticket_priority.name }}
-                                        </Badge>
-                                        <Badge variant="outline">
-                                            {{
-                                                ticketStatusLabel(
-                                                    ticket.ticket_status,
-                                                )
-                                            }}
-                                        </Badge>
                                     </div>
                                     <CardTitle class="text-base">
                                         <Link
@@ -240,9 +242,56 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
                                     >
                                         {{ ticket.blocked_comment }}
                                     </CardDescription>
+
+                                    <div
+                                        class="border-outline-variant/60 flex items-center justify-between gap-3 border-t pt-3"
+                                    >
+                                        <div
+                                            class="flex min-w-0 items-center gap-2"
+                                        >
+                                            <UserAvatar
+                                                v-if="ticket.assignee"
+                                                :user="ticket.assignee"
+                                                class="size-7"
+                                            />
+                                            <span
+                                                v-else
+                                                class="border-outline-variant text-muted-foreground flex size-7 items-center justify-center rounded-full border border-dashed"
+                                            >
+                                                <CircleUserRound
+                                                    class="size-4"
+                                                />
+                                            </span>
+                                            <span
+                                                class="text-muted-foreground truncate text-xs"
+                                            >
+                                                {{
+                                                    ticket.assignee?.name ??
+                                                    'Unassigned'
+                                                }}
+                                            </span>
+                                        </div>
+                                        <div
+                                            class="flex shrink-0 items-center gap-1.5"
+                                        >
+                                            <span
+                                                class="bg-primary size-1.5 rounded-full"
+                                            />
+                                            <span
+                                                class="text-muted-foreground text-xs font-medium"
+                                            >
+                                                {{
+                                                    ticket.ticket_priority.name
+                                                }}
+                                            </span>
+                                        </div>
+                                    </div>
                                 </CardHeader>
 
-                                <CardContent v-if="canEditTickets" class="pt-0">
+                                <CardContent
+                                    v-if="canEditTickets"
+                                    class="border-outline-variant/60 border-t px-4 py-3"
+                                >
                                     <Form
                                         v-bind="
                                             ProjectBoardController.move.form({
@@ -258,15 +307,7 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
                                             name="redirect_to"
                                             value="board"
                                         />
-                                        <label
+                                        <div class="flex items-center gap-2">
-                                            :for="`ticket-status-${ticket.id}`"
-                                            class="text-muted-foreground text-xs font-medium uppercase tracking-wide"
-                                        >
-                                            Move ticket
-                                        </label>
-                                        <div
-                                            class="flex flex-col gap-2 sm:flex-row"
-                                        >
                                             <select
                                                 :id="`ticket-status-${ticket.id}`"
                                                 name="ticket_status_id"
@@ -275,7 +316,7 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
                                                         ticket,
                                                     ).length === 0 || processing
                                                 "
-                                                class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 min-w-44 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
+                                                class="min-w-0 flex-1 text-xs"
                                             >
                                                 <option
                                                     v-if="
@@ -303,7 +344,8 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
                                             </select>
                                             <Button
                                                 type="submit"
-                                                size="sm"
+                                                size="icon-sm"
+                                                variant="ghost"
                                                 :disabled="
                                                     processing ||
                                                     allowedTargetStatuses(
@@ -311,7 +353,10 @@ const allowedTargetStatuses = (ticket: TicketModel): TicketStatusModel[] => {
                                                     ).length === 0
                                                 "
                                             >
-                                                Update status
+                                                <ArrowRight class="size-4" />
+                                                <span class="sr-only"
+                                                    >Update status</span
+                                                >
                                             </Button>
                                         </div>
                                         <p

resources/js/pages/projects/Create.vue

@@ -31,15 +31,19 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
 ];
 
-const defaultTemplateId = props.selectedSourceTemplateId ?? props.sourceTemplates[0]?.id ?? null;
+const defaultTemplateId =
+    props.selectedSourceTemplateId ?? props.sourceTemplates[0]?.id ?? null;
 
 const form = useForm({
     copy_areas: [] as string[],
     creation_mode: defaultTemplateId !== null ? 'template' : 'scratch',
     key: '',
     name: '',
-    source_project_id: props.sourceProjects[0]?.id ? String(props.sourceProjects[0].id) : '',
+    source_project_id: props.sourceProjects[0]?.id
-    source_template_id: defaultTemplateId !== null ? String(defaultTemplateId) : '',
+        ? String(props.sourceProjects[0].id)
+        : '',
+    source_template_id:
+        defaultTemplateId !== null ? String(defaultTemplateId) : '',
 });
 
 const hasSourceProjects = computed(() => props.sourceProjects.length > 0);
@@ -48,7 +52,9 @@ const hasSourceTemplates = computed(() => props.sourceTemplates.length > 0);
 const copyAreasError = computed(() => {
     return (
         form.errors.copy_areas ??
-        Object.entries(form.errors).find(([key]) => key.startsWith('copy_areas.'))?.[1] ??
+        Object.entries(form.errors).find(([key]) =>
+            key.startsWith('copy_areas.'),
+        )?.[1] ??
         ''
     );
 });
@@ -73,7 +79,7 @@ const submit = (): void => {
     <AppLayout :breadcrumbs="breadcrumbs">
         <Head title="New project" />
 
-        <div class="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-6 p-4">
+        <div class="app-page-narrow max-w-3xl">
             <Heading
                 title="Create project"
                 description="Create a fresh project, duplicate selected settings from an existing project, or start from a saved template."
@@ -93,7 +99,9 @@ const submit = (): void => {
                         <div class="grid gap-3">
                             <Label>How do you want to start?</Label>
                             <div class="grid gap-3 sm:grid-cols-3">
-                                <Label class="flex cursor-pointer items-start gap-3 rounded-xl border p-4">
+                                <Label
+                                    class="flex cursor-pointer items-start gap-3 rounded-xl border p-4"
+                                >
                                     <input
                                         v-model="form.creation_mode"
                                         type="radio"
@@ -101,16 +109,25 @@ const submit = (): void => {
                                         class="mt-1"
                                     />
                                     <div class="space-y-1">
-                                        <div class="font-medium">Create from scratch</div>
+                                        <div class="font-medium">
-                                        <p class="text-muted-foreground text-sm">
+                                            Create from scratch
-                                            Start with the default project setup.
+                                        </div>
+                                        <p
+                                            class="text-muted-foreground text-sm"
+                                        >
+                                            Start with the default project
+                                            setup.
                                         </p>
                                     </div>
                                 </Label>
 
                                 <Label
                                     class="flex items-start gap-3 rounded-xl border p-4"
-                                    :class="hasSourceProjects ? 'cursor-pointer' : 'cursor-not-allowed opacity-60'"
+                                    :class="
+                                        hasSourceProjects
+                                            ? 'cursor-pointer'
+                                            : 'cursor-not-allowed opacity-60'
+                                    "
                                 >
                                     <input
                                         v-model="form.creation_mode"
@@ -120,16 +137,26 @@ const submit = (): void => {
                                         :disabled="!hasSourceProjects"
                                     />
                                     <div class="space-y-1">
-                                        <div class="font-medium">Create from existing project</div>
+                                        <div class="font-medium">
-                                        <p class="text-muted-foreground text-sm">
+                                            Create from existing project
-                                            Copy only the settings you explicitly select. Tickets are never duplicated.
+                                        </div>
+                                        <p
+                                            class="text-muted-foreground text-sm"
+                                        >
+                                            Copy only the settings you
+                                            explicitly select. Tickets are never
+                                            duplicated.
                                         </p>
                                     </div>
                                 </Label>
 
                                 <Label
                                     class="flex items-start gap-3 rounded-xl border p-4"
-                                    :class="hasSourceTemplates ? 'cursor-pointer' : 'cursor-not-allowed opacity-60'"
+                                    :class="
+                                        hasSourceTemplates
+                                            ? 'cursor-pointer'
+                                            : 'cursor-not-allowed opacity-60'
+                                    "
                                 >
                                     <input
                                         v-model="form.creation_mode"
@@ -139,9 +166,14 @@ const submit = (): void => {
                                         :disabled="!hasSourceTemplates"
                                     />
                                     <div class="space-y-1">
-                                        <div class="font-medium">Create from template</div>
+                                        <div class="font-medium">
-                                        <p class="text-muted-foreground text-sm">
+                                            Create from template
-                                            Reuse a saved configuration template.
+                                        </div>
+                                        <p
+                                            class="text-muted-foreground text-sm"
+                                        >
+                                            Reuse a saved configuration
+                                            template.
                                         </p>
                                     </div>
                                 </Label>
@@ -172,7 +204,9 @@ const submit = (): void => {
                             />
                             <p class="text-muted-foreground text-sm">
                                 Example ticket keys will look like
-                                <span class="text-foreground font-medium">CORE-1</span>.
+                                <span class="text-foreground font-medium"
+                                    >CORE-1</span
+                                >.
                             </p>
                             <InputError :message="form.errors.key" />
                         </div>
@@ -182,33 +216,43 @@ const submit = (): void => {
                             class="space-y-6 rounded-xl border border-dashed p-4"
                         >
                             <div class="grid gap-2">
-                                <Label for="source_project_id">Source project</Label>
+                                <Label for="source_project_id"
+                                    >Source project</Label
+                                >
                                 <select
                                     id="source_project_id"
                                     v-model="form.source_project_id"
-                                    class="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                                    class="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                                     :disabled="!hasSourceProjects"
                                 >
-                                    <option value="">Select a source project</option>
+                                    <option value="">
+                                        Select a source project
+                                    </option>
                                     <option
                                         v-for="sourceProject in sourceProjects"
                                         :key="sourceProject.id"
                                         :value="String(sourceProject.id)"
                                     >
-                                        {{ sourceProject.name }} ({{ sourceProject.key }})
+                                        {{ sourceProject.name }} ({{
+                                            sourceProject.key
+                                        }})
                                     </option>
                                 </select>
                                 <p class="text-muted-foreground text-sm">
-                                    The new project keeps its own identity, key, and future ticket numbering.
+                                    The new project keeps its own identity, key,
+                                    and future ticket numbering.
                                 </p>
-                                <InputError :message="form.errors.source_project_id" />
+                                <InputError
+                                    :message="form.errors.source_project_id"
+                                />
                             </div>
 
                             <div class="grid gap-3">
                                 <div>
                                     <Label>Copy options</Label>
                                     <p class="text-muted-foreground text-sm">
-                                        Choose which settings should be copied into the new project.
+                                        Choose which settings should be copied
+                                        into the new project.
                                     </p>
                                 </div>
 
@@ -225,8 +269,12 @@ const submit = (): void => {
                                             class="mt-1"
                                         />
                                         <div class="space-y-1">
-                                            <div class="font-medium">{{ copyAreaOption.label }}</div>
+                                            <div class="font-medium">
-                                            <p class="text-muted-foreground text-sm">
+                                                {{ copyAreaOption.label }}
+                                            </div>
+                                            <p
+                                                class="text-muted-foreground text-sm"
+                                            >
                                                 {{ copyAreaOption.description }}
                                             </p>
                                         </div>
@@ -234,7 +282,8 @@ const submit = (): void => {
                                 </div>
 
                                 <p class="text-muted-foreground text-sm">
-                                    Operational ticket data is always left behind so the new project starts clean.
+                                    Operational ticket data is always left
+                                    behind so the new project starts clean.
                                 </p>
                                 <InputError :message="copyAreasError" />
                             </div>
@@ -249,7 +298,7 @@ const submit = (): void => {
                                 <select
                                     id="source_template_id"
                                     v-model="form.source_template_id"
-                                    class="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                                    class="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                                     :disabled="!hasSourceTemplates"
                                 >
                                     <option value="">Select a template</option>
@@ -258,21 +307,29 @@ const submit = (): void => {
                                         :key="sourceTemplate.id"
                                         :value="String(sourceTemplate.id)"
                                     >
-                                        {{ sourceTemplate.name }} ({{ sourceTemplate.slug }})
+                                        {{ sourceTemplate.name }} ({{
+                                            sourceTemplate.slug
+                                        }})
                                     </option>
                                 </select>
                                 <p class="text-muted-foreground text-sm">
-                                    Templates apply their saved configuration groups to the new project.
+                                    Templates apply their saved configuration
+                                    groups to the new project.
                                 </p>
-                                <InputError :message="form.errors.source_template_id" />
+                                <InputError
+                                    :message="form.errors.source_template_id"
+                                />
                             </div>
                         </div>
 
                         <div
-                            v-else-if="!hasSourceProjects && !hasSourceTemplates"
+                            v-else-if="
+                                !hasSourceProjects && !hasSourceTemplates
+                            "
                             class="text-muted-foreground text-sm"
                         >
-                            No accessible source projects or saved templates are available yet.
+                            No accessible source projects or saved templates are
+                            available yet.
                         </div>
 
                         <div class="flex items-center gap-3">

resources/js/pages/projects/Index.vue

@@ -29,13 +29,13 @@ const breadcrumbs: BreadcrumbItem[] = [
     <AppLayout :breadcrumbs="breadcrumbs">
         <Head title="Projects" />
 
-        <div class="flex flex-1 flex-col gap-6 p-4">
+        <div class="app-page">
             <div
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
                 <Heading
                     title="Projects"
-                    description="Create and browse project spaces that will later host boards, backlog, and settings."
+                    description="Browse project spaces with their own board, backlog, workflow, repositories, and access."
                 />
 
                 <Button
@@ -49,17 +49,11 @@ const breadcrumbs: BreadcrumbItem[] = [
                 </Button>
             </div>
 
-            <div
+            <div v-if="status" class="status-success">
-                v-if="status"
-                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-            >
                 {{ status }}
             </div>
 
-            <div
+            <div v-if="projects.length === 0" class="empty-state">
-                v-if="projects.length === 0"
-                class="text-muted-foreground rounded-xl border border-dashed px-6 py-10 text-center text-sm"
-            >
                 No projects exist yet. Create the first one to start building
                 out board, backlog, and settings areas.
             </div>
@@ -71,10 +65,8 @@ const breadcrumbs: BreadcrumbItem[] = [
                     :href="show(project.id)"
                     class="group block"
                 >
-                    <Card
+                    <Card class="group-hover:border-primary/40 h-full py-0">
-                        class="border-border/80 group-hover:border-primary/40 h-full transition-colors"
+                        <CardHeader class="gap-3 p-5">
-                    >
-                        <CardHeader class="gap-3">
                             <div class="flex items-start justify-between gap-3">
                                 <div class="space-y-1">
                                     <CardTitle>{{ project.name }}</CardTitle>
@@ -90,7 +82,7 @@ const breadcrumbs: BreadcrumbItem[] = [
                         </CardHeader>
 
                         <CardContent
-                            class="text-muted-foreground flex items-center gap-2 text-sm"
+                            class="border-outline-variant/60 text-muted-foreground flex items-center gap-2 border-t px-5 py-4 text-sm"
                         >
                             <Folder class="size-4" />
                             Open board, backlog, and settings hub

resources/js/pages/projects/Show.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { Head, Link } from '@inertiajs/vue3';
-import { FolderGit2, LayoutGrid, ListTodo, Settings2 } from 'lucide-vue-next';
+import {
+    ArrowRight,
+    FolderGit2,
+    LayoutGrid,
+    ListTodo,
+    Settings2,
+} from 'lucide-vue-next';
+import { computed } from 'vue';
 import Heading from '@/components/Heading.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -38,39 +45,52 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
 ];
 
-const projectAreas = [
+const projectAreas = computed(() => {
-    {
+    const areas = [
-        title: 'Backlog',
+        {
-        description:
+            title: 'Backlog',
-            'Create tickets, review incoming work, and move ready items into the board workflow.',
+            description:
-        icon: ListTodo,
+                'Create tickets, review incoming work, and move ready items into the board workflow.',
-    },
+            icon: ListTodo,
-    {
+            href: backlogIndex(props.project.id),
-        title: 'Board',
+        },
-        description:
+        {
-            'Track active work across the project-defined Kanban columns and update ticket status.',
+            title: 'Board',
-        icon: LayoutGrid,
+            description:
-    },
+                'Track active work across the project-defined Kanban columns and update ticket status.',
-    {
+            icon: LayoutGrid,
-        title: 'Project settings',
+            href: boardIndex(props.project.id),
-        description:
+        },
-            'Manage board columns, ticket metadata, and the project-specific workflow configuration.',
+    ];
-        icon: Settings2,
+
-    },
+    if (props.canManageAccess) {
-    {
+        areas.push(
-        title: 'Repositories',
+            {
-        description:
+                title: 'Project settings',
-            'Link project repositories so tickets can later discover related branches and pull requests.',
+                description:
-        icon: FolderGit2,
+                    'Manage board columns, ticket metadata, and the project-specific workflow configuration.',
-    },
+                icon: Settings2,
-];
+                href: boardSettings(props.project.id),
+            },
+            {
+                title: 'Repositories',
+                description:
+                    'Connect repositories and discover ticket branches and pull requests.',
+                icon: FolderGit2,
+                href: repositorySettings(props.project.id),
+            },
+        );
+    }
+
+    return areas;
+});
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
+    <AppLayout :breadcrumbs="breadcrumbs" :project="project">
         <Head :title="project.name" />
 
-        <div class="flex flex-1 flex-col gap-6 p-4">
+        <div class="app-page">
             <div
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
@@ -80,7 +100,7 @@ const projectAreas = [
                     </Badge>
                     <Heading
                         :title="project.name"
-                        description="Project hub for the upcoming backlog, board, and settings work."
+                        description="Your project workspace for tickets, workflow, integrations, and access."
                     />
                 </div>
 
@@ -117,7 +137,9 @@ const projectAreas = [
                         Built from template {{ templateState.templateName }}
                     </CardTitle>
                     <CardDescription>
-                        This project keeps its template link. Inherited areas follow the template baseline; overridden areas were customized locally.
+                        This project keeps its template link. Inherited areas
+                        follow the template baseline; overridden areas were
+                        customized locally.
                     </CardDescription>
                 </CardHeader>
                 <CardContent class="flex flex-wrap gap-2">
@@ -177,27 +199,35 @@ const projectAreas = [
                 </Button>
             </div>
 
-            <div class="grid gap-4 md:grid-cols-3">
+            <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-                <Card
+                <Link
                     v-for="area in projectAreas"
                     :key="area.title"
-                    class="h-full"
+                    :href="area.href"
+                    class="group"
                 >
-                    <CardHeader>
+                    <Card class="h-full py-0">
-                        <div
+                        <CardHeader class="p-5">
-                            class="bg-muted text-foreground mb-3 flex size-10 items-center justify-center rounded-full"
+                            <div
+                                class="bg-primary/10 text-primary mb-3 flex size-10 items-center justify-center rounded-lg"
+                            >
+                                <component :is="area.icon" class="size-5" />
+                            </div>
+                            <CardTitle>{{ area.title }}</CardTitle>
+                            <CardDescription>{{
+                                area.description
+                            }}</CardDescription>
+                        </CardHeader>
+                        <CardContent
+                            class="text-primary flex items-center gap-2 px-5 pb-5 text-sm font-semibold"
                         >
-                            <component :is="area.icon" class="size-5" />
+                            Open area
-                        </div>
+                            <ArrowRight
-                        <CardTitle>{{ area.title }}</CardTitle>
+                                class="size-4 transition-transform group-hover:translate-x-1"
-                        <CardDescription>{{
+                            />
-                            area.description
+                        </CardContent>
-                        }}</CardDescription>
+                    </Card>
-                    </CardHeader>
+                </Link>
-                    <CardContent class="text-muted-foreground text-sm">
-                        Use the project shortcuts above to open this area.
-                    </CardContent>
-                </Card>
             </div>
         </div>
     </AppLayout>

resources/js/pages/projects/Ticket.vue

@@ -7,7 +7,6 @@ import {
     buildAcceptanceCriteria,
     formatChecklistLines,
     normalizeAcceptanceCriteria,
-    parseChecklistLines,
     syncAcceptanceCriteriaDescendantCheckedState,
 } from '@/lib/acceptance-criteria';
 import ProjectTicketBranchController from '@/actions/App/Http/Controllers/ProjectTicketBranchController';
@@ -123,7 +122,9 @@ const breadcrumbs: BreadcrumbItem[] = [
 const acceptanceCriteriaEditorState = acceptanceCriteriaToEditorState(
     props.ticket.acceptance_criteria,
 );
-const acceptanceCriteriaChecklist = ref(acceptanceCriteriaEditorState.checklist);
+const acceptanceCriteriaChecklist = ref(
+    acceptanceCriteriaEditorState.checklist,
+);
 const savedAcceptanceCriteria = ref(
     normalizeAcceptanceCriteria(props.ticket.acceptance_criteria),
 );
@@ -131,7 +132,9 @@ const isPersistingAcceptanceCriteriaToggle = ref(false);
 const acceptanceCriteriaToggleError = ref('');
 
 const form = useForm({
-    acceptance_criteria: buildAcceptanceCriteria(acceptanceCriteriaChecklist.value),
+    acceptance_criteria: buildAcceptanceCriteria(
+        acceptanceCriteriaChecklist.value,
+    ),
     assignee_user_id: props.ticket.assignee_user_id ?? '',
     author_user_id: props.ticket.author_user_id ?? '',
     blocked_comment: props.ticket.blocked_comment ?? '',
@@ -157,8 +160,8 @@ const form = useForm({
     story_points: props.ticket.story_points,
 });
 
-const acceptanceCriteriaPreviewItems = computed(() =>
+const acceptanceCriteriaPreviewItems = computed(
-    savedAcceptanceCriteria.value,
+    () => savedAcceptanceCriteria.value,
 );
 
 const hasUnsavedAcceptanceCriteriaDraft = computed(
@@ -318,8 +321,7 @@ watch(
 
                 branchNameValidation.value = {
                     is_valid: false,
-                    message:
+                    message: `${appName} could not validate this branch name right now.`,
-                        `${appName} could not validate this branch name right now.`,
                 };
             } finally {
                 if (!abortController.signal.aborted) {
@@ -361,7 +363,9 @@ const submitBranchCreation = (): void => {
 };
 
 const buildAcceptanceCriteriaForSubmit = () => {
-    const draftItems = buildAcceptanceCriteria(acceptanceCriteriaChecklist.value);
+    const draftItems = buildAcceptanceCriteria(
+        acceptanceCriteriaChecklist.value,
+    );
 
     return draftItems.map((item, index) => ({
         ...item,
@@ -371,7 +375,9 @@ const buildAcceptanceCriteriaForSubmit = () => {
     }));
 };
 
-const buildSavedTicketPayload = (acceptanceCriteria = savedAcceptanceCriteria.value) => ({
+const buildSavedTicketPayload = (
+    acceptanceCriteria = savedAcceptanceCriteria.value,
+) => ({
     acceptance_criteria: acceptanceCriteria,
     assignee_user_id: props.ticket.assignee_user_id,
     author_user_id: props.ticket.author_user_id,
@@ -407,7 +413,9 @@ const persistAcceptanceCriteriaToggle = async (
         index,
         checked,
     );
-    const previousChecklist = formatChecklistLines(savedAcceptanceCriteria.value);
+    const previousChecklist = formatChecklistLines(
+        savedAcceptanceCriteria.value,
+    );
     const nextChecklist = formatChecklistLines(nextAcceptanceCriteria);
     const csrfToken = document
         .querySelector('meta[name="csrf-token"]')
@@ -494,10 +502,10 @@ const formatDateTime = (value: string): string => {
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
+    <AppLayout :breadcrumbs="breadcrumbs" :project="project">
         <Head :title="ticket.ticket_key" />
 
-        <div class="flex flex-1 flex-col gap-6 p-4">
+        <div class="app-page">
             <div
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
@@ -542,10 +550,7 @@ const formatDateTime = (value: string): string => {
                 </div>
             </div>
 
-            <div
+            <div v-if="status" class="status-success">
-                v-if="status"
-                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-            >
                 {{ status }}
             </div>
 
@@ -761,14 +766,18 @@ const formatDateTime = (value: string): string => {
                                         placeholder="[ ] User can sign in&#10;  [x] Validation is shown for invalid credentials"
                                     />
                                     <p class="text-muted-foreground text-xs">
-                                        Use <code>[ ]</code> / <code>[x]</code> for checklist items. Indent with two spaces for nested steps.
+                                        Use <code>[ ]</code> /
-                                        Text changes are saved with the main ticket update.
+                                        <code>[x]</code> for checklist items.
+                                        Indent with two spaces for nested steps.
+                                        Text changes are saved with the main
+                                        ticket update.
                                     </p>
                                     <p
                                         v-if="hasUnsavedAcceptanceCriteriaDraft"
                                         class="text-muted-foreground text-xs"
                                     >
-                                        Save checklist text changes before toggling completion directly.
+                                        Save checklist text changes before
+                                        toggling completion directly.
                                     </p>
                                     <InputError
                                         :message="acceptanceCriteriaError"
@@ -779,7 +788,10 @@ const formatDateTime = (value: string): string => {
                                 </div>
 
                                 <div
-                                    v-if="acceptanceCriteriaPreviewItems.length > 0"
+                                    v-if="
+                                        acceptanceCriteriaPreviewItems.length >
+                                        0
+                                    "
                                     class="border-border rounded-xl border p-4 text-sm"
                                 >
                                     <p class="mb-3 font-medium">
@@ -787,7 +799,9 @@ const formatDateTime = (value: string): string => {
                                     </p>
                                     <ul class="space-y-2">
                                         <li
-                                            v-for="(item, index) in acceptanceCriteriaPreviewItems"
+                                            v-for="(
+                                                item, index
+                                            ) in acceptanceCriteriaPreviewItems"
                                             :key="item.id ?? index"
                                             :style="{
                                                 marginLeft: `${item.indent * 1.25}rem`,
@@ -805,7 +819,12 @@ const formatDateTime = (value: string): string => {
                                                     hasUnsavedAcceptanceCriteriaDraft
                                                 "
                                                 class="border-input text-primary focus:ring-ring mt-0.5 size-4 rounded"
-                                                @change="onAcceptanceCriteriaCheckboxChange(index, $event)"
+                                                @change="
+                                                    onAcceptanceCriteriaCheckboxChange(
+                                                        index,
+                                                        $event,
+                                                    )
+                                                "
                                             />
                                             <label
                                                 :for="`acceptance-criteria-${item.id ?? index}`"
@@ -959,7 +978,7 @@ const formatDateTime = (value: string): string => {
                     </CardContent>
                 </Card>
 
-                <div class="space-y-6">
+                <div class="space-y-4 self-start xl:sticky xl:top-20">
                     <Card class="h-fit">
                         <CardHeader
                             class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
@@ -1530,10 +1549,7 @@ const formatDateTime = (value: string): string => {
                         </CardContent>
                     </Card>
 
-                    <Card
+                    <Card v-if="ticket.ticket_type?.is_parent" class="h-fit">
-                        v-if="ticket.ticket_type?.is_parent"
-                        class="h-fit"
-                    >
                         <CardHeader>
                             <CardTitle>Child tickets</CardTitle>
                             <CardDescription>
@@ -1572,10 +1588,12 @@ const formatDateTime = (value: string): string => {
 
                         <CardContent>
                             <Link
-                                :href="showTicket({
+                                :href="
-                                    project: project.id,
+                                    showTicket({
-                                    ticket: currentParentTicket.id,
+                                        project: project.id,
-                                })"
+                                        ticket: currentParentTicket.id,
+                                    })
+                                "
                                 class="border-border hover:border-primary/60 block rounded-xl border px-4 py-4 transition"
                             >
                                 <div class="font-medium">

resources/js/pages/projects/TicketCreate.vue

@@ -33,7 +33,8 @@ const returnHref =
     props.source === 'board'
         ? boardIndex(props.project.id)
         : backlogIndex(props.project.id);
-const returnLabel = props.source === 'board' ? 'Back to board' : 'Back to backlog';
+const returnLabel =
+    props.source === 'board' ? 'Back to board' : 'Back to backlog';
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -64,7 +65,9 @@ const hasTicketMetadata =
 const acceptanceCriteriaChecklist = ref('');
 
 const form = useForm({
-    acceptance_criteria: buildAcceptanceCriteria(acceptanceCriteriaChecklist.value),
+    acceptance_criteria: buildAcceptanceCriteria(
+        acceptanceCriteriaChecklist.value,
+    ),
     assignee_user_id: '',
     description: '',
     parent_ticket_id: '',
@@ -92,7 +95,9 @@ const acceptanceCriteriaError = computed(() => {
 });
 
 const submit = (): void => {
-    form.acceptance_criteria = buildAcceptanceCriteria(acceptanceCriteriaChecklist.value);
+    form.acceptance_criteria = buildAcceptanceCriteria(
+        acceptanceCriteriaChecklist.value,
+    );
 
     form.submit(ProjectTicketController.store({ project: props.project.id }), {
         preserveScroll: true,
@@ -116,10 +121,10 @@ const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
+    <AppLayout :breadcrumbs="breadcrumbs" :project="project">
         <Head :title="`Create ${project.name} ticket`" />
 
-        <div class="flex flex-1 flex-col gap-6 p-4">
+        <div class="app-page-narrow">
             <div
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
@@ -143,10 +148,7 @@ const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
                 </div>
             </div>
 
-            <div
+            <div v-if="status" class="status-success">
-                v-if="status"
-                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-            >
                 {{ status }}
             </div>
 
@@ -173,7 +175,9 @@ const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
                             <InputError :message="form.errors.title" />
                         </div>
 
-                        <div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_20rem]">
+                        <div
+                            class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_20rem]"
+                        >
                             <div class="grid gap-6">
                                 <div class="grid gap-2">
                                     <Label for="description">Description</Label>
@@ -185,30 +189,46 @@ const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
                                         class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
                                         placeholder="Describe the expected behavior and relevant context."
                                     />
-                                    <InputError :message="form.errors.description" />
+                                    <InputError
+                                        :message="form.errors.description"
+                                    />
                                 </div>
 
                                 <div class="grid gap-4">
                                     <div class="grid gap-2">
-                                        <Label for="acceptance_criteria_checklist">
+                                        <Label
+                                            for="acceptance_criteria_checklist"
+                                        >
                                             Acceptance criteria checklist
                                         </Label>
                                         <textarea
                                             id="acceptance_criteria_checklist"
-                                            v-model="acceptanceCriteriaChecklist"
+                                            v-model="
+                                                acceptanceCriteriaChecklist
+                                            "
                                             rows="6"
                                             :disabled="form.processing"
                                             class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
                                             placeholder="[ ] User can sign in&#10;  [x] Validation is shown for invalid credentials"
                                         />
-                                        <p class="text-muted-foreground text-xs">
+                                        <p
-                                            Use <code>[ ]</code> / <code>[x]</code> for checklist items. Indent with two spaces for nested steps.
+                                            class="text-muted-foreground text-xs"
+                                        >
+                                            Use <code>[ ]</code> /
+                                            <code>[x]</code> for checklist
+                                            items. Indent with two spaces for
+                                            nested steps.
                                         </p>
-                                        <InputError :message="acceptanceCriteriaError" />
+                                        <InputError
+                                            :message="acceptanceCriteriaError"
+                                        />
                                     </div>
 
                                     <div
-                                        v-if="acceptanceCriteriaPreviewItems.length > 0"
+                                        v-if="
+                                            acceptanceCriteriaPreviewItems.length >
+                                            0
+                                        "
                                         class="border-border rounded-xl border p-4 text-sm"
                                     >
                                         <p class="mb-3 font-medium">
@@ -216,14 +236,18 @@ const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
                                         </p>
                                         <ul class="space-y-2">
                                             <li
-                                                v-for="(item, index) in acceptanceCriteriaPreviewItems"
+                                                v-for="(
+                                                    item, index
+                                                ) in acceptanceCriteriaPreviewItems"
                                                 :key="index"
                                                 :style="{
                                                     marginLeft: `${item.indent * 1.25}rem`,
                                                 }"
                                                 class="flex items-start gap-2"
                                             >
-                                                <span class="mt-0.5">{{ item.checked ? '☑' : '☐' }}</span>
+                                                <span class="mt-0.5">{{
+                                                    item.checked ? '☑' : '☐'
+                                                }}</span>
                                                 <span>{{ item.text }}</span>
                                             </li>
                                         </ul>
@@ -248,7 +272,9 @@ const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
                                             {{ ticketType.name }}
                                         </option>
                                     </select>
-                                    <InputError :message="form.errors.ticket_type_id" />
+                                    <InputError
+                                        :message="form.errors.ticket_type_id"
+                                    />
                                 </div>
 
                                 <div class="grid gap-2">
@@ -269,7 +295,11 @@ const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
                                             {{ ticketPriority.name }}
                                         </option>
                                     </select>
-                                    <InputError :message="form.errors.ticket_priority_id" />
+                                    <InputError
+                                        :message="
+                                            form.errors.ticket_priority_id
+                                        "
+                                    />
                                 </div>
 
                                 <div class="grid gap-2">
@@ -285,10 +315,14 @@ const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
                                             :key="ticketStatus.id"
                                             :value="String(ticketStatus.id)"
                                         >
-                                            {{ ticketStatusLabel(ticketStatus) }}
+                                            {{
+                                                ticketStatusLabel(ticketStatus)
+                                            }}
                                         </option>
                                     </select>
-                                    <InputError :message="form.errors.ticket_status_id" />
+                                    <InputError
+                                        :message="form.errors.ticket_status_id"
+                                    />
                                 </div>
 
                                 <div class="grid gap-2">
@@ -310,7 +344,9 @@ const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
                                             {{ user.name }}
                                         </option>
                                     </select>
-                                    <InputError :message="form.errors.assignee_user_id" />
+                                    <InputError
+                                        :message="form.errors.assignee_user_id"
+                                    />
                                 </div>
 
                                 <div class="grid gap-2">
@@ -323,16 +359,24 @@ const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
                                         :disabled="form.processing"
                                         class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-60"
                                     >
-                                        <option value="">No parent ticket</option>
+                                        <option value="">
+                                            No parent ticket
+                                        </option>
                                         <option
                                             v-for="parentTicketOption in parentTicketOptions"
                                             :key="parentTicketOption.id"
-                                            :value="String(parentTicketOption.id)"
+                                            :value="
+                                                String(parentTicketOption.id)
+                                            "
                                         >
-                                            {{ `${parentTicketOption.ticket_key} - ${parentTicketOption.title}` }}
+                                            {{
+                                                `${parentTicketOption.ticket_key} - ${parentTicketOption.title}`
+                                            }}
                                         </option>
                                     </select>
-                                    <InputError :message="form.errors.parent_ticket_id" />
+                                    <InputError
+                                        :message="form.errors.parent_ticket_id"
+                                    />
                                 </div>
 
                                 <div
@@ -349,7 +393,9 @@ const ticketStatusLabel = (ticketStatus: TicketStatusModel): string => {
                                         step="1"
                                         :disabled="form.processing"
                                     />
-                                    <InputError :message="form.errors.story_points" />
+                                    <InputError
+                                        :message="form.errors.story_points"
+                                    />
                                 </div>
                             </div>
                         </div>

resources/js/pages/projects/settings/Board.vue

@@ -79,10 +79,10 @@ const statusAllowsTarget = (
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
+    <AppLayout :breadcrumbs="breadcrumbs" :project="project">
         <Head :title="`${project.name} board settings`" />
 
-        <div class="flex flex-1 flex-col gap-6 p-4">
+        <div class="app-page">
             <div
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
@@ -131,10 +131,7 @@ const statusAllowsTarget = (
                 </div>
             </div>
 
-            <div
+            <div v-if="status" class="status-success">
-                v-if="status"
-                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-            >
                 {{ status }}
             </div>
 
@@ -144,7 +141,9 @@ const statusAllowsTarget = (
                         Template inheritance: {{ templateState.templateName }}
                     </CardTitle>
                     <CardDescription>
-                        This project stays linked to its template. Sections below show whether the current configuration is still inherited or has local overrides.
+                        This project stays linked to its template. Sections
+                        below show whether the current configuration is still
+                        inherited or has local overrides.
                     </CardDescription>
                 </CardHeader>
                 <CardContent class="flex flex-wrap gap-2">

resources/js/pages/projects/settings/General.vue

@@ -89,9 +89,12 @@ const submitSwitchTemplate = (): void => {
         return;
     }
 
-    switchTemplateForm.post(ProjectController.switchTemplate.url(props.project.id), {
+    switchTemplateForm.post(
-        preserveScroll: true,
+        ProjectController.switchTemplate.url(props.project.id),
-    });
+        {
+            preserveScroll: true,
+        },
+    );
 };
 
 const submitResetTemplate = (): void => {
@@ -99,9 +102,12 @@ const submitResetTemplate = (): void => {
         return;
     }
 
-    resetTemplateForm.post(ProjectController.resetTemplate.url(props.project.id), {
+    resetTemplateForm.post(
-        preserveScroll: true,
+        ProjectController.resetTemplate.url(props.project.id),
-    });
+        {
+            preserveScroll: true,
+        },
+    );
 };
 
 const submitDelete = (): void => {
@@ -116,10 +122,10 @@ const submitDelete = (): void => {
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
+    <AppLayout :breadcrumbs="breadcrumbs" :project="project">
         <Head :title="`${project.name} general settings`" />
 
-        <div class="flex flex-1 flex-col gap-6 p-4">
+        <div class="app-page">
             <div
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
@@ -164,10 +170,7 @@ const submitDelete = (): void => {
                 </div>
             </div>
 
-            <div
+            <div v-if="status" class="status-success">
-                v-if="status"
-                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-            >
                 {{ status }}
             </div>
 
@@ -209,18 +212,27 @@ const submitDelete = (): void => {
                 <CardHeader>
                     <CardTitle>Template baseline</CardTitle>
                     <CardDescription>
-                        Switch this project to another published template or reset it back to the currently linked template baseline. Both actions can overwrite local configuration.
+                        Switch this project to another published template or
+                        reset it back to the currently linked template baseline.
+                        Both actions can overwrite local configuration.
                     </CardDescription>
                 </CardHeader>
 
                 <CardContent class="space-y-6">
                     <div class="grid gap-4 md:grid-cols-2">
                         <div class="border-border/70 rounded-xl border p-4">
-                            <p class="text-muted-foreground text-xs font-semibold uppercase tracking-[0.18em]">
+                            <p
+                                class="text-muted-foreground text-xs font-semibold uppercase tracking-[0.18em]"
+                            >
                                 Current linked template
                             </p>
-                            <p class="text-foreground mt-2 text-sm font-semibold">
+                            <p
-                                {{ currentTemplate?.name ?? 'No linked template' }}
+                                class="text-foreground mt-2 text-sm font-semibold"
+                            >
+                                {{
+                                    currentTemplate?.name ??
+                                    'No linked template'
+                                }}
                             </p>
                             <p class="text-muted-foreground mt-2 text-sm">
                                 {{
@@ -232,33 +244,52 @@ const submitDelete = (): void => {
                         </div>
 
                         <div class="border-border/70 rounded-xl border p-4">
-                            <p class="text-muted-foreground text-xs font-semibold uppercase tracking-[0.18em]">
+                            <p
+                                class="text-muted-foreground text-xs font-semibold uppercase tracking-[0.18em]"
+                            >
                                 Warning
                             </p>
                             <p class="text-foreground mt-2 text-sm font-medium">
-                                Template changes can replace board workflow, ticket metadata, repositories, and notifications for copied areas.
+                                Template changes can replace board workflow,
+                                ticket metadata, repositories, and notifications
+                                for copied areas.
                             </p>
                             <p class="text-muted-foreground mt-2 text-sm">
-                                Confirm each action with the exact project key to avoid accidental overwrites.
+                                Confirm each action with the exact project key
+                                to avoid accidental overwrites.
                             </p>
                         </div>
                     </div>
 
                     <div class="grid gap-6 xl:grid-cols-2">
-                        <form class="space-y-4 rounded-xl border p-4" @submit.prevent="submitSwitchTemplate">
+                        <form
+                            class="space-y-4 rounded-xl border p-4"
+                            @submit.prevent="submitSwitchTemplate"
+                        >
                             <div class="space-y-1">
-                                <h3 class="text-sm font-semibold">Switch to another template</h3>
+                                <h3 class="text-sm font-semibold">
+                                    Switch to another template
+                                </h3>
                                 <p class="text-muted-foreground text-sm">
-                                    Applying a different template replaces the copied areas with that template's current baseline.
+                                    Applying a different template replaces the
+                                    copied areas with that template's current
+                                    baseline.
                                 </p>
                             </div>
 
                             <div class="grid gap-2">
-                                <Label for="source_template_id">Published template</Label>
+                                <Label for="source_template_id"
+                                    >Published template</Label
+                                >
                                 <select
                                     id="source_template_id"
-                                    v-model="switchTemplateForm.source_template_id"
+                                    v-model="
-                                    :disabled="switchTemplateForm.processing || availableSwitchTemplates.length === 0"
+                                        switchTemplateForm.source_template_id
+                                    "
+                                    :disabled="
+                                        switchTemplateForm.processing ||
+                                        availableSwitchTemplates.length === 0
+                                    "
                                     class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
                                 >
                                     <option :value="undefined" disabled>
@@ -272,63 +303,107 @@ const submitDelete = (): void => {
                                         {{ template.name }}
                                     </option>
                                 </select>
-                                <InputError :message="switchTemplateForm.errors.source_template_id" />
+                                <InputError
+                                    :message="
+                                        switchTemplateForm.errors
+                                            .source_template_id
+                                    "
+                                />
                             </div>
 
                             <div class="grid gap-2">
-                                <Label for="switch_confirmation_key">Confirmation key</Label>
+                                <Label for="switch_confirmation_key"
+                                    >Confirmation key</Label
+                                >
                                 <Input
                                     id="switch_confirmation_key"
-                                    v-model="switchTemplateForm.confirmation_key"
+                                    v-model="
+                                        switchTemplateForm.confirmation_key
+                                    "
                                     :disabled="switchTemplateForm.processing"
                                     placeholder="Type the project key exactly"
                                 />
-                                <InputError :message="switchTemplateForm.errors.confirmation_key" />
+                                <InputError
+                                    :message="
+                                        switchTemplateForm.errors
+                                            .confirmation_key
+                                    "
+                                />
                             </div>
 
-                            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                            <div
+                                class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
+                            >
                                 <p class="text-muted-foreground text-sm">
-                                    Existing project-specific configuration in copied areas may be replaced or removed.
+                                    Existing project-specific configuration in
+                                    copied areas may be replaced or removed.
                                 </p>
 
                                 <Button
                                     type="submit"
                                     variant="outline"
-                                    :disabled="switchTemplateForm.processing || !canSwitchTemplate"
+                                    :disabled="
+                                        switchTemplateForm.processing ||
+                                        !canSwitchTemplate
+                                    "
                                 >
                                     Switch template
                                 </Button>
                             </div>
                         </form>
 
-                        <form class="space-y-4 rounded-xl border p-4" @submit.prevent="submitResetTemplate">
+                        <form
+                            class="space-y-4 rounded-xl border p-4"
+                            @submit.prevent="submitResetTemplate"
+                        >
                             <div class="space-y-1">
-                                <h3 class="text-sm font-semibold">Reset to current template baseline</h3>
+                                <h3 class="text-sm font-semibold">
+                                    Reset to current template baseline
+                                </h3>
                                 <p class="text-muted-foreground text-sm">
-                                    Re-apply the currently linked template and clear local divergence inside copied areas.
+                                    Re-apply the currently linked template and
+                                    clear local divergence inside copied areas.
                                 </p>
                             </div>
 
                             <div class="grid gap-2">
-                                <Label for="reset_confirmation_key">Confirmation key</Label>
+                                <Label for="reset_confirmation_key"
+                                    >Confirmation key</Label
+                                >
                                 <Input
                                     id="reset_confirmation_key"
                                     v-model="resetTemplateForm.confirmation_key"
-                                    :disabled="resetTemplateForm.processing || !currentTemplate"
+                                    :disabled="
+                                        resetTemplateForm.processing ||
+                                        !currentTemplate
+                                    "
                                     placeholder="Type the project key exactly"
                                 />
-                                <InputError :message="resetTemplateForm.errors.confirmation_key" />
+                                <InputError
+                                    :message="
+                                        resetTemplateForm.errors
+                                            .confirmation_key
+                                    "
+                                />
                             </div>
 
-                            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                            <div
+                                class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
+                            >
                                 <p class="text-muted-foreground text-sm">
-                                    This restores the current template baseline for copied areas and rewinds project-level overrides there.
+                                    This restores the current template baseline
+                                    for copied areas and rewinds project-level
+                                    overrides there.
                                 </p>
 
                                 <Button
                                     type="submit"
                                     variant="outline"
-                                    :disabled="resetTemplateForm.processing || !isResetConfirmationValid || !currentTemplate"
+                                    :disabled="
+                                        resetTemplateForm.processing ||
+                                        !isResetConfirmationValid ||
+                                        !currentTemplate
+                                    "
                                 >
                                     Reset to baseline
                                 </Button>

resources/js/pages/projects/settings/Metadata.vue

@@ -51,10 +51,10 @@ const replacementTicketTypes = (ticketTypeId: number) =>
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
+    <AppLayout :breadcrumbs="breadcrumbs" :project="project">
         <Head :title="`${project.name} ticket settings`" />
 
-        <div class="flex flex-1 flex-col gap-6 p-4">
+        <div class="app-page">
             <div
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
@@ -121,7 +121,9 @@ const replacementTicketTypes = (ticketTypeId: number) =>
                         Template inheritance: {{ templateState.templateName }}
                     </CardTitle>
                     <CardDescription>
-                        Inherited sections stay synced with the template baseline. Local edits in these settings are treated as project-specific overrides.
+                        Inherited sections stay synced with the template
+                        baseline. Local edits in these settings are treated as
+                        project-specific overrides.
                     </CardDescription>
                 </CardHeader>
                 <CardContent class="flex flex-wrap gap-2">
@@ -699,7 +701,9 @@ const replacementTicketTypes = (ticketTypeId: number) =>
                                     required
                                     placeholder="Blocked by"
                                 />
-                                <InputError :message="errors.counterpart_name" />
+                                <InputError
+                                    :message="errors.counterpart_name"
+                                />
                             </div>
 
                             <Button type="submit" :disabled="processing">
@@ -745,7 +749,9 @@ const replacementTicketTypes = (ticketTypeId: number) =>
                                     <Input
                                         :id="`link-type-counterpart-name-${ticketLinkType.id}`"
                                         name="counterpart_name"
-                                        :default-value="ticketLinkType.counterpart_label"
+                                        :default-value="
+                                            ticketLinkType.counterpart_label
+                                        "
                                         required
                                     />
                                     <InputError

resources/js/pages/projects/settings/Notifications.vue

@@ -89,7 +89,8 @@ const breadcrumbs: BreadcrumbItem[] = [
 
 let filterStateCounter = 0;
 
-const nextFilterStateId = (): string => `notification-filter-${filterStateCounter++}`;
+const nextFilterStateId = (): string =>
+    `notification-filter-${filterStateCounter++}`;
 
 const parseInFilterValues = (value: string): string[] =>
     value
@@ -100,7 +101,8 @@ const parseInFilterValues = (value: string): string[] =>
 const supportsFilterValue = (operator: string): boolean =>
     !['exists', 'not_exists'].includes(operator);
 
-const supportsArrayFilterValue = (operator: string): boolean => operator === 'in';
+const supportsArrayFilterValue = (operator: string): boolean =>
+    operator === 'in';
 
 const createFilter = (): NotificationFilterFormState => ({
     attribute: defaultFilterAttribute,
@@ -159,8 +161,9 @@ const resetCreateFilters = (): void => {
     createFilterState.filters = [];
 };
 
-const editFilters = (notificationActionId: number): NotificationFilterFormState[] =>
+const editFilters = (
-    editFilterState[notificationActionId] ?? [];
+    notificationActionId: number,
+): NotificationFilterFormState[] => editFilterState[notificationActionId] ?? [];
 
 const addEditFilter = (notificationActionId: number): void => {
     editFilterState[notificationActionId] = [
@@ -169,10 +172,13 @@ const addEditFilter = (notificationActionId: number): void => {
     ];
 };
 
-const removeEditFilter = (notificationActionId: number, index: number): void => {
+const removeEditFilter = (
-    editFilterState[notificationActionId] = editFilters(notificationActionId).filter(
+    notificationActionId: number,
-        (_, candidateIndex) => candidateIndex !== index,
+    index: number,
-    );
+): void => {
+    editFilterState[notificationActionId] = editFilters(
+        notificationActionId,
+    ).filter((_, candidateIndex) => candidateIndex !== index);
 };
 
 const createSerializedFilters = computed<string>(() =>
@@ -246,10 +252,10 @@ const notificationActionTimestamp = (
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
+    <AppLayout :breadcrumbs="breadcrumbs" :project="project">
         <Head :title="`${project.name} notification settings`" />
 
-        <div class="flex flex-1 flex-col gap-6 p-4">
+        <div class="app-page">
             <div
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
@@ -298,10 +304,7 @@ const notificationActionTimestamp = (
                 </div>
             </div>
 
-            <div
+            <div v-if="status" class="status-success">
-                v-if="status"
-                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-            >
                 {{ status }}
             </div>
 
@@ -311,7 +314,8 @@ const notificationActionTimestamp = (
                         Template inheritance: {{ templateState.templateName }}
                     </CardTitle>
                     <CardDescription>
-                        Notification rules can remain inherited from the template or diverge here as project-level overrides.
+                        Notification rules can remain inherited from the
+                        template or diverge here as project-level overrides.
                     </CardDescription>
                 </CardHeader>
                 <CardContent class="flex flex-wrap gap-2">
@@ -543,7 +547,10 @@ const notificationActionTimestamp = (
                                     />
 
                                     <div
-                                        v-if="createFilterState.filters.length === 0"
+                                        v-if="
+                                            createFilterState.filters.length ===
+                                            0
+                                        "
                                         class="text-muted-foreground text-sm"
                                     >
                                         No filters configured. This action runs
@@ -552,8 +559,7 @@ const notificationActionTimestamp = (
 
                                     <div
                                         v-for="(
-                                            filter,
+                                            filter, filterIndex
-                                            filterIndex
                                         ) in createFilterState.filters"
                                         :key="filter.id"
                                         class="grid gap-3 rounded-md border p-3"
@@ -572,8 +578,12 @@ const notificationActionTimestamp = (
                                                 >
                                                     <option
                                                         v-for="filterAttributeOption in filterAttributeOptions"
-                                                        :key="filterAttributeOption.value"
+                                                        :key="
-                                                        :value="filterAttributeOption.value"
+                                                            filterAttributeOption.value
+                                                        "
+                                                        :value="
+                                                            filterAttributeOption.value
+                                                        "
                                                     >
                                                         {{
                                                             filterAttributeOption.label
@@ -595,8 +605,12 @@ const notificationActionTimestamp = (
                                                 >
                                                     <option
                                                         v-for="filterOperatorOption in filterOperatorOptions"
-                                                        :key="filterOperatorOption.value"
+                                                        :key="
-                                                        :value="filterOperatorOption.value"
+                                                            filterOperatorOption.value
+                                                        "
+                                                        :value="
+                                                            filterOperatorOption.value
+                                                        "
                                                     >
                                                         {{
                                                             filterOperatorOption.label
@@ -607,7 +621,11 @@ const notificationActionTimestamp = (
                                         </div>
 
                                         <div
-                                            v-if="supportsFilterValue(filter.operator)"
+                                            v-if="
+                                                supportsFilterValue(
+                                                    filter.operator,
+                                                )
+                                            "
                                             class="grid gap-2"
                                         >
                                             <Label
@@ -662,7 +680,9 @@ const notificationActionTimestamp = (
                                     </div>
 
                                     <InputError
-                                        :message="notificationFilterError(errors)"
+                                        :message="
+                                            notificationFilterError(errors)
+                                        "
                                     />
                                 </div>
 
@@ -1029,8 +1049,7 @@ const notificationActionTimestamp = (
 
                                     <div
                                         v-for="(
-                                            filter,
+                                            filter, filterIndex
-                                            filterIndex
                                         ) in editFilters(notificationAction.id)"
                                         :key="filter.id"
                                         class="grid gap-3 rounded-md border p-3"
@@ -1049,8 +1068,12 @@ const notificationActionTimestamp = (
                                                 >
                                                     <option
                                                         v-for="filterAttributeOption in filterAttributeOptions"
-                                                        :key="filterAttributeOption.value"
+                                                        :key="
-                                                        :value="filterAttributeOption.value"
+                                                            filterAttributeOption.value
+                                                        "
+                                                        :value="
+                                                            filterAttributeOption.value
+                                                        "
                                                     >
                                                         {{
                                                             filterAttributeOption.label
@@ -1072,8 +1095,12 @@ const notificationActionTimestamp = (
                                                 >
                                                     <option
                                                         v-for="filterOperatorOption in filterOperatorOptions"
-                                                        :key="filterOperatorOption.value"
+                                                        :key="
-                                                        :value="filterOperatorOption.value"
+                                                            filterOperatorOption.value
+                                                        "
+                                                        :value="
+                                                            filterOperatorOption.value
+                                                        "
                                                     >
                                                         {{
                                                             filterOperatorOption.label
@@ -1084,7 +1111,11 @@ const notificationActionTimestamp = (
                                         </div>
 
                                         <div
-                                            v-if="supportsFilterValue(filter.operator)"
+                                            v-if="
+                                                supportsFilterValue(
+                                                    filter.operator,
+                                                )
+                                            "
                                             class="grid gap-2"
                                         >
                                             <Label
@@ -1144,7 +1175,9 @@ const notificationActionTimestamp = (
                                     </div>
 
                                     <InputError
-                                        :message="notificationFilterError(errors)"
+                                        :message="
+                                            notificationFilterError(errors)
+                                        "
                                     />
                                 </div>
 

resources/js/pages/projects/settings/Repositories.vue

@@ -218,10 +218,10 @@ const submitUpdate = (): void => {
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
+    <AppLayout :breadcrumbs="breadcrumbs" :project="project">
         <Head :title="`${project.name} repository settings`" />
 
-        <div class="flex flex-1 flex-col gap-6 p-4">
+        <div class="app-page">
             <div
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
@@ -270,10 +270,7 @@ const submitUpdate = (): void => {
                 </div>
             </div>
 
-            <div
+            <div v-if="status" class="status-success">
-                v-if="status"
-                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-            >
                 {{ status }}
             </div>
 
@@ -283,7 +280,8 @@ const submitUpdate = (): void => {
                         Template inheritance: {{ templateState.templateName }}
                     </CardTitle>
                     <CardDescription>
-                        Repository links can stay inherited from the template or be replaced with project-specific overrides.
+                        Repository links can stay inherited from the template or
+                        be replaced with project-specific overrides.
                     </CardDescription>
                 </CardHeader>
                 <CardContent class="flex flex-wrap gap-2">
@@ -320,9 +318,9 @@ const submitUpdate = (): void => {
                         </Link>
                     </Button>
                     <p class="text-muted-foreground text-sm">
-                        Without a matching personal connection, {{ appName }} only
+                        Without a matching personal connection,
-                        shows the repository name and links you to your user
+                        {{ appName }} only shows the repository name and links
-                        settings.
+                        you to your user settings.
                     </p>
                 </CardContent>
             </Card>
@@ -647,8 +645,8 @@ const submitUpdate = (): void => {
                                 >
                                     This project link is visible, but you need a
                                     matching Git connection in your user
-                                    settings before {{ appName }} can open or query
+                                    settings before {{ appName }} can open or
-                                    this repository for you.
+                                    query this repository for you.
                                 </p>
 
                                 <div class="mt-4 flex justify-end">
@@ -683,9 +681,9 @@ const submitUpdate = (): void => {
                         <CardHeader class="border-b">
                             <CardTitle>Detected personal sources</CardTitle>
                             <CardDescription>
-                                {{ appName }} loads repositories from your personal
+                                {{ appName }} loads repositories from your
-                                Git connections and offers them for project
+                                personal Git connections and offers them for
-                                linking.
+                                project linking.
                             </CardDescription>
                         </CardHeader>
 

resources/js/pages/settings/Applications.vue

@@ -58,10 +58,7 @@ const formatDate = (value: string | null): string => {
                     </p>
                 </div>
 
-                <div
+                <div v-if="status" class="status-success">
-                    v-if="status"
-                    class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-                >
                     {{ status }}
                 </div>
 

resources/js/pages/settings/GitConnections.vue

@@ -46,15 +46,13 @@ const breadcrumbItems: BreadcrumbItem[] = [
                     />
                     <p class="text-muted-foreground text-sm">
                         Each user needs their own application key. Without a
-                        matching personal connection, {{ appName }} can only show
+                        matching personal connection, {{ appName }} can only
-                        repository names and will link you back to this page.
+                        show repository names and will link you back to this
+                        page.
                     </p>
                 </div>
 
-                <div
+                <div v-if="status" class="status-success">
-                    v-if="status"
-                    class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-                >
                     {{ status }}
                 </div>
 

resources/js/pages/teams/Index.vue

@@ -42,7 +42,7 @@ const permissionsForTeam = (teamId: number): Record<string, string[]> =>
     <AppLayout :breadcrumbs="breadcrumbs">
         <Head title="Teams" />
 
-        <div class="flex flex-1 flex-col gap-6 p-4">
+        <div class="app-page">
             <div
                 class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
             >
@@ -57,10 +57,7 @@ const permissionsForTeam = (teamId: number): Record<string, string[]> =>
                 </Badge>
             </div>
 
-            <div
+            <div v-if="status" class="status-success">
-                v-if="status"
-                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-            >
                 {{ status }}
             </div>
 

resources/js/types/index.ts

@@ -1,4 +1,5 @@
 export * from './auth';
+export * from './layout';
 export * from './navigation';
 export * from './page-props';
 export * from './ui';

resources/js/types/layout.ts

@@ -0,0 +1,41 @@
+import type { BreadcrumbItem, NavItem } from '@/types/navigation';
+import type { ProjectModel } from '@/types/models/project-model';
+import type { HeadingVariant } from '@/types/ui';
+
+export type AppLayoutProps = {
+    breadcrumbs?: BreadcrumbItem[];
+    project?: ProjectModel;
+};
+
+export type AppSidebarProps = {
+    project?: ProjectModel;
+};
+
+export type AppSidebarHeaderProps = Pick<AppLayoutProps, 'breadcrumbs'>;
+
+export type AppHeaderProps = Pick<AppLayoutProps, 'breadcrumbs'>;
+
+export type AppContentProps = {
+    class?: string;
+    variant?: import('@/types/ui').AppVariant;
+};
+
+export type AppShellProps = {
+    variant?: import('@/types/ui').AppVariant;
+};
+
+export type AuthLayoutProps = {
+    description?: string;
+    title?: string;
+};
+
+export type HeadingProps = {
+    description?: string;
+    title: string;
+    variant?: HeadingVariant;
+};
+
+export type NavMainProps = {
+    items: NavItem[];
+    label?: string;
+};

resources/js/types/ui.ts

@@ -2,3 +2,15 @@ export type Appearance = 'light' | 'dark' | 'system';
 export type ResolvedAppearance = 'light' | 'dark';
 
 export type AppVariant = 'header' | 'sidebar';
+
+export type HeadingVariant = 'default' | 'small';
+
+export type UserAvatarProps = {
+    rounded?: boolean;
+    user?: import('@/types/models/user-model').UserModel;
+};
+
+export type UserInfoProps = {
+    showEmail?: boolean;
+    user: import('@/types/auth').User;
+};

resources/views/app.blade.php

@@ -22,11 +22,11 @@
         {{-- Inline style to set the HTML background color based on our theme in app.css --}}
         <style>
             html {
-                background-color: oklch(1 0 0);
+                background-color: #f7f9fb;
             }
 
             html.dark {
-                background-color: oklch(0.145 0 0);
+                background-color: #0b1326;
             }
         </style>
 
@@ -37,7 +37,7 @@
         <link rel="apple-touch-icon" href="/apple-touch-icon.png">
 
         <link rel="preconnect" href="https://fonts.bunny.net">
-        <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
+        <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700" rel="stylesheet" />
 
         @vite(['resources/js/app.ts', "resources/js/pages/{$page['component']}.vue"])
         @inertiaHead

tests/Feature/Projects/ProjectBoardControllerTest.php

@@ -45,6 +45,10 @@ class ProjectBoardControllerTest extends TestCase
             'name' => 'High',
             'position' => 2,
         ]);
+        $assignee = User::factory()->create([
+            'name' => 'Assigned User',
+            'avatar_path' => 'avatars/generated/assigned-user.svg',
+        ]);
 
         Ticket::factory()->create([
             'project_id' => $project->id,
@@ -57,6 +61,7 @@ class ProjectBoardControllerTest extends TestCase
         ]);
 
         $boardTicket = Ticket::factory()->create([
+            'assignee_user_id' => $assignee->id,
             'project_id' => $project->id,
             'sequence_number' => 2,
             'ticket_key' => 'CORE-2',
@@ -80,6 +85,9 @@ class ProjectBoardControllerTest extends TestCase
                 ->has('boardColumns.1.tickets', 1)
                 ->where('boardColumns.1.tickets.0.ticket_key', $boardTicket->ticket_key)
                 ->where('boardColumns.1.tickets.0.title', $boardTicket->title)
+                ->where('boardColumns.1.tickets.0.assignee.id', $assignee->id)
+                ->where('boardColumns.1.tickets.0.assignee.name', $assignee->name)
+                ->where('boardColumns.1.tickets.0.assignee.avatar', $assignee->avatar)
                 ->where('canCreateTickets', false)
                 ->where('canEditTickets', false),
             );