grid: archive notifications without following

Fixes urbit/landscape#1172

pkg/grid/src/nav/notifications/BasicNotification.tsx

@@ -8,6 +8,7 @@ import { ShipName } from '../../components/ShipName';
 import { DeskLink } from '../../components/DeskLink';
 import { useHarkStore } from '../../state/hark';
 import { DocketImage } from '../../components/DocketImage';
+import { Button } from '../../components/Button';
 
 interface BasicNotificationProps {
   notification: Notification;
@@ -45,13 +46,19 @@ export const BasicNotification = ({ notification, lid }: BasicNotificationProps)
     useHarkStore.getState().archiveNote(notification.bin, lid);
   };
 
+  const archiveNoFollow = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    archive();
+  };
+
   return (
     <DeskLink
       onClick={archive}
       to={`?grid-note=${encodeURIComponent(first.link)}`}
       desk={desk}
       className={cn(
-        'text-black rounded-xl',
+        'text-black rounded-xl group',
         'unseen' in lid ? 'bg-blue-100' : 'bg-gray-50',
         large ? 'note-grid-no-content' : 'note-grid-content'
       )}
@@ -64,6 +71,9 @@ export const BasicNotification = ({ notification, lid }: BasicNotificationProps)
         <h2 id={`${id}-title`} className="note-grid-head font-semibold text-gray-600">
           <NotificationText contents={first.title} />
         </h2>
+        <div className="note-grid-actions hidden justify-center self-center group-hover:flex">
+          <Button onClick={archiveNoFollow}>Archive</Button>
+        </div>
       </header>
       {contents.length > 0 ? (
         <div className="note-grid-body space-y-2">

pkg/grid/src/state/hark.ts

@@ -84,6 +84,14 @@ export const useHarkStore = createState<HarkState>(
       await api.poke(archiveAll);
     },
     archiveNote: async (bin, lid) => {
+      if (useMockData) {
+        get().set((draft) => {
+          const seen = 'seen' in lid ? 'seen' : 'unseen';
+          const binId = harkBinToId(bin);
+          delete draft[seen][binId];
+        });
+        return;
+      }
       await api.poke(archive(bin, lid));
     },
     opened: async () => {

pkg/grid/src/styles/grids.css

@@ -1,13 +1,13 @@
 .note-grid-content {
   display: grid;
-  grid-template-columns: 1.5rem 1fr;
+  grid-template-columns: 1.5rem 1fr 6rem;
   grid-template-rows: 1.5rem 1.5rem;
   grid-gap: 0.5rem;
   padding: 1rem;
   grid-template-areas:
-    'icon title'
-    'arrow head'
-    '. body';
+    'icon title actions '
+    'arrow head actions'
+    '. body actions';
 }
 
 .note-grid-no-content {
@@ -15,12 +15,12 @@
   width: 100%;
   padding: 1rem;
   grid-template-rows: 1.75rem 1.75rem;
-  grid-template-columns: 3.5rem 1fr;
+  grid-template-columns: 3.5rem 1fr 6rem;
   grid-column-gap: 0.75rem;
   align-items: center;
   grid-template-areas:
-    'icon  title'
-    'icon  head';
+    'icon  title actions'
+    'icon  head actions';
 }
 .note-grid-title {
   grid-area: title;
@@ -42,4 +42,6 @@
   grid-area: head;
 }
 
-
+.note-grid-actions {
+  grid-area: actions;
+}

pkg/grid/tailwind.config.js

@@ -200,7 +200,8 @@ module.exports = {
   },
   variants: {
     extend: {
-      opacity: ['hover-none']
+      opacity: ['hover-none'],
+      display: ['group-hover']
     }
   },
   plugins: [