move components and fix adding comment on existing (codesandbox#3785)

* move components and fix adding comment on existing

* move back profile

Author: christianalfoni

packages/app/src/app/overmind/effects/vscode/ModelsHandler.ts

@@ -6,8 +6,8 @@ import {
   UserSelection,
 } from '@codesandbox/common/lib/types';
 import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
-import { hasPermission } from '@codesandbox/common/lib/utils/permission';
 import { COMMENTS } from '@codesandbox/common/lib/utils/feature-flags';
+import { hasPermission } from '@codesandbox/common/lib/utils/permission';
 import { indexToLineAndColumn } from 'app/overmind/utils/common';
 import { actions, dispatch } from 'codesandbox-api';
 import { css } from 'glamor';
@@ -729,7 +729,8 @@ export class ModelsHandler {
     }, {});
 
     const initialDecorations: any[] =
-      currentLineNumber === -1
+      currentLineNumber === -1 ||
+      currentLineNumber in commentDecorationsByLineNumber
         ? []
         : [
             {

packages/app/src/app/overmind/effects/vscode/icons.css

@@ -39,14 +39,6 @@
   color: #242424;
 }
 
-.editor-comments-add:before {
-  content: '+';
-  font-size: 10px;
-  font-weight: bold;
-  top: 0;
-  left: 8px;
-}
-
 .editor-comments-multi-2:before {
   content: '2';
   top: 0px;
@@ -96,3 +88,11 @@
   opacity: 1;
   background-image: url('data:image/svg+xml,%3Csvg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 5C0 7.76142 2.23858 10 5 10C7.76142 10 10 7.76142 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5Z" fill="%230971F1"/%3E%3Cpath d="M5 5H0V10H5V5Z" fill="%230971F1"/%3E%3C/svg%3E%0A');
 }
+
+.editor-comments-add:before {
+  content: '+';
+  font-size: 10px;
+  font-weight: bold;
+  top: 0;
+  left: 8px;
+}

packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx

@@ -30,6 +30,8 @@ import { NotOwnedSandboxInfo } from './items/NotOwnedSandboxInfo';
 import { ProjectInfo } from './items/ProjectInfo';
 import { Server } from './items/Server';
 import { Comments } from './screens/Comments';
+import { MultiComment } from './screens/Comments/components/MultiComment';
+import { CommentDialog } from './screens/Comments/Dialog';
 import { ConfigurationFiles as ConfigurationFilesNew } from './screens/ConfigurationFiles';
 import { Deployment as DeploymentNew } from './screens/Deployment/index';
 import { Explorer } from './screens/Explorer';
@@ -112,6 +114,11 @@ export const WorkspaceComponent = ({ theme }) => {
           {NEW_SIDEBAR &&
             !(isPatron || (currentSandbox && currentSandbox.owned)) &&
             !(isLive && roomInfo.chatEnabled) && <Advertisement />}
+
+          {state.comments.currentCommentId && <CommentDialog />}
+          {state.comments.multiCommentsSelector && (
+            <MultiComment {...state.comments.multiCommentsSelector} />
+          )}
         </>
       </WorkspaceWrapper>
 

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

@@ -1,5 +1,4 @@
 import { CommentsFilterOption } from '@codesandbox/common/lib/types';
-
 import {
   Icon,
   List,
@@ -14,17 +13,13 @@ import React from 'react';
 
 import { AddComment } from './AddComment';
 import { Comment } from './Comment';
-import { CommentDialog } from './Dialog';
-import { MultiComment } from './components/MultiComment';
 
 export const Comments: React.FC = () => {
   const {
     state: {
       comments: {
         selectedCommentsFilter,
         currentComments,
-        currentCommentId,
-        multiCommentsSelector,
         currentCommentsByDate,
       },
     },
@@ -139,8 +134,6 @@ export const Comments: React.FC = () => {
       </div>
       {currentComments.length ? null : <Empty />}
       <AddComment />
-      {currentCommentId && <CommentDialog />}
-      {multiCommentsSelector && <MultiComment {...multiCommentsSelector} />}
     </Stack>
   );
 };