native: update detail views to match figma designs

tloncorp · Jun 5, 2024 · 6ac9786 · 6ac9786
1 parent 9cd3ee4
commit 6ac9786
Show file tree

Hide file tree

Showing 27 changed files with 956 additions and 468 deletions.
diff --git a/apps/tlon-mobile/cosmos.imports.ts b/apps/tlon-mobile/cosmos.imports.ts
@@ -3,16 +3,18 @@
 import { RendererConfig, UserModuleWrappers } from 'react-cosmos-core';
 
 import * as fixture0 from './src/App.fixture';
-import * as fixture27 from './src/fixtures/ActionSheet.fixture';
-import * as fixture26 from './src/fixtures/AudioEmbed.fixture';
-import * as fixture25 from './src/fixtures/Button.fixture';
-import * as fixture24 from './src/fixtures/Channel.fixture';
-import * as fixture23 from './src/fixtures/ChannelDivider.fixture';
-import * as fixture22 from './src/fixtures/ChannelHeader.fixture';
-import * as fixture21 from './src/fixtures/ChannelSwitcherSheet.fixture';
-import * as fixture20 from './src/fixtures/ChatMessage.fixture';
-import * as fixture19 from './src/fixtures/ChatReference.fixture';
-import * as fixture18 from './src/fixtures/ContactList.fixture';
+import * as fixture29 from './src/fixtures/ActionSheet.fixture';
+import * as fixture28 from './src/fixtures/AudioEmbed.fixture';
+import * as fixture27 from './src/fixtures/BlockSectionList.fixture';
+import * as fixture26 from './src/fixtures/Button.fixture';
+import * as fixture25 from './src/fixtures/Channel.fixture';
+import * as fixture24 from './src/fixtures/ChannelDivider.fixture';
+import * as fixture23 from './src/fixtures/ChannelHeader.fixture';
+import * as fixture22 from './src/fixtures/ChannelSwitcherSheet.fixture';
+import * as fixture21 from './src/fixtures/ChatMessage.fixture';
+import * as fixture20 from './src/fixtures/ChatReference.fixture';
+import * as fixture19 from './src/fixtures/ContactList.fixture';
+import * as fixture18 from './src/fixtures/DetailView.fixture';
 import * as fixture17 from './src/fixtures/GalleryPost.fixture';
 import * as fixture16 from './src/fixtures/GroupList.fixture';
 import * as fixture15 from './src/fixtures/GroupListItem.fixture';
@@ -56,16 +58,18 @@ const fixtures = {
   'src/fixtures/GroupListItem.fixture.tsx': { module: fixture15 },
   'src/fixtures/GroupList.fixture.tsx': { module: fixture16 },
   'src/fixtures/GalleryPost.fixture.tsx': { module: fixture17 },
-  'src/fixtures/ContactList.fixture.tsx': { module: fixture18 },
-  'src/fixtures/ChatReference.fixture.tsx': { module: fixture19 },
-  'src/fixtures/ChatMessage.fixture.tsx': { module: fixture20 },
-  'src/fixtures/ChannelSwitcherSheet.fixture.tsx': { module: fixture21 },
-  'src/fixtures/ChannelHeader.fixture.tsx': { module: fixture22 },
-  'src/fixtures/ChannelDivider.fixture.tsx': { module: fixture23 },
-  'src/fixtures/Channel.fixture.tsx': { module: fixture24 },
-  'src/fixtures/Button.fixture.tsx': { module: fixture25 },
-  'src/fixtures/AudioEmbed.fixture.tsx': { module: fixture26 },
-  'src/fixtures/ActionSheet.fixture.tsx': { module: fixture27 },
+  'src/fixtures/DetailView.fixture.tsx': { module: fixture18 },
+  'src/fixtures/ContactList.fixture.tsx': { module: fixture19 },
+  'src/fixtures/ChatReference.fixture.tsx': { module: fixture20 },
+  'src/fixtures/ChatMessage.fixture.tsx': { module: fixture21 },
+  'src/fixtures/ChannelSwitcherSheet.fixture.tsx': { module: fixture22 },
+  'src/fixtures/ChannelHeader.fixture.tsx': { module: fixture23 },
+  'src/fixtures/ChannelDivider.fixture.tsx': { module: fixture24 },
+  'src/fixtures/Channel.fixture.tsx': { module: fixture25 },
+  'src/fixtures/Button.fixture.tsx': { module: fixture26 },
+  'src/fixtures/BlockSectionList.fixture.tsx': { module: fixture27 },
+  'src/fixtures/AudioEmbed.fixture.tsx': { module: fixture28 },
+  'src/fixtures/ActionSheet.fixture.tsx': { module: fixture29 },
 };
 
 const decorators = {

diff --git a/apps/tlon-mobile/src/fixtures/DetailView.fixture.tsx b/apps/tlon-mobile/src/fixtures/DetailView.fixture.tsx
@@ -0,0 +1,83 @@
+import { PostScreenView } from '@tloncorp/ui/src';
+
+import { FixtureWrapper } from './FixtureWrapper';
+import {
+  createFakePost,
+  createFakePosts,
+  tlonLocalBulletinBoard,
+  tlonLocalGettingStarted,
+} from './fakeData';
+
+const notebookPost = createFakePost('note');
+const notebookReplies = createFakePosts(notebookPost.replyCount ?? 5, 'reply');
+const galleryPost = createFakePost(
+  'block',
+  undefined,
+  'https://togten.com:9001/finned-palmer/finned-palmer/2024.3.19..21.2.17..5581.0624.dd2f.1a9f-image.png'
+);
+const galleryReplies = createFakePosts(galleryPost.replyCount ?? 5, 'reply');
+
+const NotebookDetailViewFixture = () => {
+  return (
+    <FixtureWrapper>
+      <PostScreenView
+        parentPost={notebookPost}
+        posts={notebookReplies}
+        contacts={[]}
+        channel={tlonLocalGettingStarted}
+        currentUserId={notebookPost.authorId}
+        sendReply={() => {}}
+        groupMembers={[]}
+        negotiationMatch={true}
+        editPost={() => {}}
+        uploadInfo={{
+          uploading: false,
+          uploadedImage: null,
+          imageAttachment: null,
+          setAttachments: () => {},
+          resetImageAttachment: () => {},
+          canUpload: true,
+        }}
+        storeDraft={() => {}}
+        clearDraft={() => {}}
+        getDraft={async () => ({})}
+        goBack={() => {}}
+      />
+    </FixtureWrapper>
+  );
+};
+
+const GalleryDetailViewFixture = () => {
+  return (
+    <FixtureWrapper>
+      <PostScreenView
+        parentPost={galleryPost}
+        posts={galleryReplies}
+        contacts={[]}
+        channel={tlonLocalBulletinBoard}
+        currentUserId={galleryPost.authorId}
+        sendReply={() => {}}
+        groupMembers={[]}
+        negotiationMatch={true}
+        editPost={() => {}}
+        uploadInfo={{
+          uploading: false,
+          uploadedImage: null,
+          imageAttachment: null,
+          setAttachments: () => {},
+          resetImageAttachment: () => {},
+          canUpload: true,
+        }}
+        storeDraft={() => {}}
+        clearDraft={() => {}}
+        getDraft={async () => ({})}
+        goBack={() => {}}
+      />
+    </FixtureWrapper>
+  );
+};
+
+export default {
+  notebook: NotebookDetailViewFixture,
+  galleryPost: GalleryDetailViewFixture,
+};
diff --git a/packages/editor/src/MessageInputEditor.tsx b/packages/editor/src/MessageInputEditor.tsx
@@ -75,7 +75,11 @@ export const MessageInputEditor = () => {
       style={{
         overflow: 'auto',
         height: 'auto',
-        // making this explicit
+        paddingTop: 2,
+        paddingBottom: 2,
+        paddingLeft: 12,
+        paddingRight: 12,
+        minHeight: 32,
         fontSize: 16,
         color: useIsDark() ? 'white' : 'black',
         fontFamily:

diff --git a/packages/editor/src/index.css b/packages/editor/src/index.css
@@ -12,3 +12,11 @@
   background-color: #6161611a;
   border-radius: 4px;
 }
+
+p {
+  display: block;
+  margin-block-start: 12px;
+  margin-block-end: 12px;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+}
diff --git a/packages/shared/src/logic/utils.ts b/packages/shared/src/logic/utils.ts
@@ -334,6 +334,33 @@ export const textPostIsLinkedImage = (post: db.Post): boolean => {
   return false;
 };
 
+export const textPostIsReference = (post: db.Post): boolean => {
+  const { inlines, references } = extractContentTypesFromPost(post);
+  if (references.length === 0) {
+    return false;
+  }
+
+  if (inlines.length === 2) {
+    const [first] = inlines;
+    const isRefString =
+      typeof first === 'string' && REF_REGEX.test(first as string);
+
+    if (isRefString) {
+      return true;
+    }
+  }
+
+  if (
+    inlines.length === 1 &&
+    typeof inlines[0] === 'object' &&
+    'break' in inlines[0]
+  ) {
+    return true;
+  }
+
+  return false;
+};
+
 export const getCompositeGroups = (
   groups: db.Group[],
   base: Partial<db.Group>[]

diff --git a/packages/ui/src/assets/icons/Dots.svg b/packages/ui/src/assets/icons/Dots.svg
diff --git a/packages/ui/src/assets/icons/index.ts b/packages/ui/src/assets/icons/index.ts
@@ -2,6 +2,7 @@ export { default as Bold } from './Bold.svg';
 export { default as BlockQuote } from './BlockQuote.svg';
 export { default as BulletList } from './BulletList.svg';
 export { default as FontSize } from './FontSize.svg';
+export { default as Dots } from './Dots.svg';
 export { default as Italic } from './Italic.svg';
 export { default as Keyboard } from './Keyboard.svg';
 export { default as Strikethrough } from './Strikethrough.svg';

diff --git a/packages/ui/src/components/ActionSheet.tsx b/packages/ui/src/components/ActionSheet.tsx
@@ -44,6 +44,7 @@ const ActionSheetActionFrame = styled(Stack, {
   context: ActionSheetActionContext,
   padding: '$l',
   borderWidth: 1,
+  gap: '$s',
   borderRadius: '$l',
   pressStyle: {
     backgroundColor: '$positiveBackground',
@@ -52,7 +53,7 @@ const ActionSheetActionFrame = styled(Stack, {
     default: {
       true: {
         backgroundColor: '$background',
-        borderColor: '$tertiaryText',
+        borderColor: '$shadow',
       },
     },
     success: {

diff --git a/packages/ui/src/components/AuthorRow.tsx b/packages/ui/src/components/AuthorRow.tsx
@@ -2,7 +2,7 @@ import { utils } from '@tloncorp/shared';
 import * as db from '@tloncorp/shared/dist/db';
 import { useMemo } from 'react';
 
-import { SizableText, View, XStack } from '../core';
+import { SizableText, SizeTokens, View, XStack } from '../core';
 import { Avatar } from './Avatar';
 import ContactName from './ContactName';
 import { ListItem } from './ListItem';
@@ -30,8 +30,7 @@ export default function AuthorRow({
   sent,
   roles,
   type,
-  parentPost,
-  setShowComments,
+  detailView,
   width,
 }: {
   author?: db.Contact | null;
@@ -40,47 +39,21 @@ export default function AuthorRow({
   roles?: string[];
   deliveryStatus?: db.PostDeliveryStatus | null;
   type?: db.PostType;
-  parentPost?: db.Post;
-  setShowComments?: (show: boolean) => void;
-  width?: number;
+  detailView?: boolean;
+  width?: SizeTokens;
 }) {
   const timeDisplay = useMemo(() => {
     const date = new Date(sent);
     return utils.makePrettyTime(date);
   }, [sent]);
   const firstRole = roles?.[0];
 
-  if (parentPost) {
+  if (detailView) {
     return (
-      <Pressable onPress={() => setShowComments?.(true)}>
-        <XStack
-          padding="$l"
-          alignItems="center"
-          gap="$s"
-          height={AUTHOR_ROW_HEIGHT_DETAIL_VIEW}
-          justifyContent="space-between"
-        >
-          <XStack maxWidth="80%" gap="$s" alignItems="center">
-            <Avatar
-              size="$2xl"
-              contact={parentPost.author}
-              contactId={parentPost.authorId}
-            />
-            <ContactName
-              maxWidth="80%"
-              showNickname
-              fontWeight="500"
-              userId={parentPost.authorId}
-            />
-          </XStack>
-          <XStack gap="$s" alignItems="center">
-            <SizableText color="$primaryText" size="$xs">
-              {timeDisplay}
-            </SizableText>
-            <ListItem.Count>{parentPost.replyCount ?? 0}</ListItem.Count>
-          </XStack>
-        </XStack>
-      </Pressable>
+      <XStack gap="$s" alignItems="center">
+        <Avatar size="$2xl" contact={author} contactId={authorId} />
+        <ContactName width="100%" showNickname userId={authorId} />
+      </XStack>
     );
   }
 
@@ -123,10 +96,7 @@ export default function AuthorRow({
     return (
       <XStack gap="$s" alignItems="center">
         <Avatar size="$2xl" contact={author} contactId={authorId} />
-        <ContactName width="50%" showNickname userId={authorId} />
-        <SizableText color="$secondaryText" fontSize="$s">
-          {timeDisplay}
-        </SizableText>
+        <ContactName width="100%" showNickname userId={authorId} />
       </XStack>
     );
   }