native: implement notebook refs

packages/ui/src/components/ContentReference/ChannelReference.tsx

@@ -2,6 +2,7 @@ import { getChannelType } from '@tloncorp/shared/dist/urbit';
 
 import { PostViewMode } from '../ContentRenderer';
 import ChatReferenceWrapper from './ChatReferenceWrapper';
+import NotebookReferenceWrapper from './NotebookReferenceWrapper';
 import ReferenceSkeleton from './ReferenceSkeleton';
 
 export default function ChannelReference({
@@ -32,11 +33,13 @@ export default function ChannelReference({
   }
 
   if (channelType === 'notebook') {
-    // TODO: Implement notebook reference
     return (
-      <ReferenceSkeleton
-        message="Notebook references are not yet supported"
-        messageType="error"
+      <NotebookReferenceWrapper
+        asAttachment={asAttachment}
+        viewMode={viewMode}
+        channelId={channelId}
+        postId={postId}
+        replyId={replyId}
       />
     );
   }

packages/ui/src/components/ContentReference/ChatReference.tsx

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 
 import { ContactAvatar } from '../Avatar';
 import ContactName from '../ContactName';
-import ChatContent, { PostViewMode } from '../ContentRenderer';
+import ContentRenderer, { PostViewMode } from '../ContentRenderer';
 import { Reference } from './Reference';
 
 export default function ChatReference({
@@ -51,7 +51,7 @@ export default function ChatReference({
         <Reference.Icon type="ArrowRef" />
       </Reference.Header>
       <Reference.Body>
-        <ChatContent
+        <ContentRenderer
           viewMode={viewMode}
           shortened={asAttachment || viewMode === 'block'}
           post={post}

packages/ui/src/components/ContentReference/NotebookReference.tsx

@@ -0,0 +1,58 @@
+import * as db from '@tloncorp/shared/dist/db';
+import { useCallback } from 'react';
+
+import { ContactAvatar } from '../Avatar';
+import ContactName from '../ContactName';
+import ContentRenderer, { PostViewMode } from '../ContentRenderer';
+import { Reference } from './Reference';
+
+export default function NotebookReference({
+  channel,
+  post,
+  onPress,
+  asAttachment = false,
+  viewMode = 'chat',
+}: {
+  channel?: db.Channel;
+  post: db.Post;
+  onPress: (channel: db.Channel, post: db.Post) => void;
+  asAttachment?: boolean;
+  viewMode?: PostViewMode;
+}) {
+  const navigateToChannel = useCallback(() => {
+    if (asAttachment) {
+      return;
+    }
+    if (channel && post) {
+      onPress(channel, post);
+    }
+  }, [channel, onPress, post, asAttachment]);
+
+  if (!post) {
+    return null;
+  }
+
+  return (
+    <Reference
+      viewMode={viewMode}
+      asAttachment={asAttachment}
+      onPress={navigateToChannel}
+    >
+      <Reference.Header>
+        <Reference.Title>
+          <ContactAvatar contactId={post.authorId} size="$xl" />
+          <ContactName
+            color="$tertiaryText"
+            size="$s"
+            userId={post.authorId}
+            showNickname
+          />
+        </Reference.Title>
+        <Reference.Icon type="ArrowRef" />
+      </Reference.Header>
+      <Reference.Body>
+        <ContentRenderer viewMode={viewMode} shortened={true} post={post} />
+      </Reference.Body>
+    </Reference>
+  );
+}

packages/ui/src/components/ContentReference/NotebookReferenceWrapper.tsx

@@ -0,0 +1,63 @@
+import { useNavigation } from '../../contexts';
+import { useRequests } from '../../contexts/requests';
+import { PostViewMode } from '../ContentRenderer';
+import NotebookReference from './NotebookReference';
+import ReferenceSkeleton from './ReferenceSkeleton';
+
+export default function NotebookReferenceWrapper({
+  channelId,
+  postId,
+  replyId,
+  asAttachment = false,
+  viewMode = 'chat',
+}: {
+  channelId: string;
+  postId: string;
+  replyId?: string;
+  asAttachment?: boolean;
+  viewMode?: PostViewMode;
+}) {
+  const { usePostReference, useChannel } = useRequests();
+  const {
+    data: post,
+    isError,
+    error,
+    isLoading,
+  } = usePostReference({
+    postId: replyId ? replyId : postId,
+    channelId: channelId,
+  });
+  const { data: channel } = useChannel({ id: channelId });
+  const { onPressRef } = useNavigation();
+
+  if (isError) {
+    return (
+      <ReferenceSkeleton
+        message={error?.message || 'Error loading content'}
+        messageType="error"
+      />
+    );
+  }
+
+  if (!post) {
+    if (isLoading) {
+      return <ReferenceSkeleton messageType="loading" />;
+    }
+    return (
+      <ReferenceSkeleton
+        messageType="not-found"
+        message="This content could not be found"
+      />
+    );
+  }
+
+  return (
+    <NotebookReference
+      post={post}
+      channel={channel ?? undefined}
+      onPress={onPressRef}
+      asAttachment={asAttachment}
+      viewMode={viewMode}
+    />
+  );
+}

packages/ui/src/components/ContentRenderer.tsx

@@ -851,16 +851,33 @@ export default function ContentRenderer({
   if (shortened) {
     return (
       <YStack width="100%">
-        {shortenedInlines.length > 0 ? (
-          <LineRenderer
-            inlines={shortenedInlines}
-            isNotice={isNotice}
-            onPressImage={onPressImage}
-            onLongPress={onLongPress}
-            viewMode={viewMode}
+        {post.type === 'note' && post.image ? (
+          <Image
+            source={{ uri: post.image }}
+            aspectRatio={16 / 9}
+            width="100%"
+            backgroundColor="$secondaryBackground"
+          />
+        ) : null}
+        {post.type === 'note' && post.title ? (
+          <HeaderText
             serif
+            header={{
+              header: {
+                tag: 'h1',
+                content: [post.title],
+              },
+            }}
           />
         ) : null}
+        <LineRenderer
+          inlines={shortenedInlines}
+          isNotice={isNotice}
+          onPressImage={onPressImage}
+          onLongPress={onLongPress}
+          viewMode={viewMode}
+          serif={post.type === 'note'}
+        />
       </YStack>
     );
   }