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

notifications: fix layout
2024-12-23 19:05:48 +03:00 · 2021-01-14 14:27:03 -05:00 · 2021-01-14 14:27:03 -05:00 · faef9b1d42
commit faef9b1d42
parent bf53731114 7be1d8d313
8 changed files with 102 additions and 82 deletions
--- a/pkg/interface/src/logic/lib/util.ts
+++ b/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 };
 }
--- a/pkg/interface/src/logic/state/local.tsx
+++ b/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 {
--- a/pkg/interface/src/views/apps/notifications/graph.tsx
+++ b/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 width="100%" p="1">
+        </Row>}
+        <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>
-    </Col>
+      </Box>
+    </>
  );
 }
--- a/pkg/interface/src/views/apps/notifications/header.tsx
+++ b/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} />}
-      {!!channel && <Text fontWeight="500">{channelTitle}</Text>}
-      <Rule vertical height="12px" />
+      {!!moduleIcon && <Icon icon={moduleIcon as any} mr={1} />}
+      {!!channel && <Text fontWeight="500" mr={1}>{channelTitle}</Text>}
+      <Rule vertical height="12px" mr={1} />
      {groupTitle &&
         <>
-          <Text fontWeight="500">{groupTitle}</Text>
-          <Rule vertical height="12px"/>
+          <Text fontWeight="500" mr={1}>{groupTitle}</Text>
+          <Rule vertical height="12px" mr={1} />
        </>
      }
      <Text fontWeight="regular" color="lightGray">
--- a/pkg/interface/src/views/apps/notifications/inbox.tsx
+++ b/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]) =>
-      moment(daToUnix(date)).format("DDMMYYYY")
-    ),
-    f.values,
-    f.reverse
+    f.groupBy<DatedTimebox>(([date]) => {
+      date = moment(daToUnix(date));
+      if (moment().subtract(6, 'hours').isBefore(date)) {
+        return 'latest';
+      } 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 && (
-        <DaySection
-          latest
-          timeboxes={[newNotifications]}
-          contacts={props.contacts}
-          archive={!!props.showArchive}
-          associations={props.associations}
-          groups={props.groups}
-          graphConfig={props.notificationsGraphConfig}
-          groupConfig={props.notificationsGroupConfig}
-          chatConfig={props.notificationsChatConfig}
-          api={api}
-        />
-      )}
-      {_.map(
-        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}
-            />
-          )
-      )}
+      {[...notificationsByDay.keys()].map((day, index) => {
+        const timeboxes = notificationsByDay.get(day);
+        return timeboxes.length > 0 && (
+          <DaySection
+            key={day}
+            label={day === 'latest' ? 'Today' : moment(day).calendar(null, calendar)}
+            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>
--- a/pkg/interface/src/views/apps/notifications/notification.tsx
+++ b/pkg/interface/src/views/apps/notifications/notification.tsx
@ -1,5 +1,5 @@
-import React, { ReactNode, useCallback, useMemo } from "react";
-import { Row, Box, Col, Text, Anchor, Icon, Action } from "@tlon/indigo-react";
+import React, { ReactNode, useCallback, useMemo, useState } from "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>
  );
 }

--- a/pkg/interface/src/views/components/MentionText.tsx
+++ b/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;
--- a/pkg/interface/src/views/components/RichText.js
+++ b/pkg/interface/src/views/components/RichText.js
@ -27,19 +27,17 @@ const RichText = React.memo(({ disableRemoteContent, ...props }) => (
    {...props}
    renderers={{
      link: (linkProps) => {
-        if (disableRemoteContent) {
-          linkProps.remoteContentPolicy = {
-            imageShown: false,
-            audioShown: false,
-            videoShown: false,
-            oembedShown: false
-          };
-        }
+        const remoteContentPolicy = disableRemoteContent ? {
+          imageShown: false,
+          audioShown: false,
+          videoShown: 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);