From bc3db4382f7198fc70792a02f0f126c18e58cac4 Mon Sep 17 00:00:00 2001
From: Danish Arora <danisharora099@gmail.com>
Date: Wed, 19 Nov 2025 01:37:06 -0500
Subject: [PATCH] chore: add remix banner

---
 app/src/components/Header.tsx      |  4 ++
 app/src/components/RemixBanner.tsx | 81 ++++++++++++++++++++++++++++++
 2 files changed, 85 insertions(+)
 create mode 100644 app/src/components/RemixBanner.tsx

diff --git a/app/src/components/Header.tsx b/app/src/components/Header.tsx
index a4568f3..d97c592 100644
--- a/app/src/components/Header.tsx
+++ b/app/src/components/Header.tsx
@@ -34,6 +34,7 @@ import { useToast } from '@/components/ui/use-toast';
 import { useEthereumWallet } from '@opchan/react';
 import { WalletWizard } from '@/components/ui/wallet-wizard';
 import { CallSignSetupDialog } from '@/components/ui/call-sign-setup-dialog';
+import RemixBanner from '@/components/RemixBanner';
 
 
 const Header = () => {
@@ -259,6 +260,9 @@ const Header = () => {
         </div>
       </header>
 
+      {/* Remix Banner */}
+      <RemixBanner />
+
       {/* Wallet Wizard */}
       <WalletWizard
         open={walletWizardOpen}
diff --git a/app/src/components/RemixBanner.tsx b/app/src/components/RemixBanner.tsx
new file mode 100644
index 0000000..2142be8
--- /dev/null
+++ b/app/src/components/RemixBanner.tsx
@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { X, Users, Code } from 'lucide-react';
+import { useUIState } from '@/hooks';
+
+const RemixBanner = () => {
+  const [isDismissed, setIsDismissed] = useUIState('remixBannerDismissed', false);
+  const [activeTab, setActiveTab] = useState<'users' | 'devs'>('users');
+
+  if (isDismissed) return null;
+
+  return (
+    <div className="bg-gradient-to-r from-primary/10 to-primary/5 border-b border-primary/30">
+      <div className="max-w-6xl mx-auto px-2 py-2">
+        <div className="flex items-center justify-between gap-4">
+          {/* Tab Toggle */}
+          <div className="flex items-center gap-2 text-[10px]">
+            <button
+              onClick={() => setActiveTab('users')}
+              className={`flex items-center gap-1 px-2 py-1 border transition-colors ${
+                activeTab === 'users'
+                  ? 'border-primary text-primary bg-primary/10'
+                  : 'border-border text-muted-foreground hover:text-foreground hover:border-primary/50'
+              }`}
+            >
+              <Users className="w-3 h-3" />
+              <span className="hidden sm:inline">USERS</span>
+            </button>
+            <button
+              onClick={() => setActiveTab('devs')}
+              className={`flex items-center gap-1 px-2 py-1 border transition-colors ${
+                activeTab === 'devs'
+                  ? 'border-primary text-primary bg-primary/10'
+                  : 'border-border text-muted-foreground hover:text-foreground hover:border-primary/50'
+              }`}
+            >
+              <Code className="w-3 h-3" />
+              <span className="hidden sm:inline">DEVS</span>
+            </button>
+          </div>
+
+          {/* Message Content */}
+          <div className="flex-1 text-[10px] text-foreground">
+            {activeTab === 'users' ? (
+              <p>
+                <span className="text-primary font-semibold">REMIX THIS:</span>{' '}
+                <span className="text-muted-foreground">Use it • Create cells • Post comments • Shape the conversation</span>
+              </p>
+            ) : (
+              <p>
+                <span className="text-primary font-semibold">BUILD YOUR OWN:</span>{' '}
+                <span className="text-muted-foreground">
+                  Write your own UI with the forum library •{' '}
+                  <a 
+                    href="https://opchan.app/docs" 
+                    target="_blank" 
+                    rel="noopener noreferrer"
+                    className="text-primary hover:underline"
+                  >
+                    Docs (WIP)
+                  </a>
+                </span>
+              </p>
+            )}
+          </div>
+
+          {/* Dismiss Button */}
+          <button
+            onClick={() => setIsDismissed(true)}
+            className="text-muted-foreground hover:text-foreground transition-colors p-1"
+            aria-label="Dismiss banner"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RemixBanner;
+