notifications: refining language, dnd prevents badge and browser notify, still get hark state

pkg/grid/src/nav/NotificationsLink.tsx

@@ -6,11 +6,20 @@ import { Bullet } from '../components/icons/Bullet';
 import { Cross } from '../components/icons/Cross';
 import { useHarkStore } from '../state/hark';
 import { useLeapStore } from './Nav';
+import { SettingsState, useSettingsState } from '../state/settings';
 
 type NotificationsState = 'empty' | 'unread' | 'attention-needed' | 'open';
 
-function getNotificationsState(isOpen: boolean, box: Timebox): NotificationsState {
+function getNotificationsState(isOpen: boolean, box: Timebox, dnd: boolean): NotificationsState {
   const notifications = Object.values(box);
+  if (isOpen) {
+    return 'open';
+  }
+
+  if (dnd) {
+    return 'empty';
+  }
+
   if (
     notifications.filter(
       ({ bin }) => bin.place.desk === window.desk && ['/lag', 'blocked'].includes(bin.place.path)
@@ -18,9 +27,6 @@ function getNotificationsState(isOpen: boolean, box: Timebox): NotificationsStat
   ) {
     return 'attention-needed';
   }
-  if (isOpen) {
-    return 'open';
-  }
 
   // TODO: when real structure, this should be actually be unread not just existence
   if (notifications.length > 0) {
@@ -36,13 +42,16 @@ type NotificationsLinkProps = Omit<LinkProps<HTMLAnchorElement>, 'to'> & {
   shouldDim: boolean;
 };
 
+const selDnd = (s: SettingsState) => s.display.doNotDisturb;
+
 export const NotificationsLink = ({
   navOpen,
   notificationsOpen,
   shouldDim
 }: NotificationsLinkProps) => {
   const unseen = useHarkStore((s) => s.unseen);
-  const state = getNotificationsState(notificationsOpen, unseen);
+  const dnd = useSettingsState(selDnd);
+  const state = getNotificationsState(notificationsOpen, unseen, dnd);
   const select = useLeapStore((s) => s.select);
   const clearSelection = useCallback(() => select(null), [select]);
 

pkg/grid/src/nav/preferences/NotificationPrefs.tsx

@@ -32,6 +32,7 @@ export const NotificationPrefs = () => {
   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);
@@ -53,37 +54,25 @@ export const NotificationPrefs = () => {
     <>
       <h2 className="h3 mb-7">Notifications</h2>
       <div className="space-y-3">
-        <Setting
-          on={doNotDisturb}
-          toggle={toggleDnd}
-          name="Do Not Disturb"
-          disabled={doNotDisturb && !secure}
-        >
+        <Setting on={doNotDisturb} toggle={toggleDnd} name="Do Not Disturb">
           <p>
-            Block visual desktop notifications whenever Urbit software produces a notification
-            badge.
-          </p>
-          <p>
-            Turning this &quot;off&quot; will prompt your browser to ask if you&apos;d like to
-            enable notifications
-            {!secure && (
-              <>
-                , <strong className="text-orange-500">requires HTTPS</strong>
-              </>
-            )}
+            Blocks Urbit notifications in Landscape from appearing as badges and prevents browser
+            notifications if enabled.
           </p>
         </Setting>
         <Setting
           on={browserNotifications}
           toggle={toggleNotifications}
-          name="Show desktop notifications"
-          disabled={!secure}
+          name="Show Desktop Notifications"
+          disabled={!notificationsAllowed}
         >
           <p>
             Show desktop notifications in this browser.
             {!secure && (
               <>
-                , <strong className="text-orange-500">requires HTTPS</strong>
+                <strong className="text-orange-500">
+                  Unavailable with this browser/connection.
+                </strong>
               </>
             )}
           </p>

pkg/grid/src/state/hark.ts

@@ -127,24 +127,24 @@ export const useHarkStore = createState<HarkState>(
       createSubscription('hark-store', '/updates', (u) => {
         /* eslint-ignore-next-line camelcase */
         unstable_batchedUpdates(() => {
-          reduceHark(u, useSettingsState.getState().display.doNotDisturb);
+          reduceHark(u);
         });
       })
   ]
 );
 
-function reduceHark(u: any, dnd = false) {
+function reduceHark(u: any) {
   const { set } = useHarkStore.getState();
   if (!u) {
     return;
   }
   if ('more' in u) {
     u.more.forEach((upd: any) => {
-      reduceHark(upd, dnd);
+      reduceHark(upd);
     });
   } else if ('all-stats' in u) {
     // TODO: probably ignore?
-  } else if ('added' in u && !dnd) {
+  } else if ('added' in u) {
     set((draft) => {
       const { bin } = u.added;
       const binId = harkBinToId(bin);
@@ -241,12 +241,12 @@ api.subscribe({
   path: '/notes',
   event: (u: any) => {
     if ('add-note' in u) {
-      const { browserSettings } = useSettingsState.getState();
+      const { browserSettings, display } = useSettingsState.getState();
       const { browserId } = useLocalState.getState();
       const settings = parseBrowserSettings(browserSettings.settings);
       const browserNotifications = getBrowserSetting(settings, browserId)?.browserNotifications;
 
-      if (!browserNotifications) {
+      if (!browserNotifications || display.doNotDisturb) {
         return;
       }
       const { bin, body } = u['add-note'];