Remove ui.isEditing, enable forcing desktop window open without sidebar

app/components/Header.tsx

@@ -26,9 +26,7 @@ type Props = {
 function Header({ left, title, actions, hasSidebar }: Props) {
   const { ui } = useStores();
   const isMobile = useMobile();
-
   const hasMobileSidebar = hasSidebar && isMobile;
-  const sidebarCollapsed = ui.isEditing || ui.sidebarCollapsed;
 
   const passThrough = !actions && !left && !title;
 
@@ -57,7 +55,7 @@ function Header({ left, title, actions, hasSidebar }: Props) {
       align="center"
       shrink={false}
       $passThrough={passThrough}
-      $insetTitleAdjust={sidebarCollapsed && Desktop.hasInsetTitlebar()}
+      $insetTitleAdjust={ui.sidebarIsClosed && Desktop.hasInsetTitlebar()}
     >
       {left || hasMobileSidebar ? (
         <Breadcrumbs>

app/components/Layout.tsx

@@ -25,7 +25,7 @@ const Layout: React.FC<Props> = ({
   sidebarRight,
 }) => {
   const { ui } = useStores();
-  const sidebarCollapsed = !sidebar || ui.isEditing || ui.sidebarCollapsed;
+  const sidebarCollapsed = !sidebar || ui.sidebarIsClosed;
 
   useKeyDown(".", (event) => {
     if (isModKey(event)) {

app/components/Sidebar/Sidebar.tsx

@@ -37,7 +37,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
     const { user } = auth;
 
     const width = ui.sidebarWidth;
-    const collapsed = (ui.isEditing || ui.sidebarCollapsed) && !isMenuOpen;
+    const collapsed = ui.sidebarIsClosed && !isMenuOpen;
     const maxWidth = theme.sidebarMaxWidth;
     const minWidth = theme.sidebarMinWidth + 16; // padding
 
@@ -191,9 +191,9 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
           )}
           <ResizeBorder
             onMouseDown={handleMouseDown}
-            onDoubleClick={ui.sidebarCollapsed ? undefined : handleReset}
+            onDoubleClick={ui.sidebarIsClosed ? undefined : handleReset}
           />
-          {ui.sidebarCollapsed && !ui.isEditing && (
+          {ui.sidebarIsClosed && (
             <Toggle
               onClick={ui.toggleCollapsedSidebar}
               direction={"right"}
@@ -201,14 +201,12 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
             />
           )}
         </Container>
-        {!ui.isEditing && (
+        <Toggle
-          <Toggle
+          style={toggleStyle}
-            style={toggleStyle}
+          onClick={ui.toggleCollapsedSidebar}
-            onClick={ui.toggleCollapsedSidebar}
+          direction={ui.sidebarIsClosed ? "right" : "left"}
-            direction={ui.sidebarCollapsed ? "right" : "left"}
+          aria-label={ui.sidebarIsClosed ? t("Expand") : t("Collapse")}
-            aria-label={ui.sidebarCollapsed ? t("Expand") : t("Collapse")}
+        />
-          />
-        )}
       </>
     );
   }

app/stores/UiStore.ts

@@ -6,6 +6,9 @@ import Storage from "~/utils/Storage";
 
 const UI_STORE = "UI_STORE";
 
+// Whether the window launched with sidebar force hidden
+let sidebarHidden = window.location.search.includes("sidebarHidden=true");
+
 export enum Theme {
   Light = "light",
   Dark = "dark",
@@ -45,9 +48,6 @@ class UiStore {
   @observable
   progressBarVisible = false;
 
-  @observable
-  isEditing = false;
-
   @observable
   tocVisible = false;
 
@@ -164,11 +164,13 @@ class UiStore {
 
   @action
   expandSidebar = () => {
+    sidebarHidden = false;
     this.sidebarCollapsed = false;
   };
 
   @action
   toggleCollapsedSidebar = () => {
+    sidebarHidden = false;
     this.sidebarCollapsed = !this.sidebarCollapsed;
   };
 
@@ -182,16 +184,6 @@ class UiStore {
     this.tocVisible = false;
   };
 
-  @action
-  enableEditMode = () => {
-    this.isEditing = true;
-  };
-
-  @action
-  disableEditMode = () => {
-    this.isEditing = false;
-  };
-
   @action
   enableProgressBar = () => {
     this.progressBarVisible = true;
@@ -222,6 +214,16 @@ class UiStore {
     this.mobileSidebarVisible = false;
   };
 
+  /**
+   * Returns the current state of the sidebar taking into account user preference
+   * and whether the sidebar has been hidden as part of launching in a new
+   * desktop window.
+   */
+  @computed
+  get sidebarIsClosed() {
+    return this.sidebarCollapsed || sidebarHidden;
+  }
+
   @computed
   get resolvedTheme(): Theme | SystemTheme {
     if (this.theme === "system") {