Embeds use newspaper card, fixing latest

frontend/apps/desktop/src/components/app-embeds.tsx

@@ -1,5 +1,5 @@
 import {useAccount_deprecated} from '@/models/accounts'
-import {useSubscribedEntity} from '@/models/entities'
+import {useEntities, useSubscribedEntity} from '@/models/entities'
 import {
   DAEMON_FILE_URL,
   UnpackedHypermediaId,
@@ -14,10 +14,11 @@ import {
   BlockNodeList,
   Button,
   ContentEmbed,
-  DocumentCardView,
   EntityComponentProps,
+  ErrorBlock,
   HMIcon,
   InlineEmbedButton,
+  NewspaperCard,
   SizableText,
   UIAvatar,
   XStack,
@@ -26,6 +27,7 @@ import {
   getBlockNodeById,
   useDocContentContext,
 } from '@shm/ui'
+import {Spinner} from '@shm/ui/src/spinner'
 import {ArrowUpRightSquare} from '@tamagui/lucide-icons'
 import {
   ComponentProps,
@@ -246,18 +248,25 @@ export function EmbedDocContent(props: EntityComponentProps) {
 
 export function EmbedDocumentCard(props: EntityComponentProps) {
   const doc = useSubscribedEntity(props)
-  let textContent = useMemo(() => {
-    if (doc.data?.document?.content) {
-      let content = ''
-      doc.data?.document?.content.forEach((bn) => {
-        content += bn.block?.text + ' '
-      })
-      return content
-    }
-  }, [doc.data])
+  const authors = useEntities(
+    doc.data?.document?.authors?.map((uid) => hmId('d', uid)) || [],
+  )
   const view =
     (props.block.type === 'Embed' ? props.block.attributes.view : undefined) ||
     'Content'
+  if (doc.isLoading) return <Spinner />
+  if (!doc.data) return <ErrorBlock message="Could not load embed" />
+  const id: UnpackedHypermediaId = {
+    type: props.type,
+    id: props.id,
+    uid: props.uid,
+    path: props.path,
+    blockRef: props.blockRef,
+    blockRange: props.blockRange,
+    version: props.version,
+    hostname: props.hostname,
+    scheme: props.scheme,
+  }
   return (
     <EmbedWrapper
       id={{
@@ -274,12 +283,15 @@ export function EmbedDocumentCard(props: EntityComponentProps) {
       parentBlockId={props.parentBlockId}
       viewType={view}
     >
-      <DocumentCardView
-        title={getDocumentTitle(doc.data?.document)}
-        textContent={textContent}
-        editors={doc.data?.document?.authors || []}
-        IconComponent={IconComponent}
-        date={doc.data?.document?.updateTime}
+      <NewspaperCard
+        entity={{
+          id,
+          document: doc.data.document,
+        }}
+        id={id}
+        accountsMetadata={authors
+          .map((author) => author.data)
+          .filter((d) => !!d)}
       />
     </EmbedWrapper>
   )

frontend/apps/desktop/src/components/newspaper-layout.tsx

@@ -68,7 +68,7 @@ export function NewspaperLayout({
         {restItems.map((item) => {
           return (
             <NewspaperCard
-              item={item}
+              id={id}
               entity={getEntity(item.path)}
               key={item.path.join('/')}
               accountsMetadata={accountsMetadata}

frontend/apps/desktop/src/editor/embed-block.tsx

@@ -451,7 +451,9 @@ function EmbedControl({
               backgroundColor="$backgroundStrong"
               size="$2"
               iconAfter={ChevronDown}
-            >{`version: ${versionValue}`}</Button>
+            >
+              {versionValue === 'exact' ? 'Exact Version' : 'Latest Version'}
+            </Button>
           </Popover.Trigger>
           <Popover.Content asChild>
             <YGroup padding={0} width={120} elevation="$4">

frontend/apps/desktop/src/editor/media-render.tsx

@@ -31,7 +31,7 @@ export type MediaType = {
     url: string
     name: string
     size?: string
-    display?: 'content' | 'card'
+    view?: 'Content' | 'Card'
     width?: string
   }
   children: []

frontend/apps/desktop/src/models/entities.ts

@@ -162,17 +162,18 @@ export function queryEntity(
   id: UnpackedHypermediaId | null | undefined,
   options?: UseQueryOptions<HMEntityContent | null>,
 ): UseQueryOptions<HMEntityContent | null> {
+  const version = id?.latest ? undefined : id?.version || undefined
   return {
     ...options,
     enabled: options?.enabled ?? !!id,
-    queryKey: [queryKeys.ENTITY, id?.id, id?.version],
+    queryKey: [queryKeys.ENTITY, id?.id, version],
     queryFn: async (): Promise<HMEntityContent | null> => {
       if (!id) return null
       try {
         const grpcDocument = await grpcClient.documents.getDocument({
           account: id.uid,
           path: hmIdPathToEntityQueryPath(id.path),
-          version: id.version || undefined,
+          version,
         })
         const serverDocument = toPlainMessage(grpcDocument)
 

frontend/apps/web/app/newspaper.tsx

@@ -66,7 +66,7 @@ export function NewspaperPage(props: SiteDocumentPayload) {
             {restItems.map((item) => {
               return (
                 <NewspaperCard
-                  item={item}
+                  id={id}
                   entity={getEntity(item.path)}
                   key={item.path.join("/")}
                   accountsMetadata={authors}

frontend/apps/web/app/web-embeds.tsx

@@ -7,14 +7,16 @@ import {
 } from "@shm/shared";
 import {
   ContentEmbed,
-  DocumentCardView,
   EntityComponentProps,
+  ErrorBlock,
   InlineEmbedButton,
 } from "@shm/ui/src/document-content";
 import {HMIcon} from "@shm/ui/src/hm-icon";
+import {NewspaperCard} from "@shm/ui/src/newspaper";
+import {Spinner} from "@shm/ui/src/spinner";
 import {Text} from "@tamagui/core";
 import {YStack} from "@tamagui/stacks";
-import {useMemo, useState} from "react";
+import {useState} from "react";
 import {useEntity} from "./models";
 
 function EmbedWrapper({
@@ -49,7 +51,8 @@ function EmbedWrapper({
 }
 
 export function EmbedDocument(props: EntityComponentProps) {
-  if (props.block.attributes?.view == "card") {
+  if (props.block.type !== "Embed") return null;
+  if (props.block.attributes?.view == "Card") {
     return <EmbedDocumentCard {...props} />;
   } else {
     return <EmbedDocContent {...props} />;
@@ -87,24 +90,17 @@ function DocInlineEmbed(props: EntityComponentProps) {
 
 export function EmbedDocumentCard(props: EntityComponentProps) {
   const doc = useEntity(props);
-  let textContent = useMemo(() => {
-    if (doc.data?.document?.content) {
-      let content = "";
-      doc.data?.document?.content.forEach((bn) => {
-        content += bn.block?.text + " ";
-      });
-      return content;
-    }
-  }, [doc.data]);
-
+  if (doc.isLoading) return <Spinner />;
+  if (!doc.data) return <ErrorBlock message="Could not load embed" />;
   return (
     <EmbedWrapper id={props} parentBlockId={props.parentBlockId}>
-      <DocumentCardView
-        title={getDocumentTitle(doc.data?.document)}
-        textContent={textContent}
-        editors={doc.data?.document?.authors || []}
-        IconComponent={HMIconComponent}
-        date={doc.data?.document?.updateTime}
+      <NewspaperCard
+        entity={{
+          id: props,
+          document: doc.data.document,
+        }}
+        id={props}
+        accountsMetadata={doc.data.authors}
       />
     </EmbedWrapper>
   );

frontend/packages/ui/src/document-content.tsx

@@ -8,12 +8,10 @@ import {
   HMBlockChildrenType,
   HMBlockNode,
   HMDocument,
-  HMTimestamp,
   Mention,
   UnpackedHypermediaId,
   clipContentBlocks,
   formatBytes,
-  formattedDate,
   getCIDFromIPFSUrl,
   getDocumentTitle,
   getFileUrl,
@@ -1466,7 +1464,14 @@ export function ErrorBlock({
       content={debugData ? (open ? "Hide debug Data" : "Show debug data") : ""}
     >
       <YStack f={1} className="block-content block-unknown">
-        <ButtonFrame theme="red" gap="$2" onPress={() => toggleOpen((v) => !v)}>
+        <ButtonFrame
+          theme="red"
+          gap="$2"
+          onPress={(e) => {
+            e.stopPropagation();
+            toggleOpen((v) => !v);
+          }}
+        >
           <SizableText flex={1} color="$red10">
             {message ? message : "Error"}
           </SizableText>
@@ -1601,9 +1606,9 @@ export function ContentEmbed({
               expanded
               blockNode={{
                 block: {
-                  type: "heading",
+                  type: "Heading",
                   id: `heading-${props.uid}`,
-                  text: getDocumentTitle(document),
+                  text: getDocumentTitle(document) || "",
                   attributes: {
                     childrenType: "Group",
                   },
@@ -2235,48 +2240,6 @@ function RadioGroupItemWithLabel(props: {value: string; label: string}) {
   );
 }
 
-export function DocumentCardView({
-  title,
-  textContent,
-  editors,
-  IconComponent,
-  date,
-}: {
-  title?: string;
-  textContent?: string;
-  editors?: Array<string>;
-  IconComponent: React.FC<{accountId?: string}>;
-  date?: HMTimestamp;
-}) {
-  return (
-    <XStack padding="$2">
-      <YStack flex={1} gap="$2">
-        <SizableText
-          size="$7"
-          fontWeight="bold"
-          textAlign="left"
-          textOverflow="ellipsis"
-          whiteSpace="nowrap"
-          overflow="hidden"
-        >
-          {title}
-        </SizableText>
-        {/* the maxHeight here is defined by the lineHeight of the content,
-        so if we change the size of the text we need to change the maxHeight too */}
-        <YStack overflow="hidden" maxHeight={20 * 3}>
-          <SizableText>{textContent}</SizableText>
-        </YStack>
-        <XStack gap="$3" ai="center">
-          <EditorsAvatars editors={editors} IconComponent={IconComponent} />
-          {date ? (
-            <SizableText size="$1">{formattedDate(date)}</SizableText>
-          ) : null}
-        </XStack>
-      </YStack>
-    </XStack>
-  );
-}
-
 export function getBlockNode(
   blockNodes: HMBlockNode[] | undefined,
   blockId: string
@@ -2291,30 +2254,3 @@ export function getBlockNode(
   }
   return null;
 }
-
-function EditorsAvatars({
-  editors,
-  IconComponent,
-}: {
-  editors?: Array<string>;
-  IconComponent: React.FC<{accountId?: string}>;
-}) {
-  return (
-    <XStack marginLeft={6}>
-      {editors?.map((editor, idx) => (
-        <XStack
-          zIndex={idx + 1}
-          key={editor}
-          borderColor="$color4"
-          backgroundColor="$color4"
-          borderWidth={2}
-          borderRadius={100}
-          marginLeft={-8}
-          animation="fast"
-        >
-          <IconComponent accountId={editor} />
-        </XStack>
-      ))}
-    </XStack>
-  );
-}

frontend/packages/ui/src/index.tsx

@@ -2,11 +2,9 @@ export * from "tamagui";
 export {config} from "./tamagui.config";
 
 export {
+  Button as TButton,
   Paragraph as TParagraph,
-  // SpinnerProps as TSPinnerProps,
   Section as TSection,
-  // Spinner as TSpinner,
-  Button as TTButton,
   Tooltip as TTooltip,
 } from "tamagui";
 export * from "./avatar";
@@ -22,10 +20,12 @@ export * from "./document-content";
 export * from "./document-content-constants";
 export * from "./footer";
 export * from "./form-fields";
+export * from "./hm-icon";
 export * from "./icons";
 export * from "./layout";
 export * from "./list";
 export * from "./menu-item";
+export * from "./newspaper";
 export * as Onboarding from "./onboarding";
 export * from "./page-components";
 export * from "./panel-card";
@@ -34,9 +34,6 @@ export * from "./radio-option-section";
 export * from "./resize-handle";
 export {Section} from "./section";
 export * from "./select-dropdown";
-// export * from "./spinner";
-export * from "./hm-icon";
-export * from "./newspaper";
 export * from "./step-wrapper";
 export * from "./table-list";
 export * from "./titlebar";