Add connect to Remixd. Fix comments from @Aniket-Engg

Author: ci-bot

libs/remix-ui/top-bar/src/components/WorkspaceDropdown.tsx

@@ -48,6 +48,7 @@ interface WorkspacesDropdownProps {
   deleteAllWorkspaces: () => void
   setCurrentMenuItemName: (workspaceName: string) => void
   setMenuItems: (menuItems: MenuItem[]) => void
+  connectToLocalhost: () => void
 }
 
 function useClickOutside(refs: React.RefObject<HTMLElement>[], handler: () => void) {
@@ -63,7 +64,7 @@ function useClickOutside(refs: React.RefObject<HTMLElement>[], handler: () => vo
   }, [refs, handler])
 }
 
-export const WorkspacesDropdown: React.FC<WorkspacesDropdownProps> = ({ menuItems, NO_WORKSPACE, switchWorkspace, CustomToggle, createWorkspace, downloadCurrentWorkspace, restoreBackup, deleteAllWorkspaces, setCurrentMenuItemName, setMenuItems, renameCurrentWorkspace, deleteCurrentWorkspace }) => {
+export const WorkspacesDropdown: React.FC<WorkspacesDropdownProps> = ({ menuItems, NO_WORKSPACE, switchWorkspace, CustomToggle, createWorkspace, downloadCurrentWorkspace, restoreBackup, deleteAllWorkspaces, setCurrentMenuItemName, setMenuItems, renameCurrentWorkspace, deleteCurrentWorkspace, downloadWorkspaces, connectToLocalhost }) => {
   const [showMain, setShowMain] = useState(false)
   const [openSub, setOpenSub] = useState<number | null>(null)
   const global = useContext(TopbarContext)
@@ -351,12 +352,12 @@ export const WorkspacesDropdown: React.FC<WorkspacesDropdownProps> = ({ menuItem
           </span>
         </Dropdown.Item>
         <Dropdown.Item onClick={() => {
-          downloadCurrentWorkspace()
+          downloadWorkspaces()
           setShowMain(false)
           setOpenSub(null)
         }}>
           <span className="pl-2" onClick={() => {
-            downloadCurrentWorkspace()
+            downloadWorkspaces()
             setShowMain(false)
             setOpenSub(null)
           }}>
@@ -378,6 +379,20 @@ export const WorkspacesDropdown: React.FC<WorkspacesDropdownProps> = ({ menuItem
                 Restore
           </span>
         </Dropdown.Item>
+        <Dropdown.Item onClick={() => {
+          connectToLocalhost()
+          setShowMain(false)
+          setOpenSub(null)
+        }}>
+          <span className="pl-2" onClick={() => {
+            connectToLocalhost()
+            setShowMain(false)
+            setOpenSub(null)
+          }}>
+            <i className="fas fa-desktop mr-2"></i>
+                Connect to Localhost
+          </span>
+        </Dropdown.Item>
         <li className="w-100 btn btn-danger font-weight-light text-decoration-none" onClick={() => {
           deleteAllWorkspaces()
           setShowMain(false)

libs/remix-ui/top-bar/src/lib/remix-ui-topbar.tsx

@@ -10,7 +10,7 @@ import { FormattedMessage, useIntl } from 'react-intl'
 import { TopbarContext } from '../context/topbarContext'
 import { WorkspacesDropdown } from '../components/WorkspaceDropdown'
 import { useOnClickOutside } from 'libs/remix-ui/remix-ai-assistant/src/components/onClickOutsideHook'
-import { cloneRepository, deleteWorkspace, fetchWorkspaceDirectory, getWorkspaces, handleDownloadFiles, handleDownloadWorkspace, handleExpandPath, publishToGist, renameWorkspace, restoreBackupZip, switchToWorkspace } from 'libs/remix-ui/workspace/src/lib/actions'
+import { cloneRepository, deleteWorkspace, fetchWorkspaceDirectory, deleteAllWorkspaces as deleteAllWorkspacesAction, handleDownloadFiles, handleDownloadWorkspace, handleExpandPath, publishToGist, renameWorkspace, restoreBackupZip, switchToWorkspace } from 'libs/remix-ui/workspace/src/lib/actions'
 import { gitUIPanels } from 'libs/remix-ui/git/src/types'
 import { loginWithGitHub, setPlugin } from 'libs/remix-ui/git/src/lib/pluginActions'
 import { GitHubUser } from 'libs/remix-api/src/lib/types/git'
@@ -131,21 +131,6 @@ export function RemixUiTopbar () {
     setMenuItems(menuItems)
   }
 
-  const onFinishDeleteAllWorkspaces = async () => {
-    try {
-      await deleteAllWorkspaces()
-    } catch (e) {
-      global.modal(
-        intl.formatMessage({ id: 'filePanel.workspace.deleteAll' }),
-        e.message,
-        intl.formatMessage({ id: 'filePanel.ok' }),
-        () => {},
-        intl.formatMessage({ id: 'filePanel.cancel' })
-      )
-      console.error(e)
-    }
-  }
-
   const onFinishRenameWorkspace = async (currMenuName?: string) => {
     if (workspaceRenameInput.current === undefined) return
     // @ts-ignore: Object is possibly 'null'.
@@ -218,6 +203,20 @@ export function RemixUiTopbar () {
       console.error(e)
     }
   }
+  const onFinishDeleteAllWorkspaces = async () => {
+    try {
+      await deleteAllWorkspacesAction()
+    } catch (e) {
+      global.modal(
+        intl.formatMessage({ id: 'filePanel.workspace.deleteAll' }),
+        e.message,
+        intl.formatMessage({ id: 'filePanel.ok' }),
+        () => {},
+        intl.formatMessage({ id: 'filePanel.cancel' })
+      )
+      console.error(e)
+    }
+  }
 
   const deleteAllWorkspaces = () => {
     global.modal(
@@ -488,6 +487,7 @@ export function RemixUiTopbar () {
             deleteAllWorkspaces={deleteAllWorkspaces}
             setCurrentMenuItemName={setCurrentMenuItemName}
             setMenuItems={setMenuItems}
+            connectToLocalhost={() => switchWorkspace(LOCALHOST)}
           />
         </div>
         <div