From 42ca242ee15961ea9ea8fcd4d28d03f5896c18de Mon Sep 17 00:00:00 2001
From: Jack Kingsman <jack.kingsman@gmail.com>
Date: Tue, 10 Mar 2026 19:26:31 -0700
Subject: [PATCH] Update override badge for region routing

---
 frontend/src/components/ChatHeader.tsx        | 44 ++++++++++++++-----
 frontend/src/index.css                        |  1 +
 .../src/test/chatHeaderKeyVisibility.test.tsx |  4 +-
 frontend/src/themes.css                       |  5 +++
 4 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/ChatHeader.tsx b/frontend/src/components/ChatHeader.tsx
index 2dbbaaf..3cba0b2 100644
--- a/frontend/src/components/ChatHeader.tsx
+++ b/frontend/src/components/ChatHeader.tsx
@@ -55,6 +55,12 @@ export function ChatHeader({
     conversation.type === 'channel'
       ? channels.find((channel) => channel.key === conversation.id)
       : undefined;
+  const activeFloodScopeOverride =
+    conversation.type === 'channel' ? (activeChannel?.flood_scope_override ?? null) : null;
+  const activeFloodScopeLabel = activeFloodScopeOverride
+    ? stripRegionScopePrefix(activeFloodScopeOverride)
+    : null;
+  const activeFloodScopeDisplay = activeFloodScopeOverride ? activeFloodScopeOverride : null;
   const isPrivateChannel = conversation.type === 'channel' && !activeChannel?.is_hashtag;
 
   const titleClickable =
@@ -73,7 +79,7 @@ export function ChatHeader({
     if (conversation.type !== 'channel' || !onSetChannelFloodScopeOverride) return;
     const nextValue = window.prompt(
       'Enter regional override flood scope for this room. This temporarily changes the radio flood scope before send and restores it after, which significantly slows room sends. Leave blank to clear.',
-      stripRegionScopePrefix(activeChannel?.flood_scope_override)
+      activeFloodScopeLabel ?? ''
     );
     if (nextValue === null) return;
     onSetChannelFloodScopeOverride(conversation.id, nextValue);
@@ -172,12 +178,6 @@ export function ChatHeader({
                 </span>
               )}
             </span>
-            {conversation.type === 'channel' && activeChannel?.flood_scope_override && (
-              <span className="min-w-0 basis-full text-[11px] text-amber-700 dark:text-amber-300 truncate">
-                Regional override active:{' '}
-                {stripRegionScopePrefix(activeChannel.flood_scope_override)}
-              </span>
-            )}
             {conversation.type === 'contact' &&
               (() => {
                 const contact = contacts.find((c) => c.public_key === conversation.id);
@@ -193,9 +193,25 @@ export function ChatHeader({
                 );
               })()}
           </span>
+          {conversation.type === 'channel' && activeFloodScopeDisplay && (
+            <button
+              className="mt-0.5 flex items-center gap-1 text-left sm:hidden"
+              onClick={handleEditFloodScopeOverride}
+              title="Set regional override"
+              aria-label="Set regional override"
+            >
+              <Globe2
+                className="h-3.5 w-3.5 flex-shrink-0 text-[hsl(var(--region-override))]"
+                aria-hidden="true"
+              />
+              <span className="min-w-0 truncate text-[11px] font-medium text-[hsl(var(--region-override))]">
+                {activeFloodScopeDisplay}
+              </span>
+            </button>
+          )}
         </span>
       </span>
-      <div className="flex items-center gap-0.5 flex-shrink-0">
+      <div className="flex items-center justify-end gap-0.5 flex-shrink-0">
         {conversation.type === 'contact' && (
           <button
             className="p-1 rounded hover:bg-accent text-lg leading-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
@@ -237,12 +253,20 @@ export function ChatHeader({
         )}
         {conversation.type === 'channel' && onSetChannelFloodScopeOverride && (
           <button
-            className="p-1 rounded hover:bg-accent text-lg leading-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="flex shrink-0 items-center gap-1 rounded px-1 py-1 text-lg leading-none transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             onClick={handleEditFloodScopeOverride}
             title="Set regional override"
             aria-label="Set regional override"
           >
-            <Globe2 className="h-4 w-4" aria-hidden="true" />
+            <Globe2
+              className={`h-4 w-4 ${activeFloodScopeLabel ? 'text-[hsl(var(--region-override))]' : ''}`}
+              aria-hidden="true"
+            />
+            {activeFloodScopeDisplay && (
+              <span className="hidden text-[11px] font-medium text-[hsl(var(--region-override))] sm:inline">
+                {activeFloodScopeDisplay}
+              </span>
+            )}
           </button>
         )}
         {(conversation.type === 'channel' || conversation.type === 'contact') && (
diff --git a/frontend/src/index.css b/frontend/src/index.css
index ac6f493..4a1ad44 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -40,6 +40,7 @@
     --success-foreground: 0 0% 100%;
     --info: 217 91% 60%;
     --info-foreground: 0 0% 100%;
+    --region-override: 270 80% 74%;
 
     /* Favorites */
     --favorite: 43 96% 56%;
diff --git a/frontend/src/test/chatHeaderKeyVisibility.test.tsx b/frontend/src/test/chatHeaderKeyVisibility.test.tsx
index 8074164..a4e9179 100644
--- a/frontend/src/test/chatHeaderKeyVisibility.test.tsx
+++ b/frontend/src/test/chatHeaderKeyVisibility.test.tsx
@@ -111,7 +111,7 @@ describe('ChatHeader key visibility', () => {
     expect(writeText).toHaveBeenCalledWith(key);
   });
 
-  it('shows active regional override banner for channels', () => {
+  it('shows active regional override badge for channels', () => {
     const key = 'AB'.repeat(16);
     const channel = {
       ...makeChannel(key, '#flightless', true),
@@ -121,7 +121,7 @@ describe('ChatHeader key visibility', () => {
 
     render(<ChatHeader {...baseProps} conversation={conversation} channels={[channel]} />);
 
-    expect(screen.getByText('Regional override active: Esperance')).toBeInTheDocument();
+    expect(screen.getAllByText('#Esperance')).toHaveLength(2);
   });
 
   it('shows enabled notification state and toggles when clicked', () => {
diff --git a/frontend/src/themes.css b/frontend/src/themes.css
index 667386a..0d8c54b 100644
--- a/frontend/src/themes.css
+++ b/frontend/src/themes.css
@@ -35,6 +35,7 @@
   --success-foreground: 0 0% 100%;
   --info: 217 91% 48%;
   --info-foreground: 0 0% 100%;
+  --region-override: 274 78% 24%;
   --favorite: 43 96% 50%;
   --console: 153 50% 22%;
   --console-command: 153 55% 18%;
@@ -80,6 +81,7 @@
   --success-foreground: 135 100% 6%;
   --info: 185 100% 42%;
   --info-foreground: 185 100% 6%;
+  --region-override: 292 100% 68%;
   --favorite: 62 100% 52%;
   --console: 135 100% 50%;
   --console-command: 135 100% 62%;
@@ -126,6 +128,7 @@
   --success-foreground: 0 0% 100%;
   --info: 212 100% 58%;
   --info-foreground: 0 0% 100%;
+  --region-override: 286 100% 76%;
   --favorite: 43 100% 54%;
   --console: 212 100% 62%;
   --console-command: 212 100% 74%;
@@ -172,6 +175,7 @@
   --success-foreground: 0 0% 100%;
   --info: 210 50% 56%;
   --info-foreground: 0 0% 100%;
+  --region-override: 273 72% 72%;
   --favorite: 38 70% 56%;
   --console: 30 40% 58%;
   --console-command: 30 40% 70%;
@@ -267,6 +271,7 @@
   --success-foreground: 0 0% 100%;
   --info: 198 80% 54%;
   --info-foreground: 0 0% 100%;
+  --region-override: 282 100% 72%;
   --favorite: 46 100% 54%;
   --console: 338 100% 54%;
   --console-command: 338 100% 68%;