From f400b8c761a38a8f2a4f06ae0c136fb6eb77da55 Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Mon, 25 Aug 2025 15:42:19 +1000
Subject: [PATCH] refactor to use showCompactSidebar instead

---
 packages/excalidraw/components/App.tsx     | 23 +++-------------------
 packages/excalidraw/components/LayerUI.tsx |  2 +-
 packages/excalidraw/types.ts               |  2 +-
 3 files changed, 5 insertions(+), 22 deletions(-)

diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 1f8e437eeb..62e68b97d7 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -477,9 +477,9 @@ const deviceContextInitialValue = {
   editor: {
     isMobile: false,
     canFitSidebar: false,
+    showCompactSidebar: false,
   },
   isTouchScreen: false,
-  isTouchMobile: false,
 };
 const DeviceContext = React.createContext<Device>(deviceContextInitialValue);
 DeviceContext.displayName = "DeviceContext";
@@ -2423,12 +2423,6 @@ class App extends React.Component<AppProps, AppState> {
     return isMobile || isTouchMobile;
   };
 
-  private isTablet = (): boolean => {
-    const { clientWidth: viewportWidth } = document.body;
-
-    return this.isMobileOrTablet() && viewportWidth > MQ_MAX_WIDTH_PORTRAIT;
-  };
-
   private isMobileBreakpoint = (width: number, height: number) => {
     return (
       width < MQ_MAX_WIDTH_PORTRAIT ||
@@ -2459,17 +2453,6 @@ class App extends React.Component<AppProps, AppState> {
     return false;
   };
 
-  private refreshTouchScreen = () => {
-    const previousIsTouchMobile = this.device.isTouchMobile;
-    const currentIsTouchMobile = this.isMobileOrTablet();
-
-    if (previousIsTouchMobile !== currentIsTouchMobile) {
-      this.device = { ...this.device, isTouchMobile: currentIsTouchMobile };
-      return true;
-    }
-    return false;
-  };
-
   private refreshEditorBreakpoints = () => {
     const container = this.excalidrawContainerRef.current;
     if (!container) {
@@ -2489,6 +2472,8 @@ class App extends React.Component<AppProps, AppState> {
     const nextEditorState = updateObject(prevEditorState, {
       isMobile: this.isMobileBreakpoint(editorWidth, editorHeight),
       canFitSidebar: editorWidth > sidebarBreakpoint,
+      showCompactSidebar:
+        this.isMobileOrTablet() && editorWidth > MQ_MAX_WIDTH_PORTRAIT,
     });
 
     if (prevEditorState !== nextEditorState) {
@@ -2575,7 +2560,6 @@ class App extends React.Component<AppProps, AppState> {
     ) {
       this.refreshViewportBreakpoints();
       this.refreshEditorBreakpoints();
-      this.refreshTouchScreen();
     }
 
     if (supportsResizeObserver && this.excalidrawContainerRef.current) {
@@ -2635,7 +2619,6 @@ class App extends React.Component<AppProps, AppState> {
       .getElementsIncludingDeleted()
       .forEach((element) => ShapeCache.delete(element));
     this.refreshViewportBreakpoints();
-    this.refreshTouchScreen();
     this.updateDOMRect();
     if (!supportsResizeObserver) {
       this.refreshEditorBreakpoints();
diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx
index 73875f668a..7de31ad504 100644
--- a/packages/excalidraw/components/LayerUI.tsx
+++ b/packages/excalidraw/components/LayerUI.tsx
@@ -284,7 +284,7 @@ const LayerUI = ({
           <Stack.Col gap={6} className={clsx("App-menu_top__left")}>
             {renderCanvasActions()}
             {shouldRenderSelectedShapeActions &&
-              renderSelectedShapeActions(device.isTouchMobile)}
+              renderSelectedShapeActions(device.editor.showCompactSidebar)}
           </Stack.Col>
           {!appState.viewModeEnabled &&
             appState.openDialog?.name !== "elementLinkSelector" && (
diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts
index 47ec484f8b..093674e32d 100644
--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@@ -883,9 +883,9 @@ export type Device = Readonly<{
   editor: {
     isMobile: boolean;
     canFitSidebar: boolean;
+    showCompactSidebar: boolean;
   };
   isTouchScreen: boolean;
-  isTouchMobile: boolean;
 }>;
 
 export type FrameNameBounds = {