embeds: converted to links for better usability

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

@@ -77,7 +77,7 @@ function GroupRoutes(props: { group: string; url: string }) {
             return null;
           }
           if(!graphKeys.has(`${ship.slice(1)}/${name}`)) {
-            if(graphKeys.size > 0) {
+            if(graphKeys.size > 1) { // TODO: Better loading logic see https://github.com/urbit/landscape/issues/1063
               return <Redirect
                 to={toQuery(
                   { auto: 'y', redir: location.pathname },

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

@@ -2,7 +2,7 @@ import { BaseAnchor, Box, Center, Col, Icon, Row, Text } from '@tlon/indigo-reac
 import { Association, GraphNode, resourceFromPath, GraphConfig } from '@urbit/api';
 import React, { useCallback, useEffect, useState } from 'react';
 import _ from 'lodash';
-import { useHistory, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import {
   getPermalinkForGraph, GraphPermalink as IGraphPermalink, parsePermalink
 } from '~/logic/lib/permalinks';
@@ -76,7 +76,6 @@ function GraphPermalink(
   }
 ) {
   const { full = false, showOurContact, pending, graph, group, index, transcluded } = props;
-  const history = useHistory();
   const location = useLocation();
   const { ship, name } = resourceFromPath(graph);
   const node = useGraphState(
@@ -114,11 +113,6 @@ function GraphPermalink(
   const showTransclusion = Boolean(association && node && transcluded < 1);
   const permalink = getPermalinkForGraph(group, graph, index);
 
-  const navigate = (e) => {
-    e.stopPropagation();
-    history.push(`/perma${permalink.slice(16)}`);
-  };
-
   const [nodeGroupHost, nodeGroupName] = association?.group.split('/').slice(-2) ?? ['Unknown', 'Unknown'];
   const [nodeChannelHost, nodeChannelName] = association?.resource
     .split('/')
@@ -141,15 +135,16 @@ function GraphPermalink(
 
   return (
     <Col
+      as={Link}
+      to={`/perma${permalink.slice(16)}`}
       width="100%"
       bg="white"
       maxWidth={full ? null : '500px'}
       border={full ? null : '1'}
       borderColor="lightGray"
       borderRadius={2}
-      cursor="pointer"
       onClick={(e) => {
-        navigate(e);
+        e.stopPropagation();
       }}
     >
       {loading && association && !errored && Placeholder((association.metadata.config as GraphConfig).graph)}
@@ -167,7 +162,6 @@ function GraphPermalink(
           showTransclusion={showTransclusion}
           icon={getModuleIcon((association.metadata.config as GraphConfig).graph as GraphModule)}
           title={association.metadata.title}
-          permalink={permalink}
         />
       )}
       {association && isInSameResource && transcluded === 2 && !loading && (
@@ -176,7 +170,6 @@ function GraphPermalink(
           showTransclusion={showTransclusion}
           icon={getModuleIcon((association.metadata.config as GraphConfig).graph as GraphModule)}
           title={association.metadata.title}
-          permalink={permalink}
         />
       )}
       {isInSameResource && transcluded !== 2 && !loading && <Row height='2' />}
@@ -185,7 +178,6 @@ function GraphPermalink(
           icon="Groups"
           showDetails={false}
           title={graph.slice(5)}
-          permalink={permalink}
         />
       )}
     </Col>
@@ -195,7 +187,6 @@ function GraphPermalink(
 function PermalinkDetails(props: {
   title: string;
   icon: any;
-  permalink: string;
   showTransclusion?: boolean;
   showDetails?: boolean;
   known?: boolean;

pkg/interface/src/views/components/GroupLink.tsx

@@ -1,24 +1,26 @@
 import { Box, Col, Icon, Row, Text } from '@tlon/indigo-react';
 import React, { ReactElement, useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { useModal } from '~/logic/lib/useModal';
 import useMetadataState, { usePreview } from '~/logic/state/metadata';
 import { PropFunc } from '~/types';
 import { JoinGroup } from '../landscape/components/JoinGroup';
 import { MetadataIcon } from '../landscape/components/MetadataIcon';
 
-export function GroupLink(
+type GroupLinkProps = {
-  props: {
   resource: string;
   detailed?: boolean;
 } & PropFunc<typeof Row>
-): ReactElement {
+
-  const { resource, ...rest } = props;
+export function GroupLink({
+  resource,
+  borderColor,
+  ...rest
+}: GroupLinkProps): ReactElement {
   const name = resource.slice(6);
   const joined = useMetadataState(
     useCallback(s => resource in s.associations.groups, [resource])
   );
-  const history = useHistory();
 
   const { modal, showModal } = useModal({
     modal: <JoinGroup autojoin={name} />
@@ -27,26 +29,31 @@ export function GroupLink(
   const { preview } = usePreview(resource);
 
   return (
-    <Box
+    <>
-      maxWidth="500px"
-      cursor='pointer'
-      {...rest}
-      onClick={(e) => {
-        e.stopPropagation();
-      }}
-      backgroundColor='white'
-      borderColor={props.borderColor}
-    >
       {modal}
       <Row
-        width="100%"
+        {...rest}
+        as={Link}
+        to={joined ? `/~landscape/ship/${name}` : `/perma/group/${name}`}
+        onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+          e.stopPropagation();
+
+          if (e.metaKey || e.ctrlKey) {
+            return;
+          }
+
+          e.preventDefault();
+          showModal();
+        }}
         flexShrink={1}
         alignItems="center"
+        width="100%"
+        maxWidth="500px"
         py={2}
         pr={2}
-        onClick={
+        cursor='pointer'
-          joined ? () => history.push(`/~landscape/ship/${name}`) : showModal
+        backgroundColor='white'
-        }
+        borderColor={borderColor}
         opacity={preview ? '1' : '0.6'}
       >
         <MetadataIcon height={6} width={6} metadata={preview ? preview.metadata : { color: '0x0' , picture: '' }} />
@@ -70,6 +77,6 @@ export function GroupLink(
           </Box>
         </Col>
       </Row>
-    </Box>
+    </>
   );
 }