Add notifications

frontend/src/components/ChatHeader.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Globe2, Info, Route, Star, Trash2 } from 'lucide-react';
+import { Bell, Globe2, Info, Route, Star, Trash2 } from 'lucide-react';
 import { toast } from './ui/sonner';
 import { isFavorite } from '../utils/favorites';
 import { handleKeyboardActivate } from '../utils/a11y';
@@ -14,7 +14,11 @@ interface ChatHeaderProps {
   channels: Channel[];
   config: RadioConfig | null;
   favorites: Favorite[];
+  notificationsSupported: boolean;
+  notificationsEnabled: boolean;
+  notificationsPermission: NotificationPermission | 'unsupported';
   onTrace: () => void;
+  onToggleNotifications: () => void;
   onToggleFavorite: (type: 'channel' | 'contact', id: string) => void;
   onSetChannelFloodScopeOverride?: (key: string, floodScopeOverride: string) => void;
   onDeleteChannel: (key: string) => void;
@@ -29,7 +33,11 @@ export function ChatHeader({
   channels,
   config,
   favorites,
+  notificationsSupported,
+  notificationsEnabled,
+  notificationsPermission,
   onTrace,
+  onToggleNotifications,
   onToggleFavorite,
   onSetChannelFloodScopeOverride,
   onDeleteChannel,
@@ -198,6 +206,35 @@ export function ChatHeader({
             <Route className="h-4 w-4" aria-hidden="true" />
           </button>
         )}
+        {notificationsSupported && (
+          <button
+            className="flex items-center gap-1 rounded px-1 py-1 hover:bg-accent text-lg leading-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            onClick={onToggleNotifications}
+            title={
+              notificationsEnabled
+                ? 'Disable desktop notifications for this conversation'
+                : notificationsPermission === 'denied'
+                  ? 'Notifications blocked by the browser'
+                  : 'Enable desktop notifications for this conversation'
+            }
+            aria-label={
+              notificationsEnabled
+                ? 'Disable notifications for this conversation'
+                : 'Enable notifications for this conversation'
+            }
+          >
+            <Bell
+              className={`h-4 w-4 ${notificationsEnabled ? 'text-status-connected' : 'text-muted-foreground'}`}
+              fill={notificationsEnabled ? 'currentColor' : 'none'}
+              aria-hidden="true"
+            />
+            {notificationsEnabled && (
+              <span className="hidden md:inline text-[11px] font-medium text-status-connected">
+                Notifications On
+              </span>
+            )}
+          </button>
+        )}
         {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"

frontend/src/components/ConversationPane.tsx

@@ -31,6 +31,9 @@ interface ConversationPaneProps {
   rawPackets: RawPacket[];
   config: RadioConfig | null;
   health: HealthStatus | null;
+  notificationsSupported: boolean;
+  notificationsEnabled: boolean;
+  notificationsPermission: NotificationPermission | 'unsupported';
   favorites: Favorite[];
   messages: Message[];
   messagesLoading: boolean;
@@ -54,6 +57,7 @@ interface ConversationPaneProps {
   onLoadNewer: () => Promise<void>;
   onJumpToBottom: () => void;
   onSendMessage: (text: string) => Promise<void>;
+  onToggleNotifications: () => void;
 }
 
 function LoadingPane({ label }: { label: string }) {
@@ -69,6 +73,9 @@ export function ConversationPane({
   rawPackets,
   config,
   health,
+  notificationsSupported,
+  notificationsEnabled,
+  notificationsPermission,
   favorites,
   messages,
   messagesLoading,
@@ -92,6 +99,7 @@ export function ConversationPane({
   onLoadNewer,
   onJumpToBottom,
   onSendMessage,
+  onToggleNotifications,
 }: ConversationPaneProps) {
   const activeContactIsRepeater = useMemo(() => {
     if (!activeConversation || activeConversation.type !== 'contact') return false;
@@ -155,10 +163,14 @@ export function ConversationPane({
           conversation={activeConversation}
           contacts={contacts}
           favorites={favorites}
+          notificationsSupported={notificationsSupported}
+          notificationsEnabled={notificationsEnabled}
+          notificationsPermission={notificationsPermission}
           radioLat={config?.lat ?? null}
           radioLon={config?.lon ?? null}
           radioName={config?.name ?? null}
           onTrace={onTrace}
+          onToggleNotifications={onToggleNotifications}
           onToggleFavorite={onToggleFavorite}
           onDeleteContact={onDeleteContact}
         />
@@ -174,7 +186,11 @@ export function ConversationPane({
         channels={channels}
         config={config}
         favorites={favorites}
+        notificationsSupported={notificationsSupported}
+        notificationsEnabled={notificationsEnabled}
+        notificationsPermission={notificationsPermission}
         onTrace={onTrace}
+        onToggleNotifications={onToggleNotifications}
         onToggleFavorite={onToggleFavorite}
         onSetChannelFloodScopeOverride={onSetChannelFloodScopeOverride}
         onDeleteChannel={onDeleteChannel}

frontend/src/components/RepeaterDashboard.tsx

@@ -1,6 +1,6 @@
 import { toast } from './ui/sonner';
 import { Button } from './ui/button';
-import { Route, Star, Trash2 } from 'lucide-react';
+import { Bell, Route, Star, Trash2 } from 'lucide-react';
 import { RepeaterLogin } from './RepeaterLogin';
 import { useRepeaterDashboard } from '../hooks/useRepeaterDashboard';
 import { isFavorite } from '../utils/favorites';
@@ -25,10 +25,14 @@ interface RepeaterDashboardProps {
   conversation: Conversation;
   contacts: Contact[];
   favorites: Favorite[];
+  notificationsSupported: boolean;
+  notificationsEnabled: boolean;
+  notificationsPermission: NotificationPermission | 'unsupported';
   radioLat: number | null;
   radioLon: number | null;
   radioName: string | null;
   onTrace: () => void;
+  onToggleNotifications: () => void;
   onToggleFavorite: (type: 'channel' | 'contact', id: string) => void;
   onDeleteContact: (publicKey: string) => void;
 }
@@ -37,10 +41,14 @@ export function RepeaterDashboard({
   conversation,
   contacts,
   favorites,
+  notificationsSupported,
+  notificationsEnabled,
+  notificationsPermission,
   radioLat,
   radioLon,
   radioName,
   onTrace,
+  onToggleNotifications,
   onToggleFavorite,
   onDeleteContact,
 }: RepeaterDashboardProps) {
@@ -120,6 +128,35 @@ export function RepeaterDashboard({
           >
             <Route className="h-4 w-4" aria-hidden="true" />
           </button>
+          {notificationsSupported && (
+            <button
+              className="flex items-center gap-1 rounded px-1 py-1 hover:bg-accent text-lg leading-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              onClick={onToggleNotifications}
+              title={
+                notificationsEnabled
+                  ? 'Disable desktop notifications for this conversation'
+                  : notificationsPermission === 'denied'
+                    ? 'Notifications blocked by the browser'
+                    : 'Enable desktop notifications for this conversation'
+              }
+              aria-label={
+                notificationsEnabled
+                  ? 'Disable notifications for this conversation'
+                  : 'Enable notifications for this conversation'
+              }
+            >
+              <Bell
+                className={`h-4 w-4 ${notificationsEnabled ? 'text-status-connected' : 'text-muted-foreground'}`}
+                fill={notificationsEnabled ? 'currentColor' : 'none'}
+                aria-hidden="true"
+              />
+              {notificationsEnabled && (
+                <span className="hidden md:inline text-[11px] font-medium text-status-connected">
+                  Notifications On
+                </span>
+              )}
+            </button>
+          )}
           <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"
             onClick={() => onToggleFavorite('contact', conversation.id)}