messages: parse DM title and conditionally display nicknames

fixes urbit/landscape#623

pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import { Box, Col, Icon, Text } from '@tlon/indigo-react';
 import { Association } from '@urbit/api/metadata';
 import React, { ReactElement, ReactNode, useCallback, useState } from 'react';
@@ -8,6 +9,7 @@ import GlobalApi from '~/logic/api/global';
 import { isWriter } from '~/logic/lib/group';
 import { getItemTitle } from '~/logic/lib/util';
 import useContactState from '~/logic/state/contact';
+import useSettingsState, { selectCalmState } from '~/logic/state/settings';
 import useGroupState from '~/logic/state/group';
 import { Dropdown } from '~/views/components/Dropdown';
 import RichText from '~/views/components/RichText';
@@ -19,6 +21,24 @@ const TruncatedText = styled(RichText)`
   overflow: hidden;
 `;
 
+const participantNames = (str: string, contacts) => {
+  const { hideNicknames } = useSettingsState(selectCalmState);
+  if (_.includes(str, ',') && _.startsWith(str, '~')) {
+    const names = _.split(str, ', ');
+    return names.map((name) => {
+      if (urbitOb.isValidPatp(name) && !hideNicknames) {
+        if (contacts[name]?.nickname)
+          return contacts[name]?.nickname;
+        return name;
+      } else {
+        return name;
+      }
+    }).join(', ');
+  } else {
+    return str;
+  }
+};
+
 type ResourceSkeletonProps = {
   association: Association;
   api: GlobalApi;
@@ -103,7 +123,9 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
       ml='1'
       flexShrink={1}
     >
-      {title}
+      {workspace === '/messages' && !urbitOb.isValidPatp(title)
+        ? participantNames(title, contacts)
+        : title}
     </Text>
   );
 

pkg/interface/src/views/landscape/components/Sidebar/SidebarItem.tsx

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import { BaseImage, Box, Icon, Row, Text } from '@tlon/indigo-react';
 import { Association } from '@urbit/api';
 import React, { ReactElement, useRef } from 'react';
@@ -99,6 +100,23 @@ export function SidebarItem(props: {
     img = <Box flexShrink={0} height={16} width={16} borderRadius={2} backgroundColor={`#${uxToHex(props?.association?.metadata?.color)}` || '#000000'} />;
   }
 
+  const participantNames = (str: string) => {
+    if (_.includes(str, ',') && _.startsWith(str, '~')) {
+      const names = _.split(str, ', ');
+      return names.map((name) => {
+        if (urbitOb.isValidPatp(name) && !hideNicknames) {
+          if (contacts[name]?.nickname)
+            return contacts[name]?.nickname;
+          return name;
+        } else {
+          return name;
+        }
+      }).join(', ');
+    } else {
+      return str;
+    }
+  };
+
   return (
     <HoverBoxLink
       ref={anchorRef}
@@ -138,7 +156,9 @@ export function SidebarItem(props: {
             fontWeight={fontWeight}
             style={{ textOverflow: 'ellipsis', whiteSpace: 'pre' }}
           >
-            {title}
+            {DM && !urbitOb.isValidPatp(title)
+              ? participantNames(title)
+              : title}
           </Text>
         </Box>
       </Row>