From d16133fda8ec5a8053e9e67c521fe97a9f200c06 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 4 Dec 2022 11:55:33 -0500
Subject: [PATCH] Remove ui.isEditing, enable forcing desktop window open
 without sidebar

---
 app/components/Header.tsx          |  4 +---
 app/components/Layout.tsx          |  2 +-
 app/components/Sidebar/Sidebar.tsx | 20 +++++++++-----------
 app/stores/UiStore.ts              | 28 +++++++++++++++-------------
 4 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 522ed15a3..52a18cf80 100644
--- a/app/components/Header.tsx
+++ b/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>
diff --git a/app/components/Layout.tsx b/app/components/Layout.tsx
index f93c6fc01..fa8648389 100644
--- a/app/components/Layout.tsx
+++ b/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)) {
diff --git a/app/components/Sidebar/Sidebar.tsx b/app/components/Sidebar/Sidebar.tsx
index 17801e6de..5a3225f1c 100644
--- a/app/components/Sidebar/Sidebar.tsx
+++ b/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
-            style={toggleStyle}
-            onClick={ui.toggleCollapsedSidebar}
-            direction={ui.sidebarCollapsed ? "right" : "left"}
-            aria-label={ui.sidebarCollapsed ? t("Expand") : t("Collapse")}
-          />
-        )}
+        <Toggle
+          style={toggleStyle}
+          onClick={ui.toggleCollapsedSidebar}
+          direction={ui.sidebarIsClosed ? "right" : "left"}
+          aria-label={ui.sidebarIsClosed ? t("Expand") : t("Collapse")}
+        />
       </>
     );
   }
diff --git a/app/stores/UiStore.ts b/app/stores/UiStore.ts
index 1c7abc676..e2afb6745 100644
--- a/app/stores/UiStore.ts
+++ b/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") {