fix: hydration error (#1961)

apps/web/package.json

@@ -29,6 +29,7 @@
     "@emotion/server": "^11.10.0",
     "@emotion/styled": "^11.10.6",
     "@mui/material": "^5.12.0",
+    "@react-hookz/web": "^23.0.0",
     "@sentry/nextjs": "^7.47.0",
     "@toeverything/hooks": "workspace:*",
     "cmdk": "^0.2.0",

apps/web/src/components/affine/sidebar-switch/index.tsx

@@ -13,12 +13,14 @@ import { StyledSidebarSwitch } from './style';
 type SidebarSwitchProps = {
   visible?: boolean;
   tooltipContent?: string;
-  testid?: string;
 };
+
+// fixme: the following code is not correct, SSR will fail because hydrate will not match the client side render
+//  in `StyledSidebarSwitch` component
 export const SidebarSwitch = ({
   visible = true,
   tooltipContent,
-  testid = '',
+  ...props
 }: SidebarSwitchProps) => {
   useUpdateTipsOnVersionChange();
   const [open, setOpen] = useSidebarStatus();
@@ -38,9 +40,9 @@ export const SidebarSwitch = ({
       visible={tooltipVisible}
     >
       <StyledSidebarSwitch
+        {...props}
         visible={visible}
         disabled={!visible}
-        data-testid={testid}
         onClick={useCallback(() => {
           setOpen(!open);
           setTooltipVisible(false);

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

@@ -3,14 +3,20 @@ import { WorkspaceFlavour } from '@affine/workspace/type';
 import { CloseIcon } from '@blocksuite/icons';
 import type { Page } from '@blocksuite/store';
 import type { FC, HTMLAttributes, PropsWithChildren } from 'react';
-import { forwardRef, useEffect, useMemo, useState } from 'react';
+import {
+  forwardRef,
+  lazy,
+  Suspense,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 
 import {
   useSidebarFloating,
   useSidebarStatus,
 } from '../../../hooks/use-sidebar-status';
 import type { AffineOfficialWorkspace } from '../../../shared';
-import { SidebarSwitch } from '../../affine/sidebar-switch';
 import { EditorOptionMenu } from './header-right-items/EditorOptionMenu';
 import EditPage from './header-right-items/EditPage';
 import { HeaderShareMenu } from './header-right-items/ShareMenu';
@@ -27,6 +33,12 @@ import {
 } from './styles';
 import { OSWarningMessage, shouldShowWarning } from './utils';
 
+const SidebarSwitch = lazy(() =>
+  import('../../affine/sidebar-switch').then(module => ({
+    default: module.SidebarSwitch,
+  }))
+);
+
 const BrowserWarning = ({
   show,
   onClose,
@@ -152,11 +164,13 @@ export const Header = forwardRef<
         data-testid="editor-header-items"
         data-tauri-drag-region
       >
+        <Suspense>
           <SidebarSwitch
             visible={!open}
             tooltipContent={t('Expand sidebar')}
-          testid="sliderBar-arrowButton-expand"
+            data-testid="sliderBar-arrowButton-expand"
           />
+        </Suspense>
 
         {props.children}
         <StyledHeaderRightSide>

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

@@ -12,7 +12,7 @@ import {
 import type { Page, PageMeta } from '@blocksuite/store';
 import type React from 'react';
 import type { UIEvent } from 'react';
-import { useCallback, useEffect, useState } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useState } from 'react';
 
 import { usePageMeta } from '../../../hooks/use-page-meta';
 import {
@@ -22,7 +22,6 @@ import {
   useSidebarWidth,
 } from '../../../hooks/use-sidebar-status';
 import type { AllWorkspace } from '../../../shared';
-import { SidebarSwitch } from '../../affine/sidebar-switch';
 import { ChangeLog } from './changeLog';
 import Favorite from './favorite';
 import { Pinboard } from './Pinboard';
@@ -40,6 +39,12 @@ import {
 } from './style';
 import { WorkspaceSelector } from './WorkspaceSelector';
 
+const SidebarSwitch = lazy(() =>
+  import('../../affine/sidebar-switch').then(module => ({
+    default: module.SidebarSwitch,
+  }))
+);
+
 export type FavoriteListProps = {
   currentPageId: string | null;
   openPage: (pageId: string) => void;
@@ -118,11 +123,13 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
         <StyledSliderBar>
           <StyledSidebarHeader>
             <RouteNavigation />
+            <Suspense>
               <SidebarSwitch
                 visible={sidebarOpen}
                 tooltipContent={t('Collapse sidebar')}
-              testid="sliderBar-arrowButton-collapse"
+                data-testid="sliderBar-arrowButton-collapse"
               />
+            </Suspense>
           </StyledSidebarHeader>
 
           <StyledSliderBarInnerWrapper data-testid="sliderBar-inner">

apps/web/src/hooks/use-sidebar-status.ts

@@ -1,9 +1,10 @@
-import { atomWithSyncStorage } from '@affine/jotai';
+import { useTheme } from '@mui/material';
-import { useMediaQuery, useTheme } from '@mui/material';
+import { useMediaQuery } from '@react-hookz/web';
 import { atom, useAtom } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
 
-const sideBarOpenAtom = atomWithSyncStorage('sidebarOpen', true);
+const sideBarOpenAtom = atomWithStorage('sidebarOpen', true);
-const sideBarWidthAtom = atomWithSyncStorage('sidebarWidth', 256);
+const sideBarWidthAtom = atomWithStorage('sidebarWidth', 256);
 const sidebarResizingAtom = atom(false);
 
 export function useSidebarStatus() {
@@ -16,7 +17,10 @@ export function useSidebarWidth() {
 
 export function useSidebarFloating() {
   const theme = useTheme();
-  return useMediaQuery(theme.breakpoints.down('md'));
+  return (
+    useMediaQuery(theme.breakpoints.down('md').replace(/^@media( ?)/m, '')) ??
+    false
+  );
 }
 
 export function useSidebarResizing() {

yarn.lock

@@ -204,6 +204,7 @@ __metadata:
     "@emotion/styled": ^11.10.6
     "@mui/material": ^5.12.0
     "@perfsee/webpack": ^1.5.0
+    "@react-hookz/web": ^23.0.0
     "@redux-devtools/extension": ^3.2.5
     "@rich-data/viewer": ^2.15.6
     "@sentry/nextjs": ^7.47.0
@@ -4693,6 +4694,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-hookz/deep-equal@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "@react-hookz/deep-equal@npm:1.0.4"
+  checksum: 0923e364d309e32ee54e0850471a86488faf149d7a04ee838552cf5d54f493964623a8d742880ec82410cc1105530123f056e66dfc72b7da235d4cc93fad708f
+  languageName: node
+  linkType: hard
+
+"@react-hookz/web@npm:^23.0.0":
+  version: 23.0.0
+  resolution: "@react-hookz/web@npm:23.0.0"
+  dependencies:
+    "@react-hookz/deep-equal": ^1.0.4
+  peerDependencies:
+    js-cookie: ^3.0.1
+    react: ^16.8 || ^17 || ^18
+    react-dom: ^16.8 || ^17 || ^18
+  peerDependenciesMeta:
+    js-cookie:
+      optional: true
+  checksum: 230bff62291bcafa65e0b9adcc3f0769fd63fabc226c77149e7797d1ea67362e9ad581ceff3cdfe2949698798d2deefb223c05bdfed1e465b5d92298d48cf3e5
+  languageName: node
+  linkType: hard
+
 "@redux-devtools/extension@npm:^3.2.5":
   version: 3.2.5
   resolution: "@redux-devtools/extension@npm:3.2.5"