cleanup timestamp display for search results

app/sql.js

@@ -1862,7 +1862,7 @@ function searchMessages(query, limit) {
     .prepare(
       `SELECT
       ${MESSAGES_TABLE}.json,
-      snippet(${MESSAGES_FTS_TABLE}, -1, '<<left>>', '<<right>>', '...', 15) as snippet
+      snippet(${MESSAGES_FTS_TABLE}, -1, '<<left>>', '<<right>>', '...', 5) as snippet
     FROM ${MESSAGES_FTS_TABLE}
     INNER JOIN ${MESSAGES_TABLE} on ${MESSAGES_FTS_TABLE}.id = ${MESSAGES_TABLE}.id
     WHERE

ts/components/basic/MessageBodyHighlight.tsx

@@ -12,6 +12,7 @@ const renderNewLines: RenderTextCallbackType = ({ text, key }) => (
 
 const SnippetHighlight = styled.span`
   font-weight: bold;
+  color: var(--color-text);
 `;
 
 const renderEmoji = ({
@@ -29,6 +30,7 @@ const renderEmoji = ({
 export const MessageBodyHighlight = (props: { text: string }) => {
   const { text } = props;
   const results: Array<JSX.Element> = [];
+  // this is matching what sqlite fts5 is giving us back
   const FIND_BEGIN_END = /<<left>>(.+?)<<right>>/g;
 
   let match = FIND_BEGIN_END.exec(text);

ts/components/conversation/Timestamp.tsx

@@ -1,18 +1,16 @@
 import React, { useCallback, useState } from 'react';
 import moment from 'moment';
 
-import { formatRelativeTime } from '../../util/formatRelativeTime';
-
 // tslint:disable-next-line: no-submodule-imports
 import useInterval from 'react-use/lib/useInterval';
 import styled from 'styled-components';
 
 type Props = {
   timestamp?: number;
-  extended?: boolean;
   module?: string;
   withImageNoCaption?: boolean;
   isConversationListItem?: boolean;
+  momentFromNow: boolean;
 };
 
 const TimestampContainerListItem = styled.div`
@@ -45,33 +43,25 @@ export const Timestamp = (props: Props) => {
   // formatRelativeTime() will print the correct moment.
   const update = useCallback(() => {
     setLastUpdated(Date.now());
-  }, []);
+  }, [setLastUpdated]);
 
   useInterval(update, UPDATE_FREQUENCY);
 
-  const { timestamp, extended } = props;
+  const { timestamp, momentFromNow } = props;
 
   if (timestamp === null || timestamp === undefined) {
     return null;
   }
 
-  // Use relative time for under 24hrs ago.
+  const momentValue = moment(timestamp);
-  const now = Math.floor(Date.now());
+  let dateString: string = '';
-  const messageAgeInDays = (now - timestamp) / (1000 * 60 * 60 * 24);
+  if (momentFromNow) {
-  const daysBeforeRelativeTiming = 1;
+    dateString = momentValue.fromNow();
-
-  let dateString;
-  if (messageAgeInDays > daysBeforeRelativeTiming) {
-    dateString = formatRelativeTime(timestamp, { extended });
   } else {
-    dateString = moment(timestamp).fromNow();
+    dateString = momentValue.format('lll');
-    // Prevent times reading "NOW AGO"
-    if (dateString.startsWith('now') || dateString.startsWith('Now')) {
-      dateString = 'now';
   }
 
   dateString = dateString.replace('minutes', 'mins').replace('minute', 'min');
-  }
 
   const title = moment(timestamp).format('llll');
   if (props.isConversationListItem) {

ts/components/leftpane/conversation-list-item/HeaderItem.tsx

@@ -110,7 +110,7 @@ export const ConversationListItemHeaderItem = () => {
           unreadCount > 0 ? 'module-conversation-list-item__header__date--has-unread' : null
         )}
       >
-        <Timestamp timestamp={activeAt} extended={false} isConversationListItem={true} />
+        <Timestamp timestamp={activeAt} isConversationListItem={true} momentFromNow={true} />
       </div>
     </div>
   );

ts/components/search/MessageSearchResults.tsx

@@ -30,6 +30,8 @@ const StyledConversationFromUserInGroup = styled(StyledConversationTitleResults)
   font-size: 12px;
   line-height: 14px;
   overflow-x: hidden;
+  font-weight: 400;
+  color: var(--color-text-subtle);
 `;
 
 const FromName = (props: { source: string; conversationId: string }) => {
@@ -60,7 +62,6 @@ const FromName = (props: { source: string; conversationId: string }) => {
 
 const ConversationHeader = (props: { source: string; conversationId: string }) => {
   const { source, conversationId } = props;
-  const fromName = <FromName source={source} conversationId={conversationId} />;
 
   const ourKey = getOurPubKeyStrFromCache();
 
@@ -68,13 +69,17 @@ const ConversationHeader = (props: { source: string; conversationId: string }) =
     return (
       <StyledConversationTitleResults>
         <span className="module-messages-search-result__header__group">
-          <ContactName pubkey={conversationId} shouldShowPubkey={false} />
+          <ContactName pubkey={conversationId} shouldShowPubkey={false} boldProfileName={true} />
         </span>
       </StyledConversationTitleResults>
     );
   }
 
-  return <StyledConversationTitleResults>{fromName}</StyledConversationTitleResults>;
+  return (
+    <StyledConversationTitleResults>
+      <FromName source={source} conversationId={conversationId} />;
+    </StyledConversationTitleResults>
+  );
 };
 
 const FromUserInGroup = (props: { authorPubkey: string; conversationId: string }) => {
@@ -168,7 +173,10 @@ export const MessageSearchResult = (props: MessageResultProps) => {
         <div className="module-message-search-result__header">
           <ConversationHeader source={destination} conversationId={conversationId} />
           <div className="module-message-search-result__header__timestamp">
-            <Timestamp timestamp={serverTimestamp || timestamp || sent_at || received_at} />
+            <Timestamp
+              timestamp={serverTimestamp || timestamp || sent_at || received_at}
+              momentFromNow={false}
+            />
           </div>
         </div>
         <ResultBody>

ts/util/formatRelativeTime.ts

@@ -1,35 +0,0 @@
-import moment from 'moment';
-
-const getExtendedFormats = () => ({
-  y: 'lll',
-  M: `${window.i18n('timestampFormat_M') || 'MMM D'} LT`,
-  d: 'ddd LT',
-});
-const getShortFormats = () => ({
-  y: 'll',
-  M: window.i18n('timestampFormat_M') || 'MMM D',
-  d: 'ddd',
-});
-
-function isYear(timestamp: moment.Moment) {
-  const year = moment().format('YYYY');
-  const targetYear = moment(timestamp).format('YYYY');
-
-  return year === targetYear;
-}
-
-export function formatRelativeTime(rawTimestamp: number | Date, options: { extended?: boolean }) {
-  const { extended } = options;
-  const formats = extended ? getExtendedFormats() : getShortFormats();
-  const timestamp = moment(rawTimestamp);
-  const now = moment();
-  const diff = moment.duration(now.diff(timestamp));
-
-  if (diff.years() >= 1 || !isYear(timestamp)) {
-    return timestamp.format(formats.y);
-  } else if (diff.months() >= 1 || diff.days() > 6) {
-    return timestamp.format(formats.M);
-  }
-
-  return timestamp.format(formats.d);
-}