native: low-priority omnibus

apps/tlon-mobile/src/screens/ChatListScreen.tsx

@@ -4,8 +4,7 @@ import * as db from '@tloncorp/shared/dist/db';
 import * as logic from '@tloncorp/shared/dist/logic';
 import * as store from '@tloncorp/shared/dist/store';
 import {
-  ChatList,
-  ChatOptionsSheet,
+  ChatList, // ChatOptionsSheet,
   ContactsProvider,
   FloatingActionButton,
   GroupPreviewSheet,
@@ -32,9 +31,12 @@ type ChatListScreenProps = NativeStackScreenProps<
 export default function ChatListScreen(
   props: ChatListScreenProps & { contacts: db.Contact[] }
 ) {
-  const [longPressedItem, setLongPressedItem] = useState<db.Channel | null>(
-    null
-  );
+  {
+    /* FIXME: Disabling long-press on ChatListScreen items for now */
+  }
+  // const [longPressedItem, setLongPressedItem] = useState<db.Channel | null>(
+  //   null
+  // );
   const [selectedGroup, setSelectedGroup] = useState<db.Group | null>(null);
   const [startDmOpen, setStartDmOpen] = useState(false);
   const [addGroupOpen, setAddGroupOpen] = useState(false);
@@ -101,9 +103,12 @@ export default function ChatListScreen(
     [props.navigation]
   );
 
-  const onLongPressItem = useCallback((item: db.Channel | db.Group) => {
-    logic.isChannel(item) ? setLongPressedItem(item) : null;
-  }, []);
+  {
+    /* FIXME: Disabling long-press on ChatListScreen items for now */
+  }
+  // const onLongPressItem = useCallback((item: db.Channel | db.Group) => {
+  //   logic.isChannel(item) ? setLongPressedItem(item) : null;
+  // }, []);
 
   const handleDmOpenChange = useCallback((open: boolean) => {
     if (!open) {
@@ -123,14 +128,17 @@ export default function ChatListScreen(
     }
   }, []);
 
-  const handleChatOptionsOpenChange = useCallback(
-    (open: boolean) => {
-      if (!open) {
-        setLongPressedItem(null);
-      }
-    },
-    [setLongPressedItem]
-  );
+  {
+    /* FIXME: Disabling long-press on ChatListScreen items for now */
+  }
+  // const handleChatOptionsOpenChange = useCallback(
+  //   (open: boolean) => {
+  //     if (!open) {
+  //       setLongPressedItem(null);
+  //     }
+  //   },
+  //   [setLongPressedItem]
+  // );
 
   const handleGroupCreated = useCallback(
     ({ channel }: { channel: db.Channel }) => goToChannel({ channel }),
@@ -155,7 +163,8 @@ export default function ChatListScreen(
             pinned={resolvedChats.pinned}
             unpinned={resolvedChats.unpinned}
             pendingChats={resolvedChats.pendingChats}
-            onLongPressItem={onLongPressItem}
+            // FIXME: Disabling long-press on ChatListScreen items for now
+            // onLongPressItem={onLongPressItem}
             onPressItem={onPressChat}
           />
         ) : null}
@@ -190,11 +199,12 @@ export default function ChatListScreen(
             />
           </ContextMenu>
         </View>
-        <ChatOptionsSheet
+        {/* FIXME: Disabling long-press on ChatListScreen items for now */}
+        {/* <ChatOptionsSheet
           open={longPressedItem !== null}
           onOpenChange={handleChatOptionsOpenChange}
           channel={longPressedItem ?? undefined}
-        />
+        /> */}
         <StartDmSheet
           goToDm={goToDm}
           open={startDmOpen}

packages/ui/src/components/Channel/UploadedImagePreview.tsx

@@ -14,7 +14,6 @@ export default function UploadedImagePreview({
   resetImageAttachment: () => void;
   uploading?: boolean;
 }) {
-
   return (
     <XStack
       padding="$l"

packages/ui/src/components/Channel/index.tsx

@@ -179,7 +179,7 @@ export function Channel({
               >
                 <ReferencesProvider>
                   <View
-                    paddingBottom={bottom}
+                    paddingBottom={isChatChannel ? bottom : 'unset'}
                     backgroundColor="$background"
                     flex={1}
                   >
@@ -330,7 +330,7 @@ export function Channel({
                           {!isChatChannel && canWrite && !showBigInput && (
                             <View
                               position="absolute"
-                              bottom="$s"
+                              bottom={bottom}
                               flex={1}
                               width="100%"
                               alignItems="center"

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

@@ -104,6 +104,7 @@ function ChannelListItemIcon({
         <ListItem.TextIcon
           fallbackText={utils.getChannelTitle(model)}
           backgroundColor={backgroundColor ?? '$secondaryBackground'}
+          rounded={model.type === 'groupDm'}
         />
       );
     }

packages/ui/src/components/ChannelNavSections.tsx

@@ -27,22 +27,32 @@ export default function ChannelNavSections({
     [channels, group.navSections]
   );
 
-  const hasSomeUnGroupedChannels = useMemo(
+  const sectionHasChannels = useMemo(
     () => unGroupedChannels.length > 0,
     [unGroupedChannels]
   );
 
   return (
     <YStack paddingBottom={paddingBottom} alignSelf="stretch" gap="$s">
-      {group.navSections?.map((section) => (
-        <ChannelNavSection
-          key={section.id}
-          section={section}
-          channels={channels}
-          onSelect={onSelect}
-        />
-      ))}
-      {hasSomeUnGroupedChannels && (
+      {group.navSections?.map((section) => {
+        const sectionChannels = channels.filter((c) =>
+          section.channels?.some((sc) => sc.channelId === c.id)
+        );
+
+        if (sectionChannels.length === 0) {
+          return null;
+        }
+
+        return (
+          <ChannelNavSection
+            key={section.id}
+            section={section}
+            channels={sectionChannels}
+            onSelect={onSelect}
+          />
+        );
+      })}
+      {sectionHasChannels && (
         <YStack>
           <SizableText
             paddingHorizontal="$l"
@@ -53,7 +63,12 @@ export default function ChannelNavSections({
             All Channels
           </SizableText>
           {unGroupedChannels.map((item) => (
-            <ChannelListItem key={item.id} model={item} onPress={onSelect} />
+            <ChannelListItem
+              key={item.id}
+              model={item}
+              onPress={onSelect}
+              useTypeIcon={true}
+            />
           ))}
         </YStack>
       )}

packages/ui/src/components/ListItem.tsx

@@ -126,12 +126,14 @@ const ListItemImageIcon = ({
 const ListItemTextIcon = ({
   fallbackText,
   backgroundColor,
+  rounded,
 }: {
   fallbackText: string;
   backgroundColor?: ColorProp;
+  rounded?: boolean;
 }) => {
   return (
-    <ListItemIconContainer backgroundColor={backgroundColor}>
+    <ListItemIconContainer backgroundColor={backgroundColor} rounded={rounded}>
       <View flex={1} alignItems="center" justifyContent="center">
         <Text fontSize={16} color="$primaryText">
           {fallbackText.slice(0, 1).toUpperCase()}

packages/ui/src/components/ProfileScreenView.tsx

@@ -47,15 +47,11 @@ export function Wrapped(props: Props) {
           )}
         </View>
         <View marginTop="$xl">
-          <ProfileAction title="Edit profile" icon="Draw" />
           <ProfileAction
             title="App Settings"
             icon="Settings"
             onPress={props.onAppSettingsPressed}
           />
-          <ProfileAction title="Connected Accounts" icon="Face" />
-          <ProfileAction title="Submit Feedback" icon="Mail" />
-          <ProfileAction title="Contact Support" icon="Messages" />
         </View>
       </YStack>
     </ScrollView>
@@ -115,7 +111,7 @@ function ProfileRow({
       borderRadius={dark ? '$xl' : undefined}
     >
       <Avatar size="$5xl" contactId={contactId} contact={contact} />
-      <View marginLeft="$l">
+      <View marginLeft="$l" flex={1}>
         {contact?.nickname ? (
           <YStack>
             <ContactName