fix: some style updates (#2348)

apps/web/src/components/blocksuite/workspace-header/header.tsx

@@ -1,5 +1,8 @@
 import { BrowserWarning } from '@affine/component/affine-banner';
-import { appSidebarOpenAtom } from '@affine/component/app-sidebar';
+import {
+  appSidebarFloatingAtom,
+  appSidebarOpenAtom,
+} from '@affine/component/app-sidebar';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { CloseIcon, MinusIcon, RoundedRectangleIcon } from '@blocksuite/icons';
@@ -164,6 +167,8 @@ export const Header = forwardRef<
   const open = useAtomValue(appSidebarOpenAtom);
   const t = useAFFiNEI18N();
 
+  const appSidebarFloating = useAtomValue(appSidebarFloatingAtom);
+
   const mode = useCurrentMode();
   return (
     <div
@@ -171,6 +176,7 @@ export const Header = forwardRef<
       ref={ref}
       data-has-warning={showWarning}
       data-open={open}
+      data-sidebar-floating={appSidebarFloating}
       {...props}
     >
       {showGuideDownloadClientTip ? (

apps/web/src/components/blocksuite/workspace-header/styles.css.ts

@@ -1,3 +1,4 @@
+import type { ComplexStyleRule } from '@vanilla-extract/css';
 import { style } from '@vanilla-extract/css';
 
 export const headerContainer = style({
@@ -6,15 +7,16 @@ export const headerContainer = style({
   position: 'sticky',
   top: 0,
   background: 'var(--affine-background-primary-color)',
-  // @ts-ignore
-  WebkitAppRegion: 'drag',
   zIndex: 'var(--affine-z-index-popover)',
   selectors: {
     '&[data-has-warning="true"]': {
       height: '96px',
     },
+    '&[data-sidebar-floating="false"]': {
+      WebkitAppRegion: 'drag',
+    },
   },
-});
+} as ComplexStyleRule);
 
 export const header = style({
   flexShrink: 0,
@@ -59,13 +61,12 @@ export const title = style({
     '(max-width: 768px)': {
       selectors: {
         '&[data-open="true"]': {
-          // @ts-ignore
           WebkitAppRegion: 'no-drag',
         },
       },
     },
   },
-});
+} as ComplexStyleRule);
 
 export const titleWrapper = style({
   height: '100%',
@@ -187,7 +188,6 @@ export const windowAppControlsWrapper = style({
 });
 
 export const windowAppControl = style({
-  // @ts-ignore
   WebkitAppRegion: 'no-drag',
   cursor: 'pointer',
   display: 'inline-flex',
@@ -204,4 +204,4 @@ export const windowAppControl = style({
       background: 'var(--affine-background-tertiary-color)',
     },
   },
-});
+} as ComplexStyleRule);

apps/web/src/components/root-app-sidebar/index.tsx

@@ -20,13 +20,12 @@ import {
   ShareIcon,
 } from '@blocksuite/icons';
 import type { Page } from '@blocksuite/store';
-import { useAtomValue } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import type { ReactElement } from 'react';
 import type React from 'react';
 import { useCallback, useEffect } from 'react';
 
 import type { AllWorkspace } from '../../shared';
-import ChangeLog from '../pure/workspace-slider-bar/changeLog';
 import FavoriteList from '../pure/workspace-slider-bar/favorite/favorite-list';
 import { WorkspaceSelector } from '../pure/workspace-slider-bar/WorkspaceSelector';
 
@@ -97,13 +96,24 @@ export const RootAppSidebar = ({
     }
   }, [onClickNewPage]);
 
-  const sidebarOpen = useAtomValue(appSidebarOpenAtom);
+  const [sidebarOpen, setSidebarOpen] = useAtom(appSidebarOpenAtom);
   useEffect(() => {
     if (environment.isDesktop && typeof sidebarOpen === 'boolean') {
       window.apis?.ui.handleSidebarVisibilityChange(sidebarOpen);
     }
   }, [sidebarOpen]);
 
+  useEffect(() => {
+    const keydown = (e: KeyboardEvent) => {
+      if ((e.key === '/' && e.metaKey) || (e.key === '/' && e.ctrlKey)) {
+        setSidebarOpen(!sidebarOpen);
+      }
+    };
+    document.addEventListener('keydown', keydown, { capture: true });
+    return () =>
+      document.removeEventListener('keydown', keydown, { capture: true });
+  }, [sidebarOpen, setSidebarOpen]);
+
   const clientUpdateAvailable = useAtomValue(updateAvailableAtom);
 
   return (
@@ -114,7 +124,6 @@ export const RootAppSidebar = ({
             currentWorkspace={currentWorkspace}
             onClick={onOpenWorkspaceListModal}
           />
-          <ChangeLog />
           <QuickSearchInput
             data-testid="slider-bar-quick-search-button"
             onClick={onOpenQuickSearchModal}

apps/web/src/layouts/workspace-layout.tsx

@@ -1,7 +1,4 @@
-import {
-  appSidebarOpenAtom,
-  appSidebarResizingAtom,
-} from '@affine/component/app-sidebar';
+import { appSidebarResizingAtom } from '@affine/component/app-sidebar';
 import {
   AppContainer,
   MainContainer,
@@ -340,7 +337,6 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
   }, [setOpenQuickSearchModalAtom]);
 
   const resizing = useAtomValue(appSidebarResizingAtom);
-  const sidebarOpen = useAtomValue(appSidebarOpenAtom);
 
   return (
     <>
@@ -364,7 +360,7 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
           currentPath={router.asPath.split('?')[0]}
           paths={isPublicWorkspace ? publicPathGenerator : pathGenerator}
         />
-        <MainContainer sidebarOpen={sidebarOpen}>
+        <MainContainer>
           {children}
           <ToolContainer>
             {/* fixme(himself65): remove this */}