add permalinks

packages/app/src/app/components/CreateNewSandbox/CreateSandbox/Import/Import.tsx

@@ -31,20 +31,8 @@ import {
 const getFullGitHubUrl = (url: string) =>
   `${protocolAndHost()}${gitHubToSandboxUrl(url)}`;
 
-const copyToClipboard = (str: string) => {
-  const el = document.createElement('textarea');
-  el.value = str;
-  el.setAttribute('readonly', '');
-  el.style.position = 'absolute';
-  el.style.left = '-9999px';
-  document.body.appendChild(el);
-  el.select();
-  document.execCommand('copy');
-  document.body.removeChild(el);
-};
-
 export const Import = () => {
-  const { state, actions } = useOvermind();
+  const { state, actions, effects } = useOvermind();
   const [error, setError] = useState(null);
   const [transformedUrl, setTransformedUrl] = useState('');
   const [url, setUrl] = useState('');
@@ -117,9 +105,7 @@ export const Import = () => {
               <Button
                 small
                 style={{ fontSize: 11 }}
-                onClick={() => {
-                  copyToClipboard(transformedUrl);
-                }}
+                onClick={() => effects.browser.copyToClipboard(transformedUrl)}
                 disabled={!transformedUrl}
               >
                 Copy Link

packages/app/src/app/overmind/effects/browser.ts

@@ -35,6 +35,12 @@ export default {
   openWindow(url) {
     window.open(url, '_blank');
   },
+  getWidth() {
+    return window.innerWidth;
+  },
+  getHeight() {
+    return window.innerHeight;
+  },
   openPopup(url, name) {
     const popup = window.open(
       url,
@@ -45,6 +51,17 @@ export default {
       close: () => popup?.close(),
     };
   },
+  copyToClipboard: (str: string) => {
+    const el = document.createElement('textarea');
+    el.value = str;
+    el.setAttribute('readonly', '');
+    el.style.position = 'absolute';
+    el.style.left = '-9999px';
+    document.body.appendChild(el);
+    el.select();
+    document.execCommand('copy');
+    document.body.removeChild(el);
+  },
   waitForMessage<T>(type): Promise<T> {
     return new Promise(resolve => {
       window.addEventListener('message', function onMessage(event) {

packages/app/src/app/overmind/effects/router.ts

@@ -1,7 +1,6 @@
 import { GitInfo } from '@codesandbox/common/lib/types';
 import { getSandboxOptions } from '@codesandbox/common/lib/url';
 import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
-
 import history from '../../utils/history';
 
 export default {
@@ -49,4 +48,10 @@ export default {
   getSandboxOptions() {
     return getSandboxOptions(decodeURIComponent(document.location.href));
   },
+  getCommentId() {
+    return new URL(location.href).searchParams.get('comment');
+  },
+  createCommentUrl(id: string) {
+    return `${window.location.origin}${window.location.pathname}?comment=${id}`;
+  },
 };

packages/app/src/app/overmind/namespaces/comments/actions.ts

@@ -376,3 +376,11 @@ export const resolveComment: AsyncAction<{
     comments[sandboxId][commentId].isResolved = oldIsResolved;
   }
 };
+
+export const copyPermalinkToClipboard: Action<string> = (
+  { effects },
+  commentId
+) => {
+  effects.browser.copyToClipboard(effects.router.createCommentUrl(commentId));
+  effects.notificationToast.success('Comment permalink copied to clipboard');
+};

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -220,6 +220,19 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
 
         return aggr;
       }, {});
+
+      if (effects.router.getCommentId()) {
+        actions.workspace.setWorkspaceItem({ item: 'comments' });
+        actions.comments.selectComment({
+          commentId: effects.router.getCommentId(),
+          bounds: {
+            left: effects.browser.getWidth() / 2,
+            top: 80,
+            right: effects.browser.getWidth() / 3,
+            bottom: 0,
+          },
+        });
+      }
     } catch (e) {
       state.comments.comments[sandbox.id] = {};
       effects.notificationToast.add({

packages/app/src/app/pages/Sandbox/Editor/Header/Collaborators/ButtonActions.tsx

@@ -5,27 +5,15 @@ import { Stack, Button } from '@codesandbox/components';
 import CheckIcon from 'react-icons/lib/md/check';
 import { useOvermind } from 'app/overmind';
 
-const copyToClipboard = (str: string) => {
-  const el = document.createElement('textarea');
-  el.value = str;
-  el.setAttribute('readonly', '');
-  el.style.position = 'absolute';
-  el.style.left = '-9999px';
-  document.body.appendChild(el);
-  el.select();
-  document.execCommand('copy');
-  document.body.removeChild(el);
-};
-
 export const ButtonActions = () => {
   const [linkCopied, setLinkCopied] = React.useState(false);
   const [mounted, setMounted] = React.useState(false);
-  const { actions } = useOvermind();
+  const { actions, effects } = useOvermind();
   const timeout = React.useRef(null);
   const copyLink = () => {
     setLinkCopied(true);
 
-    copyToClipboard(document.location.href);
+    effects.browser.copyToClipboard(document.location.href);
 
     if (timeout.current) {
       clearTimeout(timeout.current);

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Comment.tsx

@@ -43,6 +43,7 @@ export const Comment = React.memo<{
         opacity: comment.isResolved ? 0.2 : 1,
         paddingRight: 0, // the actions menu should be at the edge
       })}
+      id={comment.id}
       onClick={event => {
         const target = event.currentTarget as HTMLElement;
         // don't trigger comment if you click on the menu
@@ -83,7 +84,13 @@ export const Comment = React.memo<{
               >
                 Mark as {comment.isResolved ? 'Unr' : 'r'}esolved
               </Menu.Item>
-              <Menu.Item onSelect={() => {}}>Share Comment</Menu.Item>
+              <Menu.Item
+                onSelect={() =>
+                  actions.comments.copyPermalinkToClipboard(comment.id)
+                }
+              >
+                Share Comment
+              </Menu.Item>
               {state.user.id === comment.user.id && (
                 <Menu.Item
                   onSelect={() =>

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx

@@ -162,6 +162,15 @@ export const Dialog: React.FC = () => {
                         <Menu.Item onSelect={() => setEditing(true)}>
                           Edit Comment
                         </Menu.Item>
+                        <Menu.Item
+                          onSelect={() =>
+                            actions.comments.copyPermalinkToClipboard(
+                              comment.id
+                            )
+                          }
+                        >
+                          Share Comment
+                        </Menu.Item>
                       </Menu.List>
                     </Menu>
                   </Stack>