fix: use native browser and desktop notifications

app/admin-api/notifications/credential-expiry/test/route.ts

@@ -30,5 +30,12 @@ export const POST = async (request: Request): Promise<Response> => {
     title: 'CodeBuddy2API 凭据提醒测试',
   });
 
+  if (delivered === 0) {
+    return Response.json(
+      { error: `No ${channel} notification client is connected` },
+      { status: 503 },
+    );
+  }
+
   return Response.json({ delivered, message: 'Test notification sent.' });
 };

app/page-shell.tsx

@@ -1,6 +1,13 @@
 'use client';
 
-import { type ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useSyncExternalStore,
+} from 'react';
 import { createStore, Provider, useAtom } from 'jotai';
 import { useHydrateAtoms } from 'jotai/utils';
 import { useLocale, useTranslations } from 'next-intl';
@@ -65,6 +72,12 @@ import { AdminHeader } from '@/app/header';
 import { type LocalePreference } from '@/lib/i18n/routing';
 import { saveLocalePreference } from '@/lib/client/preferences';
 import { useThemeAppearance } from '@/lib/client/theme';
+import {
+  getWebNotificationPermission,
+  isWebNotificationSupported,
+  showWebNotification,
+  subscribeWebNotificationPermission,
+} from '@/lib/client/web-notifications';
 
 const tabs: Array<{
   icon: typeof LayoutDashboard;
@@ -408,6 +421,11 @@ const AdminPageLayoutContent = ({
     },
     [],
   );
+  const webNotificationPermission = useSyncExternalStore(
+    subscribeWebNotificationPermission,
+    getWebNotificationPermission,
+    () => 'denied',
+  );
 
   useEffect(() => {
     if (typeof window === 'undefined' || !('EventSource' in window)) {
@@ -422,6 +440,14 @@ const AdminPageLayoutContent = ({
       }
     ).desktop;
     const desktopApp = desktop || Boolean(desktopBridge?.notify);
+
+    if (
+      !desktopApp &&
+      (!isWebNotificationSupported() || webNotificationPermission !== 'granted')
+    ) {
+      return;
+    }
+
     const source = new EventSource(
       `/admin-api/notifications/credential-expiry?channel=${desktopApp ? 'desktop' : 'web'}`,
     );
@@ -450,9 +476,7 @@ const AdminPageLayoutContent = ({
         'Notification' in window &&
         Notification.permission === 'granted'
       ) {
-        new Notification(title, { body });
-      } else {
-        showNotification('warning', body);
+        void showWebNotification(title, body);
       }
     };
 
@@ -462,7 +486,7 @@ const AdminPageLayoutContent = ({
       source.removeEventListener('credential-expiry', handleEvent);
       source.close();
     };
-  }, [desktop, showNotification]);
+  }, [desktop, showNotification, webNotificationPermission]);
 
   /*
     Nothing is dropped into the console. A file or an image dropped on the

app/settings/settings.tsx

@@ -39,6 +39,10 @@ import {
 
 import Security from './security';
 import Desktop from './desktop';
+import {
+  isWebNotificationSupported,
+  notifyWebNotificationPermissionChanged,
+} from '@/lib/client/web-notifications';
 
 export type SettingsValue = string | number | boolean | null;
 
@@ -275,11 +279,13 @@ const SettingField = ({
 
 const CredentialExpiryNotificationSettings = ({
   desktop,
+  onSave,
   onChange,
   settings,
   translations,
 }: {
   desktop: boolean;
+  onSave: () => void;
   onChange: (key: string, value: string | boolean) => void;
   settings: SettingsState;
   translations: (key: string) => string;
@@ -293,6 +299,11 @@ const CredentialExpiryNotificationSettings = ({
   >(null);
   const [webTesting, setWebTesting] = useState(false);
   const [desktopTesting, setDesktopTesting] = useState(false);
+  const browserNotificationsSupported = useSyncExternalStore(
+    () => () => undefined,
+    isWebNotificationSupported,
+    () => false,
+  );
   const token = String(settings.values.CODEBUDDY_BARK_TOKEN ?? '');
   const enabled =
     settings.values.CODEBUDDY_CREDENTIAL_EXPIRY_NOTIFICATIONS_ENABLED ===
@@ -333,8 +344,18 @@ const CredentialExpiryNotificationSettings = ({
     setWebTestResult(null);
 
     try {
-      if ('Notification' in window && Notification.permission !== 'granted') {
-        await Notification.requestPermission();
+      if (!browserNotificationsSupported) {
+        setWebTestResult('error');
+        return;
+      }
+
+      if (Notification.permission !== 'granted') {
+        const permission = await Notification.requestPermission();
+        notifyWebNotificationPermissionChanged();
+        if (permission !== 'granted') {
+          setWebTestResult('error');
+          return;
+        }
       }
 
       const response = await fetch(
@@ -419,7 +440,7 @@ const CredentialExpiryNotificationSettings = ({
             {translations('settingsPanel.desktopNotificationsDescription')}
           </p>
         </>
-      ) : (
+      ) : browserNotificationsSupported ? (
         <>
           <Flexbox align="center" distribution="space-between" horizontal>
             <span className="font-medium">
@@ -433,7 +454,9 @@ const CredentialExpiryNotificationSettings = ({
                   'Notification' in window &&
                   Notification.permission === 'default'
                 ) {
-                  void Notification.requestPermission();
+                  void Notification.requestPermission().then(() => {
+                    notifyWebNotificationPermissionChanged();
+                  });
                 }
                 onChange(
                   'CODEBUDDY_CREDENTIAL_EXPIRY_WEB_NOTIFICATIONS_ENABLED',
@@ -446,7 +469,7 @@ const CredentialExpiryNotificationSettings = ({
             {translations('settingsPanel.webNotificationsDescription')}
           </p>
         </>
-      )}
+      ) : null}
       <div>
         <label
           className="mb-2 block whitespace-normal break-words font-medium text-text-light dark:text-text-dark"
@@ -455,6 +478,7 @@ const CredentialExpiryNotificationSettings = ({
           {translations('settingsPanel.barkToken')}
         </label>
         <Input
+          disabled={!enabled}
           id="CODEBUDDY_BARK_TOKEN"
           onChange={(event) =>
             onChange('CODEBUDDY_BARK_TOKEN', event.target.value)
@@ -469,55 +493,81 @@ const CredentialExpiryNotificationSettings = ({
           </a>
         </p>
       </div>
-      <Flexbox align="center" gap={12} horizontal wrap="wrap">
-        <Button
-          disabled={testing}
-          loading={testing}
-          onClick={() => void testNotification()}
-        >
-          {translations('settingsPanel.testBark')}
-        </Button>
-        {testResult === 'success' ? (
-          <span className="text-secondary">
-            {translations('settingsPanel.testBarkSuccess')}
-          </span>
-        ) : null}
-        {testResult === 'error' ? (
-          <span className="text-secondary">
-            {translations('settingsPanel.testBarkFailed')}
-          </span>
-        ) : null}
+      {enabled ? (
+        <>
+          <Flexbox align="center" gap={12} horizontal wrap="wrap">
+            <Button
+              disabled={testing}
+              loading={testing}
+              onClick={() => void testNotification()}
+            >
+              {translations('settingsPanel.testBark')}
+            </Button>
+            {testResult === 'success' ? (
+              <span className="text-secondary">
+                {translations('settingsPanel.testBarkSuccess')}
+              </span>
+            ) : null}
+            {testResult === 'error' ? (
+              <span className="text-secondary">
+                {translations('settingsPanel.testBarkFailed')}
+              </span>
+            ) : null}
+          </Flexbox>
+        </>
+      ) : null}
+      {desktop || !browserNotificationsSupported ? null : (
+        <Flexbox align="center" gap={12} horizontal wrap="wrap">
+          <Button
+            disabled={webTesting}
+            loading={webTesting}
+            onClick={() => void testWebNotification()}
+          >
+            {translations('settingsPanel.testWebNotification')}
+          </Button>
+          {webTestResult === 'success' ? (
+            <span className="text-secondary">
+              {translations('settingsPanel.testWebNotificationSuccess')}
+            </span>
+          ) : null}
+          {webTestResult === 'error' ? (
+            <span className="text-secondary">
+              {translations('settingsPanel.testWebNotificationFailed')}
+            </span>
+          ) : null}
+        </Flexbox>
+      )}
+      {desktop ? (
+        <Flexbox align="center" gap={12} horizontal wrap="wrap">
+          <Button
+            disabled={desktopTesting}
+            loading={desktopTesting}
+            onClick={() => void testDesktopNotification()}
+          >
+            {translations('settingsPanel.testDesktopNotification')}
+          </Button>
+          {webTestResult === 'success' ? (
+            <span className="text-secondary">
+              {translations('settingsPanel.testDesktopNotificationSuccess')}
+            </span>
+          ) : null}
+          {webTestResult === 'error' ? (
+            <span className="text-secondary">
+              {translations('settingsPanel.testDesktopNotificationFailed')}
+            </span>
+          ) : null}
+        </Flexbox>
+      ) : null}
+      <Flexbox horizontal>
         <Button
-          disabled={desktop ? desktopTesting : webTesting}
-          loading={desktop ? desktopTesting : webTesting}
-          onClick={() =>
-            void (desktop ? testDesktopNotification() : testWebNotification())
-          }
+          disabled={settings.saving}
+          icon={Save}
+          loading={settings.saving}
+          onClick={onSave}
+          type="primary"
         >
-          {translations(
-            desktop
-              ? 'settingsPanel.testDesktopNotification'
-              : 'settingsPanel.testWebNotification',
-          )}
+          {translations('common.save')}
         </Button>
-        {webTestResult === 'success' ? (
-          <span className="text-secondary">
-            {translations(
-              desktop
-                ? 'settingsPanel.testDesktopNotificationSuccess'
-                : 'settingsPanel.testWebNotificationSuccess',
-            )}
-          </span>
-        ) : null}
-        {webTestResult === 'error' ? (
-          <span className="text-secondary">
-            {translations(
-              desktop
-                ? 'settingsPanel.testDesktopNotificationFailed'
-                : 'settingsPanel.testWebNotificationFailed',
-            )}
-          </span>
-        ) : null}
       </Flexbox>
     </Block>
   );
@@ -1048,6 +1098,7 @@ const Settings = ({
       </Block>
       <CredentialExpiryNotificationSettings
         desktop={desktopApp}
+        onSave={onSave}
         onChange={onChange}
         settings={settings}
         translations={translations}