Clean up notifs, use browser for notif preferences

ui/src/app.tsx

@@ -17,7 +17,6 @@ import useContactState from './state/contact';
 import api from './state/api';
 import { useMedia } from './logic/useMedia';
 import {
-  useBrowserNotifications,
   useSettingsState,
   useTheme,
 } from './state/settings';
@@ -26,8 +25,7 @@ import { ErrorAlert } from './components/ErrorAlert';
 import { useErrorHandler } from './logic/useErrorHandler';
 import useHarkState from './state/hark';
 import { useNotifications } from './nav/notifications/useNotifications';
-import { getNotificationType } from './nav/notifications/Notification';
-import { isYarnShip } from './state/hark-types';
+import { makeBrowserNotification } from './logic/utils';
 
 const getNoteRedirect = (path: string) => {
   if (path.startsWith('/desk/')) {
@@ -59,22 +57,19 @@ const AppRoutes = () => {
   const handleError = useErrorHandler();
   const browserId = useBrowserId();
   const { count, unreadNotifications } = useNotifications();
-  const browserNotifications = useBrowserNotifications(browserId);
 
   useEffect(() => {
-    if (count > 0 && browserNotifications && 'Notification' in window) {
-      unreadNotifications.forEach((bin) => {
-        const rope = bin.topYarn?.rope;
-        // need to capitalize desk name
-        const app = rope?.desk.slice(0, 1).toUpperCase() + rope?.desk.slice(1);
-        const type = getNotificationType(rope);
-        const ship = bin.topYarn?.con.find(isYarnShip)?.ship;
-        new Notification(`Landscape: ${app}`, {
-          body: `${ship}${bin.topYarn.con[1]}${bin.topYarn.con[2]}`,
+    if ('Notification' in window) {
+      if (count > 0 && Notification.permission === 'granted') {
+        unreadNotifications.forEach((bin) => {
+          makeBrowserNotification(bin);
         });
-      });
+      }
+      if (count > 0 && Notification.permission === 'default') {
+        Notification.requestPermission();
+      }
     }
-  }, [count, browserNotifications, unreadNotifications]);
+  }, [count, unreadNotifications]);
 
   useEffect(() => {
     getId().then((value) => {

ui/src/logic/utils.ts

@@ -0,0 +1,16 @@
+import { isYarnEmph, isYarnShip } from '../state/hark-types';
+import { findLast } from 'lodash';
+import { Bin } from '../nav/notifications/useNotifications';
+
+export const makeBrowserNotification = (bin: Bin) => {
+  const rope = bin.topYarn?.rope;
+  // need to capitalize desk name
+  const app = rope?.desk.slice(0, 1).toUpperCase() + rope?.desk.slice(1);
+  const ship = bin.topYarn?.con.find(isYarnShip)?.ship || '';
+  const emph = bin.topYarn?.con.find(isYarnEmph)?.emph || '';
+  const emphLast = findLast(bin.topYarn?.con, isYarnEmph)?.emph || '';
+
+  new Notification(`Landscape: ${app}`, {
+    body: `${ship}${emph}${bin.topYarn.con[1]}${emphLast}`,
+  });
+};

ui/src/preferences/NotificationPrefs.tsx

@@ -1,12 +1,8 @@
 import React from 'react';
 import { Setting } from '../components/Setting';
-import { useBrowserId } from '../state/local';
 import {
   useSettingsState,
-  useBrowserNotifications,
-  useBrowserSettings,
   SettingsState,
-  setBrowserSetting
 } from '../state/settings';
 
 const selDnd = (s: SettingsState) => s.display.doNotDisturb;
@@ -18,27 +14,6 @@ async function toggleDnd() {
 
 export const NotificationPrefs = () => {
   const doNotDisturb = useSettingsState(selDnd);
-  const settings = useBrowserSettings();
-  const browserId = useBrowserId();
-  const browserNotifications = useBrowserNotifications(browserId);
-  const secure = window.location.protocol === 'https:' || window.location.hostname === 'localhost';
-  const notificationsAllowed = secure && 'Notification' in window;
-
-  const setBrowserNotifications = (setting: boolean) => {
-    const newSettings = setBrowserSetting(settings, { browserNotifications: setting }, browserId);
-    useSettingsState
-      .getState()
-      .putEntry('browserSettings', 'settings', JSON.stringify(newSettings));
-  };
-
-  const toggleNotifications = async () => {
-    if (!browserNotifications) {
-      Notification.requestPermission();
-      setBrowserNotifications(true);
-    } else {
-      setBrowserNotifications(false);
-    }
-  };
 
   return (
     <>
@@ -50,23 +25,6 @@ export const NotificationPrefs = () => {
             prevents browser notifications if enabled.
           </p>
         </Setting>
-        <Setting
-          on={browserNotifications}
-          toggle={toggleNotifications}
-          name="Show Desktop Notifications"
-          disabled={!notificationsAllowed}
-        >
-          <p className="leading-5">
-            Show desktop notifications in this browser.
-            {!secure && (
-              <>
-                <strong className="text-orange-500">
-                  {" Unavailable with this browser/connection."}
-                </strong>
-              </>
-            )}
-          </p>
-        </Setting>
         {/* <Setting on={mentions} toggle={toggleMentions} name="Mentions">
           <p>Notify me if someone mentions my @p in a channel I&apos;ve joined</p>
         </Setting> */}

ui/src/state/hark-types.ts

@@ -35,6 +35,10 @@ export function isYarnShip(obj: YarnContent): obj is YarnContentShip {
   return typeof obj !== 'string' && 'ship' in obj;
 }
 
+export function isYarnEmph(obj: YarnContent): obj is YarnContentEmphasis {
+  return typeof obj !== 'string' && 'emph' in obj;
+}
+
 export interface Rope {
   group: Flag | null;
   channel: Flag | null;