interface: styling fixes for permalinks

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

@@ -17,7 +17,7 @@ function TranscludedLinkNode(props: {
   transcluded: number;
   api: GlobalApi;
 }) {
-  const { node, assoc, transcluded } = props;
+  const { node, api, assoc, transcluded } = props;
   const idx = node.post.index.slice(1).split("/");
 
   switch (idx.length) {

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

@@ -3,7 +3,15 @@ import {
   parsePermalink,
   GraphPermalink as IGraphPermalink,
 } from "~/logic/lib/permalinks";
-import { Box, Text, BaseAnchor, Row, Icon, Col } from "@tlon/indigo-react";
+import {
+  Action,
+  Box,
+  Text,
+  BaseAnchor,
+  Row,
+  Icon,
+  Col,
+} from "@tlon/indigo-react";
 import { GroupLink } from "~/views/components/GroupLink";
 import GlobalApi from "~/logic/api/global";
 import { getModuleIcon } from "~/logic/lib/util";
@@ -29,9 +37,13 @@ function GroupPermalink(props: { group: string; api: GlobalApi }) {
 }
 
 function GraphPermalink(
-  props: IGraphPermalink & { api: GlobalApi; transcluded: number }
+  props: IGraphPermalink & {
+    api: GlobalApi;
+    transcluded: number;
+    pending?: boolean;
+  }
 ) {
-  const { link, graph, group, index, api, transcluded } = props;
+  const { pending, link, graph, group, index, api, transcluded } = props;
   const { ship, name } = resourceFromPath(graph);
   const node = useGraphState(
     useCallback((s) => s.looseNodes?.[`${ship.slice(1)}/${name}`]?.[index], [
@@ -47,6 +59,9 @@ function GraphPermalink(
   );
   useEffect(() => {
     (async () => {
+      if (pending) {
+        return;
+      }
       try {
         await api.graph.getNode(ship, name, index);
       } catch (e) {
@@ -54,7 +69,7 @@ function GraphPermalink(
         setErrored(true);
       }
     })();
-  }, [graph, index]);
+  }, [pending, graph, index]);
   const showTransclusion = !!(association && node && transcluded < 1);
 
   const rowTransclusionStyle = showTransclusion
@@ -66,31 +81,25 @@ function GraphPermalink(
     : {};
 
   return (
-    <Link to={`/perma${link}`}>
-      <Col
-        my="1"
-        bg="white"
-        border="1"
-        borderColor="lightGray"
-        borderRadius="2"
+    <Col my="1" bg="white" border="1" borderColor="lightGray" borderRadius="2">
+      {showTransclusion && (
+        <Box p="2">
+          <TranscludedNode
+            transcluded={transcluded + 1}
+            node={node}
+            assoc={association!}
+          />
+        </Box>
+      )}
+      <Row
+        {...rowTransclusionStyle}
+        alignItems="center"
+        justifyContent="space-between"
+        width="100%"
+        px="2"
+        py="1"
       >
-        {showTransclusion && (
-          <Box p="2">
-            <TranscludedNode
-              transcluded={transcluded + 1}
-              node={node}
-              assoc={association!}
-            />
-          </Box>
-        )}
-        <Row
-          {...rowTransclusionStyle}
-          alignItems="center"
-          height="32px"
-          gapX="2"
-          width="100%"
-          px="2"
-        >
+        <Row gapX="2" alignItems="center">
           <Icon
             icon={
               association
@@ -102,13 +111,15 @@ function GraphPermalink(
             {association?.metadata.title ?? graph.slice(6)}
           </Text>
         </Row>
-      </Col>
-    </Link>
+        <Action onClick={() => {}}>Go to link</Action>
+      </Row>
+    </Col>
   );
 }
 
 export function PermalinkEmbed(props: {
   link: string;
+  association?: Association;
   api: GlobalApi;
   transcluded: number;
 }) {

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

@@ -10,7 +10,7 @@ export function getGraphPermalink(
 ) {
   const mod = assoc.metadata.module;
   const groupPath = group.hidden
-    ? "/~/landscape/home"
+    ? "/~landscape/home"
     : `/~landscape${assoc.group}`;
   if (mod === "chat") {
     return getChatPermalink(

pkg/interface/src/views/apps/publish/components/Note.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Box, Text, Col, Anchor, Row } from '@tlon/indigo-react';
+import { Box, Text, Col, Anchor, Row, Action } from '@tlon/indigo-react';
 import ReactMarkdown from 'react-markdown';
 import bigInt from 'big-integer';
 
@@ -12,6 +12,8 @@ import { getLatestRevision, getComments } from '~/logic/lib/publish';
 import { roleForShip } from '~/logic/lib/group';
 import Author from '~/views/components/Author';
 import { Contacts, GraphNode, Graph, Association, Unreads, Group } from '@urbit/api';
+import {useCopy} from '~/logic/lib/useCopy';
+import {usePermalinkForGraph} from '~/logic/lib/permalinks';
 
 interface NoteProps {
   ship: string;
@@ -69,34 +71,24 @@ export function Note(props: NoteProps & RouteComponentProps) {
   const ourRole = roleForShip(group, window.ship);
   if (window.ship === note?.post?.author) {
     adminLinks.push(
-        <Link
-          style={{ 'display': 'inline-block' }}
-          to={`${baseUrl}/edit`}
-        >
-          <Text
-            color="blue"
-            ml={2}
-          >
-            Update
-          </Text>
+      <Link to={`${baseUrl}/edit`}>
+        <Action>Update</Action>
       </Link>
     )
   };
 
   if (window.ship === note?.post?.author || ourRole === "admin") {
     adminLinks.push(
-      <Text
-        color="red"
-        display='inline-block'
-        ml={2}
-        onClick={deletePost}
-        style={{ cursor: 'pointer' }}
-      >
+      <Action destructive onClick={deletePost}>
         Delete
-      </Text>
+      </Action>
     )
   };
 
+  const permalink = usePermalinkForGraph(props.association, `/${noteId.toString()}`)
+
+  const { doCopy, copyDisplay } = useCopy(permalink, 'Copy Link');
+
   const windowRef = React.useRef(null);
   useEffect(() => {
     if (windowRef.current) {
@@ -128,8 +120,12 @@ export function Note(props: NoteProps & RouteComponentProps) {
             ship={post?.author}
             date={post?.['time-sent']}
             group={group}
-          />
-          <Text ml={1}>{adminLinks}</Text>
+          >
+            <Row px="2" gapX="2" alignItems="flex-end">
+              <Action bg="white" onClick={doCopy}>{copyDisplay}</Action>
+              {adminLinks}
+            </Row>
+          </Author>
         </Row>
       </Col>
       <NoteContent body={body} />

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

@@ -66,7 +66,7 @@ export default function Author(props: AuthorProps & PropFunc<typeof Box>): React
     );
 
   return (
-    <Row {...rest} alignItems='center' width='auto'>
+    <Row height="20px" {...rest} alignItems='center' width='auto'>
       <Box
         onClick={() => toggleOverlay()}
         height={16}

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

@@ -54,21 +54,18 @@ export function CommentItem(props: CommentItemProps): ReactElement {
   if (window.ship == post?.author && !disabled) {
     adminLinks.push(
       <Link to={{ pathname: props.baseUrl, search: `?edit=${commentIndex}`}}>
-        <Text
-          color="blue"
-          ml={2}
-        >
+        <Action>
           Update
-        </Text>
+        </Action>
       </Link>
     )
   };
 
   if ((window.ship == post?.author || ourRole == "admin") && !disabled) {
     adminLinks.push(
-      <ClickBox display="inline-block" color="red" onClick={onDelete}>
-        <Text color='red'>Delete</Text>
-      </ClickBox>
+      <Action onClick={onDelete} destructive>
+        Delete
+      </Action>
     )
   };
 
@@ -95,9 +92,9 @@ export function CommentItem(props: CommentItemProps): ReactElement {
           unread={props.unread}
           group={group}
         >
-          <Row alignItems="center">
+          <Row px="2" gapX="2" alignItems="center">
+            <Action bg="white" onClick={doCopy}>{copyDisplay}</Action>
             {adminLinks}
-            <Action ml="2" bg="white" onClick={doCopy}>{copyDisplay}</Action>
           </Row>
         </Author>
       </Row>
@@ -105,7 +102,7 @@ export function CommentItem(props: CommentItemProps): ReactElement {
         borderRadius="1"
         p="1"
         mb="1"
-        backgroundColor={props.highlighted ? 'lightGray' : 'white'}
+        backgroundColor={props.highlighted ? 'lightBlue' : 'white'}
       >
         <MentionText
           transcluded={0}

pkg/interface/src/views/components/RichText.js

@@ -45,7 +45,7 @@ const RichText = React.memo(({ disableRemoteContent, api, ...props }) => (
         if (isValidPatp(linkText)) {
           return <Mention contact={props.contact || {}} group={props.group} ship={deSig(linkText)} />;
         } else if(linkText.startsWith('web+urbit://')) {
-          return <PermalinkEmbed link={linkText} transcluded={props.transcluded} api={api}/>;
+          return <PermalinkEmbed pending={props.pending} link={linkText} transcluded={props.transcluded} api={api}/>;
 
         }
         return linkText;

pkg/interface/src/views/landscape/css/custom.css

@@ -6,6 +6,7 @@
   margin: 0 auto;
 }
 
-a, a:any-link {
+a, a:any-link, a:-webkit-any-link {
   text-decoration: none;
-}
+  color: unset;
+}