native: legacy detail views as content renderers

packages/shared/src/api/channelContentConfig.ts

@@ -212,6 +212,14 @@ export const allContentRenderers = {
     displayName: 'Scratchpad',
     enumTag: 'scratchpad',
   },
+  'tlon.r1.content.notebook': {
+    displayName: 'Notebook detail',
+    enumTag: 'notebookDetail',
+  },
+  'tlon.r1.content.gallery': {
+    displayName: 'Gallery detail',
+    enumTag: 'galleryDetail',
+  },
 } as const satisfies Record<string, ComponentSpec>;
 
 export const CollectionRendererId = makeEnum(allCollectionRenderers);

packages/shared/src/utils/object.ts

@@ -32,3 +32,15 @@ export function objectEntries<T extends Record<any, any>>(
 ): { [K in keyof T]: [K, T[K]] }[keyof T][] {
   return objectKeys(obj).map((key) => [key, obj[key]]);
 }
+
+/**
+ * ```ts
+ * Optional<{ foo: string, bar: number, qux?: boolean }, 'foo'> = {
+ *   foo?: string;
+ *   bar: number;
+ *   qux?: boolean;
+ * }
+ * ```
+ */
+export type Optional<T, OptionalKeys extends keyof T> = Omit<T, OptionalKeys> &
+  Partial<Pick<T, OptionalKeys>>;

packages/ui/src/components/ActionSheet.tsx

@@ -24,6 +24,7 @@ import {
 
 import { useCopy } from '../hooks/useCopy';
 import useIsWindowNarrow from '../hooks/useIsWindowNarrow';
+import { ForwardingProps } from '../utils/react';
 import { Icon, IconType } from './Icon';
 import { ListItem } from './ListItem';
 import { Sheet } from './Sheet';
@@ -180,9 +181,7 @@ const ActionSheetHeader = ActionSheetHeaderFrame.styleable(
   ({ children, ...props }, ref) => {
     return (
       <ActionSheetHeaderFrame {...props} ref={ref}>
-        <ListItem paddingHorizontal="$2xl">
-          {children}
-        </ListItem>
+        <ListItem paddingHorizontal="$2xl">{children}</ListItem>
       </ActionSheetHeaderFrame>
     );
   }
@@ -494,39 +493,46 @@ export const SimpleActionSheetHeader = ({
 };
 
 export const SimpleActionSheet = ({
-  open,
-  onOpenChange,
   title,
   subtitle,
   icon,
   actions,
   accent,
-}: {
-  title?: string;
-  subtitle?: string;
-  icon?: ReactElement;
-  actions: Action[];
-  accent?: Accent;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}) => {
+  disableScroll,
+  ...forwardedProps
+}: ForwardingProps<
+  typeof ActionSheetComponent,
+  {
+    title?: string;
+    subtitle?: string;
+    icon?: ReactElement;
+    actions: Action[];
+    accent?: Accent;
+    disableScroll?: boolean;
+  },
+  'children'
+>) => {
+  const Content = disableScroll
+    ? ActionSheet.Content
+    : ActionSheet.ScrollableContent;
+
   return (
-    <ActionSheet open={open} onOpenChange={onOpenChange}>
+    <ActionSheetComponent {...forwardedProps}>
       {title || subtitle ? (
         <SimpleActionSheetHeader
           title={title}
           subtitle={subtitle}
           icon={icon}
         />
       ) : null}
-      <ActionSheet.Content>
+      <Content>
         <ActionSheet.ActionGroup accent={accent ?? 'neutral'}>
           {actions.map((action, index) => (
             <ActionSheet.Action key={index} action={action} />
           ))}
         </ActionSheet.ActionGroup>
-      </ActionSheet.Content>
-    </ActionSheet>
+      </Content>
+    </ActionSheetComponent>
   );
 };
 

packages/ui/src/components/AddGalleryPost.tsx

@@ -50,6 +50,7 @@ export default function AddGalleryPost({
         open={showAddGalleryPost}
         onOpenChange={setShowAddGalleryPost}
         actions={actions}
+        disableScroll
       />
       <AttachmentSheet
         isOpen={showAttachmentSheet}

packages/ui/src/components/ManageChannels/CreateChannelSheet.tsx

@@ -520,6 +520,8 @@ function ConfigInput<
         actions={sheetActions}
         open={sheetOpen}
         onOpenChange={setSheetOpen}
+        snapPointsMode="percent"
+        snapPoints={[70]}
       />
 
       <SimpleActionSheet

packages/ui/src/components/SendPostRetrySheet.tsx

@@ -43,6 +43,7 @@ export const SendPostRetrySheet = ({
       open={open}
       onOpenChange={onOpenChange}
       actions={actions}
+      disableScroll
     />
   );
 };

packages/ui/src/contexts/componentsKits.tsx

@@ -6,6 +6,7 @@ import {
 } from '@tloncorp/shared';
 import * as db from '@tloncorp/shared/db';
 import { Story } from '@tloncorp/shared/urbit';
+import { Optional } from '@tloncorp/shared/utils';
 import { ReactElement, createContext, useContext, useMemo } from 'react';
 import { Text } from 'react-native';
 
@@ -16,8 +17,11 @@ import { ColorPost } from '../components/ColorPost';
 import { useContactName } from '../components/ContactNameV2';
 import { StandaloneDrawingInput } from '../components/DrawingInput';
 import { EditableNotePostContent } from '../components/EditableNotePostContent';
-import { GalleryPost } from '../components/GalleryPost';
-import { NotebookPost } from '../components/NotebookPost';
+import { GalleryPost, GalleryPostDetailView } from '../components/GalleryPost';
+import {
+  NotebookPost,
+  NotebookPostDetailView,
+} from '../components/NotebookPost';
 import { YellPost } from '../components/YellPost';
 import {
   ChatInput,
@@ -63,23 +67,10 @@ export type RenderItemType =
   | RenderItemFunction
   | React.MemoExoticComponent<RenderItemFunction>;
 
-export type MinimalRenderItemProps = {
-  post: db.Post;
-  showAuthor?: boolean;
-  showReplies?: boolean;
-  onPress?: (post: db.Post) => void;
-  onPressReplies?: (post: db.Post) => void;
-  onPressImage?: (post: db.Post, imageUri?: string) => void;
-  onLongPress?: (post: db.Post) => void;
-  editing?: boolean;
-  setEditingPost?: (post: db.Post | undefined) => void;
-  setViewReactionsPost?: (post: db.Post) => void;
-  editPost?: (post: db.Post, content: Story) => Promise<void>;
-  onPressRetry?: (post: db.Post) => void;
-  onPressDelete?: (post: db.Post) => void;
-  isHighlighted?: boolean;
-  contentRendererConfiguration?: Record<string, unknown>;
-};
+export type MinimalRenderItemProps = Optional<
+  RenderItemProps,
+  'onPressRetry' | 'onPressDelete'
+>;
 export type MinimalRenderItemType = React.ComponentType<MinimalRenderItemProps>;
 
 type DraftInputRendererComponent = React.ComponentType<{
@@ -135,6 +126,8 @@ const BUILTIN_CONTENT_RENDERERS: { [id: string]: RenderItemType } = {
   },
   [PostContentRendererId.yell]: YellPost,
   [PostContentRendererId.scratchpad]: EditableNotePostContent,
+  [PostContentRendererId.notebookDetail]: NotebookPostDetailView,
+  [PostContentRendererId.galleryDetail]: GalleryPostDetailView,
 };
 const BUILTIN_DRAFT_INPUTS: { [id: string]: DraftInputRendererComponent } = {
   [DraftInputId.chat]: ChatInput,