feat(editor): add permalink section in editor

packages/design-system/atoms/copy-area/CopyArea.stories.tsx

@@ -0,0 +1,11 @@
+import { CopyArea } from './CopyArea';
+
+export default {
+  title: 'Atoms/Copy Area',
+  component: CopyArea,
+  args: {
+    value: 'Hello world',
+  },
+};
+
+export const copyArea = (args) => <CopyArea {...args} />;

packages/design-system/atoms/copy-area/CopyArea.styled.ts

@@ -0,0 +1,19 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { StyledTextInput } from '@roleypoly/design-system/atoms/text-input';
+import styled, { css } from 'styled-components';
+
+export const CopyAreaStyled = styled.div`
+  cursor: pointer;
+`;
+
+export const CopyAreaTextInput = styled(StyledTextInput)<{ copied?: boolean }>`
+  margin: 0.5em 0;
+  cursor: pointer;
+  font-size: 1em;
+  ${({ copied }) =>
+    copied &&
+    css`
+      border-color: ${palette.green400} !important;
+      box-shadow: inset 0 0 2px ${palette.green200} !important;
+    `}
+`;

packages/design-system/atoms/copy-area/CopyArea.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import ReactTooltip from 'react-tooltip';
+import { CopyAreaStyled, CopyAreaTextInput } from './CopyArea.styled';
+
+type CopyAreaProps = {
+  value: string;
+};
+
+enum CopyState {
+  NotCopied = 0,
+  Copied = 1,
+}
+
+export const CopyArea = (props: CopyAreaProps) => {
+  const [copied, setCopied] = React.useState<CopyState>(CopyState.NotCopied);
+
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleClick = () => {
+    inputRef.current?.setSelectionRange(0, 99999);
+
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(props.value);
+      setCopied(CopyState.Copied);
+    }
+  };
+
+  const strings = {
+    [CopyState.NotCopied]: `Press ⌘/Ctrl+C to copy`,
+    [CopyState.Copied]: 'Copied to clipboard!',
+  };
+
+  return (
+    <CopyAreaStyled>
+      <CopyAreaTextInput
+        ref={inputRef}
+        value={props.value}
+        onClick={handleClick}
+        onBlur={() => setCopied(CopyState.NotCopied)}
+        copied={copied === CopyState.Copied}
+        data-tip={strings[copied]}
+        data-for={'copy-area'}
+      />
+      <ReactTooltip id="copy-area" />
+    </CopyAreaStyled>
+  );
+};

packages/design-system/atoms/copy-area/index.ts

@@ -0,0 +1 @@
+export * from './CopyArea';

packages/design-system/atoms/text-input/TextInput.tsx

@@ -40,7 +40,7 @@ const common = css`
   }
 `;
 
-const StyledTextInput = styled.input`
+export const StyledTextInput = styled.input`
   ${common};
 `;
 
@@ -89,6 +89,7 @@ export const TextInputWithIcon = (props: TextInputWithIconProps) => {
 const StyledTextarea = styled.textarea`
   ${common};
   ${fontCSS};
+  margin: 0.5em 0;
 `;
 
 export const MultilineTextInput = (

packages/design-system/molecules/editor-invite-link/EditorInviteLink.stories.tsx

@@ -0,0 +1,12 @@
+import { mastheadSlugs } from '../../fixtures/storyData';
+import { EditorInviteLink } from './EditorInviteLink';
+
+export default {
+  title: 'Molecules/Editor Invite Link',
+  component: EditorInviteLink,
+  args: {
+    guild: mastheadSlugs[0],
+  },
+};
+
+export const editorInviteLink = (args) => <EditorInviteLink {...args} />;

packages/design-system/molecules/editor-invite-link/EditorInviteLink.styled.ts

@@ -0,0 +1,2 @@
+import styled from 'styled-components';
+export const EditorInviteLinkStyled = styled.div``;

packages/design-system/molecules/editor-invite-link/EditorInviteLink.tsx

@@ -0,0 +1,26 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { CopyArea } from '@roleypoly/design-system/atoms/copy-area';
+import { AmbientLarge } from '@roleypoly/design-system/atoms/typography';
+import { MessageBox } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
+import { Guild } from '@roleypoly/types';
+import { GoInfo } from 'react-icons/go';
+
+export const EditorInviteLink = (props: { guild: Guild }) => {
+  const currentURL = new URL(location.href);
+  currentURL.pathname = `/s/${props.guild.id}`;
+  currentURL.search = '';
+
+  const inviteLink = currentURL.toString();
+
+  return (
+    <MessageBox>
+      Share this link with your server members, or ping{' '}
+      <span style={{ color: palette.taupe500 }}>@roleypoly</span> in your server.
+      <CopyArea value={inviteLink} />
+      <AmbientLarge style={{ display: 'flex', color: palette.taupe600 }}>
+        <GoInfo style={{ position: 'relative', top: 4 }} />
+        &nbsp;This link will never change. Share it with anyone!
+      </AmbientLarge>
+    </MessageBox>
+  );
+};

packages/design-system/molecules/editor-invite-link/index.ts

@@ -0,0 +1 @@
+export * from './EditorInviteLink';

packages/design-system/organisms/editor-shell/EditorShell.tsx

@@ -1,5 +1,6 @@
 import { LinedSpace, Space } from '@roleypoly/design-system/atoms/space';
 import { EditableServerMessage } from '@roleypoly/design-system/molecules/editable-server-message';
+import { EditorInviteLink } from '@roleypoly/design-system/molecules/editor-invite-link';
 import { ServerMasthead } from '@roleypoly/design-system/molecules/server-masthead';
 import { ServerUtilities } from '@roleypoly/design-system/molecules/server-utilities/ServerUtilities';
 import { SecondaryEditing } from '@roleypoly/design-system/organisms/masthead';
@@ -60,6 +61,8 @@ export const EditorShell = (props: EditorShellProps) => {
         <Space />
         <ServerMasthead guild={props.guild.guild} editable={false} />
         <Space />
+        <EditorInviteLink guild={props.guild.guild} />
+        <Space />
         <EditableServerMessage
           onChange={onMessageChange}
           value={guild.data.message}

packages/web/src/pages/servers.tsx

@@ -14,7 +14,7 @@ const ServersPage = () => {
 
   return (
     <>
-      <Title title={'Your Guilds - Roleypoly'} />
+      <Title title={'Your Servers - Roleypoly'} />
       <ServersTemplate {...appShellProps} />
     </>
   );