From 898d24c4ba2daafc6e827f8614741fee1285e2f3 Mon Sep 17 00:00:00 2001
From: Jack Kavanagh <jackkav@gmail.com>
Date: Tue, 4 Oct 2022 23:33:18 +0200
Subject: [PATCH] Refactor/wrapper-tsx-fc (#5242)

* wrapper-fc squashed

* undrill setFilter

* extract hooks

* eliminate wrapper.tsx
---
 .../activity-toggle/activity-toggle.tsx       |   2 +-
 .../dropdowns/environments-dropdown.tsx       |  23 +-
 .../dropdowns/git-sync-dropdown.tsx           |   4 +-
 .../components/modals/git-branches-modal.tsx  |   4 +-
 .../src/ui/components/panes/request-pane.tsx  |   3 -
 .../src/ui/components/panes/response-pane.tsx |  23 +-
 .../src/ui/components/request-url-bar.tsx     |  39 +-
 .../ui/components/workspace-page-header.tsx   | 132 ++++-
 .../src/ui/components/wrapper-debug.tsx       |  81 +--
 .../src/ui/components/wrapper-design.tsx      |  23 +-
 .../src/ui/components/wrapper-unit-test.tsx   |  24 +-
 .../insomnia/src/ui/components/wrapper.tsx    | 465 ----------------
 .../insomnia/src/ui/containers/app-hooks.tsx  |  14 +-
 packages/insomnia/src/ui/containers/app.tsx   | 504 +++++++++---------
 .../insomnia/src/ui/hooks/use-app-commands.ts |  24 +
 .../hooks/use-drag-and-drop-import-file.tsx   |  54 ++
 packages/insomnia/src/ui/hooks/use-git-vcs.ts |  97 ++++
 .../insomnia/src/ui/hooks/use-theme-change.ts |  17 +
 packages/insomnia/src/ui/hooks/use-vcs.ts     |  53 ++
 19 files changed, 719 insertions(+), 867 deletions(-)
 delete mode 100644 packages/insomnia/src/ui/components/wrapper.tsx
 create mode 100644 packages/insomnia/src/ui/hooks/use-app-commands.ts
 create mode 100644 packages/insomnia/src/ui/hooks/use-drag-and-drop-import-file.tsx
 create mode 100644 packages/insomnia/src/ui/hooks/use-git-vcs.ts
 create mode 100644 packages/insomnia/src/ui/hooks/use-theme-change.ts
 create mode 100644 packages/insomnia/src/ui/hooks/use-vcs.ts

diff --git a/packages/insomnia/src/ui/components/activity-toggle/activity-toggle.tsx b/packages/insomnia/src/ui/components/activity-toggle/activity-toggle.tsx
index c8fc9274c8..86ad0ab390 100644
--- a/packages/insomnia/src/ui/components/activity-toggle/activity-toggle.tsx
+++ b/packages/insomnia/src/ui/components/activity-toggle/activity-toggle.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import type { GlobalActivity } from '../../../common/constants';
 import { ACTIVITY_DEBUG, ACTIVITY_SPEC, ACTIVITY_UNIT_TEST } from '../../../common/constants';
 import { isDesign, Workspace } from '../../../models/workspace';
-import { HandleActivityChange } from '../wrapper';
+import { HandleActivityChange } from '../workspace-page-header';
 
 const StyledNav = styled.nav({
   display: 'flex',
diff --git a/packages/insomnia/src/ui/components/dropdowns/environments-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/environments-dropdown.tsx
index c8b6832808..61cb474832 100644
--- a/packages/insomnia/src/ui/components/dropdowns/environments-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/environments-dropdown.tsx
@@ -2,9 +2,10 @@ import { EnvironmentHighlightColorStyle } from 'insomnia-common';
 import React, { FC, useCallback, useRef } from 'react';
 import { useSelector } from 'react-redux';
 
+import * as models from '../../../models';
 import type { Environment } from '../../../models/environment';
 import type { Workspace } from '../../../models/workspace';
-import { selectEnvironments, selectHotKeyRegistry } from '../../redux/selectors';
+import { selectActiveWorkspaceMeta, selectEnvironments, selectHotKeyRegistry } from '../../redux/selectors';
 import { type DropdownHandle, Dropdown } from '../base/dropdown/dropdown';
 import { DropdownButton } from '../base/dropdown/dropdown-button';
 import { DropdownDivider } from '../base/dropdown/dropdown-divider';
@@ -18,18 +19,17 @@ import { Tooltip } from '../tooltip';
 interface Props {
   activeEnvironment?: Environment | null;
   environmentHighlightColorStyle: EnvironmentHighlightColorStyle;
-  handleSetActiveEnvironment: (id: string | null) => void;
   workspace: Workspace;
 }
 
 export const EnvironmentsDropdown: FC<Props> = ({
   activeEnvironment,
   environmentHighlightColorStyle,
-  handleSetActiveEnvironment,
   workspace,
 }) => {
   const environments = useSelector(selectEnvironments);
   const hotKeyRegistry = useSelector(selectHotKeyRegistry);
+  const activeWorkspaceMeta = useSelector(selectActiveWorkspaceMeta);
   const dropdownRef = useRef<DropdownHandle>(null);
   const handleShowEnvironmentModal = useCallback(() => {
     showModal(WorkspaceEnvironmentsEditModal, workspace);
@@ -48,7 +48,7 @@ export const EnvironmentsDropdown: FC<Props> = ({
   const subEnvironments = environments
     .filter(environment => environment.parentId === (baseEnvironment && baseEnvironment._id))
     .sort((e1, e2) => e1.metaSortKey - e2.metaSortKey);
-  const description =  (!activeEnvironment || activeEnvironment === baseEnvironment) ? 'No Environment' : activeEnvironment.name;
+  const description = (!activeEnvironment || activeEnvironment === baseEnvironment) ? 'No Environment' : activeEnvironment.name;
 
   return (
     <Dropdown ref={dropdownRef}>
@@ -82,8 +82,11 @@ export const EnvironmentsDropdown: FC<Props> = ({
       {subEnvironments.map(environment => (
         <DropdownItem
           key={environment._id}
-          value={environment._id}
-          onClick={handleSetActiveEnvironment}
+          onClick={() => {
+            if (activeWorkspaceMeta) {
+              models.workspaceMeta.update(activeWorkspaceMeta, { activeEnvironmentId: environment._id });
+            }
+          }}
         >
           <i
             className="fa fa-random"
@@ -95,7 +98,13 @@ export const EnvironmentsDropdown: FC<Props> = ({
         </DropdownItem>
       ))}
 
-      <DropdownItem value={null} onClick={handleSetActiveEnvironment}>
+      <DropdownItem
+        onClick={() => {
+          if (activeWorkspaceMeta) {
+            models.workspaceMeta.update(activeWorkspaceMeta, { activeEnvironmentId: null });
+          }
+        }}
+      >
         <i className="fa fa-empty" /> No Environment
       </DropdownItem>
 
diff --git a/packages/insomnia/src/ui/components/dropdowns/git-sync-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/git-sync-dropdown.tsx
index d2b45ada18..1d8bf66454 100644
--- a/packages/insomnia/src/ui/components/dropdowns/git-sync-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/git-sync-dropdown.tsx
@@ -29,7 +29,6 @@ import { GitLogModal } from '../modals/git-log-modal';
 import { GitStagingModal } from '../modals/git-staging-modal';
 
 type Props = ReturnType<typeof mapDispatchToProps> & {
-  handleGitBranchChanged: (branch: string) => void;
   workspace: Workspace;
   vcs: GitVCS;
   gitRepository: GitRepository | null;
@@ -64,7 +63,7 @@ class GitSyncDropdown extends PureComponent<Props, State> {
   }
 
   async _refreshState(otherState?: Record<string, any>) {
-    const { vcs, workspace, handleGitBranchChanged } = this.props;
+    const { vcs, workspace } = this.props;
     const workspaceMeta = await models.workspaceMeta.getOrCreateByParentId(workspace._id);
 
     // Clear cached items and return if no state
@@ -101,7 +100,6 @@ class GitSyncDropdown extends PureComponent<Props, State> {
       cachedGitLastAuthor,
       cachedGitLastCommitTime,
     });
-    handleGitBranchChanged(branch);
   }
 
   async _handleOpen() {
diff --git a/packages/insomnia/src/ui/components/modals/git-branches-modal.tsx b/packages/insomnia/src/ui/components/modals/git-branches-modal.tsx
index 6cb19f3a27..c908cb2d8e 100644
--- a/packages/insomnia/src/ui/components/modals/git-branches-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/git-branches-modal.tsx
@@ -20,7 +20,6 @@ import { PromptButton } from '../base/prompt-button';
 type Props = ReturnType<typeof mapDispatchToProps> & {
   vcs: GitVCS;
   gitRepository: GitRepository;
-  handleGitBranchChanged: (branch: string) => void;
 };
 
 interface State {
@@ -75,7 +74,7 @@ export class GitBranchesModalClass extends PureComponent<Props, State> {
   }
 
   async _refreshState(newState?: Record<string, any>) {
-    const { vcs, handleGitBranchChanged } = this.props;
+    const { vcs } = this.props;
     const branch = await vcs.getBranch();
     const branches = await vcs.listBranches();
     const remoteBranches = await vcs.listRemoteBranches();
@@ -85,7 +84,6 @@ export class GitBranchesModalClass extends PureComponent<Props, State> {
       remoteBranches,
       ...newState,
     });
-    handleGitBranchChanged(branch);
   }
 
   _handleClearError() {
diff --git a/packages/insomnia/src/ui/components/panes/request-pane.tsx b/packages/insomnia/src/ui/components/panes/request-pane.tsx
index cdcdbbe464..80ff1f6df0 100644
--- a/packages/insomnia/src/ui/components/panes/request-pane.tsx
+++ b/packages/insomnia/src/ui/components/panes/request-pane.tsx
@@ -52,7 +52,6 @@ const TabPanelBody = styled.div({
 
 interface Props {
   environmentId: string;
-  handleImport: Function;
   request?: Request | null;
   settings: Settings;
   workspace: Workspace;
@@ -60,7 +59,6 @@ interface Props {
 
 export const RequestPane: FC<Props> = ({
   environmentId,
-  handleImport,
   request,
   settings,
   workspace,
@@ -172,7 +170,6 @@ export const RequestPane: FC<Props> = ({
             uniquenessKey={uniqueKey}
             onUrlChange={updateRequestUrl}
             handleAutocompleteUrls={autocompleteUrls}
-            handleImport={handleImport}
             nunjucksPowerUserMode={settings.nunjucksPowerUserMode}
             request={request}
           />
diff --git a/packages/insomnia/src/ui/components/panes/response-pane.tsx b/packages/insomnia/src/ui/components/panes/response-pane.tsx
index e7fff444a8..db5d261c8d 100644
--- a/packages/insomnia/src/ui/components/panes/response-pane.tsx
+++ b/packages/insomnia/src/ui/components/panes/response-pane.tsx
@@ -13,6 +13,7 @@ import * as models from '../../../models';
 import type { Request } from '../../../models/request';
 import type { Response } from '../../../models/response';
 import { cancelRequestById } from '../../../network/network';
+import { updateRequestMetaByParentId } from '../../hooks/create-request';
 import { selectActiveResponse, selectLoadStartTime, selectResponseFilter, selectResponseFilterHistory, selectResponsePreviewMode, selectSettings } from '../../redux/selectors';
 import { Button } from '../base/button';
 import { PreviewModeDropdown } from '../dropdowns/preview-mode-dropdown';
@@ -32,11 +33,9 @@ import { Pane, paneBodyClasses, PaneHeader } from './pane';
 import { PlaceholderResponsePane } from './placeholder-response-pane';
 
 interface Props {
-  handleSetFilter: (filter: string) => void;
   request?: Request | null;
 }
 export const ResponsePane: FC<Props> = ({
-  handleSetFilter,
   request,
 }) => {
   const response = useSelector(selectActiveResponse) as Response | null;
@@ -45,7 +44,24 @@ export const ResponsePane: FC<Props> = ({
   const settings = useSelector(selectSettings);
   const loadStartTime = useSelector(selectLoadStartTime);
   const previewMode = useSelector(selectResponsePreviewMode);
-
+  const handleSetFilter = async (responseFilter: string) => {
+    if (!response) {
+      return;
+    }
+    const requestId = response.parentId;
+    await updateRequestMetaByParentId(requestId, { responseFilter });
+    const meta = await models.requestMeta.getByParentId(requestId);
+    if (!meta) {
+      return;
+    }
+    const responseFilterHistory = meta.responseFilterHistory.slice(0, 10);
+    // Already in history or empty?
+    if (!responseFilter || responseFilterHistory.includes(responseFilter)) {
+      return;
+    }
+    responseFilterHistory.unshift(responseFilter);
+    updateRequestMetaByParentId(requestId, { responseFilterHistory });
+  };
   const handleGetResponseBody = useCallback(() => {
     if (!response) {
       return null;
@@ -58,7 +74,6 @@ export const ResponsePane: FC<Props> = ({
       clipboard.writeText(bodyBuffer.toString('utf8'));
     }
   }, [handleGetResponseBody]);
-
   const handleDownloadResponseBody = useCallback(async (prettify: boolean) => {
     if (!response || !request) {
       console.warn('Nothing to download');
diff --git a/packages/insomnia/src/ui/components/request-url-bar.tsx b/packages/insomnia/src/ui/components/request-url-bar.tsx
index f9dec3bf92..35b1f5aebe 100644
--- a/packages/insomnia/src/ui/components/request-url-bar.tsx
+++ b/packages/insomnia/src/ui/components/request-url-bar.tsx
@@ -1,5 +1,6 @@
 import type { SaveDialogOptions } from 'electron';
 import fs from 'fs';
+import * as importers from 'insomnia-importers';
 import { extension as mimeExtension } from 'mime-types';
 import path from 'path';
 import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
@@ -7,15 +8,16 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useInterval } from 'react-use';
 
 import { SegmentEvent, trackSegmentEvent } from '../../common/analytics';
+import { database } from '../../common/database';
 import { getContentDispositionHeader } from '../../common/misc';
 import * as models from '../../models';
 import { update } from '../../models/helpers/request-operations';
-import type { Request } from '../../models/request';
+import { isRequest, Request } from '../../models/request';
 import * as network from '../../network/network';
 import { updateRequestMetaByParentId } from '../hooks/create-request';
 import { useTimeoutWhen } from '../hooks/useTimeoutWhen';
 import { loadRequestStart, loadRequestStop } from '../redux/modules/global';
-import { selectActiveEnvironment, selectHotKeyRegistry, selectResponseDownloadPath, selectSettings } from '../redux/selectors';
+import { selectActiveEnvironment, selectActiveRequest, selectHotKeyRegistry, selectResponseDownloadPath, selectSettings } from '../redux/selectors';
 import { type DropdownHandle, Dropdown } from './base/dropdown/dropdown';
 import { DropdownButton } from './base/dropdown/dropdown-button';
 import { DropdownDivider } from './base/dropdown/dropdown-divider';
@@ -31,7 +33,6 @@ import { RequestRenderErrorModal } from './modals/request-render-error-modal';
 
 interface Props {
   handleAutocompleteUrls: () => Promise<string[]>;
-  handleImport: Function;
   nunjucksPowerUserMode: boolean;
   onUrlChange: (r: Request, url: string) => Promise<Request>;
   request: Request;
@@ -44,7 +45,6 @@ export interface RequestUrlBarHandle {
 
 export const RequestUrlBar = forwardRef<RequestUrlBarHandle, Props>(({
   handleAutocompleteUrls,
-  handleImport,
   onUrlChange,
   request,
   uniquenessKey,
@@ -52,6 +52,7 @@ export const RequestUrlBar = forwardRef<RequestUrlBarHandle, Props>(({
   const downloadPath = useSelector(selectResponseDownloadPath);
   const hotKeyRegistry = useSelector(selectHotKeyRegistry);
   const activeEnvironment = useSelector(selectActiveEnvironment);
+  const activeRequest = useSelector(selectActiveRequest);
   const settings = useSelector(selectSettings);
   const dispatch = useDispatch();
   const methodDropdownRef = useRef<DropdownHandle>(null);
@@ -302,6 +303,36 @@ export const RequestUrlBar = forwardRef<RequestUrlBarHandle, Props>(({
   });
 
   const [lastPastedText, setLastPastedText] = useState<string>();
+  const handleImport = useCallback(async (text: string) => {
+    // Allow user to paste any import file into the url. If it results in
+    // only one item, it will overwrite the current request.
+    try {
+      const { data } = await importers.convert(text);
+      const { resources } = data;
+      const r = resources[0];
+      if (r && r._type === 'request' && activeRequest && isRequest(activeRequest)) {
+        // Only pull fields that we want to update
+        return database.update({
+          ...activeRequest,
+          modified: Date.now(),
+          url: r.url,
+          method: r.method,
+          headers: r.headers,
+          body: r.body,
+          authentication: r.authentication,
+          parameters: r.parameters,
+        },
+        // Pass true to indicate that this is an import
+        true
+        );
+      }
+    } catch (error) {
+      // Import failed, that's alright
+      console.error(error);
+    }
+    return null;
+  }, [activeRequest]);
+
   const handleUrlChange = useCallback(async (url: string) => {
     const pastedText = lastPastedText;
     // If no pasted text in the queue, just fire the regular change handler
diff --git a/packages/insomnia/src/ui/components/workspace-page-header.tsx b/packages/insomnia/src/ui/components/workspace-page-header.tsx
index df29a188f5..3548631f2e 100644
--- a/packages/insomnia/src/ui/components/workspace-page-header.tsx
+++ b/packages/insomnia/src/ui/components/workspace-page-header.tsx
@@ -1,37 +1,113 @@
-import React, { FunctionComponent, ReactNode, useCallback } from 'react';
-import { useSelector } from 'react-redux';
+import React, { FC, useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
-import { ACTIVITY_HOME } from '../../common/constants';
-import { selectActiveActivity, selectActiveApiSpec, selectActiveProjectName, selectActiveWorkspace } from '../redux/selectors';
+import { ACTIVITY_DEBUG, ACTIVITY_HOME, ACTIVITY_SPEC, ACTIVITY_UNIT_TEST, GlobalActivity } from '../../common/constants';
+import { importRaw } from '../../common/import';
+import { initializeSpectral, isLintError } from '../../common/spectral';
+import * as models from '../../models';
+import { isRemoteProject } from '../../models/project';
+import { isCollection, isDesign } from '../../models/workspace';
+import { useGitVCS } from '../hooks/use-git-vcs';
+import { useVCS } from '../hooks/use-vcs';
+import { setActiveActivity } from '../redux/modules/global';
+import { selectActiveActivity, selectActiveApiSpec, selectActiveGitRepository, selectActiveProject, selectActiveProjectName, selectActiveWorkspace, selectIsLoggedIn } from '../redux/selectors';
 import { ActivityToggle } from './activity-toggle/activity-toggle';
 import { AppHeader } from './app-header';
+import { DropdownButton } from './base/dropdown/dropdown-button';
+import GitSyncDropdown from './dropdowns/git-sync-dropdown';
+import { SyncDropdown } from './dropdowns/sync-dropdown';
 import { WorkspaceDropdown } from './dropdowns/workspace-dropdown';
-import { HandleActivityChange } from './wrapper';
+import { showModal } from './modals';
+import { AlertModal } from './modals/alert-modal';
 
-interface Props {
-  handleActivityChange: HandleActivityChange;
-  gridRight: ReactNode;
-}
+export type HandleActivityChange = (options: {
+  workspaceId?: string;
+  nextActivity: GlobalActivity;
+}) => Promise<void>;
 
-export const WorkspacePageHeader: FunctionComponent<Props> = ({
-  gridRight,
-  handleActivityChange,
-}) => {
+// TODO(jackkav): find the right place to initializeSpectral
+const spectral = initializeSpectral();
+export const WorkspacePageHeader: FC = () => {
   const activeApiSpec = useSelector(selectActiveApiSpec);
   const activeWorkspace = useSelector(selectActiveWorkspace);
-  const activity = useSelector(selectActiveActivity);
+  const activeActivity = useSelector(selectActiveActivity);
+  const dispatch = useDispatch();
+
+  const handleActivityChange = useCallback(async ({ workspaceId, nextActivity }) => {
+    // Remember last activity on workspace for later, but only if it isn't HOME
+    if (workspaceId && nextActivity !== ACTIVITY_HOME) {
+      await models.workspaceMeta.updateByParentId(workspaceId, {
+        activeActivity: nextActivity,
+      });
+    }
+    const editingASpec = activeActivity === ACTIVITY_SPEC;
+    if (!editingASpec) {
+      dispatch(setActiveActivity(nextActivity));
+      return;
+    }
+    if (!activeApiSpec || !workspaceId) {
+      return;
+    }
+    const goingToDebugOrTest = nextActivity === ACTIVITY_DEBUG || nextActivity === ACTIVITY_UNIT_TEST;
+    // If editing a spec and not going to debug or test, don't regenerate anything
+    if (editingASpec && !goingToDebugOrTest) {
+      dispatch(setActiveActivity(nextActivity));
+      return;
+    }
+    // Handle switching away from the spec design activity. For this, we want to generate
+    // requests that can be accessed from debug or test.
+    // If there are errors in the spec, show the user a warning first
+    const results = (await spectral.run(activeApiSpec.contents)).filter(isLintError);
+    if (activeApiSpec.contents && results && results.length) {
+      showModal(AlertModal, {
+        title: 'Error Generating Configuration',
+        message: 'Some requests may not be available due to errors found in the specification. We recommend fixing errors before proceeding.',
+        okLabel: 'Proceed',
+        addCancel: true,
+        onConfirm: () => {
+          dispatch(setActiveActivity(nextActivity));
+        },
+      });
+      return;
+    }
+
+    // TODO(gatzjames): make import on navigation optional
+    // Delaying generation so design to debug mode is smooth
+    dispatch(setActiveActivity(nextActivity));
+    setTimeout(() => {
+      importRaw(activeApiSpec.contents, {
+        getWorkspaceId: () => Promise.resolve(workspaceId),
+        enableDiffBasedPatching: true,
+        enableDiffDeep: true,
+        bypassDiffProps: {
+          url: true,
+        },
+      });
+    }, 1000);
+  }, [activeActivity, activeApiSpec, dispatch]);
 
-  const homeCallback = useCallback(() => {
-    handleActivityChange({ workspaceId: activeWorkspace?._id, nextActivity: ACTIVITY_HOME });
-  }, [activeWorkspace, handleActivityChange]);
   const activeProjectName = useSelector(selectActiveProjectName);
+  const activeProject = useSelector(selectActiveProject);
+  const isLoggedIn = useSelector(selectIsLoggedIn);
+  const activeGitRepository = useSelector(selectActiveGitRepository);
 
-  if (!activeWorkspace || !activeApiSpec || !activity) {
+  const vcs = useVCS({
+    workspaceId: activeWorkspace?._id,
+  });
+
+  const gitVCS = useGitVCS({
+    workspaceId: activeWorkspace?._id,
+    projectId: activeProject?._id,
+    gitRepository: activeGitRepository,
+  });
+  const isTeamSync = isLoggedIn && activeWorkspace && isCollection(activeWorkspace) && isRemoteProject(activeProject) && vcs;
+  const isGitSync = activeWorkspace && gitVCS && isDesign(activeWorkspace);
+  if (!activeWorkspace || !activeApiSpec || !activeActivity) {
     return null;
   }
 
   const crumbs = [
-    { id: 'project', node: activeProjectName, onClick: homeCallback },
+    { id: 'project', node: activeProjectName, onClick: () => handleActivityChange({ workspaceId: activeWorkspace?._id, nextActivity: ACTIVITY_HOME }) },
     { id: 'workspace', node: <WorkspaceDropdown key="workspace-dd" /> },
   ];
 
@@ -41,11 +117,25 @@ export const WorkspacePageHeader: FunctionComponent<Props> = ({
       gridCenter={
         <ActivityToggle
           workspace={activeWorkspace}
-          activity={activity}
+          activity={activeActivity}
           handleActivityChange={handleActivityChange}
         />
       }
-      gridRight={gridRight}
+      gridRight={isTeamSync ? <SyncDropdown
+        workspace={activeWorkspace}
+        project={activeProject}
+        vcs={vcs}
+      /> : isGitSync ? <GitSyncDropdown
+        className="margin-left"
+        workspace={activeWorkspace}
+        gitRepository={activeGitRepository}
+        vcs={gitVCS}
+        renderDropdownButton={children => (
+          <DropdownButton className="btn--clicky-small btn-sync">
+            {children}
+          </DropdownButton>
+        )}
+      /> : null}
     />
   );
 };
diff --git a/packages/insomnia/src/ui/components/wrapper-debug.tsx b/packages/insomnia/src/ui/components/wrapper-debug.tsx
index 4ca9a4a385..3a8b004810 100644
--- a/packages/insomnia/src/ui/components/wrapper-debug.tsx
+++ b/packages/insomnia/src/ui/components/wrapper-debug.tsx
@@ -1,4 +1,4 @@
-import React, { FC, Fragment, ReactNode, useEffect } from 'react';
+import React, { FC, Fragment, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
 import { SegmentEvent, trackSegmentEvent } from '../../common/analytics';
@@ -6,25 +6,19 @@ import * as models from '../../models';
 import { isGrpcRequest } from '../../models/grpc-request';
 import { getByParentId as getGrpcRequestMetaByParentId } from '../../models/grpc-request-meta';
 import * as requestOperations from '../../models/helpers/request-operations';
-import { isRemoteProject } from '../../models/project';
 import { getByParentId as getRequestMetaByParentId } from '../../models/request-meta';
 import { isWebSocketRequest } from '../../models/websocket-request';
-import { isCollection, isDesign } from '../../models/workspace';
-import { VCS } from '../../sync/vcs/vcs';
 import { updateRequestMetaByParentId } from '../hooks/create-request';
 import { createRequestGroup } from '../hooks/create-request-group';
 import {
   selectActiveEnvironment,
-  selectActiveProject,
   selectActiveRequest,
   selectActiveWorkspace,
   selectActiveWorkspaceMeta,
-  selectIsLoggedIn,
   selectSettings,
 } from '../redux/selectors';
 import { selectSidebarFilter } from '../redux/sidebar-selectors';
 import { EnvironmentsDropdown } from './dropdowns/environments-dropdown';
-import { SyncDropdown } from './dropdowns/sync-dropdown';
 import { ErrorBoundary } from './error-boundary';
 import { useDocBodyKeyboardShortcuts } from './keydown-binder';
 import { showModal } from './modals';
@@ -46,25 +40,8 @@ import { SidebarFilter } from './sidebar/sidebar-filter';
 import { WebSocketRequestPane } from './websockets/websocket-request-pane';
 import { WebSocketResponsePane } from './websockets/websocket-response-pane';
 import { WorkspacePageHeader } from './workspace-page-header';
-import type { HandleActivityChange } from './wrapper';
-
-interface Props {
-  gitSyncDropdown: ReactNode;
-  handleActivityChange: HandleActivityChange;
-  handleSetActiveEnvironment: (id: string | null) => void;
-  handleImport: Function;
-  vcs: VCS | null;
-}
-export const WrapperDebug: FC<Props> = ({
-  gitSyncDropdown,
-  handleActivityChange,
-  handleSetActiveEnvironment,
-  handleImport,
-  vcs,
-}) => {
-  const activeProject = useSelector(selectActiveProject);
-  const isLoggedIn = useSelector(selectIsLoggedIn);
 
+export const WrapperDebug: FC = () => {
   const activeEnvironment = useSelector(selectActiveEnvironment);
   const activeRequest = useSelector(selectActiveRequest);
   const activeWorkspace = useSelector(selectActiveWorkspace);
@@ -72,7 +49,6 @@ export const WrapperDebug: FC<Props> = ({
   const sidebarFilter = useSelector(selectSidebarFilter);
   const activeWorkspaceMeta = useSelector(selectActiveWorkspaceMeta);
 
-  const isTeamSync = isLoggedIn && activeWorkspace && isCollection(activeWorkspace) && isRemoteProject(activeProject) && vcs;
   useDocBodyKeyboardShortcuts({
     request_togglePin:
       async () => {
@@ -177,53 +153,16 @@ export const WrapperDebug: FC<Props> = ({
     };
   }, [activeEnvironment?._id]);
 
-  async function handleSetResponseFilter(responseFilter: string) {
-    if (!activeRequest) {
-      return;
-    }
-    const requestId = activeRequest._id;
-    await updateRequestMetaByParentId(requestId, { responseFilter });
-
-    const meta = await models.requestMeta.getByParentId(requestId);
-    if (!meta) {
-      return;
-    }
-    const responseFilterHistory = meta.responseFilterHistory.slice(0, 10);
-
-    // Already in history?
-    if (responseFilterHistory.includes(responseFilter)) {
-      return;
-    }
-
-    // Blank?
-    if (!responseFilter) {
-      return;
-    }
-
-    responseFilterHistory.unshift(responseFilter);
-    await updateRequestMetaByParentId(requestId, {
-      responseFilterHistory,
-    });
-  }
-
   return (
     <PageLayout
       renderPageHeader={activeWorkspace ?
-        <WorkspacePageHeader
-          handleActivityChange={handleActivityChange}
-          gridRight={isTeamSync ? <SyncDropdown
-            workspace={activeWorkspace}
-            project={activeProject}
-            vcs={vcs}
-          /> : isDesign(activeWorkspace) ? gitSyncDropdown : null}
-        />
+        <WorkspacePageHeader />
         : null}
       renderPageSidebar={activeWorkspace ? <Fragment>
         <div className="sidebar__menu">
           <EnvironmentsDropdown
             activeEnvironment={activeEnvironment}
             environmentHighlightColorStyle={settings.environmentHighlightColorStyle}
-            handleSetActiveEnvironment={handleSetActiveEnvironment}
             workspace={activeWorkspace}
           />
           <button className="btn btn--super-compact" onClick={showCookiesModal}>
@@ -263,7 +202,6 @@ export const WrapperDebug: FC<Props> = ({
               ) : (
                 <RequestPane
                   environmentId={activeEnvironment ? activeEnvironment._id : ''}
-                  handleImport={handleImport}
                   request={activeRequest}
                   settings={settings}
                   workspace={activeWorkspace}
@@ -278,19 +216,12 @@ export const WrapperDebug: FC<Props> = ({
         <ErrorBoundary showAlert>
           {activeRequest && (
             isGrpcRequest(activeRequest) ? (
-              <GrpcResponsePane
-                activeRequest={activeRequest}
-              />
+              <GrpcResponsePane activeRequest={activeRequest} />
             ) : (
               isWebSocketRequest(activeRequest) ? (
-                <WebSocketResponsePane
-                  requestId={activeRequest._id}
-                />
+                <WebSocketResponsePane requestId={activeRequest._id} />
               ) : (
-                <ResponsePane
-                  handleSetFilter={handleSetResponseFilter}
-                  request={activeRequest}
-                />
+                <ResponsePane request={activeRequest} />
               )
             )
           )}
diff --git a/packages/insomnia/src/ui/components/wrapper-design.tsx b/packages/insomnia/src/ui/components/wrapper-design.tsx
index bdb70f282f..8014aebe61 100644
--- a/packages/insomnia/src/ui/components/wrapper-design.tsx
+++ b/packages/insomnia/src/ui/components/wrapper-design.tsx
@@ -1,6 +1,6 @@
 import { IRuleResult } from '@stoplight/spectral-core';
 import { Notice, NoticeTable } from 'insomnia-components';
-import React, { createRef, FC, ReactNode, RefObject, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { createRef, FC, RefObject, useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 import SwaggerUI from 'swagger-ui-react';
@@ -19,7 +19,6 @@ import { ErrorBoundary } from './error-boundary';
 import { PageLayout } from './page-layout';
 import { SpecEditorSidebar } from './spec-editor/spec-editor-sidebar';
 import { WorkspacePageHeader } from './workspace-page-header';
-import type { HandleActivityChange } from './wrapper';
 
 const EmptySpaceHelper = styled.div({
   ...superFaint,
@@ -30,6 +29,7 @@ const EmptySpaceHelper = styled.div({
   textAlign: 'center',
 });
 
+// TODO(jackkav): find the right place to do this
 const spectral = initializeSpectral();
 
 interface LintMessage extends Notice {
@@ -48,7 +48,7 @@ const RenderEditor: FC<{ editor: RefObject<UnconnectedCodeEditor> }> = ({ editor
       return;
     }
 
-    await database.update({ ...activeApiSpec,  modified: Date.now(), contents: value }, true);
+    await database.update({ ...activeApiSpec, modified: Date.now(), contents: value }, true);
   }, [activeApiSpec]);
 
   const uniquenessKey = `::${activeApiSpec?._id}::${gitVersion}::${syncVersion}`;
@@ -68,7 +68,7 @@ const RenderEditor: FC<{ editor: RefObject<UnconnectedCodeEditor> }> = ({ editor
   useEffect(() => {
     let isMounted = true;
     const update = async () => {
-    // Lint only if spec has content
+      // Lint only if spec has content
       if (contents && contents.length !== 0) {
         const results: LintMessage[] = (await spectral.run(contents))
           .filter(isLintError)
@@ -233,24 +233,13 @@ const RenderPageSidebar: FC<{ editor: RefObject<UnconnectedCodeEditor> }> = ({ e
   );
 };
 
-interface Props {
-  gitSyncDropdown: ReactNode;
-  handleActivityChange: HandleActivityChange;
-}
-
-export const WrapperDesign: FC<Props> = ({
-  gitSyncDropdown,
-  handleActivityChange,
-}) => {
+export const WrapperDesign: FC = () => {
   const editor = createRef<UnconnectedCodeEditor>();
 
   return (
     <PageLayout
       renderPageHeader={(
-        <WorkspacePageHeader
-          handleActivityChange={handleActivityChange}
-          gridRight={gitSyncDropdown}
-        />
+        <WorkspacePageHeader />
       )}
       renderPaneOne={<RenderEditor editor={editor} />}
       renderPaneTwo={<RenderPreview />}
diff --git a/packages/insomnia/src/ui/components/wrapper-unit-test.tsx b/packages/insomnia/src/ui/components/wrapper-unit-test.tsx
index 04f25eaaa9..71572b1654 100644
--- a/packages/insomnia/src/ui/components/wrapper-unit-test.tsx
+++ b/packages/insomnia/src/ui/components/wrapper-unit-test.tsx
@@ -10,7 +10,7 @@ import {
 } from 'insomnia-components';
 import { generate, runTests, Test } from 'insomnia-testing';
 import { isEmpty } from 'ramda';
-import React, { FC, ReactNode, useCallback, useState } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
@@ -34,7 +34,6 @@ import { EmptyStatePane } from './panes/empty-state-pane';
 import type { Child } from './sidebar/sidebar-children';
 import { UnitTestEditable } from './unit-test-editable';
 import { WorkspacePageHeader } from './workspace-page-header';
-import type { HandleActivityChange } from './wrapper';
 
 const HeaderButton = styled(Button)({
   '&&': {
@@ -42,15 +41,7 @@ const HeaderButton = styled(Button)({
   },
 });
 
-interface Props {
-  gitSyncDropdown: ReactNode;
-  handleActivityChange: HandleActivityChange;
-}
-
-const WrapperUnitTest: FC<Props> = ({
-  gitSyncDropdown,
-  handleActivityChange,
-}) => {
+const WrapperUnitTest: FC = () => {
   const [testsRunning, setTestsRunning] = useState<UnitTest[] | null>(null);
   const [resultsError, setResultsError] = useState<string | null>(null);
   const lintOptions = {
@@ -421,10 +412,7 @@ const WrapperUnitTest: FC<Props> = ({
         <TestRunStatus testsRunning={testsRunning} resultsError={resultsError} />
       }
       renderPageHeader={
-        <WorkspacePageHeader
-          handleActivityChange={handleActivityChange}
-          gridRight={gitSyncDropdown}
-        />
+        <WorkspacePageHeader />
       }
     />
   );
@@ -432,9 +420,9 @@ const WrapperUnitTest: FC<Props> = ({
 
 export default WrapperUnitTest;
 
-interface TestRunStatusProps{
-  testsRunning:UnitTest[] | null;
-  resultsError:string | null;
+interface TestRunStatusProps {
+  testsRunning: UnitTest[] | null;
+  resultsError: string | null;
 }
 const TestRunStatus: FC<TestRunStatusProps> = ({ testsRunning, resultsError }) => {
   const activeUnitTestResult = useSelector(selectActiveUnitTestResult);
diff --git a/packages/insomnia/src/ui/components/wrapper.tsx b/packages/insomnia/src/ui/components/wrapper.tsx
deleted file mode 100644
index e46ad8accb..0000000000
--- a/packages/insomnia/src/ui/components/wrapper.tsx
+++ /dev/null
@@ -1,465 +0,0 @@
-import { autoBindMethodsForReact } from 'class-autobind-decorator';
-import * as importers from 'insomnia-importers';
-import React, { FC, Fragment, lazy, PureComponent, Suspense } from 'react';
-import { connect, useSelector } from 'react-redux';
-import { Route, Routes, useNavigate } from 'react-router-dom';
-import { AnyAction, bindActionCreators, Dispatch } from 'redux';
-
-import type { GlobalActivity } from '../../common/constants';
-import {
-  ACTIVITY_DEBUG,
-  ACTIVITY_HOME,
-  ACTIVITY_SPEC,
-  ACTIVITY_UNIT_TEST,
-  AUTOBIND_CFG,
-} from '../../common/constants';
-import { database } from '../../common/database';
-import { importRaw } from '../../common/import';
-import { initializeSpectral, isLintError } from '../../common/spectral';
-import * as models from '../../models/index';
-import {
-  isRequest,
-} from '../../models/request';
-import { GitVCS } from '../../sync/git/git-vcs';
-import { VCS } from '../../sync/vcs/vcs';
-import { CookieModifyModal } from '../components/modals/cookie-modify-modal';
-import { GrpcDispatchModalWrapper } from '../context/grpc';
-import { RootState } from '../redux/modules';
-import { setActiveActivity } from '../redux/modules/global';
-import { selectActiveActivity, selectActiveApiSpec, selectActiveCookieJar, selectActiveEnvironment, selectActiveGitRepository, selectActiveRequest, selectActiveResponse, selectActiveWorkspace, selectActiveWorkspaceMeta, selectSettings } from '../redux/selectors';
-import { DropdownButton } from './base/dropdown/dropdown-button';
-import GitSyncDropdown from './dropdowns/git-sync-dropdown';
-import { ErrorBoundary } from './error-boundary';
-import { AddKeyCombinationModal } from './modals/add-key-combination-modal';
-import { AlertModal } from './modals/alert-modal';
-import { AnalyticsModal } from './modals/analytics-modal';
-import { AskModal } from './modals/ask-modal';
-import { CodePromptModal } from './modals/code-prompt-modal';
-import { CookiesModalFC } from './modals/cookies-modal';
-import { EnvironmentEditModal } from './modals/environment-edit-modal';
-import { ErrorModal } from './modals/error-modal';
-import { ExportRequestsModal } from './modals/export-requests-modal';
-import { FilterHelpModal } from './modals/filter-help-modal';
-import { GenerateCodeModal } from './modals/generate-code-modal';
-import { GenerateConfigModal } from './modals/generate-config-modal';
-import { GitBranchesModal } from './modals/git-branches-modal';
-import { GitLogModal } from './modals/git-log-modal';
-import { GitRepositorySettingsModal } from './modals/git-repository-settings-modal';
-import { GitStagingModal } from './modals/git-staging-modal';
-import { registerModal, showModal } from './modals/index';
-import { LoginModal } from './modals/login-modal';
-import { NunjucksModal } from './modals/nunjucks-modal';
-import ProjectSettingsModal from './modals/project-settings-modal';
-import { PromptModal } from './modals/prompt-modal';
-import ProtoFilesModal from './modals/proto-files-modal';
-import { RequestGroupSettingsModal } from './modals/request-group-settings-modal';
-import { RequestRenderErrorModal } from './modals/request-render-error-modal';
-import { RequestSettingsModal } from './modals/request-settings-modal';
-import { RequestSwitcherModal } from './modals/request-switcher-modal';
-import { ResponseDebugModal } from './modals/response-debug-modal';
-import { SelectModal } from './modals/select-modal';
-import { SettingsModal } from './modals/settings-modal';
-import { SyncBranchesModal } from './modals/sync-branches-modal';
-import { SyncDeleteModal } from './modals/sync-delete-modal';
-import { SyncHistoryModal } from './modals/sync-history-modal';
-import { SyncMergeModal } from './modals/sync-merge-modal';
-import { SyncStagingModal } from './modals/sync-staging-modal';
-import { WorkspaceDuplicateModal } from './modals/workspace-duplicate-modal';
-import { WorkspaceEnvironmentsEditModal } from './modals/workspace-environments-edit-modal';
-import { WorkspaceSettingsModal } from './modals/workspace-settings-modal';
-import { WrapperModal } from './modals/wrapper-modal';
-
-const lazyWithPreload = <T extends FC<any>>(
-  importFn: () => Promise<{ default: T }>
-) => {
-  const LazyComponent = lazy(importFn);
-  const preload = () => importFn();
-
-  return [LazyComponent, preload] as const;
-};
-
-const [WrapperHome, preloadWrapperHome] = lazyWithPreload(
-  () => import('./wrapper-home')
-);
-const [WrapperDebug, preloadWrapperDebug] = lazyWithPreload(
-  () => import('./wrapper-debug')
-);
-const [WrapperDesign, preloadWrapperDesign] = lazyWithPreload(
-  () => import('./wrapper-design')
-);
-const [WrapperUnitTest, preloadWrapperUnitTest] = lazyWithPreload(
-  () => import('./wrapper-unit-test')
-);
-
-preloadWrapperHome();
-preloadWrapperDebug();
-preloadWrapperDesign();
-preloadWrapperUnitTest();
-
-const LoadingIndicator = () => (<div
-  id="app-loading-indicator"
-  style={{
-    position: 'fixed',
-    top: '0',
-    left: '0',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: '100%',
-    width: '100%',
-  }}
->
-  <img src="./ui/images/insomnia-logo.svg" alt="Insomnia" />
-</div>);
-
-const ActivityRouter = () => {
-  const selectedActivity = useSelector(selectActiveActivity);
-  const activeWorkspace = useSelector(selectActiveWorkspace);
-  // If there is no active workspace, we want to navigate to home no matter what the previous activity was
-  const activity = activeWorkspace ? selectedActivity : ACTIVITY_HOME;
-  const navigate = useNavigate();
-
-  React.useEffect(() => {
-    if (activity) {
-      navigate(activity);
-    }
-  }, [activity, navigate]);
-
-  return null;
-};
-
-const spectral = initializeSpectral();
-
-export type Props = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & {
-  vcs: VCS | null;
-  gitVCS: GitVCS | null;
-};
-
-export type HandleActivityChange = (options: {
-  workspaceId?: string;
-  nextActivity: GlobalActivity;
-}) => Promise<void>;
-
-interface State {
-  activeGitBranch: string;
-}
-
-@autoBindMethodsForReact(AUTOBIND_CFG)
-export class WrapperClass extends PureComponent<Props, State> {
-  state: State = {
-    activeGitBranch: 'no-vcs',
-  };
-
-  async _handleImport(text: string) {
-    const { activeRequest } = this.props;
-
-    // Allow user to paste any import file into the url. If it results in
-    // only one item, it will overwrite the current request.
-    try {
-      const { data } = await importers.convert(text);
-      const { resources } = data;
-      const r = resources[0];
-
-      if (r && r._type === 'request' && activeRequest && isRequest(activeRequest)) {
-        // Only pull fields that we want to update
-        return database.update({
-          ...activeRequest,
-          modified: Date.now(),
-          url: r.url,
-          method: r.method,
-          headers: r.headers,
-          body: r.body,
-          authentication: r.authentication,
-          parameters: r.parameters,
-        },
-        // Pass true to indicate that this is an import
-        true
-        );
-      }
-    } catch (error) {
-      // Import failed, that's alright
-    }
-
-    return null;
-  }
-
-  async _handleWorkspaceActivityChange({ workspaceId, nextActivity }: Parameters<HandleActivityChange>[0]): ReturnType<HandleActivityChange> {
-    const { activeActivity, activeApiSpec, handleSetActiveActivity } = this.props;
-
-    // Remember last activity on workspace for later, but only if it isn't HOME
-    if (workspaceId && nextActivity !== ACTIVITY_HOME) {
-      await models.workspaceMeta.updateByParentId(workspaceId, {
-        activeActivity: nextActivity,
-      });
-    }
-
-    const editingASpec = activeActivity === ACTIVITY_SPEC;
-
-    if (!editingASpec) {
-      handleSetActiveActivity(nextActivity);
-      return;
-    }
-
-    if (!activeApiSpec || !workspaceId) {
-      return;
-    }
-
-    const goingToDebugOrTest = nextActivity === ACTIVITY_DEBUG || nextActivity === ACTIVITY_UNIT_TEST;
-
-    // If editing a spec and not going to debug or test, don't regenerate anything
-    if (editingASpec && !goingToDebugOrTest) {
-      handleSetActiveActivity(nextActivity);
-      return;
-    }
-
-    // Handle switching away from the spec design activity. For this, we want to generate
-    // requests that can be accessed from debug or test.
-    // If there are errors in the spec, show the user a warning first
-    const results = (await spectral.run(activeApiSpec.contents)).filter(isLintError);
-    if (activeApiSpec.contents && results && results.length) {
-      showModal(AlertModal, {
-        title: 'Error Generating Configuration',
-        message: 'Some requests may not be available due to errors found in the specification. We recommend fixing errors before proceeding.',
-        okLabel: 'Proceed',
-        addCancel: true,
-        onConfirm: () => {
-          handleSetActiveActivity(nextActivity);
-        },
-      });
-      return;
-    }
-
-    // Delaying generation so design to debug mode is smooth
-    handleSetActiveActivity(nextActivity);
-    setTimeout(() => {
-      importRaw(activeApiSpec.contents, {
-        getWorkspaceId: () => Promise.resolve(workspaceId),
-        enableDiffBasedPatching: true,
-        enableDiffDeep: true,
-        bypassDiffProps: {
-          url: true,
-        },
-      });
-    }, 1000);
-  }
-
-  _handleGitBranchChanged(branch: string) {
-    this.setState({
-      activeGitBranch: branch || 'no-vcs',
-    });
-  }
-
-  async _handleSetActiveEnvironment(activeEnvironmentId: string | null) {
-    if (this.props.activeWorkspaceMeta) {
-      await models.workspaceMeta.update(this.props.activeWorkspaceMeta, { activeEnvironmentId });
-    }
-  }
-
-  render() {
-    const {
-      activeCookieJar,
-      activeEnvironment,
-      activeGitRepository,
-      activeWorkspace,
-      activeApiSpec,
-      gitVCS,
-      vcs,
-    } = this.props;
-
-    // Setup git sync dropdown for use in Design/Debug pages
-    let gitSyncDropdown: JSX.Element | null = null;
-
-    if (activeWorkspace && gitVCS) {
-      gitSyncDropdown = (
-        <GitSyncDropdown
-          className="margin-left"
-          workspace={activeWorkspace}
-          gitRepository={activeGitRepository}
-          vcs={gitVCS}
-          handleGitBranchChanged={this._handleGitBranchChanged}
-          renderDropdownButton={children => (
-            <DropdownButton className="btn--clicky-small btn-sync">
-              {children}
-            </DropdownButton>
-          )}
-        />
-      );
-    }
-
-    return (
-      <Fragment>
-        <div key="modals" className="modals">
-          <ErrorBoundary showAlert>
-            <AnalyticsModal />
-            <AlertModal ref={registerModal} />
-            <ErrorModal ref={registerModal} />
-            <PromptModal ref={registerModal} />
-            <WrapperModal ref={registerModal} />
-            <LoginModal ref={registerModal} />
-            <AskModal ref={registerModal} />
-            <SelectModal ref={registerModal} />
-            <FilterHelpModal ref={registerModal} />
-            <RequestRenderErrorModal ref={registerModal} />
-            <GenerateConfigModal ref={registerModal} />
-            <ProjectSettingsModal ref={registerModal} />
-            <WorkspaceDuplicateModal ref={registerModal} vcs={vcs || undefined} />
-            <CodePromptModal ref={registerModal} />
-            <RequestSettingsModal ref={instance => registerModal(instance, 'RequestSettingsModal')} />
-            <RequestGroupSettingsModal ref={registerModal} />
-
-            {activeWorkspace ? <>
-              {/* TODO: Figure out why cookieJar is sometimes null */}
-              {activeCookieJar ? <>
-                <CookiesModalFC
-                  ref={registerModal}
-                />
-                <CookieModifyModal ref={registerModal} />
-              </> : null}
-
-              <NunjucksModal
-                ref={registerModal}
-                workspace={activeWorkspace}
-              />
-
-              {activeApiSpec ? <WorkspaceSettingsModal
-                ref={registerModal}
-                workspace={activeWorkspace}
-                apiSpec={activeApiSpec}
-              /> : null}
-            </> : null}
-
-            <GenerateCodeModal
-              ref={registerModal}
-              environmentId={activeEnvironment ? activeEnvironment._id : 'n/a'}
-            />
-
-            <SettingsModal ref={instance => registerModal(instance, 'SettingsModal')} />
-            <ResponseDebugModal ref={instance => registerModal(instance, 'ResponseDebugModal')} />
-
-            <RequestSwitcherModal ref={instance => registerModal(instance, 'RequestSwitcherModal')} />
-
-            <EnvironmentEditModal
-              ref={registerModal}
-              onChange={models.requestGroup.update}
-            />
-
-            <GitRepositorySettingsModal ref={registerModal} />
-
-            {activeWorkspace && gitVCS ? (
-              <Fragment>
-                <GitStagingModal ref={registerModal} workspace={activeWorkspace} vcs={gitVCS} gitRepository={activeGitRepository} />
-                <GitLogModal ref={registerModal} vcs={gitVCS} />
-                {activeGitRepository !== null && (
-                  <GitBranchesModal
-                    ref={registerModal}
-                    vcs={gitVCS}
-                    gitRepository={activeGitRepository}
-                    handleGitBranchChanged={this._handleGitBranchChanged}
-                  />
-                )}
-              </Fragment>
-            ) : null}
-
-            {activeWorkspace && vcs ? (
-              <Fragment>
-                <SyncStagingModal ref={registerModal} vcs={vcs} />
-                <SyncMergeModal ref={registerModal} vcs={vcs} />
-                <SyncBranchesModal ref={registerModal} vcs={vcs} />
-                <SyncDeleteModal ref={registerModal} vcs={vcs} />
-                <SyncHistoryModal ref={registerModal} vcs={vcs} />
-              </Fragment>
-            ) : null}
-
-            <WorkspaceEnvironmentsEditModal
-              ref={registerModal}
-              handleSetActiveEnvironment={this._handleSetActiveEnvironment}
-              activeEnvironmentId={activeEnvironment ? activeEnvironment._id : null}
-            />
-
-            <AddKeyCombinationModal ref={instance => registerModal(instance, 'AddKeyCombinationModal')} />
-            <ExportRequestsModal ref={registerModal} />
-
-            <GrpcDispatchModalWrapper>
-              {dispatch => (
-                <ProtoFilesModal
-                  ref={registerModal}
-                  grpcDispatch={dispatch}
-                />
-              )}
-            </GrpcDispatchModalWrapper>
-          </ErrorBoundary>
-        </div>
-
-        <Routes>
-          <Route
-            path="*"
-            element={
-              <Suspense fallback={<LoadingIndicator />}>
-                <WrapperHome
-                  vcs={vcs}
-                />
-              </Suspense>
-            }
-          />
-          <Route
-            path={ACTIVITY_UNIT_TEST}
-            element={
-              <Suspense fallback={<LoadingIndicator />}>
-                <WrapperUnitTest
-                  gitSyncDropdown={gitSyncDropdown}
-                  handleActivityChange={this._handleWorkspaceActivityChange}
-                />
-              </Suspense>
-            }
-          />
-          <Route
-            path={ACTIVITY_SPEC}
-            element={
-              <Suspense fallback={<LoadingIndicator />}>
-                <WrapperDesign
-                  gitSyncDropdown={gitSyncDropdown}
-                  handleActivityChange={this._handleWorkspaceActivityChange}
-                />
-              </Suspense>
-            }
-          />
-          <Route
-            path={ACTIVITY_DEBUG}
-            element={
-              <Suspense fallback={<LoadingIndicator />}>
-                <WrapperDebug
-                  gitSyncDropdown={gitSyncDropdown}
-                  handleActivityChange={this._handleWorkspaceActivityChange}
-                  handleSetActiveEnvironment={this._handleSetActiveEnvironment}
-                  handleImport={this._handleImport}
-                  vcs={vcs}
-                />
-              </Suspense>
-            }
-          />
-        </Routes>
-        <ActivityRouter />
-      </Fragment>
-    );
-  }
-}
-const mapStateToProps = (state: RootState) => ({
-  activeActivity: selectActiveActivity(state),
-  activeRequest: selectActiveRequest(state),
-  activeCookieJar: selectActiveCookieJar(state),
-  activeEnvironment: selectActiveEnvironment(state),
-  activeGitRepository: selectActiveGitRepository(state),
-  activeWorkspace: selectActiveWorkspace(state),
-  activeWorkspaceMeta: selectActiveWorkspaceMeta(state),
-  activeApiSpec: selectActiveApiSpec(state),
-  activeResponse: selectActiveResponse(state),
-  settings: selectSettings(state),
-});
-const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) => {
-  const bound = bindActionCreators({ setActiveActivity }, dispatch);
-  return {
-    handleSetActiveActivity: bound.setActiveActivity,
-  };
-};
-
-export const Wrapper = connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(WrapperClass);
diff --git a/packages/insomnia/src/ui/containers/app-hooks.tsx b/packages/insomnia/src/ui/containers/app-hooks.tsx
index 5c34996b52..cafac12579 100644
--- a/packages/insomnia/src/ui/containers/app-hooks.tsx
+++ b/packages/insomnia/src/ui/containers/app-hooks.tsx
@@ -1,12 +1,24 @@
-import { FC } from 'react';
+import { ipcRenderer } from 'electron/renderer';
+import { FC, useEffect } from 'react';
 
+import { useAppCommands } from '../hooks/use-app-commands';
+import { useDragAndDropImportFile } from '../hooks/use-drag-and-drop-import-file';
 import { useGlobalKeyboardShortcuts } from '../hooks/use-global-keyboard-shortcuts';
 import { useSettingsSideEffects } from '../hooks/use-settings-side-effects';
 import { useSyncMigration } from '../hooks/use-sync-migration';
+import { useThemeChange } from '../hooks/use-theme-change';
 
 export const AppHooks: FC = () => {
   useSyncMigration();
   useSettingsSideEffects();
   useGlobalKeyboardShortcuts();
+  useDragAndDropImportFile();
+  useThemeChange();
+  useAppCommands();
+  // Give it a bit before letting the backend know it's ready
+  useEffect(() => {
+    setTimeout(() => ipcRenderer.send('window-ready'), 500);
+  }, []);
+
   return null;
 };
diff --git a/packages/insomnia/src/ui/containers/app.tsx b/packages/insomnia/src/ui/containers/app.tsx
index 3fd5925787..b038963c07 100644
--- a/packages/insomnia/src/ui/containers/app.tsx
+++ b/packages/insomnia/src/ui/containers/app.tsx
@@ -1,40 +1,66 @@
-import { ipcRenderer } from 'electron';
-import path from 'path';
-import React, { useEffect, useRef, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { parse as urlParse } from 'url';
+import React, { FC, Fragment, lazy, Suspense, useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { Route, Routes, useNavigate } from 'react-router-dom';
 
+import {
+  ACTIVITY_DEBUG,
+  ACTIVITY_HOME,
+  ACTIVITY_SPEC,
+  ACTIVITY_UNIT_TEST,
+} from '../../common/constants';
 import { database as db } from '../../common/database';
-import { getDataDirectory } from '../../common/electron-helpers';
-import {
-  generateId,
-} from '../../common/misc';
 import * as models from '../../models';
-import { GitRepository } from '../../models/git-repository';
-import * as themes from '../../plugins/misc';
-import { fsClient } from '../../sync/git/fs-client';
-import { GIT_CLONE_DIR, GIT_INSOMNIA_DIR, GIT_INTERNAL_DIR, GitVCS } from '../../sync/git/git-vcs';
-import { NeDBClient } from '../../sync/git/ne-db-client';
-import { routableFSClient } from '../../sync/git/routable-fs-client';
-import FileSystemDriver from '../../sync/store/drivers/file-system-driver';
-import { type MergeConflict } from '../../sync/types';
-import { VCS } from '../../sync/vcs/vcs';
 import { ErrorBoundary } from '../components/error-boundary';
+import { AddKeyCombinationModal } from '../components/modals/add-key-combination-modal';
 import { AlertModal } from '../components/modals/alert-modal';
-import { showModal } from '../components/modals/index';
+import { AnalyticsModal } from '../components/modals/analytics-modal';
+import { AskModal } from '../components/modals/ask-modal';
+import { CodePromptModal } from '../components/modals/code-prompt-modal';
+import { CookieModifyModal } from '../components/modals/cookie-modify-modal';
+import { CookiesModalFC } from '../components/modals/cookies-modal';
+import { EnvironmentEditModal } from '../components/modals/environment-edit-modal';
+import { ErrorModal } from '../components/modals/error-modal';
+import { ExportRequestsModal } from '../components/modals/export-requests-modal';
+import { FilterHelpModal } from '../components/modals/filter-help-modal';
+import { GenerateCodeModal } from '../components/modals/generate-code-modal';
+import { GenerateConfigModal } from '../components/modals/generate-config-modal';
+import { GitBranchesModal } from '../components/modals/git-branches-modal';
+import { GitLogModal } from '../components/modals/git-log-modal';
+import { GitRepositorySettingsModal } from '../components/modals/git-repository-settings-modal';
+import { GitStagingModal } from '../components/modals/git-staging-modal';
+import { registerModal } from '../components/modals/index';
+import { LoginModal } from '../components/modals/login-modal';
+import { NunjucksModal } from '../components/modals/nunjucks-modal';
+import ProjectSettingsModal from '../components/modals/project-settings-modal';
+import { PromptModal } from '../components/modals/prompt-modal';
+import ProtoFilesModal from '../components/modals/proto-files-modal';
+import { RequestGroupSettingsModal } from '../components/modals/request-group-settings-modal';
+import { RequestRenderErrorModal } from '../components/modals/request-render-error-modal';
+import { RequestSettingsModal } from '../components/modals/request-settings-modal';
+import { RequestSwitcherModal } from '../components/modals/request-switcher-modal';
+import { ResponseDebugModal } from '../components/modals/response-debug-modal';
+import { SelectModal } from '../components/modals/select-modal';
+import { SettingsModal } from '../components/modals/settings-modal';
+import { SyncBranchesModal } from '../components/modals/sync-branches-modal';
+import { SyncDeleteModal } from '../components/modals/sync-delete-modal';
+import { SyncHistoryModal } from '../components/modals/sync-history-modal';
 import { SyncMergeModal } from '../components/modals/sync-merge-modal';
+import { SyncStagingModal } from '../components/modals/sync-staging-modal';
+import { WorkspaceDuplicateModal } from '../components/modals/workspace-duplicate-modal';
+import { WorkspaceEnvironmentsEditModal } from '../components/modals/workspace-environments-edit-modal';
+import { WorkspaceSettingsModal } from '../components/modals/workspace-settings-modal';
+import { WrapperModal } from '../components/modals/wrapper-modal';
 import { Toast } from '../components/toast';
-import { type WrapperClass, Wrapper } from '../components/wrapper';
 import withDragDropContext from '../context/app/drag-drop-context';
-import { GrpcProvider } from '../context/grpc';
+import { GrpcDispatchModalWrapper, GrpcProvider } from '../context/grpc';
 import { NunjucksEnabledProvider } from '../context/nunjucks/nunjucks-enabled-context';
+import { useGitVCS } from '../hooks/use-git-vcs';
+import { useVCS } from '../hooks/use-vcs';
 import {
-  newCommand,
-} from '../redux/modules/global';
-import { importUri } from '../redux/modules/import';
-import {
+  selectActiveActivity,
   selectActiveApiSpec,
   selectActiveCookieJar,
+  selectActiveEnvironment,
   selectActiveGitRepository,
   selectActiveProject,
   selectActiveWorkspace,
@@ -42,166 +68,88 @@ import {
   selectEnvironments,
   selectIsFinishedBooting,
   selectIsLoggedIn,
-  selectSettings,
 } from '../redux/selectors';
 import { AppHooks } from './app-hooks';
 
+const lazyWithPreload = <T extends FC<any>>(
+  importFn: () => Promise<{ default: T }>
+) => {
+  const LazyComponent = lazy(importFn);
+  const preload = () => importFn();
+
+  return [LazyComponent, preload] as const;
+};
+
+const [WrapperHome, preloadWrapperHome] = lazyWithPreload(
+  () => import('../components/wrapper-home')
+);
+const [WrapperDebug, preloadWrapperDebug] = lazyWithPreload(
+  () => import('../components/wrapper-debug')
+);
+const [WrapperDesign, preloadWrapperDesign] = lazyWithPreload(
+  () => import('../components/wrapper-design')
+);
+const [WrapperUnitTest, preloadWrapperUnitTest] = lazyWithPreload(
+  () => import('../components/wrapper-unit-test')
+);
+
+preloadWrapperHome();
+preloadWrapperDebug();
+preloadWrapperDesign();
+preloadWrapperUnitTest();
+
+const LoadingIndicator = () => (<div
+  id="app-loading-indicator"
+  style={{
+    position: 'fixed',
+    top: '0',
+    left: '0',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    width: '100%',
+  }}
+>
+  <img src="./ui/images/insomnia-logo.svg" alt="Insomnia" />
+</div>);
+
+const ActivityRouter = () => {
+  const selectedActivity = useSelector(selectActiveActivity);
+  const activeWorkspace = useSelector(selectActiveWorkspace);
+  // If there is no active workspace, we want to navigate to home no matter what the previous activity was
+  const activity = activeWorkspace ? selectedActivity : ACTIVITY_HOME;
+  const navigate = useNavigate();
+
+  React.useEffect(() => {
+    if (activity) {
+      navigate(activity);
+    }
+  }, [activity, navigate]);
+
+  return null;
+};
+
 interface State {
   isMigratingChildren: boolean;
 }
 
-function useVCS({
-  workspaceId,
-}: {
-  workspaceId?: string;
-}) {
-  const vcsInstanceRef = useRef<VCS | null>(null);
-  const [vcs, setVCS] = useState<VCS | null>(null);
-  const updateVCSLock = useRef<boolean | string>(false);
-
-  // Update VCS when the active workspace changes
-  useEffect(() => {
-    const lock = generateId();
-    updateVCSLock.current = lock;
-
-    // Set vcs to null while we update it
-    setVCS(null);
-
-    if (!vcsInstanceRef.current) {
-      const driver = FileSystemDriver.create(getDataDirectory());
-
-      vcsInstanceRef.current = new VCS(driver, async conflicts => {
-        return new Promise(resolve => {
-          showModal(SyncMergeModal, {
-            conflicts,
-            handleDone: (conflicts: MergeConflict[]) => resolve(conflicts),
-          });
-        });
-      });
-    }
-
-    if (workspaceId) {
-      vcsInstanceRef.current.switchProject(workspaceId);
-    } else {
-      vcsInstanceRef.current.clearBackendProject();
-    }
-
-    // Prevent a potential race-condition when _updateVCS() gets called for different workspaces in rapid succession
-    if (updateVCSLock.current === lock) {
-      setVCS(vcsInstanceRef.current);
-    }
-  }, [workspaceId]);
-
-  return vcs;
-}
-
-function useGitVCS({
-  workspaceId,
-  projectId,
-  gitRepository,
-}: {
-  workspaceId?: string;
-  projectId: string;
-  gitRepository?: GitRepository | null;
-}) {
-  const gitVCSInstanceRef = useRef<GitVCS | null>(null);
-  const [gitVCS, setGitVCS] = useState<GitVCS | null>(null);
-
-  useEffect(() => {
-    let isMounted = true;
-
-    // Set the instance to null in the state while we update it
-    if (gitVCSInstanceRef.current) {
-      setGitVCS(null);
-    }
-
-    if (!gitVCSInstanceRef.current) {
-      gitVCSInstanceRef.current = new GitVCS();
-    }
-
-    async function update() {
-      if (workspaceId && gitRepository && gitVCSInstanceRef.current) {
-        // Create FS client
-        const baseDir = path.join(
-          getDataDirectory(),
-          `version-control/git/${gitRepository._id}`,
-        );
-
-        /** All app data is stored within a namespaced GIT_INSOMNIA_DIR directory at the root of the repository and is read/written from the local NeDB database */
-        const neDbClient = NeDBClient.createClient(workspaceId, projectId);
-
-        /** All git metadata in the GIT_INTERNAL_DIR directory is stored in a git/ directory on the filesystem */
-        const gitDataClient = fsClient(baseDir);
-
-        /** All data outside the directories listed below will be stored in an 'other' directory. This is so we can support files that exist outside the ones the app is specifically in charge of. */
-        const otherDatClient = fsClient(path.join(baseDir, 'other'));
-
-        /** The routable FS client directs isomorphic-git to read/write from the database or from the correct directory on the file system while performing git operations. */
-        const routableFS = routableFSClient(otherDatClient, {
-          [GIT_INSOMNIA_DIR]: neDbClient,
-          [GIT_INTERNAL_DIR]: gitDataClient,
-        });
-        // Init VCS
-        const { credentials, uri } = gitRepository;
-        if (gitRepository.needsFullClone) {
-          await models.gitRepository.update(gitRepository, {
-            needsFullClone: false,
-          });
-          await gitVCSInstanceRef.current.initFromClone({
-            url: uri,
-            gitCredentials: credentials,
-            directory: GIT_CLONE_DIR,
-            fs: routableFS,
-            gitDirectory: GIT_INTERNAL_DIR,
-          });
-        } else {
-          await gitVCSInstanceRef.current.init({
-            directory: GIT_CLONE_DIR,
-            fs: routableFS,
-            gitDirectory: GIT_INTERNAL_DIR,
-          });
-        }
-
-        // Configure basic info
-        const { author, uri: gitUri } = gitRepository;
-        await gitVCSInstanceRef.current.setAuthor(author.name, author.email);
-        await gitVCSInstanceRef.current.addRemote(gitUri);
-      } else {
-        // Create new one to un-initialize it
-        gitVCSInstanceRef.current = new GitVCS();
-      }
-
-      isMounted && setGitVCS(gitVCSInstanceRef.current);
-    }
-
-    update();
-
-    return () => {
-      isMounted = false;
-    };
-  }, [workspaceId, projectId, gitRepository]);
-
-  return gitVCS;
-}
-
 const App = () => {
   const [state, setState] = useState<State>({
     isMigratingChildren: false,
   });
 
-  const activeProject = useSelector(selectActiveProject);
   const activeCookieJar = useSelector(selectActiveCookieJar);
   const activeApiSpec = useSelector(selectActiveApiSpec);
   const activeWorkspace = useSelector(selectActiveWorkspace);
-  const activeGitRepository = useSelector(selectActiveGitRepository);
   const activeWorkspaceMeta = useSelector(selectActiveWorkspaceMeta);
   const environments = useSelector(selectEnvironments);
   const isLoggedIn = useSelector(selectIsLoggedIn);
   const isFinishedBooting = useSelector(selectIsFinishedBooting);
-  const settings = useSelector(selectSettings);
-  const dispatch = useDispatch();
-  const handleCommand = dispatch(newCommand);
-  const handleImportUri = dispatch(importUri);
+  const activeGitRepository = useSelector(selectActiveGitRepository);
+  const activeEnvironment = useSelector(selectActiveEnvironment);
+  const activeProject = useSelector(selectActiveProject);
+
   const vcs = useVCS({
     workspaceId: activeWorkspace?._id,
   });
@@ -212,26 +160,25 @@ const App = () => {
     gitRepository: activeGitRepository,
   });
 
-  const wrapperRef = useRef<WrapperClass | null>(null);
-
+  async function handleSetActiveEnvironment(activeEnvironmentId: string | null) {
+    if (activeWorkspaceMeta) {
+      await models.workspaceMeta.update(activeWorkspaceMeta, { activeEnvironmentId });
+    }
+  }
   // Ensure Children: Make sure cookies, env, and meta models are created under this workspace
   useEffect(() => {
     if (!activeWorkspace) {
       return;
     }
-
     const baseEnvironments = environments.filter(environment => environment.parentId === activeWorkspace._id);
-
-    // Nothing to do
-    if (baseEnvironments.length && activeCookieJar && activeApiSpec && activeWorkspaceMeta) {
+    const workspaceHasChildren = baseEnvironments.length && activeCookieJar && activeApiSpec && activeWorkspaceMeta;
+    if (workspaceHasChildren) {
       return;
     }
-
     // We already started migrating. Let it finish.
     if (state.isMigratingChildren) {
       return;
     }
-
     // Prevent rendering of everything until we check the workspace has cookies, env, and meta
     setState(state => ({ ...state, isMigratingChildren: true }));
     async function update() {
@@ -245,72 +192,6 @@ const App = () => {
     update();
   }, [activeApiSpec, activeCookieJar, activeWorkspace, activeWorkspaceMeta, environments, state.isMigratingChildren]);
 
-  // Give it a bit before letting the backend know it's ready
-  useEffect(() => {
-    setTimeout(() => ipcRenderer.send('window-ready'), 500);
-  }, []);
-
-  // Handle Application Commands
-  useEffect(() => {
-    ipcRenderer.on('run-command', (_, commandUri) => {
-      const parsed = urlParse(commandUri, true);
-      const command = `${parsed.hostname}${parsed.pathname}`;
-      const args = JSON.parse(JSON.stringify(parsed.query));
-      args.workspaceId = args.workspaceId || activeWorkspace?._id;
-      handleCommand(command, args);
-    });
-  }, [activeWorkspace?._id, handleCommand]);
-
-  // Handle System Theme change
-  useEffect(() => {
-    const matches = window.matchMedia('(prefers-color-scheme: dark)');
-    matches.addEventListener('change', () => themes.applyColorScheme(settings));
-    return () => {
-      matches.removeEventListener('change', () => themes.applyColorScheme(settings));
-    };
-  });
-
-  // Global Drag and Drop for importing files
-  useEffect(() => {
-    // NOTE: This is required for "drop" event to trigger.
-    document.addEventListener(
-      'dragover',
-      event => {
-        event.preventDefault();
-      },
-      false,
-    );
-    document.addEventListener(
-      'drop',
-      async event => {
-        event.preventDefault();
-        if (!activeWorkspace) {
-          return;
-        }
-        const files = event.dataTransfer?.files || [];
-        if (files.length === 0) {
-          console.log('[drag] Ignored drop event because no files present');
-          return;
-        }
-        const file = files[0];
-        if (!file?.path) {
-          return;
-        }
-        await showModal(AlertModal, {
-          title: 'Confirm Data Import',
-          message: (
-            <span>
-              Import <code>{file.path}</code>?
-            </span>
-          ),
-          addCancel: true,
-        });
-        handleImportUri(`file://${file.path}`, { workspaceId: activeWorkspace?._id });
-      },
-      false,
-    );
-  });
-
   if (state.isMigratingChildren) {
     console.log('[app] Waiting for migration to complete');
     return null;
@@ -328,11 +209,144 @@ const App = () => {
         <AppHooks />
         <div className="app" key={uniquenessKey}>
           <ErrorBoundary showAlert>
-            <Wrapper
-              ref={wrapperRef}
-              vcs={vcs}
-              gitVCS={gitVCS}
-            />
+            <div key="modals" className="modals">
+              <ErrorBoundary showAlert>
+                <AnalyticsModal />
+                <AlertModal ref={registerModal} />
+                <ErrorModal ref={registerModal} />
+                <PromptModal ref={registerModal} />
+                <WrapperModal ref={registerModal} />
+                <LoginModal ref={registerModal} />
+                <AskModal ref={registerModal} />
+                <SelectModal ref={registerModal} />
+                <FilterHelpModal ref={registerModal} />
+                <RequestRenderErrorModal ref={registerModal} />
+                <GenerateConfigModal ref={registerModal} />
+                <ProjectSettingsModal ref={registerModal} />
+                <WorkspaceDuplicateModal ref={registerModal} vcs={vcs || undefined} />
+                <CodePromptModal ref={registerModal} />
+                <RequestSettingsModal ref={instance => registerModal(instance, 'RequestSettingsModal')} />
+                <RequestGroupSettingsModal ref={registerModal} />
+
+                {activeWorkspace ? <>
+                  {/* TODO: Figure out why cookieJar is sometimes null */}
+                  {activeCookieJar ? <>
+                    <CookiesModalFC
+                      ref={registerModal}
+                    />
+                    <CookieModifyModal ref={registerModal} />
+                  </> : null}
+
+                  <NunjucksModal
+                    ref={registerModal}
+                    workspace={activeWorkspace}
+                  />
+
+                  {activeApiSpec ? <WorkspaceSettingsModal
+                    ref={registerModal}
+                    workspace={activeWorkspace}
+                    apiSpec={activeApiSpec}
+                  /> : null}
+                </> : null}
+
+                <GenerateCodeModal
+                  ref={registerModal}
+                  environmentId={activeEnvironment ? activeEnvironment._id : 'n/a'}
+                />
+
+                <SettingsModal ref={instance => registerModal(instance, 'SettingsModal')} />
+                <ResponseDebugModal ref={instance => registerModal(instance, 'ResponseDebugModal')} />
+
+                <RequestSwitcherModal ref={instance => registerModal(instance, 'RequestSwitcherModal')} />
+
+                <EnvironmentEditModal
+                  ref={registerModal}
+                  onChange={models.requestGroup.update}
+                />
+
+                <GitRepositorySettingsModal ref={registerModal} />
+
+                {activeWorkspace && gitVCS ? (
+                  <Fragment>
+                    <GitStagingModal ref={registerModal} workspace={activeWorkspace} vcs={gitVCS} gitRepository={activeGitRepository} />
+                    <GitLogModal ref={registerModal} vcs={gitVCS} />
+                    {activeGitRepository !== null && (
+                      <GitBranchesModal
+                        ref={registerModal}
+                        vcs={gitVCS}
+                        gitRepository={activeGitRepository}
+                      />
+                    )}
+                  </Fragment>
+                ) : null}
+
+                {activeWorkspace && vcs ? (
+                  <Fragment>
+                    <SyncStagingModal ref={registerModal} vcs={vcs} />
+                    <SyncMergeModal ref={registerModal} vcs={vcs} />
+                    <SyncBranchesModal ref={registerModal} vcs={vcs} />
+                    <SyncDeleteModal ref={registerModal} vcs={vcs} />
+                    <SyncHistoryModal ref={registerModal} vcs={vcs} />
+                  </Fragment>
+                ) : null}
+
+                <WorkspaceEnvironmentsEditModal
+                  ref={registerModal}
+                  handleSetActiveEnvironment={handleSetActiveEnvironment}
+                  activeEnvironmentId={activeEnvironment ? activeEnvironment._id : null}
+                />
+
+                <AddKeyCombinationModal ref={instance => registerModal(instance, 'AddKeyCombinationModal')} />
+                <ExportRequestsModal ref={registerModal} />
+
+                <GrpcDispatchModalWrapper>
+                  {dispatch => (
+                    <ProtoFilesModal
+                      ref={registerModal}
+                      grpcDispatch={dispatch}
+                    />
+                  )}
+                </GrpcDispatchModalWrapper>
+              </ErrorBoundary>
+            </div>
+
+            <Routes>
+              <Route
+                path="*"
+                element={
+                  <Suspense fallback={<LoadingIndicator />}>
+                    <WrapperHome
+                      vcs={vcs}
+                    />
+                  </Suspense>
+                }
+              />
+              <Route
+                path={ACTIVITY_UNIT_TEST}
+                element={
+                  <Suspense fallback={<LoadingIndicator />}>
+                    <WrapperUnitTest />
+                  </Suspense>
+                }
+              />
+              <Route
+                path={ACTIVITY_SPEC}
+                element={
+                  <Suspense fallback={<LoadingIndicator />}>
+                    <WrapperDesign />
+                  </Suspense>
+                }
+              />
+              <Route
+                path={ACTIVITY_DEBUG}
+                element={
+                  <Suspense fallback={<LoadingIndicator />}>
+                    <WrapperDebug />
+                  </Suspense>
+                }
+              />
+            </Routes>
+            <ActivityRouter />
           </ErrorBoundary>
 
           <ErrorBoundary showAlert>
diff --git a/packages/insomnia/src/ui/hooks/use-app-commands.ts b/packages/insomnia/src/ui/hooks/use-app-commands.ts
new file mode 100644
index 0000000000..47ebf78c01
--- /dev/null
+++ b/packages/insomnia/src/ui/hooks/use-app-commands.ts
@@ -0,0 +1,24 @@
+import { ipcRenderer } from 'electron';
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { parse } from 'url';
+
+import { newCommand } from '../redux/modules/global';
+import { selectActiveWorkspace } from '../redux/selectors';
+
+export const useAppCommands = () => {
+  const dispatch = useDispatch();
+  const handleCommand = dispatch(newCommand);
+  const activeWorkspace = useSelector(selectActiveWorkspace);
+
+  // Handle Application Commands
+  useEffect(() => {
+    ipcRenderer.on('run-command', (_, commandUri) => {
+      const parsed = parse(commandUri, true);
+      const command = `${parsed.hostname}${parsed.pathname}`;
+      const args = JSON.parse(JSON.stringify(parsed.query));
+      args.workspaceId = args.workspaceId || activeWorkspace?._id;
+      handleCommand(command, args);
+    });
+  }, [activeWorkspace?._id, handleCommand]);
+};
diff --git a/packages/insomnia/src/ui/hooks/use-drag-and-drop-import-file.tsx b/packages/insomnia/src/ui/hooks/use-drag-and-drop-import-file.tsx
new file mode 100644
index 0000000000..571bb6b9d4
--- /dev/null
+++ b/packages/insomnia/src/ui/hooks/use-drag-and-drop-import-file.tsx
@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { showModal } from '../components/modals';
+import { AlertModal } from '../components/modals/alert-modal';
+import { importUri } from '../redux/modules/import';
+import { selectActiveWorkspace } from '../redux/selectors';
+
+export const useDragAndDropImportFile = () => {
+  const activeWorkspace = useSelector(selectActiveWorkspace);
+  const dispatch = useDispatch();
+  const handleImportUri = dispatch(importUri);
+
+  // Global Drag and Drop for importing files
+  useEffect(() => {
+  // NOTE: This is required for "drop" event to trigger.
+    document.addEventListener(
+      'dragover',
+      event => {
+        event.preventDefault();
+      },
+      false,
+    );
+    document.addEventListener(
+      'drop',
+      async event => {
+        event.preventDefault();
+        if (!activeWorkspace) {
+          return;
+        }
+        const files = event.dataTransfer?.files || [];
+        if (files.length === 0) {
+          console.log('[drag] Ignored drop event because no files present');
+          return;
+        }
+        const file = files[0];
+        if (!file?.path) {
+          return;
+        }
+        await showModal(AlertModal, {
+          title: 'Confirm Data Import',
+          message: (
+            <span>
+              Import <code>{file.path}</code>?
+            </span>
+          ),
+          addCancel: true,
+        });
+        handleImportUri(`file://${file.path}`, { workspaceId: activeWorkspace?._id });
+      },
+      false,
+    );
+  });
+};
diff --git a/packages/insomnia/src/ui/hooks/use-git-vcs.ts b/packages/insomnia/src/ui/hooks/use-git-vcs.ts
new file mode 100644
index 0000000000..e38663a758
--- /dev/null
+++ b/packages/insomnia/src/ui/hooks/use-git-vcs.ts
@@ -0,0 +1,97 @@
+import path from 'path';
+import { useEffect, useRef, useState } from 'react';
+
+import * as models from '../../models';
+import { GitRepository } from '../../models/git-repository';
+import { fsClient } from '../../sync/git/fs-client';
+import { GIT_CLONE_DIR, GIT_INSOMNIA_DIR, GIT_INTERNAL_DIR, GitVCS } from '../../sync/git/git-vcs';
+import { NeDBClient } from '../../sync/git/ne-db-client';
+import { routableFSClient } from '../../sync/git/routable-fs-client';
+export function useGitVCS({
+  workspaceId,
+  projectId,
+  gitRepository,
+}: {
+  workspaceId?: string;
+  projectId: string;
+  gitRepository?: GitRepository | null;
+}) {
+  const gitVCSInstanceRef = useRef<GitVCS | null>(null);
+  const [gitVCS, setGitVCS] = useState<GitVCS | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    // Set the instance to null in the state while we update it
+    if (gitVCSInstanceRef.current) {
+      setGitVCS(null);
+    }
+
+    if (!gitVCSInstanceRef.current) {
+      gitVCSInstanceRef.current = new GitVCS();
+    }
+
+    async function update() {
+      if (workspaceId && gitRepository && gitVCSInstanceRef.current) {
+        // Create FS client
+        const baseDir = path.join(
+          process.env['INSOMNIA_DATA_PATH'] || window.app.getPath('userData'),
+          `version-control/git/${gitRepository._id}`,
+        );
+
+        /** All app data is stored within a namespaced GIT_INSOMNIA_DIR directory at the root of the repository and is read/written from the local NeDB database */
+        const neDbClient = NeDBClient.createClient(workspaceId, projectId);
+
+        /** All git metadata in the GIT_INTERNAL_DIR directory is stored in a git/ directory on the filesystem */
+        const gitDataClient = fsClient(baseDir);
+
+        /** All data outside the directories listed below will be stored in an 'other' directory. This is so we can support files that exist outside the ones the app is specifically in charge of. */
+        const otherDatClient = fsClient(path.join(baseDir, 'other'));
+
+        /** The routable FS client directs isomorphic-git to read/write from the database or from the correct directory on the file system while performing git operations. */
+        const routableFS = routableFSClient(otherDatClient, {
+          [GIT_INSOMNIA_DIR]: neDbClient,
+          [GIT_INTERNAL_DIR]: gitDataClient,
+        });
+        // Init VCS
+        const { credentials, uri } = gitRepository;
+        if (gitRepository.needsFullClone) {
+          await models.gitRepository.update(gitRepository, {
+            needsFullClone: false,
+          });
+          await gitVCSInstanceRef.current.initFromClone({
+            url: uri,
+            gitCredentials: credentials,
+            directory: GIT_CLONE_DIR,
+            fs: routableFS,
+            gitDirectory: GIT_INTERNAL_DIR,
+          });
+        } else {
+          await gitVCSInstanceRef.current.init({
+            directory: GIT_CLONE_DIR,
+            fs: routableFS,
+            gitDirectory: GIT_INTERNAL_DIR,
+          });
+        }
+
+        // Configure basic info
+        const { author, uri: gitUri } = gitRepository;
+        await gitVCSInstanceRef.current.setAuthor(author.name, author.email);
+        await gitVCSInstanceRef.current.addRemote(gitUri);
+      } else {
+        // Create new one to un-initialize it
+        gitVCSInstanceRef.current = new GitVCS();
+      }
+
+      isMounted && setGitVCS(gitVCSInstanceRef.current);
+    }
+
+    update();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [workspaceId, projectId, gitRepository]);
+
+  return gitVCS;
+}
diff --git a/packages/insomnia/src/ui/hooks/use-theme-change.ts b/packages/insomnia/src/ui/hooks/use-theme-change.ts
new file mode 100644
index 0000000000..893b67bb29
--- /dev/null
+++ b/packages/insomnia/src/ui/hooks/use-theme-change.ts
@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+import * as themes from '../../plugins/misc';
+import { selectSettings } from '../redux/selectors';
+
+export const useThemeChange = () => {
+  const settings = useSelector(selectSettings);
+  // Handle System Theme change
+  useEffect(() => {
+    const matches = window.matchMedia('(prefers-color-scheme: dark)');
+    matches.addEventListener('change', () => themes.applyColorScheme(settings));
+    return () => {
+      matches.removeEventListener('change', () => themes.applyColorScheme(settings));
+    };
+  });
+};
diff --git a/packages/insomnia/src/ui/hooks/use-vcs.ts b/packages/insomnia/src/ui/hooks/use-vcs.ts
new file mode 100644
index 0000000000..62e986ef68
--- /dev/null
+++ b/packages/insomnia/src/ui/hooks/use-vcs.ts
@@ -0,0 +1,53 @@
+import  { useEffect, useRef, useState } from 'react';
+
+import { getDataDirectory } from '../../common/electron-helpers';
+import { generateId } from '../../common/misc';
+import FileSystemDriver from '../../sync/store/drivers/file-system-driver';
+import { type MergeConflict } from '../../sync/types';
+import { VCS } from '../../sync/vcs/vcs';
+import { showModal } from '../components/modals/index';
+import { SyncMergeModal } from '../components/modals/sync-merge-modal';
+export function useVCS({
+  workspaceId,
+}: {
+  workspaceId?: string;
+}) {
+  const vcsInstanceRef = useRef<VCS | null>(null);
+  const [vcs, setVCS] = useState<VCS | null>(null);
+  const updateVCSLock = useRef<boolean | string>(false);
+
+  // Update VCS when the active workspace changes
+  useEffect(() => {
+    const lock = generateId();
+    updateVCSLock.current = lock;
+
+    // Set vcs to null while we update it
+    setVCS(null);
+
+    if (!vcsInstanceRef.current) {
+      const driver = FileSystemDriver.create(getDataDirectory());
+
+      vcsInstanceRef.current = new VCS(driver, async conflicts => {
+        return new Promise(resolve => {
+          showModal(SyncMergeModal, {
+            conflicts,
+            handleDone: (conflicts: MergeConflict[]) => resolve(conflicts),
+          });
+        });
+      });
+    }
+
+    if (workspaceId) {
+      vcsInstanceRef.current.switchProject(workspaceId);
+    } else {
+      vcsInstanceRef.current.clearBackendProject();
+    }
+
+    // Prevent a potential race-condition when _updateVCS() gets called for different workspaces in rapid succession
+    if (updateVCSLock.current === lock) {
+      setVCS(vcsInstanceRef.current);
+    }
+  }, [workspaceId]);
+
+  return vcs;
+}