interface: Unify timestamp behavior

Fixes https://github.com/urbit/landscape/issues/398
Fixes https://github.com/urbit/landscape/issues/264

pkg/interface/src/views/apps/chat/components/ChatMessage.tsx

@@ -24,6 +24,7 @@ import RemoteContent from '~/views/components/RemoteContent';
 import { Mention } from '~/views/components/MentionText';
 import styled from 'styled-components';
 import useLocalState from '~/logic/state/local';
+import Timestamp from '~/views/components/Timestamp';
 
 export const DATESTAMP_FORMAT = '[~]YYYY.M.D';
 
@@ -125,9 +126,7 @@ export default class ChatMessage extends Component<ChatMessageProps> {
       renderSigil ? 'cf pl2 lh-copy' : 'items-top cf hide-child'
     } ${isPending ? 'o-40' : ''} ${className}`;
 
-    const timestamp = moment
-      .unix(msg['time-sent'] / 1000)
-      .format(renderSigil ? 'hh:mm a' : 'hh:mm');
+    const timestamp = moment.unix(msg['time-sent'] / 1000);
 
     const reboundMeasure = (event) => {
       return measure(this.divRef.current);
@@ -217,7 +216,6 @@ interface MessageProps {
 export const MessageWithSigil = (props) => {
   const {
     msg,
-    timestamp,
     contacts,
     association,
     associations,
@@ -232,9 +230,7 @@ export const MessageWithSigil = (props) => {
 
   const dark = useLocalState((state) => state.dark);
 
-  const datestamp = moment
-    .unix(msg['time-sent'] / 1000)
-    .format(DATESTAMP_FORMAT);
+  const stamp = moment.unix(msg['time-sent'] / 1000);
   const contact = `~${msg.author}` in contacts ? contacts[`~${msg.author}`] : false;
   const showNickname = useShowNickname(contact);
   const shipName = showNickname ? contact.nickname : cite(msg.author);
@@ -342,19 +338,7 @@ export const MessageWithSigil = (props) => {
           >
             {displayName}
           </Text>
-          <Text flexShrink={0} fontSize={0} gray mono>
-            {timestamp}
-          </Text>
-          <Text
-            flexShrink={0}
-            fontSize={0}
-            gray
-            mono
-            ml={2}
-            display={['none', hovering ? 'block' : 'none']}
-          >
-            {datestamp}
-          </Text>
+          <Timestamp stamp={stamp} fontSize={0}/>
         </Box>
         <ContentBox flexShrink={0} fontSize={fontSize ? fontSize : '14px'}>
           {msg.contents.map((c, i) => (
@@ -397,19 +381,15 @@ export const MessageWithoutSigil = ({
   const { hovering, bind } = useHovering();
   return (
     <>
-      <Text
-        flexShrink={0}
-        mono
-        gray
+      <Timestamp
+        stamp={timestamp}
+        date={false}
         display={hovering ? 'block' : 'none'}
         pt='2px'
         lineHeight='tall'
-        fontSize={0}
         position='absolute'
         left={1}
-      >
-        {timestamp}
-      </Text>
+      />
       <ContentBox
         flexShrink={0}
         fontSize='14px'

pkg/interface/src/views/apps/chat/components/unread-notice.js

@@ -2,12 +2,16 @@ import React from 'react';
 import moment from 'moment';
 import { Box, Text } from '@tlon/indigo-react';
 
+import Timestamp from '~/views/components/Timestamp';
+
 export const UnreadNotice = (props) => {
   const { unreadCount, unreadMsg, dismissUnread, onClick } = props;
 
   if (!unreadMsg || (unreadCount === 0)) {
     return null;
   }
+  
+  const stamp = moment.unix(unreadMsg.post['time-sent'] / 1000);
 
   let datestamp = moment.unix(unreadMsg.post['time-sent'] / 1000).format('YYYY.M.D');
   const timestamp = moment.unix(unreadMsg.post['time-sent'] / 1000).format('HH:mm');
@@ -34,14 +38,9 @@ export const UnreadNotice = (props) => {
         borderRadius='1'
         border='1'
         borderColor='blue'>
-        <Text flexShrink='1' textOverflow='ellipsis' whiteSpace='pre' overflow='hidden' display='block' cursor='pointer' onClick={onClick}>
+        <Text flexShrink='1' textOverflow='ellipsis' whiteSpace='pre' overflow='hidden' display='flex' cursor='pointer' onClick={onClick}>
           {unreadCount} new message{unreadCount > 1 ? 's' : ''} since{' '}
-          {datestamp && (
-            <>
-              <Text color='blue'>~{datestamp}</Text> at{' '}
-            </>
-          )}
-          <Text color='blue'>{timestamp}</Text>
+          <Timestamp stamp={stamp} color='blue' date={true} />
         </Text>
         <Text
           ml='4'

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

@@ -22,6 +22,7 @@ import { getSnippet } from "~/logic/lib/publish";
 import styled from "styled-components";
 import {MentionText} from "~/views/components/MentionText";
 import ChatMessage, {MessageWithoutSigil} from "../chat/components/ChatMessage";
+import Timestamp from "~/views/components/Timestamp";
 
 function getGraphModuleIcon(module: string) {
   if (module === "link") {
@@ -216,9 +217,7 @@ const GraphNode = ({
           <Text mono title={author}>
             {cite(author)}
           </Text>
-          <Text ml="2" gray>
-            {moment(time).format("HH:mm")}
-          </Text>
+          <Timestamp stamp={moment(time)} date={false} ml={2} />
         </Row>}
         <Row width="100%" p="1" flexDirection="column">
           <GraphNodeContent

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

@@ -6,6 +6,7 @@ import moment from "moment";
 import { PropFunc } from "~/types/util";
 import { getContactDetails, useShowNickname } from "~/logic/lib/util";
 import { Associations, Contact, Contacts, Rolodex } from "~/types";
+import Timestamp from "~/views/components/Timestamp";
 
 const Text = (props: PropFunc<typeof Text>) => (
   <NormalText fontWeight="500" {...props} />
@@ -60,7 +61,6 @@ export function Header(props: {
     )
   )(authors);
 
-  const time = moment(props.time).format("HH:mm");
   const groupTitle =
     props.associations.groups?.[props.group]?.metadata?.title;
 
@@ -93,9 +93,7 @@ export function Header(props: {
           <Rule vertical height="12px" mr={1} />
         </>
       }
-      <Text fontWeight="regular" color="lightGray">
-        {time}
-      </Text>
+      <Timestamp stamp={moment(props.time)} color="lightGray" date={false} />
     </Row>
   );
 }

pkg/interface/src/views/apps/publish/components/NoteNavigation.tsx

@@ -5,6 +5,7 @@ import { Link } from "react-router-dom";
 import { Graph, GraphNode } from "~/types";
 import { getLatestRevision } from "~/logic/lib/publish";
 import { BigInteger } from "big-integer";
+import Timestamp from "~/views/components/Timestamp";
 
 function NavigationItem(props: {
   url: string;
@@ -12,7 +13,6 @@ function NavigationItem(props: {
   date: number;
   prev?: boolean;
 }) {
-  const date = moment(props.date).fromNow();
   return (
     <Box
       justifySelf={props.prev ? "start" : "end"}
@@ -26,7 +26,11 @@ function NavigationItem(props: {
           {props.prev ? "Previous" : "Next"}
         </Box>
         <Box mb={1}>{props.title}</Box>
-        <Box color="gray">{date}</Box>
+        <Timestamp
+          stamp={moment(props.date)}
+          time={false}
+          justifyContent={props.prev ? 'flex-start' : 'flex-end'}
+        />
       </Link>
     </Box>
   );

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

@@ -8,6 +8,7 @@ import { Sigil } from '~/logic/lib/sigil';
 import { Group } from '~/types';
 import GlobalApi from '~/logic/api/global';
 import { useHistory } from 'react-router-dom';
+import Timestamp from './Timestamp';
 
 interface AuthorProps {
   contacts: Contacts;
@@ -31,7 +32,7 @@ export default function Author(props: AuthorProps) {
   const color = contact?.color ? `#${uxToHex(contact?.color)}` : '#000000';
   const showNickname = useShowNickname(contact);
   const name = showNickname ? contact.nickname : cite(ship);
-  const dateFmt = moment(date).fromNow();
+  const stamp = moment(date);
 
   const [showOverlay, setShowOverlay] = useState(false);
 
@@ -82,9 +83,7 @@ export default function Author(props: AuthorProps) {
       >
         {name}
       </Box>
-      <Box fontSize='1' ml={2} color={props.unread ? 'blue' : 'gray'}>
-        {dateFmt}
-      </Box>
+      <Timestamp stamp={stamp} fontSize={1} time={false} ml={2} color={props.unread ? 'blue' : 'gray'} />
       {props.children}
     </Row>
   );

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

@@ -0,0 +1,54 @@
+import moment, { Moment as MomentType } from 'moment';
+import React, { ReactElement } from 'react';
+
+import { Box, BoxProps, Text } from '@tlon/indigo-react';
+import { useHovering } from '~/logic/lib/util';
+
+export const DateFormat = 'YYYY.M.D';
+export const TimeFormat = 'HH:mm';
+
+export type TimestampProps = BoxProps & {
+  stamp: MomentType;
+  date?: boolean;
+  time?: boolean;
+}
+
+const Timestamp = (props: TimestampProps): ReactElement | null=> {
+  const { stamp, date, time, color, fontSize, ...rest } = {
+    time: true, color: 'gray', fontSize: 0, ...props
+  };
+  if (!stamp) return null;
+  const { hovering, bind } = date === true
+    ? { hovering: true, bind: {} }
+    : useHovering();
+  let datestamp = stamp.format(DateFormat);
+  if (stamp.format(DateFormat) === moment().format(DateFormat)) {
+    datestamp = 'Today';
+  } else if (stamp.format(DateFormat) === moment().subtract(1, 'day').format(DateFormat)) {
+    datestamp = 'Yesterday';
+  }
+  const timestamp = stamp.format(TimeFormat);
+  return (
+    <Box
+      {...bind}
+      display='flex'
+      flex='row'
+      flexWrap="nowrap"
+      {...rest}
+      title={stamp.format(DateFormat + ' ' + TimeFormat)}
+    >
+      {time && <Text flexShrink={0} color={color} fontSize={fontSize}>{timestamp}</Text>}
+      {date !== false && <Text
+        flexShrink={0}
+        color={color}
+        fontSize={fontSize}
+        ml={time ? 2 : 0}
+        display={time ? ['none', hovering ? 'block' : 'none'] : 'block'}
+      >
+        {datestamp}
+      </Text>}
+    </Box>
+  )
+}
+
+export default Timestamp;