wip

pkg/interface/package-lock.json

@@ -1783,36 +1783,30 @@
       "dependencies": {
         "@babel/runtime": {
           "version": "7.12.5",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
-          "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
+          "bundled": true,
           "requires": {
             "regenerator-runtime": "^0.13.4"
           }
         },
         "@types/lodash": {
           "version": "4.14.168",
-          "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.168.tgz",
-          "integrity": "sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q=="
+          "bundled": true
         },
         "@urbit/eslint-config": {
           "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/@urbit/eslint-config/-/eslint-config-1.0.0.tgz",
-          "integrity": "sha512-Xmzb6MvM7KorlPJEq/hURZZ4BHSVy/7CoQXWogsBSTv5MOZnMqwNKw6yt24k2AO/2UpHwjGptimaNLqFfesJbw=="
+          "bundled": true
         },
         "big-integer": {
           "version": "1.6.48",
-          "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.48.tgz",
-          "integrity": "sha512-j51egjPa7/i+RdiRuJbPdJ2FIUYYPhvYLjzoYbcMMm62ooO6F94fETG4MTs46zPAF9Brs04OajboA/qTGuz78w=="
+          "bundled": true
         },
         "lodash": {
           "version": "4.17.20",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-          "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+          "bundled": true
         },
         "regenerator-runtime": {
           "version": "0.13.7",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+          "bundled": true
         }
       }
     },

pkg/interface/src/logic/lib/useCopy.ts

@@ -0,0 +1,20 @@
+import { writeText } from "./util";
+import { useCallback, useState, useMemo } from "react";
+
+export function useCopy(copied: string, display: string) {
+  const [didCopy, setDidCopy] = useState(false);
+  const doCopy = useCallback(() => {
+    writeText(copied);
+    setDidCopy(true);
+    setTimeout(() => {
+      setDidCopy(false);
+    }, 2000);
+  }, [copied]);
+
+  const copyDisplay = useMemo(() => (didCopy ? "Copied" : display), [
+    didCopy,
+    display,
+  ]);
+
+  return { copyDisplay, doCopy };
+}

pkg/interface/src/views/apps/chat/ChatResource.tsx

@@ -82,8 +82,12 @@ export function ChatResource(props: ChatResourceProps) {
     const clear = () => {
       props.history.replace(location.pathname);
     };
-    setTimeout(clear, 10000);
-    return clear;
+    const timId = setTimeout(clear, 10000);
+
+    return () => {
+      clearTimeout(timId);
+    };
+  
   }, [station]);
 
   const [showBanner, setShowBanner] = useState(false);

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

@@ -134,9 +134,17 @@ const MessageActionItem = (props) => {
   );
 };
 
-const MessageActions = ({ api, history, msg, group }) => {
+const MessageActions = ({ api, association, history, msg, group }) => {
   const isAdmin = () => group.tags.role.admin.has(window.ship);
   const isOwn = () => msg.author === window.ship;
+  const [copied, setCopied] = useState(false);
+  const copyLink = useCallback(() => {
+    writeText(`arvo://~graph/graph${association.resource}${msg.index}`);
+    setCopied(true);;
+    setTimeout(() => {
+      setCopied(false)
+    }, 2000);
+  }, [setCopied, association, msg]);
   return (
     <Box
       borderRadius={1}
@@ -192,8 +200,8 @@ const MessageActions = ({ api, history, msg, group }) => {
               <MessageActionItem onClick={(e) => console.log(e)}>
                 Reply
               </MessageActionItem>
-              <MessageActionItem onClick={(e) => console.log(e)}>
-                Copy Message Link
+              <MessageActionItem onClick={copyLink}>
+                { copied ? 'Copied' : 'Copy Message Link'}
               </MessageActionItem>
               {isAdmin() || isOwn() ? (
                 <MessageActionItem onClick={(e) => console.log(e)} color='red'>
@@ -227,7 +235,7 @@ const MessageWrapper = (props) => {
       {...bind}
     >
       {props.children}
-      {/* {hovering ? <MessageActions {...props} /> : null} */}
+      {hovering ? <MessageActions {...props} /> : null}
     </Box>
   );
 };

pkg/interface/src/views/apps/launch/app.js

@@ -33,6 +33,7 @@ import {
 import useLaunchState from '~/logic/state/launch';
 import useSettingsState, { selectCalmState } from '~/logic/state/settings';
 import useMetadataState from '~/logic/state/metadata';
+import {useHistory} from 'react-router-dom';
 
 
 const ScrollbarLessBox = styled(Box)`
@@ -50,6 +51,7 @@ export default function LaunchApp(props) {
   const [hashText, setHashText] = useState(baseHash);
   const [exitingTut, setExitingTut] = useState(false);
   const associations = useMetadataState(s => s.associations);
+  const history = useHistory();
   const hashBox = (
     <Box
       position={["relative", "absolute"]}
@@ -229,7 +231,7 @@ export default function LaunchApp(props) {
         </Box>
         <Box alignSelf="flex-start" display={["block", "none"]}>{hashBox}</Box>
       </ScrollbarLessBox>
-      <Box display={["none", "block"]}>{hashBox}</Box>
+      <Box onClick={() => history.push('/~graph/graph/ship/~bitpyx-dildus/infrastructure-digests/170141184504958869914231288036524556288/2/170141184504958917566472168072435204096') } display={["none", "block"]}>{hashBox}</Box>
     </>
   );
 }

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

@@ -1,8 +1,8 @@
 import React, {useEffect, useRef} from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { Box, Row, Text } from '@tlon/indigo-react';
+import { Box, Row, Text, Action } from '@tlon/indigo-react';
 import { Contacts } from '@urbit/api/contacts';
 import { GraphNode } from '@urbit/api/graph';
 import { Group } from '@urbit/api';
@@ -12,6 +12,7 @@ import Author from '~/views/components/Author';
 import { MentionText } from '~/views/components/MentionText';
 import { roleForShip } from '~/logic/lib/group';
 import { getLatestCommentRevision } from '~/logic/lib/publish';
+import {useCopy} from '~/logic/lib/useCopy';
 
 const ClickBox = styled(Box)`
   cursor: pointer;
@@ -67,15 +68,25 @@ export function CommentItem(props: CommentItemProps): ReactElement {
   };
 
   useEffect(() => {
-    if(props.highlighted) {
+    if(ref.current && props.highlighted) {
       ref.current.scrollIntoView();
     }
 
-  }, [props.highlighted]);
+  }, [ref, props.highlighted]);
+  const history = useHistory();
+  useEffect(() => {
+    return history.listen((location, action) => {
+      console.log(location);
+      console.log(action);
+    });
+  }, []);
+
+
+  const { copyDisplay, doCopy } = useCopy(`arvo://~graph/graph/ship/${ship}/${name}${comment.post.index}`, 'Copy Link')
 
   return (
-    <Box ref={ref} border={props.highlighted ? 1 : 0} borderRadius={1} borderColor="blue" mb={4} opacity={post?.pending ? '60%' : '100%'}>
-      <Row my={3}>
+    <Box ref={ref} mb={4} opacity={post?.pending ? '60%' : '100%'}>
+      <Row px="1" my={3}>
         <Author
           showImage
           ship={post?.author}
@@ -85,10 +96,16 @@ export function CommentItem(props: CommentItemProps): ReactElement {
         >
           <Row alignItems="center">
             {adminLinks}
+            <Action ml="2" bg="white" onClick={doCopy}>{copyDisplay}</Action>
           </Row>
         </Author>
       </Row>
-      <Box mb={2}>
+      <Box
+        borderRadius="1"
+        p="1"
+        mb="1"
+        backgroundColor={props.highlighted ? 'lightGray' : 'white'}
+      >
         <MentionText
           group={group}
           content={post?.contents}

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

@@ -7,6 +7,7 @@ import { RemoteContentPolicy } from '~/types/local-update';
 import { VirtualContextProps, withVirtual } from "~/logic/lib/virtualContext";
 import { IS_IOS } from '~/logic/lib/platform';
 import withState from '~/logic/lib/withState';
+import {Link} from 'react-router-dom';
 
 type RemoteContentProps = VirtualContextProps & {
   url: string;
@@ -124,6 +125,14 @@ return;
 
   wrapInLink(contents) {
     const { style } = this.props;
+    if(this.props.url.startsWith('arvo://')) {
+      return (
+        <Link to={this.props.url.slice(6)}>
+          {contents}
+        </Link>
+      );
+
+    }
     return (<BaseAnchor
       href={this.props.url}
       flexShrink={0}