fix: give electron app with minWidth = 640px (#1785)

apps/web/src/components/pure/workspace-slider-bar/index.tsx

@@ -32,8 +32,6 @@ import {
   StyledSliderBarInnerWrapper,
   StyledSliderBarWrapper,
   StyledSliderModalBackground,
-  StyledSliderResizer,
-  StyledSliderResizerInner,
 } from './style';
 import { WorkspaceSelector } from './WorkspaceSelector';
 
@@ -81,38 +79,17 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
     openPage(page.id);
   }, [createPage, openPage]);
   const floatingSlider = useSidebarFloating();
-  const [sliderWidth, setSliderWidth] = useSidebarWidth();
-  const [isResizing, setIsResizing] = useSidebarResizing();
+  const [sliderWidth] = useSidebarWidth();
+  const [isResizing] = useSidebarResizing();
   const show = isPublicWorkspace ? false : sidebarOpen;
   const actualWidth = floatingSlider ? 'calc(10vw + 400px)' : sliderWidth;
-  const onResizeStart = useCallback(() => {
-    let resized = false;
-    function onMouseMove(e: MouseEvent) {
-      const newWidth = Math.min(480, Math.max(e.clientX, 256));
-      setSliderWidth(newWidth);
-      setIsResizing(true);
-      resized = true;
-    }
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener(
-      'mouseup',
-      () => {
-        // if not resized, toggle sidebar
-        if (!resized) {
-          setSidebarOpen(o => !o);
-        }
-        setIsResizing(false);
-        document.removeEventListener('mousemove', onMouseMove);
-      },
-      { once: true }
-    );
-  }, [setIsResizing, setSidebarOpen, setSliderWidth]);
   useEffect(() => {
     window.apis?.onSidebarVisibilityChange(sidebarOpen);
   }, [sidebarOpen]);
   return (
     <>
       <StyledSliderBarWrapper
+        resizing={isResizing}
         floating={floatingSlider}
         show={show}
         style={{ width: actualWidth }}
@@ -222,15 +199,6 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
             <PlusIcon /> {t('New Page')}
           </StyledNewPageButton>
         </StyledSliderBar>
-        {!floatingSlider && sidebarOpen && (
-          <StyledSliderResizer
-            data-testid="sliderBar-resizer"
-            isResizing={isResizing}
-            onMouseDown={onResizeStart}
-          >
-            <StyledSliderResizerInner isResizing={isResizing} />
-          </StyledSliderResizer>
-        )}
       </StyledSliderBarWrapper>
       <StyledSliderModalBackground
         data-testid="sliderBar-modalBackground"

apps/web/src/components/pure/workspace-slider-bar/style.ts

@@ -6,7 +6,8 @@ const macosElectron = environment.isDesktop && environment.isMacOs;
 export const StyledSliderBarWrapper = styled('div')<{
   show: boolean;
   floating: boolean;
-}>(({ theme, show, floating }) => {
+  resizing: boolean;
+}>(({ theme, show, floating, resizing }) => {
   return {
     height: '100%',
     position: 'absolute',
@@ -14,12 +15,12 @@ export const StyledSliderBarWrapper = styled('div')<{
       userSelect: 'none',
     },
     zIndex: theme.zIndex.modal,
-    transition: 'transform .25s',
+    transition: resizing ? '' : 'transform .3s',
     transform: show ? 'translateX(0)' : 'translateX(-100%)',
     maxWidth: floating ? undefined : 'calc(100vw - 698px)',
     background:
       !floating && macosElectron ? 'transparent' : theme.colors.hubBackground,
-    borderRight: '1px solid',
+    borderRight: macosElectron ? '' : '1px solid',
     borderColor: theme.colors.borderColor,
   };
 });
@@ -41,6 +42,10 @@ export const StyledSidebarSwitchWrapper = styled('div')(() => {
     height: '52px',
     flexShrink: 0,
     padding: '0 16px',
+    WebkitAppRegion: 'drag',
+    button: {
+      WebkitAppRegion: 'no-drag',
+    },
     ...displayFlex(macosElectron ? 'flex-end' : 'flex-start', 'center'),
   };
 });
@@ -100,35 +105,3 @@ export const StyledSliderModalBackground = styled('div')<{ active: boolean }>(
     };
   }
 );
-export const StyledSliderResizer = styled('div')<{ isResizing: boolean }>(
-  () => {
-    return {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      width: '12px',
-      transform: 'translateX(50%)',
-      cursor: 'col-resize',
-      zIndex: 1,
-      userSelect: 'none',
-      ':hover > *': {
-        background: 'rgba(0, 0, 0, 0.1)',
-      },
-    };
-  }
-);
-export const StyledSliderResizerInner = styled('div')<{ isResizing: boolean }>(
-  ({ isResizing }) => {
-    return {
-      transition: 'background .15s .1s',
-      position: 'absolute',
-      top: 0,
-      right: '50%',
-      bottom: 0,
-      transform: 'translateX(0.5px)',
-      width: '2px',
-      background: isResizing ? 'rgba(0, 0, 0, 0.1)' : 'transparent',
-    };
-  }
-);