permalinks: cap transclusion depth

pkg/interface/src/views/apps/chat/components/ChatMessage.tsx

@@ -221,7 +221,7 @@ const MessageActions = ({ api, onReply, association, history, msg, group }) => {
 
 const MessageWrapper = (props) => {
   const { hovering, bind } = useHovering();
-  const showHover = !props.transcluded && hovering && !props.hideHover;
+  const showHover = (props.transcluded === 0) && hovering && !props.hideHover;
   return (
     <Box
       py='1'
@@ -242,7 +242,7 @@ interface ChatMessageProps {
   isLastRead: boolean;
   group: Group;
   association: Association;
-  transcluded?: boolean;
+  transcluded?: number;
   className?: string;
   isPending: boolean;
   style?: unknown;
@@ -289,7 +289,7 @@ class ChatMessage extends Component<ChatMessageProps> {
       fontSize,
       hideHover
       onReply = () => {},
-      transcluded = false
+      transcluded = 0
     } = this.props;
 
     let { renderSigil } = this.props;
@@ -327,12 +327,9 @@ class ChatMessage extends Component<ChatMessageProps> {
       scrollWindow,
       highlighted,
       fontSize,
-<<<<<<< HEAD
-      hideHover
-=======
+      hideHover,
       transcluded,
       onReply
->>>>>>> 8c4e175200 (permalinks: add transclusion)
     };
 
     const unreadContainerStyle = {
@@ -554,6 +551,7 @@ export const Message = ({
   api,
   scrollWindow,
   timestampHover,
+  transcluded,
   ...rest
 }) => {
   const { hovering, bind } = useHovering();
@@ -594,7 +592,11 @@ export const Message = ({
             case 'url':
               if(content.url.startsWith('web+urbit:/')) {
                 return (
-                  <PermalinkEmbed api={api} link={content.url} />
+                  <PermalinkEmbed 
+                    transcluded={transcluded}
+                    api={api}
+                    link={content.url} 
+                  />
                 );
               }
               return (

pkg/interface/src/views/apps/permalinks/TranscludedNode.tsx

@@ -95,8 +95,9 @@ function TranscludedPublishNode(props: {
 export function TranscludedNode(props: {
   assoc: Association;
   node: GraphNode;
+  transcluded: number;
 }) {
-  const { node, assoc } = props;
+  const { node, assoc, transcluded } = props;
   const group = useGroupForAssoc(assoc)!;
   switch (assoc.metadata.module) {
     case "chat":
@@ -104,7 +105,7 @@ export function TranscludedNode(props: {
         <Row width="100%" flexShrink={0} flexGrow={1} flexWrap="wrap">
           <ChatMessage
             renderSigil
-            transcluded
+            transcluded={transcluded + 1}
             containerClass="items-top cf hide-child"
             association={assoc}
             group={group}

pkg/interface/src/views/apps/permalinks/embed.tsx

@@ -28,8 +28,10 @@ function GroupPermalink(props: { group: string; api: GlobalApi }) {
   );
 }
 
-function GraphPermalink(props: IGraphPermalink & { api: GlobalApi }) {
-  const { link, graph, group, index, api } = props;
+function GraphPermalink(
+  props: IGraphPermalink & { api: GlobalApi; transcluded: number }
+) {
+  const { link, graph, group, index, api, transcluded } = props;
   const { ship, name } = resourceFromPath(graph);
   const node = useGraphState(
     useCallback((s) => s.looseNodes?.[`${ship.slice(1)}/${name}`]?.[index], [
@@ -53,7 +55,7 @@ function GraphPermalink(props: IGraphPermalink & { api: GlobalApi }) {
       }
     })();
   }, [graph, index]);
-  const showTransclusion = !!(association && node);
+  const showTransclusion = !!(association && node && transcluded < 2);
 
   const rowTransclusionStyle = showTransclusion
     ? {
@@ -72,9 +74,13 @@ function GraphPermalink(props: IGraphPermalink & { api: GlobalApi }) {
         borderColor="lightGray"
         borderRadius="2"
       >
-        {association && node && (
+        {showTransclusion && (
           <Box p="2">
-            <TranscludedNode node={node} assoc={association} />
+            <TranscludedNode
+              transcluded={transcluded}
+              node={node}
+              assoc={association!}
+            />
           </Box>
         )}
         <Row
@@ -101,7 +107,11 @@ function GraphPermalink(props: IGraphPermalink & { api: GlobalApi }) {
   );
 }
 
-export function PermalinkEmbed(props: { link: string; api: GlobalApi }) {
+export function PermalinkEmbed(props: {
+  link: string;
+  api: GlobalApi;
+  transcluded: number;
+}) {
   const permalink = parsePermalink(props.link);
 
   if (!permalink) {
@@ -112,6 +122,12 @@ export function PermalinkEmbed(props: { link: string; api: GlobalApi }) {
     case "group":
       return <GroupPermalink group={permalink.group} api={props.api} />;
     case "graph":
-      return <GraphPermalink {...permalink} api={props.api} />;
+      return (
+        <GraphPermalink
+          transcluded={props.transcluded}
+          {...permalink}
+          api={props.api}
+        />
+      );
   }
 }