From fe1d15090aa7a135faf41721c7c11f87592fd211 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Wed, 24 Jun 2026 13:19:00 +0200
Subject: [PATCH] feat: hide all demo badges when demo mode is disabled

---
 shop/app/admin/layout.tsx         |  9 +++++---
 shop/components/DemoWrapper.tsx   | 34 +++++++++++++++++++++++++++++++
 shop/components/HeaderWrapper.tsx | 15 ++++++++------
 shop/components/NavbarClient.tsx  | 21 ++++++-------------
 4 files changed, 55 insertions(+), 24 deletions(-)
 create mode 100644 shop/components/DemoWrapper.tsx

diff --git a/shop/app/admin/layout.tsx b/shop/app/admin/layout.tsx
index b64c7ae..1c00dc9 100644
--- a/shop/app/admin/layout.tsx
+++ b/shop/app/admin/layout.tsx
@@ -3,6 +3,7 @@ import { LayoutDashboard, Package, Settings, Users, LogOut, LayoutGrid, Shopping
 import { redirect } from 'next/navigation'
 import { createClient } from '@/lib/supabase/server'
 import { AdminLogoutButton } from '@/components/admin/logout-menu-item'
+import { DemoWrapper } from '@/components/DemoWrapper'
 
 export default async function AdminLayout({
   children,
@@ -67,9 +68,11 @@ export default async function AdminLayout({
           <AdminLogoutButton />
           <div className="px-3 pt-2 flex items-center gap-2 border-t border-white/5 opacity-60">
             <span className="font-bold text-sm tracking-tighter text-white">CASPOS Store</span>
-            <span className="text-[10px] bg-amber-500/20 text-amber-400 px-2 py-0.5 rounded-full font-semibold uppercase tracking-wider border border-amber-500/30">
-              Demo
-            </span>
+            <DemoWrapper>
+              <span className="text-[10px] bg-amber-500/20 text-amber-400 px-2 py-0.5 rounded-full font-semibold uppercase tracking-wider border border-amber-500/30">
+                Demo
+              </span>
+            </DemoWrapper>
           </div>
         </div>
       </aside>
diff --git a/shop/components/DemoWrapper.tsx b/shop/components/DemoWrapper.tsx
new file mode 100644
index 0000000..1f62dd8
--- /dev/null
+++ b/shop/components/DemoWrapper.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface DemoWrapperProps {
+  children: React.ReactNode;
+}
+
+export function DemoWrapper({ children }: DemoWrapperProps) {
+  const [showDemo, setShowDemo] = useState<boolean>(true);
+  const [isMounted, setIsMounted] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+    const checkDemo = () => {
+      const disabled = localStorage.getItem('demo_banner_disabled') === 'true';
+      setShowDemo(!disabled);
+    };
+
+    checkDemo();
+    window.addEventListener('storage_demo_changed', checkDemo);
+    return () => window.removeEventListener('storage_demo_changed', checkDemo);
+  }, []);
+
+  if (!isMounted) {
+    return <>{children}</>;
+  }
+
+  if (!showDemo) {
+    return null;
+  }
+
+  return <>{children}</>;
+}
diff --git a/shop/components/HeaderWrapper.tsx b/shop/components/HeaderWrapper.tsx
index b080694..ad9dadc 100644
--- a/shop/components/HeaderWrapper.tsx
+++ b/shop/components/HeaderWrapper.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { usePathname } from "next/navigation";
+import { DemoWrapper } from "./DemoWrapper";
 
 interface HeaderWrapperProps {
   navbar: React.ReactNode;
@@ -18,12 +19,14 @@ export function HeaderWrapper({ navbar, children }: HeaderWrapperProps) {
   return (
     <div className="flex flex-col min-h-screen bg-slate-50 text-slate-900 dark:bg-[#020617] dark:text-white">
       {/* Demo Banner */}
-      <div
-        id="demo-banner"
-        className="bg-amber-500/10 border-b border-amber-500/20 py-2 px-4 text-center text-xs text-amber-600 dark:text-amber-400 font-medium tracking-wide z-50"
-      >
-        ⚠️ Dies ist eine **Demo-Webseite (Dummy-Shop)**. Es werden keine echten Bestellungen verarbeitet oder Zahlungen abgewickelt.
-      </div>
+      <DemoWrapper>
+        <div
+          id="demo-banner"
+          className="bg-amber-500/10 border-b border-amber-500/20 py-2 px-4 text-center text-xs text-amber-600 dark:text-amber-400 font-medium tracking-wide z-50"
+        >
+          ⚠️ Dies ist eine **Demo-Webseite (Dummy-Shop)**. Es werden keine echten Bestellungen verarbeitet oder Zahlungen abgewickelt.
+        </div>
+      </DemoWrapper>
 
       {navbar}
       
diff --git a/shop/components/NavbarClient.tsx b/shop/components/NavbarClient.tsx
index ea8319a..83f052c 100644
--- a/shop/components/NavbarClient.tsx
+++ b/shop/components/NavbarClient.tsx
@@ -9,6 +9,7 @@ import { Rocket, Menu, X, User as UserIcon, LogOut } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { signOut } from "@/lib/actions/auth";
 import { resolveSupabaseUrl } from "@/lib/utils";
+import { DemoWrapper } from "./DemoWrapper";
 
 interface NavbarClientProps {
   user: User | null;
@@ -71,18 +72,6 @@ export function NavbarClient({ user, role = "partner" }: NavbarClientProps) {
     };
   }, [supabase]);
 
-  useEffect(() => {
-    const checkBanner = () => {
-      const disabled = localStorage.getItem('demo_banner_disabled') === 'true';
-      const banner = document.getElementById('demo-banner');
-      if (banner) banner.style.display = disabled ? 'none' : 'block';
-    };
-
-    checkBanner();
-    window.addEventListener('storage_demo_changed', checkBanner);
-    return () => window.removeEventListener('storage_demo_changed', checkBanner);
-  }, []);
-
   const handleSignOut = async () => {
     try {
       await signOut();
@@ -101,9 +90,11 @@ export function NavbarClient({ user, role = "partner" }: NavbarClientProps) {
       <header className="px-4 lg:px-6 h-16 flex items-center justify-between border-b border-white/5 backdrop-blur-md sticky top-0 z-50 bg-[#020617]/85">
         <Link className="flex items-center justify-center gap-2 group" href="/">
           <span className="font-bold text-xl tracking-tighter text-white">CASPOS Store</span>
-          <span className="text-[10px] bg-amber-500/20 text-amber-400 px-2 py-0.5 rounded-full font-semibold uppercase tracking-wider border border-amber-500/30">
-            Demo
-          </span>
+          <DemoWrapper>
+            <span className="text-[10px] bg-amber-500/20 text-amber-400 px-2 py-0.5 rounded-full font-semibold uppercase tracking-wider border border-amber-500/30">
+              Demo
+            </span>
+          </DemoWrapper>
         </Link>
 
         {/* Desktop Navigation */}