From db6130146bb9949e249a0b668f8836297340b55a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Fincato?= <work@andrefincato.info>
Date: Mon, 18 Apr 2022 15:38:34 +0200
Subject: [PATCH] groups: avoid extra node in plain link URL

This still leaves an empty root node which does not take up visual
space though. A more comprehensive approach would be to filter out
plain URL links from the graph, eg from the function

```
t[1].children.map(c => {
    if (c?.children) {
      let links = [];
      c.children.filter(k => {
        if (k.type === 'link') {
          links.push({
            type: 'root',
            children: [
              {
                type: 'graph-url',
                url: k.url
              }
            ]
          })
        }
      })

      c.children.push(...links);
    }
  });
```
---
 .../views/components/RemoteContent/index.tsx  | 45 +++++++++++--------
 .../components/Graph/GraphContent.tsx         |  4 +-
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/pkg/interface/src/views/components/RemoteContent/index.tsx b/pkg/interface/src/views/components/RemoteContent/index.tsx
index e722e3b62..269742d36 100644
--- a/pkg/interface/src/views/components/RemoteContent/index.tsx
+++ b/pkg/interface/src/views/components/RemoteContent/index.tsx
@@ -1,3 +1,6 @@
+import {
+  Box,
+} from '@tlon/indigo-react';
 import { hasProvider } from 'oembed-parser';
 import React from 'react';
 import useSettingsState from '~/logic/state/settings';
@@ -64,36 +67,42 @@ export function RemoteContent(props: RemoteContentProps) {
     embedOnly: !renderUrl || tall
   };
 
-  const fallback = !renderUrl ? null : (
-    ``
-  );
+  const fallback = null;
 
   if (isImage && remoteContentPolicy.imageShown) {
     return (
-      <RemoteContentWrapper {...wrapperProps} noOp={transcluded} replaced>
-        <RemoteContentImageEmbed url={url} />
-      </RemoteContentWrapper>
+      <Box mt={1} mb={2} flexShrink={0}>
+        <RemoteContentWrapper {...wrapperProps} noOp={transcluded} replaced>
+          <RemoteContentImageEmbed url={url} />
+        </RemoteContentWrapper>
+      </Box>
     );
   } else if (isAudio && remoteContentPolicy.audioShown) {
     return (
-      <RemoteContentWrapper {...wrapperProps}>
-        <RemoteContentAudioEmbed url={url} />
-      </RemoteContentWrapper>
+      <Box mt={1} mb={2} flexShrink={0}>
+        <RemoteContentWrapper {...wrapperProps}>
+          <RemoteContentAudioEmbed url={url} />
+        </RemoteContentWrapper>
+      </Box>
     );
   } else if (isVideo && remoteContentPolicy.videoShown) {
     return (
-      <RemoteContentWrapper
-        {...wrapperProps}
-        detail={<RemoteContentVideoEmbed url={url} />}
-      >
-        <TruncatedText>{url}</TruncatedText>
-      </RemoteContentWrapper>
+      <Box mt={1} mb={2} flexShrink={0}>
+        <RemoteContentWrapper
+          {...wrapperProps}
+          detail={<RemoteContentVideoEmbed url={url} />}
+        >
+          <TruncatedText>{url}</TruncatedText>
+        </RemoteContentWrapper>
+      </Box>
     );
   } else if (isOembed && remoteContentPolicy.oembedShown) {
     return (
-      <AsyncFallback fallback={fallback}>
-        <RemoteContentOembed ref={embedRef} url={url} renderUrl={renderUrl} />
-      </AsyncFallback>
+      <Box mt={1} mb={2} flexShrink={0}>
+        <AsyncFallback fallback={fallback}>
+          <RemoteContentOembed ref={embedRef} url={url} renderUrl={renderUrl} />
+        </AsyncFallback>
+      </Box>
     );
   }
   return fallback;
diff --git a/pkg/interface/src/views/landscape/components/Graph/GraphContent.tsx b/pkg/interface/src/views/landscape/components/Graph/GraphContent.tsx
index a0e746454..74bf2ad18 100644
--- a/pkg/interface/src/views/landscape/components/Graph/GraphContent.tsx
+++ b/pkg/interface/src/views/landscape/components/Graph/GraphContent.tsx
@@ -457,9 +457,7 @@ const renderers = {
     </Box>
   ),
   'graph-url': ({ url, tall }) => (
-    <Box mt={1} mb={2} flexShrink={0}>
-      <RemoteContent key={url} url={url} tall={tall} />
-    </Box>
+     <RemoteContent key={url} url={url} tall={tall} />
   ),
   'graph-reference': ({ reference, transcluded }) => {
     const { link } = referenceToPermalink({ reference });