Models move away from publication and variants

frontend/apps/desktop/package.json

@@ -23,6 +23,7 @@
     "devtools": "react-devtools",
     "test": "NODE_ENV=test yarn package:test && yarn e2e",
     "test:only": "NODE_ENV=test yarn e2e",
+    "typecheck": "tsc --noEmit",
     "package:test": "NODE_ENV=test VITE_DESKTOP_P2P_PORT=5800 VITE_DESKTOP_HTTP_PORT=58001 VITE_DESKTOP_GRPC_PORT=58002 VITE_DESKTOP_APPDATA=appData.test.local yarn package",
     "e2e": "NODE_ENV=test npx playwright test --project=e2e",
     "e2e:debug": "NODE_ENV=test PWDEBUG=1 yarn e2e",
@@ -131,6 +132,7 @@
     "@playwright/test": "1.40.1",
     "@shm/prettier": "*",
     "@tamagui/vite-plugin": "1.95.0",
+    "@types/katex": "^0.16.7",
     "@types/node": "20.6.5",
     "@types/prosemirror-dev-tools": "3.0.3",
     "@types/react": "18.2.21",
@@ -147,7 +149,7 @@
     "react-devtools": "4.28.0",
     "react-error-boundary": "4.0.11",
     "tamagui": "1.95.0",
-    "typescript": "5.5.1-rc",
+    "typescript": "5.5.2",
     "vite": "4.4.9",
     "vite-tsconfig-paths": "4.2.0",
     "vitest": "0.34.2",

frontend/apps/desktop/src/app-account.tsx

@@ -1,6 +1,6 @@
-import {DialogTitle} from '@/components/dialog'
-import {queryKeys} from '@/models/query-keys'
-import {eventStream} from '@shm/shared'
+import { DialogTitle } from '@/components/dialog'
+import { queryKeys } from '@/models/query-keys'
+import { eventStream } from '@shm/shared'
 import {
   Button,
   CheckboxField,
@@ -11,11 +11,11 @@ import {
   XStack,
   YStack,
 } from '@shm/ui'
-import {useMutation} from '@tanstack/react-query'
-import {useEffect, useMemo, useState} from 'react'
-import {invalidateQueries} from './app-invalidation'
-import {useDeleteKey, useMnemonics, useRegisterKey} from './models/daemon'
-import {trpc} from './trpc'
+import { useMutation } from '@tanstack/react-query'
+import { useEffect, useMemo, useState } from 'react'
+import { invalidateQueries } from './app-invalidation'
+import { useDeleteKey, useMnemonics, useRegisterKey } from './models/daemon'
+import { trpc } from './trpc'
 
 export type NamedKey = {
   name: string
@@ -38,7 +38,7 @@ export function AccountWizardDialog() {
 
   const saveWords = trpc.secureStorage.write.useMutation()
 
-  const {data: genWords, refetch: refetchWords} = useMnemonics()
+  const { data: genWords, refetch: refetchWords } = useMnemonics()
 
   const register = useRegisterKey()
 
@@ -99,8 +99,8 @@ export function AccountWizardDialog() {
           width="100vw"
           animation="fast"
           opacity={0.8}
-          enterStyle={{opacity: 0}}
-          exitStyle={{opacity: 0}}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
         />
         <Dialog.Content
           backgroundColor={'$background'}
@@ -112,8 +112,8 @@ export function AccountWizardDialog() {
               },
             },
           ]}
-          enterStyle={{y: -10, opacity: 0}}
-          exitStyle={{y: -10, opacity: 0}}
+          enterStyle={{ y: -10, opacity: 0 }}
+          exitStyle={{ y: -10, opacity: 0 }}
         >
           <DialogTitle>Account</DialogTitle>
           {step == 'start' ? (
@@ -184,9 +184,7 @@ export function AccountWizardDialog() {
                       })
                       .then((res) => {
                         if (isSaveWords) {
-                          console.log('== SAVE WORDS TOO!')
-                          // TODO: @Eric here we need to store the words
-                          saveWords.mutate({key: 'main', value: words})
+                          saveWords.mutate({ key: 'main', value: words })
                         }
                         invalidateQueries(queryKeys.KEYS_LIST)
                         setStep('complete')

frontend/apps/desktop/src/app-recents.ts

@@ -1,5 +1,4 @@
 import {NavRoute, getRecentsRouteEntityUrl} from '@/utils/routes'
-import {getPublicationVariant} from '@shm/shared'
 import {z} from 'zod'
 import {grpcClient} from './app-grpc'
 import {invalidateQueries} from './app-invalidation'
@@ -48,13 +47,12 @@ async function getRouteTitles(route: NavRoute) {
     title = account.profile?.alias || account.id
     subtitle = 'Account'
   } else if (route.key === 'document') {
-    const {publication} = await getPublicationVariant(
-      grpcClient,
-      route.documentId,
-      route.versionId,
-    )
-    if (publication?.document?.title) {
-      title = publication.document.title
+    const document = await grpcClient.documents.getDocument({
+      documentId: route.documentId,
+      version: route.versionId,
+    })
+    if (document?.metadata?.name) {
+      title = document?.metadata.name
     }
     subtitle = 'Document'
   }

frontend/apps/desktop/src/app-secure-storage.ts

@@ -21,11 +21,8 @@ export const secureStorageApi = t.router({
     }),
   read: t.procedure.input(z.string()).query(async ({input}) => {
     const encrypted = secureStore.get(input)
-    console.log(`== ~ read:t.procedure.input ~ encrypted:`, encrypted)
     if (!encrypted) return null
     const plainText = safeStorage.decryptString(Buffer.from(encrypted))
-    console.log(`== ~ read:t.procedure.input ~ decrypted:`, plainText)
-
     return JSON.parse(plainText)
   }),
 })

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

@@ -4,18 +4,19 @@ import {
   BlockNodeContent,
   BlockNodeList,
   ContentEmbed,
+  DocumentCardView,
   EmbedAccountContent,
   EntityComponentProps,
   InlineEmbedComponentProps,
-  PublicationCardView,
   UnpackedHypermediaId,
   createHmId,
   formattedDateMedium,
   getBlockNodeById,
+  getDocumentTitle,
   unpackHmId,
-  usePublicationContentContext,
+  useDocContentContext,
 } from '@shm/shared'
-import { blockStyles } from '@shm/shared/src/publication-content'
+import { blockStyles } from '@shm/shared/src/document-content'
 import {
   Button,
   ButtonText,
@@ -26,7 +27,7 @@ import {
   XStack,
   YStack,
 } from '@shm/ui'
-import { ArrowUpRightSquare } from '@tamagui/lucide-icons'
+import { ArrowUpRightSquare, } from '@tamagui/lucide-icons'
 import {
   ComponentProps,
   PropsWithChildren,
@@ -39,8 +40,7 @@ import {
 import { YStackProps } from 'tamagui'
 import { useAccount, useAccounts } from '../models/accounts'
 import { useComment } from '../models/comments'
-import { usePublication } from '../models/documents'
-import { usePublicationVariant } from '../models/publication'
+import { useDocument, useProfile } from '../models/documents'
 import { getAvatarUrl } from '../utils/account-url'
 import { useNavRoute } from '../utils/navigation'
 import { getRouteContext, useOpenInContext } from '../utils/route-context'
@@ -67,7 +67,7 @@ function EmbedWrapper({
     disableEmbedClick = false,
     comment,
     routeParams,
-  } = usePublicationContentContext()
+  } = useDocContentContext()
   const route = useNavRoute()
   const open = useOpenInContext()
   const navigate = useNavigate('replace')
@@ -232,7 +232,6 @@ const EmbedSideAnnotation = forwardRef<
 >(function EmbedSideAnnotation({ hmId, sidePos }, ref) {
   const unpacked = unpackHmId(hmId)
 
-  // @ts-expect-error
   const sideStyles: YStackProps =
     sidePos == 'right'
       ? {
@@ -252,11 +251,11 @@ const EmbedSideAnnotation = forwardRef<
       />
     )
   if (unpacked && unpacked.type != 'd') return null
-  const pub = usePublication({
-    id: unpacked?.qid,
-    version: unpacked?.version || undefined,
-  })
-  const editors = useAccounts(pub.data?.document?.editors || [])
+  const doc = useDocument(
+    unpacked?.qid,
+    unpacked?.version || undefined,
+  )
+  const editors = useAccounts(doc.data?.authors || [])
 
   return (
     <YStack
@@ -271,14 +270,14 @@ const EmbedSideAnnotation = forwardRef<
     >
       {/* <XStack ai="center" gap="$2" bg="green"> */}
       <SizableText size="$1" fontWeight="600">
-        {pub?.data?.document?.title}
+        {doc?.data?.metadata?.name}
       </SizableText>
       {/* <SizableText fontSize={12} color="$color9">
           {formattedDateMedium(pub.data?.document?.publishTime)}
         </SizableText> */}
       {/* </XStack> */}
       <SizableText size="$1" color="$color9">
-        {formattedDateMedium(pub.data?.document?.updateTime)}
+        {formattedDateMedium(doc.data?.updateTime)}
       </SizableText>
       <XStack
         marginHorizontal="$2"
@@ -338,10 +337,10 @@ const CommentSideAnnotation = forwardRef(function CommentSideAnnotation(
     }
   }, [comment])
 
-  const pubTarget = usePublicationVariant({
-    documentId: unpackedTarget?.qid,
-    versionId: unpackedTarget?.version || undefined,
-  })
+  const pubTarget = useDocument(
+    unpackedTarget?.qid,
+    unpackedTarget?.version || undefined,
+  )
 
   const editors = useAccounts(
     pubTarget.data?.publication?.document?.editors || [],
@@ -422,36 +421,36 @@ const CommentSideAnnotation = forwardRef(function CommentSideAnnotation(
   return null
 })
 
-export function EmbedPublication(props: EntityComponentProps) {
+export function EmbedDocument(props: EntityComponentProps) {
   if (props.block.attributes?.view == 'card') {
-    return <EmbedPublicationCard {...props} />
+    return <EmbedDocumentCard {...props} />
   } else {
-    return <EmbedPublicationContent {...props} />
+    return <EmbedDocContent {...props} />
   }
 }
 
-export function EmbedPublicationContent(props: EntityComponentProps) {
+export function EmbedDocContent(props: EntityComponentProps) {
   const documentId = props.type == 'd' ? createHmId('d', props.eid) : undefined
   const [showReferenced, setShowReferenced] = useState(false)
-  const pub = usePublicationVariant({
+  const doc = useDocument(
     documentId,
-    versionId:
-      showReferenced && props.version
-        ? props.version
-        : props.latest
-          ? undefined
-          : props.version || undefined,
-    enabled: !!documentId,
-  })
+    showReferenced && props.version
+      ? props.version
+      : props.latest
+        ? undefined
+        : props.version || undefined,
+    {
+      enabled: !!documentId,
+    })
   const route = useNavRoute()
   const navigate = useNavigate()
   return (
     <ContentEmbed
       props={props}
-      isLoading={pub.isInitialLoading}
+      isLoading={doc.isInitialLoading}
       showReferenced={showReferenced}
       onShowReferenced={setShowReferenced}
-      pub={pub.data?.publication}
+      pub={doc.data}
       EmbedWrapper={EmbedWrapper}
       parentBlockId={props.parentBlockId}
       renderOpenButton={() =>
@@ -480,36 +479,36 @@ export function EmbedPublicationContent(props: EntityComponentProps) {
   )
 }
 
-export function EmbedPublicationCard(props: EntityComponentProps) {
-  // we can't pass anything else to `createHmId` because this is creating the string we need to pass to getPublication
+export function EmbedDocumentCard(props: EntityComponentProps) {
   const docId = props.type == 'd' ? createHmId('d', props.eid) : undefined
-  const pub = usePublicationVariant({
-    documentId: docId,
-    versionId: props.latest ? undefined : props.version || undefined,
-    enabled: !!docId,
-  })
+  const doc = useDocument(
+    docId,
+    props.latest ? undefined : props.version || undefined,
+    {
+      enabled: !!docId,
+    })
   let textContent = useMemo(() => {
-    if (pub.data?.publication?.document?.children) {
+    if (doc.data?.content) {
       let content = ''
-      pub.data?.publication?.document?.children.forEach((bn) => {
+      doc.data?.content.forEach((bn) => {
         content += bn.block?.text + ' '
       })
       return content
     }
-  }, [pub.data])
+  }, [doc.data])
 
   return (
     <EmbedWrapper
       hmRef={props.id}
       parentBlockId={props.parentBlockId}
       viewType={props.block.attributes?.view == 'card' ? 'card' : 'content'}
     >
-      <PublicationCardView
-        title={pub.data?.publication?.document?.title}
+      <DocumentCardView
+        title={doc.data?.metadata?.name}
         textContent={textContent}
-        editors={pub.data?.publication?.document?.editors || []}
+        editors={doc.data?.authors || []}
         AvatarComponent={AvatarComponent}
-        date={pub.data?.publication?.document?.updateTime}
+        date={doc.data?.updateTime}
       />
     </EmbedWrapper>
   )
@@ -521,23 +520,22 @@ export function EmbedAccount(
 ) {
   console.log(`== ~ props EmbedAccount:`, props)
   const accountId = props.type == 'a' ? props.eid : undefined
-  const accountQuery = useAccount(accountId)
+  const profile = useProfile(accountId)
 
-  if (accountQuery.status == 'success') {
+  if (profile.status == 'success') {
     if (
       props.block?.attributes?.view == 'content' &&
-      accountQuery.data?.profile?.rootDocument
+      profile.data
     ) {
-      const unpackedRef = unpackHmId(accountQuery.data?.profile?.rootDocument)
-      return <EmbedPublicationContent {...props} {...unpackedRef} />
+      return <EmbedDocContent {...props} {...unpackedRef} />
     } else if (props.block?.attributes?.view == 'card') {
       return (
         <EmbedWrapper
           hmRef={props.id}
           parentBlockId={parentBlockId}
           viewType="card"
         >
-          <EmbedAccountContent account={accountQuery.data!} />
+          <EmbedAccountContent account={profile.data!} />
         </EmbedWrapper>
       )
     }
@@ -665,10 +663,10 @@ function AccountInlineEmbed(props: InlineEmbedComponentProps) {
 function PublicationInlineEmbed(props: InlineEmbedComponentProps) {
   const pubId = props?.type == 'd' ? props.qid : undefined
   if (!pubId) throw new Error('Invalid props at PublicationInlineEmbed (pubId)')
-  const pubQuery = usePublication({
-    id: pubId,
-    version: props?.version || undefined,
-  })
+  const doc = useDocument(
+    pubId,
+    props?.version || undefined,
+  )
   const navigate = useNavigate()
   return (
     <InlineEmbedButton
@@ -681,10 +679,7 @@ function PublicationInlineEmbed(props: InlineEmbedComponentProps) {
         })
       }
     >
-      {(pubQuery &&
-        pubQuery.status == 'success' &&
-        pubQuery.data?.document?.title) ||
-        `${pubId?.slice(0, 5) + '...' + pubId?.slice(-5)}`}
+      {getDocumentTitle(doc.data)}
     </InlineEmbedButton>
   )
 }