GroupSummary: display padlock, copy action

Fixes urbit/landscape#411

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

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

pkg/interface/src/views/landscape/components/GroupSummary.tsx

@@ -1,11 +1,11 @@
-import { Col, Row, Text } from '@tlon/indigo-react';
+import { Col, Row, Text, Icon } from '@tlon/indigo-react';
 import { Metadata } from '@urbit/api';
 import React, { ReactElement, ReactNode, useRef } from 'react';
 import { TUTORIAL_GROUP, TUTORIAL_HOST } from '~/logic/lib/tutorialModal';
-import { PropFunc } from '~/types';
+import { PropFunc, IconRef } from '~/types';
 import { useTutorialModal } from '~/views/components/useTutorialModal';
 import { MetadataIcon } from './MetadataIcon';
-
+import { useCopy } from '~/logic/lib/useCopy';
 interface GroupSummaryProps {
   metadata: Metadata;
   memberCount: number;
@@ -13,6 +13,8 @@ interface GroupSummaryProps {
   resource?: string;
   children?: ReactNode;
   gray?: boolean;
+  AllowCopy?: boolean;
+  locked?: boolean;
 }
 
 export function GroupSummary(props: GroupSummaryProps & PropFunc<typeof Col>): ReactElement {
@@ -23,6 +25,7 @@ export function GroupSummary(props: GroupSummaryProps & PropFunc<typeof Col>): R
     resource === `/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}`,
     anchorRef
   );
+  const { doCopy, copyDisplay } = useCopy(`web+urbitgraph://group${resource.slice(5)}`, "Copy", "Checkmark");
   return (
     <Col {...rest} ref={anchorRef} gapY={4} maxWidth={['100%', '288px']}>
       <Row gapX={2} width="100%">
@@ -33,13 +36,24 @@ export function GroupSummary(props: GroupSummaryProps & PropFunc<typeof Col>): R
           flexShrink={0}
         />
         <Col justifyContent="space-between" flexGrow={1} overflow="hidden">
+          <Row justifyContent="space-between">
           <Text
             fontSize={1}
             textOverflow="ellipsis"
             whiteSpace="nowrap"
             overflow="hidden"
-          >{metadata.title}</Text>
-          <Row gapX={4} >
+          >{metadata.title}
+          </Text>
+          {props.AllowCopy &&
+            <Icon
+              color="gray"
+              icon={props?.locked ? "Locked" : copyDisplay as IconRef}
+              onClick={!props?.locked ? doCopy : null}
+              cursor={props?.locked ? "default" : "pointer"}
+            />
+          }
+          </Row>
+          <Row gapX={4} justifyContent="space-between">
             <Text fontSize={1} gray>
               {memberCount} participants
             </Text>

pkg/interface/src/views/landscape/components/Home/EmptyGroupHome.tsx

@@ -23,9 +23,11 @@ export function EmptyGroupHome(props) {
       { groupAssociation?.group ? (
         <GroupSummary
           memberCount={groups[groupAssociation.group].members.size}
+          locked={Boolean('invite' in groups[groupAssociation.group].policy)}
           channelCount={channelCount}
           metadata={groupAssociation.metadata}
           resource={groupAssociation.group}
+          AllowCopy
         />
       ) : (
         <Box p={4}>