From 2e423445f5ec919c3ce0091df1f7da6424409f50 Mon Sep 17 00:00:00 2001
From: jeremy bayse <jeremy.bayse@gmail.com>
Date: Sun, 29 Mar 2026 10:55:52 +0200
Subject: [PATCH] feat: add visual indicator for non-production environments

---
 app/Http/Middleware/HandleInertiaRequests.php |   1 +
 public/favicon.ico                            | Bin 0 -> 15406 bytes
 resources/js/Components/EnvironmentBanner.vue |  49 ++++++++++++++++++
 resources/js/Layouts/AdminLayout.vue          |   2 +
 resources/js/Layouts/AuthenticatedLayout.vue  |   2 +
 resources/js/Layouts/GuestLayout.vue          |   2 +
 6 files changed, 56 insertions(+)
 create mode 100644 resources/js/Components/EnvironmentBanner.vue

diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
index 867ecf6..e994f59 100644
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@@ -38,6 +38,7 @@ class HandleInertiaRequests extends Middleware
                 'success' => $request->session()->get('success'),
                 'error' => $request->session()->get('error'),
             ],
+            'app_env' => config('app.env'),
         ];
     }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..b3026f2075ecf6a4af26ca8694429240dc5a4cc9 100644
GIT binary patch
literal 15406
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
C5+AGp

literal 0
HcmV?d00001

diff --git a/resources/js/Components/EnvironmentBanner.vue b/resources/js/Components/EnvironmentBanner.vue
new file mode 100644
index 0000000..1dbee9c
--- /dev/null
+++ b/resources/js/Components/EnvironmentBanner.vue
@@ -0,0 +1,49 @@
+<script setup>
+import { computed } from 'vue';
+import { usePage } from '@inertiajs/vue3';
+
+const page = usePage();
+const appEnv = computed(() => page.props.app_env);
+
+const isDevelopment = computed(() => appEnv.value !== 'production');
+
+const bannerStyles = computed(() => {
+    if (appEnv.value === 'local') {
+        return 'bg-amber-400 text-amber-950 border-amber-500/50';
+    } else if (appEnv.value === 'staging') {
+        return 'bg-blue-500 text-white border-blue-600/50';
+    }
+    return 'bg-rose-500 text-white border-rose-600/50';
+});
+
+const label = computed(() => {
+    if (appEnv.value === 'local') return 'DEV';
+    if (appEnv.value === 'staging') return 'STG';
+    return appEnv.value?.toUpperCase() || 'ENV';
+});
+</script>
+
+<template>
+    <div 
+        v-if="isDevelopment" 
+        class="fixed top-0 left-0 right-0 z-[9999] h-1 pointer-events-none shadow-sm shadow-black/10"
+        :class="bannerStyles"
+    ></div>
+    
+    <div 
+        v-if="isDevelopment"
+        class="fixed top-4 -right-12 z-[9999] pointer-events-none select-none"
+    >
+        <div 
+            class="transform rotate-45 py-1 px-14 text-[10px] font-black tracking-tighter shadow-lg border-y whitespace-nowrap text-center flex flex-col items-center justify-center leading-none"
+            :class="bannerStyles"
+        >
+            <span>ENV {{ label }}</span>
+            <span class="text-[7px] opacity-70 mt-0.5">{{ appEnv }}</span>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+/* No specific styles needed as Tailwind handles most of it, but ensure z-index is high */
+</style>
diff --git a/resources/js/Layouts/AdminLayout.vue b/resources/js/Layouts/AdminLayout.vue
index bca3454..c6980c3 100644
--- a/resources/js/Layouts/AdminLayout.vue
+++ b/resources/js/Layouts/AdminLayout.vue
@@ -4,11 +4,13 @@ import { Link } from '@inertiajs/vue3';
 import ApplicationLogo from '@/Components/ApplicationLogo.vue';
 import Dropdown from '@/Components/Dropdown.vue';
 import DropdownLink from '@/Components/DropdownLink.vue';
+import EnvironmentBanner from '@/Components/EnvironmentBanner.vue';
 
 const isSidebarOpen = ref(true);
 </script>
 
 <template>
+    <EnvironmentBanner />
     <div class="min-h-screen bg-slate-50 dark:bg-slate-900 flex text-slate-900 dark:text-slate-100">
         <!-- Sidebar -->
         <aside
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index 154305f..9bd3fda 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -6,11 +6,13 @@ import DropdownLink from '@/Components/DropdownLink.vue';
 import NavLink from '@/Components/NavLink.vue';
 import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue';
 import { Link } from '@inertiajs/vue3';
+import EnvironmentBanner from '@/Components/EnvironmentBanner.vue';
 
 const showingNavigationDropdown = ref(false);
 </script>
 
 <template>
+    <EnvironmentBanner />
     <div>
         <div class="min-h-screen bg-gray-100">
             <nav
diff --git a/resources/js/Layouts/GuestLayout.vue b/resources/js/Layouts/GuestLayout.vue
index 1b209cb..9a0a12f 100644
--- a/resources/js/Layouts/GuestLayout.vue
+++ b/resources/js/Layouts/GuestLayout.vue
@@ -1,9 +1,11 @@
 <script setup>
 import ApplicationLogo from '@/Components/ApplicationLogo.vue';
 import { Link } from '@inertiajs/vue3';
+import EnvironmentBanner from '@/Components/EnvironmentBanner.vue';
 </script>
 
 <template>
+    <EnvironmentBanner />
     <div
         class="flex min-h-screen flex-col items-center bg-gray-100 pt-6 sm:justify-center sm:pt-0"
     >