From f27d449ae478862ecaaf289b375ac3c081e223ce Mon Sep 17 00:00:00 2001
From: David Lee <david.isaac.lee@gmail.com>
Date: Tue, 22 Oct 2024 18:19:24 -0700
Subject: [PATCH] Add cards collection layout

---
 .../shared/src/api/channelContentConfig.ts    |  1 +
 .../ManageChannels/CreateChannelSheet.tsx     |  3 +
 .../CardsPostCollectionView.tsx               | 61 +++++++++++++++++++
 packages/ui/src/contexts/componentsKits.tsx   |  2 +
 4 files changed, 67 insertions(+)
 create mode 100644 packages/ui/src/components/postCollectionViews/CardsPostCollectionView.tsx

diff --git a/packages/shared/src/api/channelContentConfig.ts b/packages/shared/src/api/channelContentConfig.ts
index 35f5b89fcb..c0a4193605 100644
--- a/packages/shared/src/api/channelContentConfig.ts
+++ b/packages/shared/src/api/channelContentConfig.ts
@@ -2,6 +2,7 @@ export enum CollectionRendererId {
   notebook = 'tlon.r0.collection.notebook',
   chat = 'tlon.r0.collection.chat',
   gallery = 'tlon.r0.collection.gallery',
+  cards = 'tlon.r0.collection.cards',
 }
 
 export enum DraftInputId {
diff --git a/packages/ui/src/components/ManageChannels/CreateChannelSheet.tsx b/packages/ui/src/components/ManageChannels/CreateChannelSheet.tsx
index 8ee015b8b5..005c8a0121 100644
--- a/packages/ui/src/components/ManageChannels/CreateChannelSheet.tsx
+++ b/packages/ui/src/components/ManageChannels/CreateChannelSheet.tsx
@@ -180,6 +180,8 @@ function labelForCollectionLayout(l: CollectionRendererId): string {
       return 'Gallery';
     case CollectionRendererId.notebook:
       return 'Notebook';
+    case CollectionRendererId.cards:
+      return 'Cards';
   }
 }
 
@@ -216,6 +218,7 @@ const CustomChannelConfigurationForm = forwardRef<{
         CollectionRendererId.chat,
         CollectionRendererId.gallery,
         CollectionRendererId.notebook,
+        CollectionRendererId.cards,
       ].map((id) => ({
         title: labelForCollectionLayout(id),
         value: id,
diff --git a/packages/ui/src/components/postCollectionViews/CardsPostCollectionView.tsx b/packages/ui/src/components/postCollectionViews/CardsPostCollectionView.tsx
new file mode 100644
index 0000000000..b04cbd1bd9
--- /dev/null
+++ b/packages/ui/src/components/postCollectionViews/CardsPostCollectionView.tsx
@@ -0,0 +1,61 @@
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { Text, View, useWindowDimensions } from 'tamagui';
+
+import { usePostCollectionContextUnsafelyUnwrapped } from '../../contexts/postCollection';
+import { ConnectedPostView, IPostCollectionView } from './shared';
+
+export const CardsPostCollection: IPostCollectionView = forwardRef(
+  function CardsPostCollection(_props, forwardedRef) {
+    const ctx = usePostCollectionContextUnsafelyUnwrapped();
+    useImperativeHandle(forwardedRef, () => ({
+      scrollToPostAtIndex(_index: number) {
+        console.warn('not implemented');
+      },
+    }));
+
+    const [displayedIndex, setDisplayedIndex] = useState<number | null>(null);
+
+    useEffect(() => {
+      if (ctx.posts && displayedIndex == null) {
+        setDisplayedIndex(0);
+      }
+
+      if (
+        ctx.posts &&
+        displayedIndex != null &&
+        displayedIndex > ctx.posts.length
+      ) {
+        setDisplayedIndex(ctx.posts.length - 1);
+      }
+    }, [ctx.posts, displayedIndex]);
+
+    const displayedPost = ctx.posts?.[displayedIndex ?? 0];
+
+    const windowDimensions = useWindowDimensions();
+
+    return (
+      <View
+        onPress={(event) => {
+          if (displayedIndex != null && ctx.posts != null) {
+            const delta =
+              event.nativeEvent.locationY < windowDimensions.width * 0.5
+                ? -1
+                : 1;
+            setDisplayedIndex((displayedIndex + delta) % ctx.posts.length);
+          } else {
+            setDisplayedIndex(null);
+          }
+        }}
+        alignItems="stretch"
+        justifyContent="center"
+        flex={1}
+      >
+        {displayedPost == null ? (
+          <Text>Loading...</Text>
+        ) : (
+          <ConnectedPostView post={displayedPost} showAuthor />
+        )}
+      </View>
+    );
+  }
+);
diff --git a/packages/ui/src/contexts/componentsKits.tsx b/packages/ui/src/contexts/componentsKits.tsx
index fa830fcabf..29e97eac31 100644
--- a/packages/ui/src/contexts/componentsKits.tsx
+++ b/packages/ui/src/contexts/componentsKits.tsx
@@ -16,6 +16,7 @@ import {
   GalleryInput,
   NotebookInput,
 } from '../components/draftInputs';
+import { CardsPostCollection } from '../components/postCollectionViews/CardsPostCollectionView';
 import { ListPostCollection } from '../components/postCollectionViews/ListPostCollectionView';
 import { IPostCollectionView } from '../components/postCollectionViews/shared';
 
@@ -105,6 +106,7 @@ const BUILTIN_COLLECTION_RENDERERS: {
   [CollectionRendererId.chat]: ListPostCollection,
   [CollectionRendererId.gallery]: ListPostCollection,
   [CollectionRendererId.notebook]: ListPostCollection,
+  [CollectionRendererId.cards]: CardsPostCollection,
 };
 
 export function ComponentsKitContextProvider({