Update override badge for region routing

This commit is contained in:
Jack Kingsman
2026-03-10 19:26:31 -07:00
parent 3e7e0669c5
commit 42ca242ee1
4 changed files with 42 additions and 12 deletions

View File

@@ -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') && (

View File

@@ -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%;

View File

@@ -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', () => {

View File

@@ -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%;