From 49fdce4f8159a817cc7a2609cdab53e9776c5c78 Mon Sep 17 00:00:00 2001
From: Alex Justesen <alexjustesen@users.noreply.github.com>
Date: Tue, 9 Dec 2025 18:59:03 -0500
Subject: [PATCH] Added version to dashboard footer (#2537)

Co-authored-by: Alex Justesen <1144087+alexjustesen@users.noreply.github.com>
---
 resources/views/layouts/app.blade.php         | 81 +------------------
 .../views/layouts/partials/footer.blade.php   | 15 ++++
 .../views/layouts/partials/header.blade.php   | 78 ++++++++++++++++++
 3 files changed, 96 insertions(+), 78 deletions(-)
 create mode 100644 resources/views/layouts/partials/footer.blade.php
 create mode 100644 resources/views/layouts/partials/header.blade.php
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 1d23aaac1..078505014 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -35,86 +35,11 @@
     </head>
     <body class="antialiased min-h-dvh bg-gray-50 dark:bg-gray-950 text-gray-950 dark:text-white">
         <main class="p-4 sm:p-6 lg:p-8 mx-auto max-w-{{ config('speedtest.content_width') }} space-y-4 sm:space-y-8">
-            <header class="flex flex-col gap-4 sm:flex-row sm:justify-between sm:items-center">
-                <div>
-                    <h1 class="text-2xl font-bold tracking-tight text-gray-950 dark:text-white sm:text-3xl">{{ $title ?? 'Page Title' }} - {{ config('app.name') }}</h1>
-                </div>
-
-                <div class="flex items-center flex-shrink-0 gap-4">
-                    <div
-                        x-data="{ theme: null }"
-                        x-init="
-                            theme = localStorage.getItem('theme') || 'system'
-                            $watch('theme', () => {
-                                localStorage.setItem('theme', theme)
-                                const effectiveTheme = theme === 'system'
-                                    ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
-                                    : theme
-                                if (effectiveTheme === 'dark') {
-                                    document.documentElement.classList.add('dark')
-                                } else {
-                                    document.documentElement.classList.remove('dark')
-                                }
-                                $dispatch('theme-changed', theme)
-                            })
-                        "
-                        class="flex items-center gap-1 p-1 rounded-lg bg-gray-100 dark:bg-gray-800"
-                    >
-                        <button
-                            type="button"
-                            x-on:click="theme = 'light'"
-                            x-bind:class="{ 'bg-white dark:bg-gray-900 shadow-sm': theme === 'light' }"
-                            class="p-2 rounded-md transition-all"
-                            aria-label="Light mode"
-                        >
-                            <x-tabler-sun class="size-4" />
-                        </button>
-
-                        <button
-                            type="button"
-                            x-on:click="theme = 'dark'"
-                            x-bind:class="{ 'bg-white dark:bg-gray-900 shadow-sm': theme === 'dark' }"
-                            class="p-2 rounded-md transition-all"
-                            aria-label="Dark mode"
-                        >
-                            <x-tabler-moon class="size-4" />
-                        </button>
-
-                        <button
-                            type="button"
-                            x-on:click="theme = 'system'"
-                            x-bind:class="{ 'bg-white dark:bg-gray-900 shadow-sm': theme === 'system' }"
-                            class="p-2 rounded-md transition-all"
-                            aria-label="System theme"
-                        >
-                            <x-tabler-device-desktop class="size-4" />
-                        </button>
-                    </div>
-
-                    @auth
-                        <x-filament::button
-                            href="{{ url('/admin') }}"
-                            icon="tabler-layout-dashboard"
-                            iconButton="true"
-                            tag="a"
-                            size="lg"
-                        >
-                            {{ __('general.admin') }}
-                        </x-filament::button>
-                    @else
-                        <x-filament::button
-                            href="{{ url('/login') }}"
-                            icon="tabler-login"
-                            tag="a"
-                            size="lg"
-                        >
-                            {{ __('auth.sign_in') }}
-                        </x-filament::button>
-                    @endauth
-                </div>
-            </header>
+            @include('layouts.partials.header')
 
             {{ $slot }}
+
+            @include('layouts.partials.footer')
         </main>
 
         {{-- Scripts --}}
diff --git a/resources/views/layouts/partials/footer.blade.php b/resources/views/layouts/partials/footer.blade.php
new file mode 100644
index 000000000..bca1d3815
--- /dev/null
+++ b/resources/views/layouts/partials/footer.blade.php
@@ -0,0 +1,15 @@
+<footer>
+    <div class="flex items-center justify-end">
+        <div class="flex justify-center gap-x-2">
+            @if (\App\Services\GitHub\Repository::updateAvailable())
+                <x-filament::badge>
+                    {{ __('general.update_available') }}
+                </x-filament::badge>
+            @endif
+
+            <a href="https://github.com/alexjustesen/speedtest-tracker/releases" class="underline text-sm text-gray-700 hover:text-gray-300" target="_blank" rel="noopener noreferrer">
+                {{ config('speedtest.build_version') }}
+            </a>
+        </div>
+    </div>
+</footer>
diff --git a/resources/views/layouts/partials/header.blade.php b/resources/views/layouts/partials/header.blade.php
new file mode 100644
index 000000000..b8eed7ffc
--- /dev/null
+++ b/resources/views/layouts/partials/header.blade.php
@@ -0,0 +1,78 @@
+<header class="flex flex-col gap-4 sm:flex-row sm:justify-between sm:items-center">
+    <div>
+        <h1 class="text-2xl font-bold tracking-tight text-gray-950 dark:text-white sm:text-3xl">{{ $title ?? 'Page Title' }} - {{ config('app.name') }}</h1>
+    </div>
+
+    <div class="flex items-center shrink-0 gap-4">
+        <div
+            x-data="{ theme: null }"
+            x-init="
+                theme = localStorage.getItem('theme') || 'system'
+                $watch('theme', () => {
+                    localStorage.setItem('theme', theme)
+                    const effectiveTheme = theme === 'system'
+                        ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+                        : theme
+                    if (effectiveTheme === 'dark') {
+                        document.documentElement.classList.add('dark')
+                    } else {
+                        document.documentElement.classList.remove('dark')
+                    }
+                    $dispatch('theme-changed', theme)
+                })
+            "
+            class="flex items-center gap-1 p-1 rounded-lg bg-gray-100 dark:bg-gray-800"
+        >
+            <button
+                type="button"
+                x-on:click="theme = 'light'"
+                x-bind:class="{ 'bg-white dark:bg-gray-900 shadow-sm': theme === 'light' }"
+                class="p-2 rounded-md transition-all"
+                aria-label="Light mode"
+            >
+                <x-tabler-sun class="size-4" />
+            </button>
+
+            <button
+                type="button"
+                x-on:click="theme = 'dark'"
+                x-bind:class="{ 'bg-white dark:bg-gray-900 shadow-sm': theme === 'dark' }"
+                class="p-2 rounded-md transition-all"
+                aria-label="Dark mode"
+            >
+                <x-tabler-moon class="size-4" />
+            </button>
+
+            <button
+                type="button"
+                x-on:click="theme = 'system'"
+                x-bind:class="{ 'bg-white dark:bg-gray-900 shadow-sm': theme === 'system' }"
+                class="p-2 rounded-md transition-all"
+                aria-label="System theme"
+            >
+                <x-tabler-device-desktop class="size-4" />
+            </button>
+        </div>
+
+        @auth
+            <x-filament::button
+                href="{{ url('/admin') }}"
+                icon="tabler-layout-dashboard"
+                iconButton="true"
+                tag="a"
+                size="lg"
+            >
+                {{ __('general.admin') }}
+            </x-filament::button>
+        @else
+            <x-filament::button
+                href="{{ url('/login') }}"
+                icon="tabler-login"
+                tag="a"
+                size="lg"
+            >
+                {{ __('auth.sign_in') }}
+            </x-filament::button>
+        @endauth
+    </div>
+</header>
