Merge pull request #4279 from tylershuster/hark/inbox-layout

notifications: fix layout

pkg/interface/src/logic/lib/util.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import _ from "lodash";
 import f, { memoize } from "lodash/fp";
 import bigInt, { BigInteger } from "big-integer";
@@ -361,4 +361,13 @@ export function pluralize(text: string, isPlural = false, vowel = false) {
 export function useShowNickname(contact: Contact | null, hide?: boolean): boolean {
   const hideNicknames = typeof hide !== 'undefined' ? hide : useLocalState(state => state.hideNicknames);
   return !!(contact && contact.nickname && !hideNicknames);
+}
+
+export function useHovering() {
+  const [hovering, setHovering] = useState(false);
+  const bind = {
+    onMouseEnter: () => setHovering(true),
+    onMouseLeave: () => setHovering(false)
+  };
+  return { hovering, bind };
 }

pkg/interface/src/logic/state/local.tsx

@@ -31,7 +31,7 @@ const useLocalState = create<LocalState>(persist((set, get) => ({
   suspendedFocus: undefined,
   toggleOmnibox: () => set(produce(state => {
     state.omniboxShown = !state.omniboxShown;
-    if (state.suspendedFocus) {
+    if (typeof state.suspendedFocus?.focus === 'function') {
       state.suspendedFocus.focus();
       state.suspendedFocus = undefined;
     } else {

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

@@ -90,6 +90,8 @@ const GraphNodeContent = ({ group, post, contacts, mod, description, index, remo
         content={contents}
         group={group}
         contacts={contacts}
+        fontSize='14px'
+        lineHeight="tall"
       />
     } else if (idx[1] === "1") {
       const [{ text: header }, { text: body }] = contents;
@@ -164,13 +166,14 @@ const GraphNode = ({
   group,
   read,
   onRead,
+  showContact = false,
   remoteContentPolicy
 }) => {
   const { contents } = post;
   author = deSig(author);
   const history = useHistory();
 
-  const img = (
+  const img = showContact ? (
     <Sigil
       ship={`~${author}`}
       size={16}
@@ -178,7 +181,7 @@ const GraphNode = ({
       color={`#000000`}
       classes="mix-blend-diff"
     />
-    );
+    ) : <Box style={{ width: '16px' }}></Box>;
 
   const groupContacts = contacts[groupPath] ?? {};
 
@@ -192,10 +195,10 @@ const GraphNode = ({
   }, [read, onRead]);
 
   return (
-    <Row onClick={onClick} gapX="2" pt="2">
+    <Row onClick={onClick} gapX="2" pt={showContact ? 2 : 0}>
       <Col>{img}</Col>
       <Col flexGrow={1} alignItems="flex-start">
-        <Row
+        {showContact && <Row
           mb="2"
           height="16px"
           alignItems="center"
@@ -208,8 +211,8 @@ const GraphNode = ({
           <Text ml="2" gray>
             {moment(time).format("HH:mm")}
           </Text>
-        </Row>
+        </Row>}
-        <Row width="100%" p="1">
+        <Row width="100%" p="1" flexDirection="column">
           <GraphNodeContent
             contacts={groupContacts}
             post={post}
@@ -253,7 +256,7 @@ export function GraphNotification(props: {
   }, [api, timebox, index, read]);
 
 return (
-    <Col flexGrow={1} width="100%" p="2">
+    <>
       <Header
         onClick={onClick}
         archived={props.archived}
@@ -267,7 +270,7 @@ return (
         description={desc}
         associations={props.associations}
       />
-      <Col flexGrow={1} width="100%" pl="5">
+      <Box flexGrow={1} width="100%" pl={5} gridArea="main">
         {_.map(contents, (content, idx) => (
           <GraphNode
             post={content}
@@ -282,9 +285,10 @@ return (
             groupPath={group}
             read={read}
             onRead={onClick}
+            showContact={idx === 0}
           />
         ))}
-      </Col>
+      </Box>
-    </Col>
+    </>
   );
 }

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Text as NormalText, Row, Icon, Rule } from "@tlon/indigo-react";
+import { Text as NormalText, Row, Icon, Rule, Box } from "@tlon/indigo-react";
 import f from "lodash/fp";
 import _ from "lodash";
 import moment from "moment";
@@ -71,11 +71,11 @@ export function Header(props: {
     channel;
 
   return (
-    <Row onClick={props.onClick} p="2" flexWrap="wrap" gapX="1" alignItems="center">
+    <Row onClick={props.onClick} p="2" flexWrap="wrap" alignItems="center" gridArea="header">
       {!props.archived && (
         <Icon
           display="block"
-          mr="1"
+          mr={2}
           icon={read ? "Circle" : "Bullet"}
           color="blue"
         />
@@ -84,13 +84,13 @@ export function Header(props: {
         {authorDesc}
       </Text>
       <Text mr="1">{description}</Text>
-      {!!moduleIcon && <Icon icon={moduleIcon as any} />}
+      {!!moduleIcon && <Icon icon={moduleIcon as any} mr={1} />}
-      {!!channel && <Text fontWeight="500">{channelTitle}</Text>}
+      {!!channel && <Text fontWeight="500" mr={1}>{channelTitle}</Text>}
-      <Rule vertical height="12px" />
+      <Rule vertical height="12px" mr={1} />
       {groupTitle &&
          <>
-          <Text fontWeight="500">{groupTitle}</Text>
+          <Text fontWeight="500" mr={1}>{groupTitle}</Text>
-          <Rule vertical height="12px"/>
+          <Rule vertical height="12px" mr={1} />
         </>
       }
       <Text fontWeight="regular" color="lightGray">

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

@@ -61,20 +61,36 @@ export default function Inbox(props: {
     };
   }, []);
 
-  const [newNotifications, ...notifications] =
+  const notifications =
     Array.from(props.showArchive ? props.archive : props.notifications) || [];
+  
+  const calendar = {
+    ...MOMENT_CALENDAR_DATE, sameDay: function (now) {
+      if (this.subtract(6, 'hours').isBefore(now)) {
+        return "[Earlier Today]";
+      } else {
+        return MOMENT_CALENDAR_DATE.sameDay;
+      }
+    }
+  };
 
-  const notificationsByDay = f.flow(
+  let notificationsByDay = f.flow(
     f.map<DatedTimebox>(([date, nots]) => [
       date,
       nots.filter(filterNotification(associations, props.filter)),
     ]),
-    f.groupBy<DatedTimebox>(([date]) =>
+    f.groupBy<DatedTimebox>(([date]) => {
-      moment(daToUnix(date)).format("DDMMYYYY")
+      date = moment(daToUnix(date));
-    ),
+      if (moment().subtract(6, 'hours').isBefore(date)) {
-    f.values,
+        return 'latest';
-    f.reverse
+      } else {
+        return date.format("YYYYMMDD");
+      }
+    }),
   )(notifications);
+  notificationsByDay = new Map(Object.keys(notificationsByDay).sort().reverse().map(timebox => {
+    return [timebox, notificationsByDay[timebox]];
+  }));
 
   useEffect(() => {
     api.hark.getMore(props.showArchive);
@@ -133,38 +149,24 @@ export default function Inbox(props: {
       <Col zIndex={4} gapY={2} bg="white" top="0px" position="sticky">
         {inviteItems(invites, api)}
       </Col>
-      {newNotifications && (
+      {[...notificationsByDay.keys()].map((day, index) => {
-        <DaySection
+        const timeboxes = notificationsByDay.get(day);
-          latest
+        return timeboxes.length > 0 && (
-          timeboxes={[newNotifications]}
+          <DaySection
-          contacts={props.contacts}
+            key={day}
-          archive={!!props.showArchive}
+            label={day === 'latest' ? 'Today' : moment(day).calendar(null, calendar)}
-          associations={props.associations}
+            timeboxes={timeboxes}
-          groups={props.groups}
+            contacts={props.contacts}
-          graphConfig={props.notificationsGraphConfig}
+            archive={!!props.showArchive}
-          groupConfig={props.notificationsGroupConfig}
+            associations={props.associations}
-          chatConfig={props.notificationsChatConfig}
+            api={api}
-          api={api}
+            groups={props.groups}
-        />
+            graphConfig={props.notificationsGraphConfig}
-      )}
+            groupConfig={props.notificationsGroupConfig}
-      {_.map(
+            chatConfig={props.notificationsChatConfig}
-        notificationsByDay,
+          />
-        (timeboxes, idx) =>
+        );
-          timeboxes.length > 0 && (
+      })}
-            <DaySection
-              key={idx}
-              timeboxes={timeboxes}
-              contacts={props.contacts}
-              archive={!!props.showArchive}
-              associations={props.associations}
-              api={api}
-              groups={props.groups}
-              graphConfig={props.notificationsGraphConfig}
-              groupConfig={props.notificationsGroupConfig}
-              chatConfig={props.notificationsChatConfig}
-            />
-          )
-      )}
     </Col>
   );
 }
@@ -181,21 +183,18 @@ function sortIndexedNotification(
 }
 
 function DaySection({
+  label,
   contacts,
   groups,
   archive,
   timeboxes,
-  latest = false,
   associations,
   api,
   groupConfig,
   graphConfig,
   chatConfig,
-  remoteContentPolicy
 }) {
-  const calendar = latest
+  
-    ? MOMENT_CALENDAR_DATE
-    : { ...MOMENT_CALENDAR_DATE, sameDay: "[Earlier Today]" };
   const lent = timeboxes.map(([,nots]) => nots.length).reduce(f.add, 0);
   if (lent === 0 || timeboxes.length === 0) {
     return null;
@@ -206,7 +205,7 @@ function DaySection({
       <Box position="sticky" zIndex="3" top="-1px" bg="white">
         <Box p="2" bg="scales.black05">
           <Text>
-            {moment(daToUnix(timeboxes[0][0])).calendar(null, calendar)}
+            {label}
           </Text>
         </Box>
       </Box>

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

@@ -1,5 +1,5 @@
-import React, { ReactNode, useCallback, useMemo } from "react";
+import React, { ReactNode, useCallback, useMemo, useState } from "react";
-import { Row, Box, Col, Text, Anchor, Icon, Action } from "@tlon/indigo-react";
+import { Row, Box } from "@tlon/indigo-react";
 import _ from "lodash";
 import {
   GraphNotificationContents,
@@ -7,7 +7,6 @@ import {
   GroupNotificationContents,
   NotificationGraphConfig,
   GroupNotificationsConfig,
-  NotifIndex,
   Groups,
   Associations,
   Contacts,
@@ -19,6 +18,7 @@ import { GroupNotification } from "./group";
 import { GraphNotification } from "./graph";
 import { ChatNotification } from "./chat";
 import { BigInteger } from "big-integer";
+import { useHovering } from "~/logic/lib/util";
 
 interface NotificationProps {
   notification: IndexedNotification;
@@ -89,11 +89,21 @@ function NotificationWrapper(props: {
     return api.hark[func](notif);
   }, [notif, api, isMuted]);
 
+  const { hovering, bind } = useHovering();
+
   const changeMuteDesc = isMuted ? "Unmute" : "Mute";
   return (
-    <Row width="100%" flexShrink={0} alignItems="top" justifyContent="space-between">
+    <Box
+      width="100%"
+      display="grid"
+      gridTemplateColumns="1fr 200px"
+      gridTemplateRows="auto"
+      gridTemplateAreas="'header actions' 'main main'"
+      pb={2}
+      {...bind}
+    >
       {children}
-      <Row gapX="2" p="2" pt='3' alignItems="top">
+      <Row gapX="2" p="2" pt='3' gridArea="actions" justifyContent="flex-end" opacity={[1, hovering ? 1 : 0]}>
         <StatelessAsyncAction name={changeMuteDesc} onClick={onChangeMute} backgroundColor="transparent">
           {changeMuteDesc}
         </StatelessAsyncAction>
@@ -103,7 +113,7 @@ function NotificationWrapper(props: {
           </StatelessAsyncAction>
         )}
       </Row>
-    </Row>
+    </Box>
   );
 }
 

pkg/interface/src/views/components/MentionText.tsx

@@ -19,10 +19,10 @@ interface MentionTextProps {
   group: Group;
 }
 export function MentionText(props: MentionTextProps) {
-  const { content, contacts, contact, group } = props;
+  const { content, contacts, contact, group, ...rest } = props;
 
   return (
-    <RichText contacts={contacts} contact={contact} group={group}>
+    <RichText contacts={contacts} contact={contact} group={group} {...rest}>
       {content.reduce((accum, c) => {
         if ("text" in c) {
           return accum + c.text;

pkg/interface/src/views/components/RichText.js

@@ -27,19 +27,17 @@ const RichText = React.memo(({ disableRemoteContent, ...props }) => (
     {...props}
     renderers={{
       link: (linkProps) => {
-        if (disableRemoteContent) {
+        const remoteContentPolicy = disableRemoteContent ? {
-          linkProps.remoteContentPolicy = {
+          imageShown: false,
-            imageShown: false,
+          audioShown: false,
-            audioShown: false,
+          videoShown: false,
-            videoShown: false,
+          oembedShown: false
-            oembedShown: false
+        } : null;
-          };
-        }
         if (hasProvider(linkProps.href)) {
           return <RemoteContent className="mw-100" url={linkProps.href} />;
         }
         
-        return <BaseAnchor target='_blank' rel='noreferrer noopener' borderBottom='1px solid' {...linkProps}>{linkProps.children}</BaseAnchor>;
+        return <BaseAnchor target='_blank' rel='noreferrer noopener' borderBottom='1px solid' remoteContentPolicy={remoteContentPolicy} {...linkProps}>{linkProps.children}</BaseAnchor>;
       },
       linkReference: (linkProps) => {
         const linkText = String(linkProps.children[0].props.children);