interface: do not mark unread on navigate

pkg/interface/src/views/apps/notifications/graph.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode, useCallback } from "react";
 import moment from "moment";
 import { Row, Box, Col, Text, Anchor, Icon, Action } from "@tlon/indigo-react";
-import { Link } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import _ from "lodash";
 import {
   Post,
@@ -83,10 +83,10 @@ const GraphNodeContent = ({ contents, mod, description, index }) => {
       return (
         <Col>
           <Box mb="2" fontWeight="500">
-            {header}
+            <Text>{header}</Text>
           </Box>
           <Box overflow="hidden" maxHeight="400px">
-            {snippet}
+            <Text lineHeight="tall">{snippet}</Text>
             <FilterBox
               width="100%"
               zIndex="1"
@@ -123,8 +123,11 @@ const GraphNode = ({
   index,
   graph,
   group,
+  read,
+  onRead
 }) => {
   author = deSig(author);
+  const history = useHistory();
 
   const img = (
     <Sigil
@@ -138,36 +141,41 @@ const GraphNode = ({
 
   const nodeUrl = getNodeUrl(mod, group, graph, index);
 
+  const onClick = useCallback(() => {
+    if(!read) {
+      onRead();
+    }
+    history.push(nodeUrl);
+  }, [read, onRead]);
+
   return (
-    <Link to={nodeUrl}>
+    <Row onClick={onClick} gapX="2" pt="2">
-      <Row gapX="2" pt="2">
+      <Col>{img}</Col>
-        <Col>{img}</Col>
+      <Col alignItems="flex-start">
-        <Col alignItems="flex-start">
+        <Row
-          <Row
+          mb="2"
-            mb="2"
+          height="16px"
-            height="16px"
+          alignItems="center"
-            alignItems="center"
+          p="1"
-            p="1"
+          backgroundColor="white"
-            backgroundColor="white"
+        >
-          >
+          <Text mono title={author}>
-            <Text mono title={author}>
+            {cite(author)}
-              {cite(author)}
+          </Text>
-            </Text>
+          <Text ml="2" gray>
-            <Text ml="2" gray>
+            {moment(time).format("HH:mm")}
-              {moment(time).format("HH:mm")}
+          </Text>
-            </Text>
+        </Row>
-          </Row>
+        <Row p="1">
-          <Row p="1">
+          <GraphNodeContent
-            <GraphNodeContent
+            contents={contents}
-              contents={contents}
+            mod={mod}
-              mod={mod}
+            description={description}
-              description={description}
+            index={index}
-              index={index}
+          />
-            />
+        </Row>
-          </Row>
+      </Col>
-        </Col>
+    </Row>
-      </Row>
-    </Link>
   );
 };
 
@@ -199,8 +207,9 @@ export function GraphNotification(props: {
   }, [api, timebox, index, read]);
 
   return (
-    <Col onClick={onClick} p="2">
+    <Col p="2">
       <Header
+        onClick={onClick}
         archived={props.archived}
         time={time}
         read={read}
@@ -223,6 +232,8 @@ export function GraphNotification(props: {
             index={content.index}
             graph={graph}
             group={group}
+            read={read}
+            onRead={onClick}
           />
         ))}
       </Col>

pkg/interface/src/views/apps/notifications/header.tsx

@@ -37,7 +37,7 @@ export function Header(props: {
   read: boolean;
   associations: Associations;
   chat?: boolean;
-}) {
+} & PropFunc<typeof Row> ) {
   const { description, channel, group, moduleIcon, read } = props;
   const contacts = props.contacts[group] || {};
 
@@ -71,7 +71,7 @@ export function Header(props: {
     channel;
 
   return (
-    <Row p="2" flexWrap="wrap" gapX="1" alignItems="center">
+    <Row onClick={props.onClick} p="2" flexWrap="wrap" gapX="1" alignItems="center">
       {!props.archived && (
         <Icon
           display="block"