init

packages/vscode-extension/src/common/Project.ts

@@ -78,7 +78,7 @@ export interface ProjectInterface {
   stepOverDebugger(): Promise<void>;
   focusBuildOutput(): Promise<void>;
   focusDebugConsole(): Promise<void>;
-
+  focusIntoSecondarySidebar(): Promise<void>;
   openNavigation(navigationItemID: string): Promise<void>;
 
   dispatchTouch(xRatio: number, yRatio: number, type: "Up" | "Move" | "Down"): Promise<void>;

packages/vscode-extension/src/common/WorkspaceConfig.ts

@@ -0,0 +1,94 @@
+import { ConfigurationChangeEvent, workspace, Disposable } from "vscode";
+import { Tabpanel } from "../panels/Tabpanel";
+import { EventEmitter } from "stream";
+import { Logger } from "../Logger";
+
+export type WorkspaceConfigProps = {
+  showPanelInActivityBar: boolean;
+  relativeAppLocation: string;
+};
+
+export interface WorkspaceConfigEventMap {
+  workspaceConfigChange: WorkspaceConfigProps;
+}
+
+export interface WorkspaceConfigEventListener<T> {
+  (event: T): void;
+}
+
+export interface WorkspaceConfigInterface {
+  getWorkspaceConfigProps(): Promise<WorkspaceConfigProps>;
+  addListener<K extends keyof WorkspaceConfigEventMap>(
+    eventType: K,
+    listener: WorkspaceConfigEventListener<WorkspaceConfigEventMap[K]>
+  ): Promise<void>;
+  removeListener<K extends keyof WorkspaceConfigEventMap>(
+    eventType: K,
+    listener: WorkspaceConfigEventListener<WorkspaceConfigEventMap[K]>
+  ): Promise<void>;
+}
+
+export class WorkspaceConfig implements Disposable, WorkspaceConfigInterface {
+  public static currentWorkspaceConfig: WorkspaceConfig | undefined;
+  private workspaceConfigProps: WorkspaceConfigProps;
+  private eventEmitter = new EventEmitter();
+  private workspaceConfigListener: Disposable | undefined;
+
+  constructor() {
+    WorkspaceConfig.currentWorkspaceConfig = this;
+    this.workspaceConfigProps = {
+      showPanelInActivityBar: workspace
+        .getConfiguration("ReactNativeIDE")
+        .get<boolean>("showPanelInActivityBar")!,
+      relativeAppLocation: workspace
+        .getConfiguration("ReactNativeIDE")
+        .get<string>("relativeAppLocation")!,
+    };
+    this.IDEPanelLocationListener();
+  }
+
+  private IDEPanelLocationListener() {
+    this.workspaceConfigListener = workspace.onDidChangeConfiguration(
+      (event: ConfigurationChangeEvent) => {
+        if (!event.affectsConfiguration("ReactNativeIDE")) {
+          return;
+        }
+        if (event.affectsConfiguration("ReactNativeIDE.showPanelInActivityBar")) {
+          this.workspaceConfigProps.showPanelInActivityBar = workspace
+            .getConfiguration("ReactNativeIDE")
+            .get<boolean>("showPanelInActivityBar")!;
+          if (workspace.getConfiguration("ReactNativeIDE").get("showPanelInActivityBar")) {
+            Tabpanel.currentPanel?.dispose();
+          }
+        } else if (event.affectsConfiguration("ReactNativeIDE.relativeAppLocation")) {
+          this.workspaceConfigProps.relativeAppLocation = workspace
+            .getConfiguration("ReactNativeIDE")
+            .get<string>("relativeAppLocation")!;
+        }
+        this.eventEmitter.emit("workspaceConfigChange", this.workspaceConfigProps);
+      }
+    );
+  }
+
+  async getWorkspaceConfigProps(): Promise<WorkspaceConfigProps> {
+    return this.workspaceConfigProps;
+  }
+
+  async addListener<K extends keyof WorkspaceConfigEventMap>(
+    eventType: K,
+    listener: WorkspaceConfigEventListener<WorkspaceConfigEventMap[K]>
+  ) {
+    this.eventEmitter.addListener(eventType, listener);
+  }
+
+  async removeListener<K extends keyof WorkspaceConfigEventMap>(
+    eventType: K,
+    listener: WorkspaceConfigEventListener<WorkspaceConfigEventMap[K]>
+  ) {
+    this.eventEmitter.removeListener(eventType, listener);
+  }
+
+  dispose() {
+    this.workspaceConfigListener?.dispose();
+  }
+}

packages/vscode-extension/src/panels/SidepanelViewProvider.ts

@@ -1,6 +1,6 @@
 import { ExtensionContext, Uri, WebviewView, WebviewViewProvider, commands } from "vscode";
 import { generateWebviewContent } from "./webviewContentGenerator";
-import { extensionContext } from "../utilities/extensionContext";
+
 import { WebviewController } from "./WebviewController";
 import { Logger } from "../Logger";
 

packages/vscode-extension/src/panels/WebviewController.ts

@@ -6,12 +6,14 @@ import { Project } from "../project/project";
 import { openExternalUrl } from "../utilities/vsc";
 import { Logger } from "../Logger";
 import { extensionContext } from "../utilities/extensionContext";
+import { WorkspaceConfig } from "../common/WorkspaceConfig";
 
 export class WebviewController implements Disposable {
   private readonly dependencyChecker: DependencyChecker;
   private readonly dependencyInstaller: DependencyInstaller;
   private readonly deviceManager: DeviceManager;
   public readonly project: Project;
+  public readonly workspaceConfig: WorkspaceConfig;
   private disposables: Disposable[] = [];
 
   private followEnabled = false;
@@ -34,16 +36,20 @@ export class WebviewController implements Disposable {
     this.deviceManager = new DeviceManager();
     this.project = new Project(this.deviceManager);
 
+    this.workspaceConfig = new WorkspaceConfig();
+
     this.disposables.push(
       this.dependencyChecker,
       this.dependencyInstaller,
       this.deviceManager,
-      this.project
+      this.project,
+      this.workspaceConfig
     );
 
     this.callableObjects = new Map([
       ["DeviceManager", this.deviceManager as object],
       ["Project", this.project as object],
+      ["WorkspaceConfig", this.workspaceConfig as object],
     ]);
   }
 

packages/vscode-extension/src/project/project.ts

@@ -261,16 +261,22 @@ export class Project implements Disposable, MetroDelegate, ProjectInterface {
   public async stepOverDebugger() {
     this.deviceSession?.stepOverDebugger();
   }
+
   public async focusBuildOutput() {
     if (!this.projectState.selectedDevice) {
       return;
     }
     this.buildManager.focusBuildOutput();
   }
+
   public async focusDebugConsole() {
     commands.executeCommand("workbench.panel.repl.view.focus");
   }
 
+  public async focusIntoSecondarySidebar(): Promise<void> {
+    commands.executeCommand("workbench.action.focusAuxiliaryBar");
+  }
+
   public async openNavigation(navigationItemID: string) {
     this.deviceSession?.openNavigation(navigationItemID);
   }

packages/vscode-extension/src/webview/components/SettingsDropdown.tsx

@@ -1,14 +1,12 @@
 import React from "react";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-
 import "./shared/Dropdown.css";
 import { useModal } from "../providers/ModalProvider";
-
 import DiagnosticView from "../views/DiagnosticView";
-import AndroidImagesView from "../views/AndroidImagesView";
 import ManageDevicesView from "../views/ManageDevicesView";
 import { ProjectInterface } from "../../common/Project";
 import DoctorIcon from "./icons/DoctorIcon";
+import { useWorkspaceConfig } from "../providers/WorkspaceConfigProvider";
 
 interface SettingsDropdownProps {
   children: React.ReactNode;
@@ -17,6 +15,7 @@ interface SettingsDropdownProps {
 }
 
 function SettingsDropdown({ project, children, disabled }: SettingsDropdownProps) {
+  const { showPanelInActivityBar } = useWorkspaceConfig();
   const { openModal } = useModal();
   return (
     <DropdownMenu.Root>
@@ -62,6 +61,27 @@ function SettingsDropdown({ project, children, disabled }: SettingsDropdownProps
             <span className="codicon codicon-trash" />
             Clean rebuild
           </DropdownMenu.Item>
+
+          {showPanelInActivityBar && (
+            <>
+              <DropdownMenu.Separator className="dropdown-menu-separator" />
+              <DropdownMenu.Item
+                className="dropdown-menu-item"
+                onSelect={() => {
+                  project.focusIntoSecondarySidebar();
+                  openModal(
+                    "Move to secondary sidebar",
+                    <div>
+                      You can move extensions from Primary to secondary sidebar, by grab and droping
+                      them.{" "}
+                    </div>
+                  );
+                }}>
+                <span className="codicon codicon-info" />
+                Move to secondary sidebar
+              </DropdownMenu.Item>
+            </>
+          )}
           <DropdownMenu.Arrow className="dropdown-menu-arrow" />
         </DropdownMenu.Content>
       </DropdownMenu.Portal>

packages/vscode-extension/src/webview/index.jsx

@@ -7,6 +7,7 @@ import DependenciesProvider from "./providers/DependenciesProvider";
 import ModalProvider from "./providers/ModalProvider";
 import ProjectProvider from "./providers/ProjectProvider";
 import AlertProvider from "./providers/AlertProvider";
+import WorkspaceConfigProvider from "./providers/WorkspaceConfigProvider";
 
 import "./styles/colors.css";
 
@@ -16,15 +17,17 @@ const root = createRoot(container);
 root.render(
   <React.StrictMode>
     <ProjectProvider>
-      <DevicesProvider>
-        <DependenciesProvider>
-          <ModalProvider>
-            <AlertProvider>
-              <App />
-            </AlertProvider>
-          </ModalProvider>
-        </DependenciesProvider>
-      </DevicesProvider>
+      <WorkspaceConfigProvider>
+        <DevicesProvider>
+          <DependenciesProvider>
+            <ModalProvider>
+              <AlertProvider>
+                <App />
+              </AlertProvider>
+            </ModalProvider>
+          </DependenciesProvider>
+        </DevicesProvider>
+      </WorkspaceConfigProvider>
     </ProjectProvider>
   </React.StrictMode>
 );

packages/vscode-extension/src/webview/providers/WorkspaceConfigProvider.tsx

@@ -0,0 +1,41 @@
+import { PropsWithChildren, useContext, createContext, useState, useEffect } from "react";
+import { makeProxy } from "../utilities/rpc";
+import { WorkspaceConfigInterface, WorkspaceConfigProps } from "../../common/WorkspaceConfig";
+
+const config = makeProxy<WorkspaceConfigInterface>("WorkspaceConfig");
+
+const WorkspaceConfigContext = createContext<WorkspaceConfigProps>({
+  showPanelInActivityBar: false,
+  relativeAppLocation: "",
+});
+
+export default function WorkspaceConfigProvider({ children }: PropsWithChildren) {
+  const [workspaceConfig, setWorkspaceConfig] = useState<WorkspaceConfigProps>({
+    showPanelInActivityBar: false,
+    relativeAppLocation: "",
+  });
+
+  useEffect(() => {
+    config.getWorkspaceConfigProps().then(setWorkspaceConfig);
+    config.addListener("workspaceConfigChange", setWorkspaceConfig);
+
+    return () => {
+      config.removeListener("workspaceConfigChange", setWorkspaceConfig);
+    };
+  }, []);
+
+  return (
+    <WorkspaceConfigContext.Provider value={workspaceConfig}>
+      {children}
+    </WorkspaceConfigContext.Provider>
+  );
+}
+
+export function useWorkspaceConfig() {
+  const context = useContext(WorkspaceConfigContext);
+
+  if (context === undefined) {
+    throw new Error("useWorkspaceConfig must be used within a WorkspaceConfigProvider");
+  }
+  return context;
+}