From d3802fa0c011969d2f3f6b2e2cb632ed8281636a Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@tlon.io>
Date: Wed, 22 Sep 2021 12:01:33 +1000
Subject: [PATCH] interface: render app preview in link block

---
 .../apps/links/components/LinkBlocks.tsx      | 14 ++++---
 .../src/views/apps/permalinks/embed.tsx       |  2 +-
 .../views/components/RemoteContent/embed.tsx  | 38 ++++++++++++++++++-
 3 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/pkg/interface/src/views/apps/links/components/LinkBlocks.tsx b/pkg/interface/src/views/apps/links/components/LinkBlocks.tsx
index 1fc7fa2945..0c24912e0b 100644
--- a/pkg/interface/src/views/apps/links/components/LinkBlocks.tsx
+++ b/pkg/interface/src/views/apps/links/components/LinkBlocks.tsx
@@ -9,7 +9,7 @@ import useLocalState from '~/logic/state/local';
 import BigIntOrderedMap from '@urbit/api/lib/BigIntOrderedMap';
 import bigInt from 'big-integer';
 import airlock from '~/logic/api';
-import useHarkState from '~/logic/state/hark';
+import useHarkState, { selHarkGraph } from '~/logic/state/hark';
 import { BlockScroller } from '~/views/components/BlockScroller';
 
 export interface LinkBlocksProps {
@@ -46,11 +46,13 @@ export function LinkBlocks(props: LinkBlocksProps) {
   );
 
   useEffect(() => {
-    const unreads =
-      useHarkState.getState().unreads.graph?.[association.resource]?.['/']
-        ?.unreads || new Set<string>();
-    Array.from(unreads as Set<string>).forEach((u) => {
-      airlock.poke(markEachAsRead(association.resource, '/', u));
+    const unreads = selHarkGraph(association.resource)(useHarkState.getState());
+    const [,,ship,name] = association.resource.split('/');
+    unreads.each.forEach((u) => {
+      airlock.poke(markEachAsRead({
+        desk: (window as any).desk,
+        path: `/graph/${ship}/${name}`
+      }, u));
     });
   }, [association.resource]);
 
diff --git a/pkg/interface/src/views/apps/permalinks/embed.tsx b/pkg/interface/src/views/apps/permalinks/embed.tsx
index b86595c60c..e15698c557 100644
--- a/pkg/interface/src/views/apps/permalinks/embed.tsx
+++ b/pkg/interface/src/views/apps/permalinks/embed.tsx
@@ -198,7 +198,7 @@ const ClampedText = styled(Text)`
 
 type AppTileProps = Treaty & BoxProps;
 
-function AppTile({ color, image, ...props }: AppTileProps) {
+export function AppTile({ color, image, ...props }: AppTileProps) {
   return (
     <Box
       position="relative"
diff --git a/pkg/interface/src/views/components/RemoteContent/embed.tsx b/pkg/interface/src/views/components/RemoteContent/embed.tsx
index e749435822..692c941a4a 100644
--- a/pkg/interface/src/views/components/RemoteContent/embed.tsx
+++ b/pkg/interface/src/views/components/RemoteContent/embed.tsx
@@ -1,6 +1,7 @@
 import React, {
   MouseEvent,
   useCallback,
+  useEffect,
   useMemo,
   useState
 } from 'react';
@@ -14,7 +15,8 @@ import {
   allSystemStyle,
   Icon,
   Row,
-  Col
+  Col,
+  Text
 } from '@tlon/indigo-react';
 
 import { TruncatedText } from '~/views/components/TruncatedText';
@@ -23,11 +25,13 @@ import { IconRef, PropFunc } from '~/types';
 import { system } from 'styled-system';
 import { Association, GraphConfig, ReferenceContent } from '@urbit/api';
 import { Link } from 'react-router-dom';
-import { referenceToPermalink } from '~/logic/lib/permalinks';
+import { AppPermalink, referenceToPermalink } from '~/logic/lib/permalinks';
 import useMetadataState from '~/logic/state/metadata';
 import { RemoteContentWrapper } from './wrapper';
 import { useEmbed } from '~/logic/state/embed';
 import { IS_SAFARI } from '~/logic/lib/platform';
+import useDocketState, { useTreaty } from '~/logic/state/docket';
+import { AppTile } from '~/views/apps/permalinks/embed';
 
 interface RemoteContentEmbedProps {
   url: string;
@@ -217,11 +221,41 @@ export function RemoteContentPermalinkEmbed(props: {
     return <RemoteContentPermalinkEmbedGraph {...permalink} />;
   } else if (permalink.type === 'group') {
     return <RemoteContentPermalinkEmbedGroup {...permalink} />;
+  } else if (permalink.type === 'app') {
+    return <RemoteContentPermalinkEmbedApp {...permalink} />;
   }
 
   return null;
 }
 
+function RemoteContentPermalinkEmbedApp({ link, ship, desk }: Omit<AppPermalink, 'type'>) {
+  const treaty = useTreaty(ship, desk);
+
+  useEffect(() => {
+    if (!treaty) {
+      useDocketState.getState().requestTreaty(ship, desk);
+    }
+  }, [treaty, ship, desk]);
+
+  return (
+    <Col
+      width="100%"
+      height="100%"
+      padding={3}
+      borderRadius={3}
+      justifyContent="space-around"
+      alignItems="center"
+    >
+      {treaty && (
+        <>
+          <AppTile color="washedGray" marginRight={0} {...treaty} />
+          <Row><Text fontSize="1" color="gray">App: {treaty.title}</Text></Row>
+        </>
+      )}
+    </Col>
+  );
+}
+
 function RemoteContentPermalinkEmbedGroup(props: {
   group: string;
   link: string;