From 9a2f4cec07f03de560b22f607c515bfad3bd3dff Mon Sep 17 00:00:00 2001
From: James Acklin <james.acklin@gmail.com>
Date: Tue, 4 Jun 2024 16:45:12 -0400
Subject: [PATCH] GroupListItem, ChatList: show latest channel name

---
 packages/shared/src/db/types.ts                        |  5 ++++-
 packages/ui/src/components/ChatList.tsx                |  1 +
 .../components/GroupListItem/GroupListItemContent.tsx  | 10 ++++++----
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/shared/src/db/types.ts b/packages/shared/src/db/types.ts
index e99aa4942e..6e55c56c91 100644
--- a/packages/shared/src/db/types.ts
+++ b/packages/shared/src/db/types.ts
@@ -38,7 +38,10 @@ export type ContactPinnedGroups = Contact['pinnedGroups'];
 export type Unread = BaseModel<'unreads'>;
 // TODO: We need to include unread count here because it's  returned by the chat
 // list query, but doesn't feel great.
-export type Group = BaseModel<'groups'> & { unreadCount?: number | null };
+export type Group = BaseModel<'groups'> & {
+  unreadCount?: number | null;
+  lastChannel?: string | null;
+};
 export type ClientMeta = Pick<
   Group,
   | 'title'
diff --git a/packages/ui/src/components/ChatList.tsx b/packages/ui/src/components/ChatList.tsx
index 521c968ccf..9436638361 100644
--- a/packages/ui/src/components/ChatList.tsx
+++ b/packages/ui/src/components/ChatList.tsx
@@ -164,6 +164,7 @@ const ChatListItem = React.memo(function ChatListItemComponent({
             ...model.group,
             unreadCount: model.unread?.count,
             lastPost: model.lastPost,
+            lastChannel: model.title,
           }}
           borderRadius="$m"
           {...props}
diff --git a/packages/ui/src/components/GroupListItem/GroupListItemContent.tsx b/packages/ui/src/components/GroupListItem/GroupListItemContent.tsx
index 0e1620b23c..903037ba2d 100644
--- a/packages/ui/src/components/GroupListItem/GroupListItemContent.tsx
+++ b/packages/ui/src/components/GroupListItem/GroupListItemContent.tsx
@@ -1,7 +1,7 @@
 import type * as db from '@tloncorp/shared/dist/db';
 import { useMemo } from 'react';
 
-import { Text, XStack } from '../../core';
+import { XStack } from '../../core';
 import { Badge } from '../Badge';
 import ContactName from '../ContactName';
 import { Icon } from '../Icon';
@@ -32,9 +32,11 @@ export default function GroupListItemContent({
       />
       <ListItem.MainContent>
         <ListItem.Title>{model.title}</ListItem.Title>
-        <ListItem.Subtitle marginVertical={'$xs'}>
-          {model.lastPost && model.lastPost.channelId}
-        </ListItem.Subtitle>
+        {model.lastPost && (
+          <ListItem.Subtitle marginVertical={'$xs'}>
+            {model.lastChannel}
+          </ListItem.Subtitle>
+        )}
         {!isPending && model.lastPost ? (
           <XStack gap="$s" alignItems="center">
             <Icon