group-feed: copy permalinks from group feed posts

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

@@ -13,7 +13,7 @@ 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, getPermalinkForGraph} from '~/logic/lib/permalinks';
+import { getPermalinkForGraph } from '~/logic/lib/permalinks';
 import {useQuery} from '~/logic/lib/useQuery';
 
 interface NoteProps {

pkg/interface/src/views/landscape/components/Home/GroupFeed.js

@@ -27,6 +27,7 @@ export function GroupFeed(props) {
   ).length;
 
   const relativePath = (path) => baseUrl + path;
+  const association = associations.graph[graphPath];
 
   useEffect(() => {
     //  TODO: VirtualScroller should support lower starting values than 100
@@ -53,6 +54,7 @@ export function GroupFeed(props) {
             return (
               <PostTimeline
                 {...props}
+                association={association}
                 graphs={graphs}
                 pendingSize={pendingSize}
                 graphResource={graphResource} />
@@ -64,6 +66,7 @@ export function GroupFeed(props) {
             return (
               <PostReplies
                 {...props}
+                association={association}
                 graphs={graphs}
                 pendingSize={pendingSize}
                 graphResource={graphResource} />

pkg/interface/src/views/landscape/components/Home/Post/PostFeed.js

@@ -23,7 +23,8 @@ export class PostFeed extends React.Component {
         api,
         history,
         baseUrl,
-        parentNode
+        parentNode,
+        association
       } = this.props;
       const node = graph.get(index);
       if (!node) { return null; }
@@ -53,6 +54,7 @@ export class PostFeed extends React.Component {
                 node={parentNode}
                 contacts={contacts}
                 graphResource={graphResource}
+                association={association}
                 api={api}
                 index={nodeIndex}
                 baseUrl={baseUrl}
@@ -65,6 +67,7 @@ export class PostFeed extends React.Component {
               node={node}
               contacts={contacts}
               graphResource={graphResource}
+              association={association}
               api={api}
               index={[...nodeIndex, index]}
               baseUrl={baseUrl}
@@ -83,6 +86,7 @@ export class PostFeed extends React.Component {
           node={node}
           contacts={contacts}
           graphResource={graphResource}
+          association={association}
           api={api}
           index={[index]}
           baseUrl={baseUrl}

pkg/interface/src/views/landscape/components/Home/Post/PostHeader.js

@@ -1,14 +1,30 @@
 import React from 'react';
-import { Row, Icon } from '@tlon/indigo-react';
+import { Col, Row, Icon, Action } from '@tlon/indigo-react';
 import Author from '~/views/components/Author';
+import { useCopy } from '~/logic/lib/useCopy';
+import { getPermalinkForGraph } from '~/logic/lib/permalinks';
+import { Dropdown } from '~/views/components/Dropdown';
+
 
 
 export function PostHeader(props) {
-  const { post, contacts, api, isReply } = props;
+  const { post, contacts, api, association, isReply } = props;
   const mb = isReply ? "2" : "3";
 
+  const permalink = !!association ? getPermalinkForGraph(
+    association.group,
+    association.resource,
+    post.index
+  ) : '';
+  const { copyDisplay, doCopy } = useCopy(permalink, 'Copy Link');
+
   return (
-    <Row width="100%" height="36px" mb={mb} justifyContent="space-between">
+    <Row
+      width="100%"
+      height="36px"
+      mb={mb}
+      justifyContent="space-between"
+      onClick={(e) => { e.stopPropagation(); }}>
       <Author
         showImage
         contacts={contacts}
@@ -21,7 +37,25 @@ export function PostHeader(props) {
         time={true}
         showAsCol={true}
       />
+      <Dropdown
+        dropWidth="200px"
+        alignX="right"
+        alignY="top"
+        options={
+          <Col
+            backgroundColor="white"
+            border={1}
+            borderRadius={1}
+            borderColor="lightGray">
+            <Row alignItems="center" p={1}>
+              <Action bg="white" m={1} color="black" onClick={doCopy}>
+                {copyDisplay}
+              </Action>
+            </Row>
+          </Col>
+        }>
         <Icon icon="Ellipsis" color="gray" />
+      </Dropdown>
     </Row>
   );
 }

pkg/interface/src/views/landscape/components/Home/Post/PostItem.js

@@ -46,6 +46,7 @@ class PostItem extends React.Component {
       contacts,
       api,
       graphResource,
+      association,
       index,
       innerRef,
       isParent,
@@ -82,7 +83,12 @@ class PostItem extends React.Component {
           onClick={this.navigateToReplies}
           cursor={isParent ? "default": "pointer"}
           {...bind}>
-          <PostHeader post={node.post} contacts={contacts} api={api} isReply={isReply} />
+          <PostHeader
+            post={node.post}
+            contacts={contacts}
+            api={api}
+            association={association}
+            isReply={isReply} />
           { isReply ? (
             <Row width="100%" alignItems="center" mb="3">
               <Text color="gray" pr="1">Replying to</Text>

pkg/interface/src/views/landscape/components/Home/Post/PostReplies.js

@@ -12,7 +12,7 @@ export function PostReplies(props) {
     baseUrl,
     api,
     history,
-    associations,
+    association,
     groups,
     contacts,
     graphPath,
@@ -68,6 +68,7 @@ export function PostReplies(props) {
             node={node}
             contacts={contacts}
             graphResource={graphResource}
+            association={association}
             api={api}
             index={nodeIndex}
             baseUrl={baseUrl}
@@ -99,7 +100,7 @@ export function PostReplies(props) {
         graph={graph}
         parentNode={node}
         pendingSize={pendingSize}
-        associations={associations}
+        association={association}
         groups={groups}
         contacts={contacts}
         api={api}

pkg/interface/src/views/landscape/components/Home/Post/PostTimeline.js

@@ -10,7 +10,7 @@ export function PostTimeline(props) {
     baseUrl,
     api,
     history,
-    associations,
+    association,
     groups,
     contacts,
     graphPath,
@@ -85,7 +85,7 @@ export function PostTimeline(props) {
           graphResource={graphResource}
           graph={graphs[graphId]}
           pendingSize={pendingSize}
-          associations={associations}
+          association={association}
           groups={groups}
           contacts={contacts}
           api={api}