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
       >
-        <SidebarSwitch
-          visible={!open}
-          tooltipContent={t('Expand sidebar')}
-          testid="sliderBar-arrowButton-expand"
-        />
+        <Suspense>
+          <SidebarSwitch
+            visible={!open}
+            tooltipContent={t('Expand sidebar')}
+            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 />
-            <SidebarSwitch
-              visible={sidebarOpen}
-              tooltipContent={t('Collapse sidebar')}
-              testid="sliderBar-arrowButton-collapse"
-            />
+            <Suspense>
+              <SidebarSwitch
+                visible={sidebarOpen}
+                tooltipContent={t('Collapse sidebar')}
+                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 { useMediaQuery, useTheme } from '@mui/material';
+import { 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 sideBarWidthAtom = atomWithSyncStorage('sidebarWidth', 256);
+const sideBarOpenAtom = atomWithStorage('sidebarOpen', true);
+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() {