From 5d57b131ff39508741f4de3fa8f2a87a00af510f Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Tue, 16 Jun 2026 22:23:50 +0200
Subject: [PATCH] refactor(v5): rename Home to Dashboard and add coollabs brand
 styles

Rename HomeController, Home page, and V5HomeProps type to Dashboard
equivalents. Update route name from 'home' to 'dashboard'.

Add coollabs brand color tokens to CSS theme and a 'coolify' button
variant using those colors. Add Sheet UI component for slide-over panels.
Update navbar with active-route detection and Sheet-based mobile drawer.
Switch cluster action buttons to use the new 'coolify' variant.
---
 ...Controller.php => DashboardController.php} |  4 +-
 resources/css/v5/app.css                      |  9 +-
 resources/js/v5/Pages/Clusters.tsx            |  8 +-
 .../js/v5/Pages/{Home.tsx => Dashboard.tsx}   | 10 +--
 resources/js/v5/components/app-navbar.tsx     | 66 ++++++++++++--
 resources/js/v5/components/ui/button.tsx      |  2 +
 resources/js/v5/components/ui/sheet.tsx       | 87 +++++++++++++++++++
 resources/js/v5/types.ts                      |  2 +-
 routes/v5.php                                 | 10 +--
 .../V5/{HomeTest.php => DashboardTest.php}    | 83 ++++++++++++++----
 10 files changed, 235 insertions(+), 46 deletions(-)
 rename app/Http/Controllers/V5/{HomeController.php => DashboardController.php} (99%)
 rename resources/js/v5/Pages/{Home.tsx => Dashboard.tsx} (86%)
 create mode 100644 resources/js/v5/components/ui/sheet.tsx
 rename tests/Feature/V5/{HomeTest.php => DashboardTest.php} (90%)

diff --git a/app/Http/Controllers/V5/HomeController.php b/app/Http/Controllers/V5/DashboardController.php
similarity index 99%
rename from app/Http/Controllers/V5/HomeController.php
rename to app/Http/Controllers/V5/DashboardController.php
index f5fc3eb53..0e1c5a283 100644
--- a/app/Http/Controllers/V5/HomeController.php
+++ b/app/Http/Controllers/V5/DashboardController.php
@@ -16,7 +16,7 @@ use Illuminate\Validation\Rule;
 use Inertia\Inertia;
 use Inertia\Response;
 
-class HomeController extends Controller
+class DashboardController extends Controller
 {
     private const SELECTED_PROJECT_SESSION_KEY = 'v5.selectedProjectUuid';
 
@@ -28,7 +28,7 @@ class HomeController extends Controller
         $projects = $this->projects($currentTeam);
         [$selectedProject, $selectedEnvironment] = $this->selectedProjectAndEnvironment($request, $projects);
 
-        return Inertia::render('Home', [
+        return Inertia::render('Dashboard', [
             'flux' => $fluxHealth->check(),
             'projects' => $projects,
             'selectedProjectUuid' => $selectedProject['uuid'] ?? null,
diff --git a/resources/css/v5/app.css b/resources/css/v5/app.css
index 84c33f859..1f85d6958 100644
--- a/resources/css/v5/app.css
+++ b/resources/css/v5/app.css
@@ -29,6 +29,11 @@
     --color-destructive: var(--destructive);
     --color-destructive-foreground: var(--destructive-foreground);
     --color-warning: var(--warning);
+    --color-coollabs-50: #f5f0ff;
+    --color-coollabs: #6b16ed;
+    --color-coollabs-100: #7317ff;
+    --color-coollabs-200: #5a12c7;
+    --color-coollabs-300: #4a0fa3;
     --color-border: var(--border);
     --color-input: var(--input);
     --color-ring: var(--ring);
@@ -76,7 +81,7 @@
     --warning: #fcd452;
     --border: oklch(0.92 0.004 286.32);
     --input: oklch(0.92 0.004 286.32);
-    --ring: oklch(0.705 0.015 286.067);
+    --ring: var(--warning);
     --chart-1: oklch(0.871 0.006 286.286);
     --chart-2: oklch(0.552 0.016 285.938);
     --chart-3: oklch(0.442 0.017 285.786);
@@ -112,7 +117,7 @@
     --warning: #fcd452;
     --border: oklch(1 0 0 / 10%);
     --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.552 0.016 285.938);
+    --ring: var(--warning);
     --chart-1: oklch(0.871 0.006 286.286);
     --chart-2: oklch(0.552 0.016 285.938);
     --chart-3: oklch(0.442 0.017 285.786);
diff --git a/resources/js/v5/Pages/Clusters.tsx b/resources/js/v5/Pages/Clusters.tsx
index 291b140bc..26f5f9a4e 100644
--- a/resources/js/v5/Pages/Clusters.tsx
+++ b/resources/js/v5/Pages/Clusters.tsx
@@ -14,7 +14,7 @@ import {
     DialogTitle,
 } from '@/components/ui/dialog';
 import { csrfToken } from '@/lib/csrf';
-import type { V5Cluster, V5HomeProps } from '@/types';
+import type { V5Cluster, V5DashboardProps } from '@/types';
 
 type ClusterFormErrors = {
     name?: string[];
@@ -50,7 +50,7 @@ export default function Clusters({
     projects = [],
     selectedProjectUuid = null,
     selectedEnvironmentUuid = null,
-}: V5HomeProps) {
+}: V5DashboardProps) {
     const [clusterList, setClusterList] = useState<V5Cluster[]>(clusters);
     const [selectedClusterId, setSelectedClusterId] = useState<string>(clusters[0]?.id ?? '');
     const [name, setName] = useState('');
@@ -134,7 +134,7 @@ export default function Clusters({
                                 </div>
                                 <Button
                                     type="button"
-                                    variant="outline"
+                                    variant="coolify"
                                     size="sm"
                                     aria-label="Create cluster"
                                     onClick={() => setIsCreateDialogOpen(true)}
@@ -323,7 +323,7 @@ export default function Clusters({
 
                                     <DialogFooter>
                                         <DialogClose render={<Button type="button" variant="outline" />}>Cancel</DialogClose>
-                                        <Button type="submit" disabled={isSubmitting}>
+                                        <Button type="submit" variant="coolify" disabled={isSubmitting}>
                                             {isSubmitting ? 'Creating...' : 'Create cluster'}
                                         </Button>
                                     </DialogFooter>
diff --git a/resources/js/v5/Pages/Home.tsx b/resources/js/v5/Pages/Dashboard.tsx
similarity index 86%
rename from resources/js/v5/Pages/Home.tsx
rename to resources/js/v5/Pages/Dashboard.tsx
index 8eb03c69f..ab0ee6f1e 100644
--- a/resources/js/v5/Pages/Home.tsx
+++ b/resources/js/v5/Pages/Dashboard.tsx
@@ -1,17 +1,17 @@
 import { Head } from '@inertiajs/react';
 
 import { AppNavbar } from '@/components/app-navbar';
-import type { V5HomeProps } from '@/types';
+import type { V5DashboardProps } from '@/types';
 
-export default function Home({
+export default function Dashboard({
     flux,
     projects = [],
     selectedProjectUuid = null,
     selectedEnvironmentUuid = null,
-}: V5HomeProps) {
+}: V5DashboardProps) {
     return (
         <>
-            <Head title="Magic" />
+            <Head title="Dashboard" />
 
             <div className="h-dvh overflow-hidden bg-background text-foreground">
                 <AppNavbar
@@ -23,7 +23,7 @@ export default function Home({
 
                 <main className="flex h-full min-h-0 items-center justify-center overflow-hidden px-6 pt-16">
                     <section className="flex w-full max-w-5xl flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border bg-card px-8 py-24 text-center">
-                        <p className="text-sm font-medium text-foreground">Magic</p>
+                        <p className="text-sm font-medium text-foreground">Dashboard</p>
                         <p className="max-w-md text-sm text-muted-foreground">This is where the magic happens.</p>
                     </section>
                 </main>
diff --git a/resources/js/v5/components/app-navbar.tsx b/resources/js/v5/components/app-navbar.tsx
index 45b04a129..1b205f9ed 100644
--- a/resources/js/v5/components/app-navbar.tsx
+++ b/resources/js/v5/components/app-navbar.tsx
@@ -1,9 +1,11 @@
-import { Link } from '@inertiajs/react';
+import { Link, usePage } from '@inertiajs/react';
 import { useMemo, useState } from 'react';
 
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
 import { csrfToken } from '@/lib/csrf';
-import type { SelectItemOption, V5HomeProps, V5Project } from '@/types';
+import { cn } from '@/lib/utils';
+import type { SelectItemOption, V5DashboardProps, V5Project } from '@/types';
 
 function persistSelection(projectUuid: string, environmentUuid: string): void {
     void fetch('/v5/selection', {
@@ -21,7 +23,7 @@ function persistSelection(projectUuid: string, environmentUuid: string): void {
     });
 }
 
-type AppNavbarProps = V5HomeProps;
+type AppNavbarProps = V5DashboardProps;
 
 export function AppNavbar({
     flux,
@@ -30,6 +32,7 @@ export function AppNavbar({
     selectedProjectUuid = null,
     selectedEnvironmentUuid = null,
 }: AppNavbarProps) {
+    const { url } = usePage();
     const firstProject = projects[0] ?? null;
     const [projectUuid, setProjectUuid] = useState<string>(selectedProjectUuid ?? firstProject?.uuid ?? '');
     const selectedProject = useMemo<V5Project | null>(
@@ -73,26 +76,27 @@ export function AppNavbar({
         label: environment.name,
         value: environment.uuid,
     }));
+    const isClustersPage = url.startsWith('/v5/clusters');
 
     return (
         <header className="fixed inset-x-0 top-0 z-40 border-b border-border bg-background">
-            <nav className="flex h-16 items-center gap-4 px-6" aria-label="Main navigation">
+            <nav className="relative flex h-16 items-center gap-3 px-4 sm:px-6" aria-label="Main navigation">
                 <Link
                     href="/v5"
                     className="flex shrink-0 items-center rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-                    aria-label="Coolify home"
+                    aria-label="Coolify dashboard"
                 >
                     <img src="/coolify-logo.svg" alt="Coolify" className="size-8" />
                 </Link>
 
-                <div className="flex min-w-0 items-center gap-2">
+                <div className="absolute left-1/2 flex min-w-0 -translate-x-1/2 items-center justify-center gap-1 md:static md:flex-1 md:translate-x-0 md:justify-start md:gap-2">
                     <Select
                         items={projectItems}
                         value={selectedProject?.uuid ?? ''}
                         onValueChange={selectProject}
                         disabled={projects.length === 0}
                     >
-                        <SelectTrigger aria-label="Select a project" variant="ghost" className="max-w-[10rem]">
+                        <SelectTrigger aria-label="Select a project" variant="ghost" className="max-w-[38vw] md:max-w-[10rem]">
                             <SelectValue placeholder="Select a project" />
                         </SelectTrigger>
                         <SelectContent position="popper" align="start" sideOffset={4}>
@@ -114,7 +118,7 @@ export function AppNavbar({
                         onValueChange={selectEnvironment}
                         disabled={!selectedProject || (selectedProject.environments ?? []).length === 0}
                     >
-                        <SelectTrigger aria-label="Select an environment" variant="ghost" className="max-w-[10rem]">
+                        <SelectTrigger aria-label="Select an environment" variant="ghost" className="max-w-[30vw] md:max-w-[10rem]">
                             <SelectValue placeholder="Select an environment" />
                         </SelectTrigger>
                         <SelectContent position="popper" align="start" sideOffset={4}>
@@ -132,7 +136,7 @@ export function AppNavbar({
                 <div className="ml-auto flex items-center gap-3">
                     <Link
                         href="/v5/clusters"
-                        className="rounded-md px-3 py-1 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                        className="hidden rounded-md px-3 py-1 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground md:inline-flex"
                     >
                         Clusters
                     </Link>
@@ -143,6 +147,50 @@ export function AppNavbar({
                     >
                         Flux: {flux?.label ?? 'Unknown'} · {clusters.length} clusters
                     </div>
+
+                    <Sheet>
+                        <SheetTrigger
+                            className="inline-flex rounded-md p-2 text-warning transition-colors hover:bg-muted hover:text-warning md:hidden"
+                            aria-label="Open mobile menu"
+                        >
+                            <svg xmlns="http://www.w3.org/2000/svg" className="size-6" viewBox="0 0 24 24" aria-hidden="true">
+                                <path
+                                    fill="none"
+                                    stroke="currentColor"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth="2"
+                                    d="M4 6h16M4 12h16M4 18h16"
+                                />
+                            </svg>
+                        </SheetTrigger>
+                        <SheetContent side="right" className="w-72 max-w-[85vw] bg-background">
+                            <SheetHeader>
+                                <SheetTitle>Coolify</SheetTitle>
+                                <SheetDescription className="sr-only">Move between Coolify v5 pages.</SheetDescription>
+                            </SheetHeader>
+                            <nav className="flex flex-col gap-1 px-4" aria-label="Mobile navigation">
+                                <SheetClose
+                                    render={<Link href="/v5" />}
+                                    className={cn(
+                                        'rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-warning',
+                                        !isClustersPage && 'bg-accent text-accent-foreground',
+                                    )}
+                                >
+                                    Dashboard
+                                </SheetClose>
+                                <SheetClose
+                                    render={<Link href="/v5/clusters" />}
+                                    className={cn(
+                                        'rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-warning',
+                                        isClustersPage && 'bg-accent text-accent-foreground',
+                                    )}
+                                >
+                                    Clusters
+                                </SheetClose>
+                            </nav>
+                        </SheetContent>
+                    </Sheet>
                 </div>
             </nav>
         </header>
diff --git a/resources/js/v5/components/ui/button.tsx b/resources/js/v5/components/ui/button.tsx
index d5fae298f..01c22f0eb 100644
--- a/resources/js/v5/components/ui/button.tsx
+++ b/resources/js/v5/components/ui/button.tsx
@@ -10,6 +10,8 @@ const buttonVariants = cva(
         variants: {
             variant: {
                 default: 'bg-primary text-primary-foreground hover:bg-primary/80',
+                coolify:
+                    'border-coollabs bg-coollabs-50 text-coollabs-200 hover:bg-coollabs hover:text-white dark:border-coollabs-100 dark:bg-coollabs/20 dark:text-white dark:hover:bg-coollabs-100 dark:hover:text-white',
                 outline:
                     'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
                 secondary:
diff --git a/resources/js/v5/components/ui/sheet.tsx b/resources/js/v5/components/ui/sheet.tsx
new file mode 100644
index 000000000..5cf9d8f55
--- /dev/null
+++ b/resources/js/v5/components/ui/sheet.tsx
@@ -0,0 +1,87 @@
+import { Dialog as SheetPrimitive } from '@base-ui/react/dialog';
+import { XIcon } from '@phosphor-icons/react';
+import type * as React from 'react';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+    return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+    return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+    return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+    return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+    return (
+        <SheetPrimitive.Backdrop
+            data-slot="sheet-overlay"
+            className={cn(
+                'fixed inset-0 z-50 bg-black/10 text-xs/relaxed transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function SheetContent({
+    className,
+    children,
+    side = 'right',
+    showCloseButton = true,
+    ...props
+}: SheetPrimitive.Popup.Props & {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    showCloseButton?: boolean;
+}) {
+    return (
+        <SheetPortal>
+            <SheetOverlay />
+            <SheetPrimitive.Popup
+                data-slot="sheet-content"
+                data-side={side}
+                className={cn(
+                    'fixed z-50 flex flex-col bg-popover bg-clip-padding text-xs/relaxed text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
+                    className,
+                )}
+                {...props}
+            >
+                {children}
+                {showCloseButton && (
+                    <SheetPrimitive.Close data-slot="sheet-close" render={<Button variant="ghost" className="absolute top-3 right-3" size="icon-sm" />}>
+                        <XIcon />
+                        <span className="sr-only">Close</span>
+                    </SheetPrimitive.Close>
+                )}
+            </SheetPrimitive.Popup>
+        </SheetPortal>
+    );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+    return <div data-slot="sheet-header" className={cn('flex flex-col gap-0.5 p-4', className)} {...props} />;
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+    return <div data-slot="sheet-footer" className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />;
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+    return <SheetPrimitive.Title data-slot="sheet-title" className={cn('font-heading text-sm font-medium text-foreground', className)} {...props} />;
+}
+
+function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props) {
+    return <SheetPrimitive.Description data-slot="sheet-description" className={cn('text-xs/relaxed text-muted-foreground', className)} {...props} />;
+}
+
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };
diff --git a/resources/js/v5/types.ts b/resources/js/v5/types.ts
index 0fe8d4252..f03ec31da 100644
--- a/resources/js/v5/types.ts
+++ b/resources/js/v5/types.ts
@@ -38,7 +38,7 @@ export type V5Project = {
     environments: V5Environment[];
 };
 
-export type V5HomeProps = {
+export type V5DashboardProps = {
     flux: FluxStatus | null;
     clusters?: V5Cluster[];
     projects?: V5Project[];
diff --git a/routes/v5.php b/routes/v5.php
index d3a53ca2e..655e4f9dc 100644
--- a/routes/v5.php
+++ b/routes/v5.php
@@ -1,11 +1,11 @@
 <?php
 
-use App\Http\Controllers\V5\HomeController;
+use App\Http\Controllers\V5\DashboardController;
 use Illuminate\Support\Facades\Route;
 
 Route::middleware('v5.authenticated')->group(function () {
-    Route::get('/', HomeController::class)->name('home');
-    Route::post('/selection', [HomeController::class, 'updateSelection'])->name('selection.update');
-    Route::get('/clusters', [HomeController::class, 'clustersIndex'])->name('clusters.index');
-    Route::post('/clusters', [HomeController::class, 'storeCluster'])->name('clusters.store');
+    Route::get('/', DashboardController::class)->name('dashboard');
+    Route::post('/selection', [DashboardController::class, 'updateSelection'])->name('selection.update');
+    Route::get('/clusters', [DashboardController::class, 'clustersIndex'])->name('clusters.index');
+    Route::post('/clusters', [DashboardController::class, 'storeCluster'])->name('clusters.store');
 });
diff --git a/tests/Feature/V5/HomeTest.php b/tests/Feature/V5/DashboardTest.php
similarity index 90%
rename from tests/Feature/V5/HomeTest.php
rename to tests/Feature/V5/DashboardTest.php
index 8d39d6a52..343e83465 100644
--- a/tests/Feature/V5/HomeTest.php
+++ b/tests/Feature/V5/DashboardTest.php
@@ -32,8 +32,9 @@ beforeEach(function () {
     Schema::dropIfExists('users');
 });
 
-it('registers the v5 home route', function () {
-    expect(Route::has('v5.home'))->toBeTrue()
+it('registers the v5 dashboard route', function () {
+    expect(Route::has('v5.dashboard'))->toBeTrue()
+        ->and(Route::has('v5.home'))->toBeFalse()
         ->and(Route::has('v5.selection.update'))->toBeTrue()
         ->and(Route::has('v5.clusters.index'))->toBeTrue()
         ->and(Route::has('v5.clusters.store'))->toBeTrue()
@@ -174,7 +175,8 @@ it('serves the v5 inertia shell', function () {
         ->assertSee('coolify-logo-dev-transparent.png', false)
         ->assertDontSee('coolify-logo.svg', false)
         ->assertSee('v5-app', false)
-        ->assertSee('Home', false)
+        ->assertSee('Dashboard', false)
+        ->assertDontSee('Home', false)
         ->assertDontSee('v5-ready', false)
         ->assertDontSee('This page is served from Laravel through Inertia and React')
         ->assertDontSee('Bootstrap server')
@@ -369,7 +371,7 @@ it('allows the same v5 cluster name in another team without leaking it', functio
         ->assertDontSee('Other team cluster.');
 });
 
-it('shares existing projects and environments with the v5 home page', function () {
+it('shares existing projects and environments with the v5 dashboard page', function () {
     $this->withoutVite();
     fakeFluxHealth();
     createSharedUserAndTeamTables();
@@ -458,25 +460,28 @@ it('rejects persisted v5 selections outside the current team', function () {
         ->assertSessionMissing('v5.selectedEnvironmentUuid');
 });
 
-it('defines the v5 home page as a shadcn styled canvas shell', function () {
-    $homePage = file_get_contents(resource_path('js/v5/Pages/Home.tsx'));
+it('defines the v5 dashboard page as a shadcn styled canvas shell', function () {
+    $dashboardPage = file_get_contents(resource_path('js/v5/Pages/Dashboard.tsx'));
     $app = file_get_contents(resource_path('js/v5/app.tsx'));
     $navbarPath = resource_path('js/v5/components/app-navbar.tsx');
 
     expect(file_exists($navbarPath))->toBeTrue();
 
     $navbar = file_get_contents($navbarPath);
+    $sheetPath = resource_path('js/v5/components/ui/sheet.tsx');
+
+    expect(file_exists($sheetPath))->toBeTrue();
 
     expect($app)
         ->toContain('progress: {')
-        ->toContain('delay: 250')
+        ->toContain('delay: 10')
         ->toContain("color: '#fcd452'")
         ->toContain('showSpinner: false')
         ->not->toContain('TopNavigationLoadingIndicator')
         ->not->toContain('withApp:');
 
-    expect($homePage)
-        ->toContain('Magic')
+    expect($dashboardPage)
+        ->toContain('Dashboard')
         ->toContain("import { AppNavbar } from '@/components/app-navbar';")
         ->not->toContain('function csrfToken()')
         ->not->toContain("import { csrfToken } from '@/lib/csrf';")
@@ -494,7 +499,9 @@ it('defines the v5 home page as a shadcn styled canvas shell', function () {
         ->not->toContain("fetch('/v5/selection'");
 
     expect($navbar)
-        ->toContain("import { Link } from '@inertiajs/react';")
+        ->toContain("import { Link, usePage } from '@inertiajs/react';")
+        ->toContain("import { cn } from '@/lib/utils';")
+        ->toContain("import { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';")
         ->toContain("import { csrfToken } from '@/lib/csrf';")
         ->not->toContain('function csrfToken()')
         ->toContain('export function AppNavbar')
@@ -506,16 +513,44 @@ it('defines the v5 home page as a shadcn styled canvas shell', function () {
         ->toContain('text-muted-foreground')
         ->toContain('SelectGroup')
         ->toContain('variant="ghost"')
-        ->toContain('className="max-w-[10rem]"')
         ->toContain('position="popper"')
         ->toContain('sideOffset={4}')
         ->toContain('Select a project')
         ->toContain('Select an environment')
+        ->toContain('const { url } = usePage();')
+        ->toContain("const isClustersPage = url.startsWith('/v5/clusters');")
         ->toContain('href="/v5"')
         ->toContain('href="/v5/clusters"')
         ->toContain('Clusters')
+        ->toContain('className="relative flex h-16 items-center gap-3 px-4 sm:px-6"')
+        ->toContain('className="absolute left-1/2 flex min-w-0 -translate-x-1/2 items-center justify-center gap-1 md:static md:flex-1 md:translate-x-0 md:justify-start md:gap-2"')
+        ->toContain('className="max-w-[38vw] md:max-w-[10rem]"')
+        ->toContain('className="max-w-[30vw] md:max-w-[10rem]"')
+        ->toContain('aria-label="Open mobile menu"')
+        ->toContain('<Sheet>')
+        ->toContain('<SheetTrigger')
+        ->toContain('<SheetContent side="right" className="w-72 max-w-[85vw] bg-background"')
+        ->toContain('<SheetHeader>')
+        ->toContain('<SheetTitle>Coolify</SheetTitle>')
+        ->toContain('<SheetDescription className="sr-only">')
+        ->toContain('<SheetClose')
+        ->toContain('Move between Coolify v5 pages.')
+        ->not->toContain('<SheetTitle className="sr-only">Navigation</SheetTitle>')
+        ->toContain('className="hidden rounded-md px-3 py-1 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground md:inline-flex"')
+        ->toContain('className="inline-flex rounded-md p-2 text-warning transition-colors hover:bg-muted hover:text-warning md:hidden"')
+        ->toContain('Dashboard')
+        ->not->toContain('Home')
         ->toContain("fetch('/v5/selection'")
         ->toContain("'X-CSRF-TOKEN': csrfToken()")
+        ->not->toContain('isMobileMenuOpen')
+        ->not->toContain('setIsMobileMenuOpen')
+        ->not->toContain('isProjectEnvironmentMenuOpen')
+        ->not->toContain('setIsProjectEnvironmentMenuOpen')
+        ->not->toContain('Open project and environment selector')
+        ->not->toContain('Close project and environment selector')
+        ->not->toContain('DropdownMenu')
+        ->not->toContain('fixed inset-0 bg-black/80')
+        ->not->toContain('fixed inset-y-0 right-0')
         ->not->toContain('<a')
         ->not->toContain("import { Button } from '@/components/ui/button';")
         ->not->toContain('<Button')
@@ -526,9 +561,7 @@ it('defines the v5 home page as a shadcn styled canvas shell', function () {
         ->not->toContain('bg-background/95')
         ->not->toContain('backdrop-blur')
         ->not->toContain('supports-[backdrop-filter]')
-        ->not->toContain('bg-coolgray')
         ->not->toContain('border-coolgray')
-        ->not->toContain('text-warning')
         ->not->toContain('className="w-[12rem]"')
         ->not->toContain('<h1>Coolify v5</h1>')
         ->not->toContain('<h2 id="clusters-heading">Clusters</h2>');
@@ -539,6 +572,7 @@ it('defines the v5 home page as a shadcn styled canvas shell', function () {
 it('defines the v5 cluster management page and create cluster form', function () {
     $clustersPagePath = resource_path('js/v5/Pages/Clusters.tsx');
     $clustersPage = file_get_contents($clustersPagePath);
+    $buttonComponent = file_get_contents(resource_path('js/v5/components/ui/button.tsx'));
     $types = file_get_contents(resource_path('js/v5/types.ts'));
 
     expect(file_exists($clustersPagePath))->toBeTrue();
@@ -551,6 +585,7 @@ it('defines the v5 cluster management page and create cluster form', function ()
         ->toContain('aria-label="Create cluster"')
         ->toContain('setIsCreateDialogOpen(true)')
         ->toContain('Add cluster')
+        ->toContain('variant="coolify"')
         ->toContain('border-warning bg-warning/10 text-foreground')
         ->not->toContain('border-primary bg-primary/10 text-foreground')
         ->toContain('<Dialog')
@@ -571,14 +606,26 @@ it('defines the v5 cluster management page and create cluster form', function ()
         ->not->toContain('<aside className="rounded-lg border border-border bg-card p-5">')
         ->not->toContain('This is where the magic happens.');
 
+    expect(substr_count($clustersPage, 'variant="coolify"'))->toBe(2)
+        ->and($buttonComponent)
+        ->toContain('coolify:')
+        ->toContain('bg-coollabs-50')
+        ->toContain('hover:bg-coollabs');
+
     expect(file_get_contents(resource_path('js/v5/components/ui/dialog.tsx')))
         ->toContain('@base-ui/react/dialog')
         ->toContain('DialogTitle')
         ->toContain('DialogDescription');
 
-    expect(file_get_contents(resource_path('css/v5/app.css')))
+    $v5Css = file_get_contents(resource_path('css/v5/app.css'));
+
+    expect($v5Css)
         ->toContain('--color-warning: var(--warning);')
-        ->toContain('--warning: #fcd452;');
+        ->toContain('--warning: #fcd452;')
+        ->not->toContain('--ring: oklch(0.705 0.015 286.067);')
+        ->not->toContain('--ring: oklch(0.552 0.016 285.938);');
+
+    expect(substr_count($v5Css, '--ring: var(--warning);'))->toBe(2);
 
     expect($types)
         ->toContain('sshUser: string;')
@@ -722,10 +769,10 @@ it('shows when flux is unavailable', function () {
         ->assertSee('Flux socket was not found.');
 });
 
-it('does not include coolify version controls on the v5 home page', function () {
-    $homePage = file_get_contents(resource_path('js/v5/Pages/Home.tsx'));
+it('does not include coolify version controls on the v5 dashboard page', function () {
+    $dashboardPage = file_get_contents(resource_path('js/v5/Pages/Dashboard.tsx'));
 
-    expect($homePage)
+    expect($dashboardPage)
         ->not->toContain('Check coolify version')
         ->not->toContain('/v5/coolify/version')
         ->not->toContain('Installed version:');