list item folder refactor

packages/ui/src/components/ChannelNavSection.tsx

@@ -2,7 +2,7 @@ import * as db from '@tloncorp/shared/dist/db';
 import { useCallback, useMemo } from 'react';
 
 import { SizableText, YStack } from '../core';
-import ChannelListItem from './ChannelListItem';
+import { ChannelListItem } from './ListItem';
 
 export default function ChannelNavSection({
   section,

packages/ui/src/components/ChannelNavSections.tsx

@@ -2,8 +2,8 @@ import * as db from '@tloncorp/shared/dist/db';
 import { useMemo } from 'react';
 
 import { SizableText, YStack } from '../core';
-import ChannelListItem from './ChannelListItem';
 import ChannelNavSection from './ChannelNavSection';
+import { ChannelListItem } from './ListItem';
 
 export default function ChannelNavSections({
   group,

packages/ui/src/components/ChatList.tsx

@@ -14,13 +14,11 @@ import {
 } from 'react-native';
 
 import { useStyle } from '../core';
-import ChannelListItem from './ChannelListItem';
-import { GroupListItem } from './GroupListItem';
-import { ListItemProps } from './ListItem';
+import { ChannelListItem, GroupListItem, ListItemProps } from './ListItem';
+import { SwipableChatRow } from './ListItem/SwipableChatListItem';
 import { SectionListHeader } from './SectionList';
-import { SwipableChatRow } from './SwipableChatListItem';
 
-type ListItem = db.Channel | db.Group;
+export type Chat = db.Channel | db.Group;
 
 export function ChatList({
   pinned,
@@ -30,8 +28,8 @@ export function ChatList({
   onPressItem,
   onSectionChange,
 }: store.CurrentChats & {
-  onPressItem?: (chat: ListItem) => void;
-  onLongPressItem?: (chat: ListItem) => void;
+  onPressItem?: (chat: Chat) => void;
+  onLongPressItem?: (chat: Chat) => void;
   onSectionChange?: (title: string) => void;
 }) {
   const data = useMemo(() => {
@@ -54,7 +52,7 @@ export function ChatList({
   ) as StyleProp<ViewStyle>;
 
   const renderItem = useCallback(
-    ({ item }: SectionListRenderItemInfo<ListItem, { title: string }>) => {
+    ({ item }: SectionListRenderItemInfo<Chat, { title: string }>) => {
       return (
         <ChatListItem
           model={item}
@@ -67,11 +65,7 @@ export function ChatList({
   );
 
   const renderSectionHeader = useCallback(
-    ({
-      section,
-    }: {
-      section: SectionListData<ListItem, { title: string }>;
-    }) => {
+    ({ section }: { section: SectionListData<Chat, { title: string }> }) => {
       return (
         <SectionListHeader>
           <SectionListHeader.Text>{section.title}</SectionListHeader.Text>
@@ -116,7 +110,7 @@ export function ChatList({
     }
   ).current;
 
-  const getChannelKey = useCallback((item: ListItem) => {
+  const getChannelKey = useCallback((item: Chat) => {
     if (!item || typeof item !== 'object' || !item.id) {
       return 'invalid-item';
     }
@@ -146,7 +140,7 @@ export function ChatList({
 }
 
 const ChatListItem = React.memo(function ChatListItemComponent(
-  props: ListItemProps<ListItem>
+  props: ListItemProps<Chat>
 ) {
   return logic.isChannel(props.model) ? (
     <SwipableChatRow model={props.model}>
@@ -162,7 +156,7 @@ const ChatListItemContent = React.memo(function ChatListItemContentComponent({
   onPress,
   onLongPress,
   ...props
-}: ListItemProps<ListItem>) {
+}: ListItemProps<Chat>) {
   const handlePress = useCallback(() => {
     onPress?.(model);
   }, [model, onPress]);

packages/ui/src/components/ContactList.tsx

@@ -1,59 +1,8 @@
-import * as db from '@tloncorp/shared/dist/db';
-import { ComponentProps, PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { styled, withStaticProperties } from 'tamagui';
 
 import { YStack } from '../core';
-import ContactName from './ContactName';
-import { ListItem } from './ListItem';
-
-const ContactListItem = ({
-  contact,
-  onPress,
-  onLongPress,
-  showNickname = false,
-  showUserId = false,
-  full = false,
-  showIcon = true,
-  matchText,
-  ...props
-}: {
-  contact: db.Contact;
-  onPress?: (contact: db.Contact) => void;
-  onLongPress?: () => void;
-  showNickname?: boolean;
-  showUserId?: boolean;
-  full?: boolean;
-  showIcon?: boolean;
-  matchText?: string;
-} & ComponentProps<typeof ListItem>) => (
-  <ListItem
-    onPress={() => onPress?.(contact)}
-    onLongPress={onLongPress}
-    alignItems="center"
-    justifyContent="flex-start"
-    padding="$s"
-    {...props}
-  >
-    {showIcon && (
-      <ListItem.AvatarIcon
-        size="$2xl"
-        width="$2xl"
-        height="$2xl"
-        contactId={contact.id}
-        contact={contact}
-      />
-    )}
-    <ListItem.Title>
-      <ContactName
-        matchText={matchText}
-        showNickname={showNickname}
-        showUserId={showUserId}
-        full={full}
-        userId={contact.id}
-      />
-    </ListItem.Title>
-  </ListItem>
-);
+import { ContactListItem } from './ListItem/ContactListItem';
 
 const ContactListFrame = styled(YStack, {
   gap: '$s',

packages/ui/src/components/ChannelListItem/index.tsx → packages/ui/src/components/ListItem/ChannelListItem.tsx

@@ -10,9 +10,9 @@ import {
   ListItem,
   ListItemIconContainer,
   type ListItemProps,
-} from '../ListItem';
+} from './ListItem';
 
-export default function ChannelListItem({
+export function ChannelListItem({
   model,
   useTypeIcon,
   onPress,

packages/ui/src/components/ListItem/ChatListItem.tsx

@@ -0,0 +1,69 @@
+import * as logic from '@tloncorp/shared/dist/logic';
+import React, { useCallback } from 'react';
+
+import { Chat } from '../ChatList';
+import { ChannelListItem } from './ChannelListItem';
+import { GroupListItem } from './GroupListItem';
+import { ListItemProps } from './ListItem';
+
+export const ChatListItem = React.memo(function ChatListItemComponent({
+  model,
+  onPress,
+  onLongPress,
+  ...props
+}: ListItemProps<Chat>) {
+  const handlePress = useCallback(() => {
+    onPress?.(model);
+  }, [model, onPress]);
+
+  const handleLongPress = useCallback(() => {
+    onLongPress?.(model);
+  }, [model, onLongPress]);
+
+  // if the chat list item is a group, it's pending
+  if (logic.isGroup(model)) {
+    return (
+      <GroupListItem
+        onPress={handlePress}
+        model={{
+          ...model,
+        }}
+        {...props}
+      />
+    );
+  }
+
+  if (logic.isChannel(model)) {
+    if (
+      model.type === 'dm' ||
+      model.type === 'groupDm' ||
+      model.pin?.type === 'channel'
+    ) {
+      return (
+        <ChannelListItem
+          model={model}
+          onPress={handlePress}
+          onLongPress={handleLongPress}
+          {...props}
+        />
+      );
+    } else if (model.group) {
+      return (
+        <GroupListItem
+          onPress={handlePress}
+          onLongPress={handleLongPress}
+          model={{
+            ...model.group,
+            unreadCount: model.unread?.count,
+            lastPost: model.lastPost,
+            lastChannel: model.title,
+          }}
+          {...props}
+        />
+      );
+    }
+  }
+
+  console.warn('unable to render chat list item', model.id, model);
+  return null;
+});

packages/ui/src/components/ListItem/ContactListItem.tsx

@@ -0,0 +1,54 @@
+import * as db from '@tloncorp/shared/dist/db';
+import { ComponentProps } from 'react';
+
+import ContactName from '../ContactName';
+import { ListItem } from './ListItem';
+
+export const ContactListItem = ({
+  contact,
+  onPress,
+  onLongPress,
+  showNickname = false,
+  showUserId = false,
+  full = false,
+  showIcon = true,
+  matchText,
+  ...props
+}: {
+  contact: db.Contact;
+  onPress?: (contact: db.Contact) => void;
+  onLongPress?: () => void;
+  showNickname?: boolean;
+  showUserId?: boolean;
+  full?: boolean;
+  showIcon?: boolean;
+  matchText?: string;
+} & ComponentProps<typeof ListItem>) => (
+  <ListItem
+    onPress={() => onPress?.(contact)}
+    onLongPress={onLongPress}
+    alignItems="center"
+    justifyContent="flex-start"
+    padding="$s"
+    {...props}
+  >
+    {showIcon && (
+      <ListItem.AvatarIcon
+        size="$2xl"
+        width="$2xl"
+        height="$2xl"
+        contactId={contact.id}
+        contact={contact}
+      />
+    )}
+    <ListItem.Title>
+      <ContactName
+        matchText={matchText}
+        showNickname={showNickname}
+        showUserId={showUserId}
+        full={full}
+        userId={contact.id}
+      />
+    </ListItem.Title>
+  </ListItem>
+);