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,9 +141,15 @@ 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 gapX="2" pt="2">
+    <Row onClick={onClick} gapX="2" pt="2">
       <Col>{img}</Col>
       <Col alignItems="flex-start">
         <Row
@@ -167,7 +176,6 @@ const GraphNode = ({
         </Row>
       </Col>
     </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"