detail views: fix bad layouts for comments

tloncorp · Oct 18, 2024 · 4ec9a7a · 4ec9a7a
1 parent 8840574
commit 4ec9a7a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/packages/shared/src/types/PostCollectionConfiguration.ts b/packages/shared/src/types/PostCollectionConfiguration.ts
@@ -13,13 +13,16 @@ export type PostCollectionLayoutType =
 // If the caller has a non-nullable `channel`, they can then get a
 // non-nullable return value - nice, right?
 export function layoutTypeFromChannel(
-  channel: db.Channel
+  channel: db.Channel,
+  detailView?: boolean
 ): PostCollectionLayoutType;
 export function layoutTypeFromChannel(
-  channel: db.Channel | null
+  channel: db.Channel | null,
+  detailView?: boolean
 ): PostCollectionLayoutType | null;
 export function layoutTypeFromChannel(
-  channel: db.Channel | null
+  channel: db.Channel | null,
+  detailView?: boolean
 ): PostCollectionLayoutType | null {
   switch (channel?.type) {
     case null:
@@ -35,9 +38,15 @@ export function layoutTypeFromChannel(
       return 'compact-list-bottom-to-top';
 
     case 'notebook':
+      if (detailView) {
+        return 'compact-list-bottom-to-top';
+      }
       return 'comfy-list-top-to-bottom';
 
     case 'gallery':
+      if (detailView) {
+        return 'compact-list-bottom-to-top';
+      }
       return 'grid';
   }
 }

diff --git a/packages/ui/src/components/Channel/Scroller.tsx b/packages/ui/src/components/Channel/Scroller.tsx
@@ -94,6 +94,7 @@ const Scroller = forwardRef(
       renderEmptyComponent: renderEmptyComponentFn,
       posts,
       channel,
+      detailView,
       firstUnreadId,
       unreadCount,
       onStartReached,
@@ -118,6 +119,7 @@ const Scroller = forwardRef(
       renderEmptyComponent?: () => ReactElement;
       posts: db.Post[] | null;
       channel: db.Channel;
+      detailView?: boolean;
       firstUnreadId?: string | null;
       unreadCount?: number | null;
       onStartReached?: () => void;
@@ -141,7 +143,7 @@ const Scroller = forwardRef(
     ref
   ) => {
     const collectionLayoutType = useMemo(
-      () => layoutTypeFromChannel(channel),
+      () => layoutTypeFromChannel(channel, detailView),
       [channel]
     );
     const collectionLayout = useMemo(

diff --git a/packages/ui/src/components/DetailView.tsx b/packages/ui/src/components/DetailView.tsx
@@ -64,6 +64,7 @@ export const DetailView = ({
           inverted
           renderItem={ChatMessage}
           channel={channel}
+          detailView
           editingPost={editingPost}
           setEditingPost={setEditingPost}
           posts={resolvedPosts ?? null}
@@ -97,6 +98,7 @@ export const DetailView = ({
     setActiveMessage,
     setEditingPost,
     headerMode,
+    channel
   ]);
 
   return isChat ? (