refactor(core): refactor left sidebar to use di (#8385)

toeverything · Sep 27, 2024 · a3f8e6c · a3f8e6c
1 parent 0f9fac4
commit a3f8e6c
Show file tree

Hide file tree

Showing 54 changed files with 315 additions and 179 deletions.
diff --git a/packages/frontend/component/src/components/resize-panel/resize-panel.tsx b/packages/frontend/component/src/components/resize-panel/resize-panel.tsx
@@ -1,4 +1,3 @@
-import { assertExists } from '@blocksuite/affine/global/utils';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import {
@@ -60,48 +59,53 @@ const ResizeHandle = ({
   ...rest
 }: ResizeHandleProps) => {
   const ref = useRef<HTMLDivElement>(null);
-  const onResizeStart = useCallback(() => {
-    let resized = false;
-    const panelContainer = ref.current?.parentElement;
-    assertExists(
-      panelContainer,
-      'parent element not found for resize indicator'
-    );
+  const onResizeStart = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      let resized = false;
+      const panelContainer = ref.current?.parentElement;
+      if (!panelContainer) return;
 
-    const { left: anchorLeft, right: anchorRight } =
-      panelContainer.getBoundingClientRect();
+      // add cursor style to body
+      document.body.style.cursor = 'col-resize';
 
-    function onMouseMove(e: MouseEvent) {
-      e.preventDefault();
-      if (!panelContainer) return;
-      const newWidth = Math.min(
-        maxWidth,
-        Math.max(
-          resizeHandlePos === 'right'
-            ? e.clientX - anchorLeft
-            : anchorRight - e.clientX,
-          minWidth
-        )
-      );
-      onWidthChange(newWidth);
-      onResizing(true);
-      resized = true;
-    }
+      const { left: anchorLeft, right: anchorRight } =
+        panelContainer.getBoundingClientRect();
 
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener(
-      'mouseup',
-      () => {
-        // if not resized, toggle sidebar
-        if (!resized) {
-          onOpen(false);
-        }
-        onResizing(false);
-        document.removeEventListener('mousemove', onMouseMove);
-      },
-      { once: true }
-    );
-  }, [maxWidth, resizeHandlePos, minWidth, onWidthChange, onResizing, onOpen]);
+      function onMouseMove(e: MouseEvent) {
+        e.preventDefault();
+        if (!panelContainer) return;
+        const newWidth = Math.min(
+          maxWidth,
+          Math.max(
+            resizeHandlePos === 'right'
+              ? e.clientX - anchorLeft
+              : anchorRight - e.clientX,
+            minWidth
+          )
+        );
+        onWidthChange(newWidth);
+        onResizing(true);
+        resized = true;
+      }
+
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener(
+        'mouseup',
+        () => {
+          // if not resized, toggle sidebar
+          if (!resized) {
+            onOpen(false);
+          }
+          onResizing(false);
+          document.removeEventListener('mousemove', onMouseMove);
+          document.body.style.cursor = '';
+        },
+        { once: true }
+      );
+    },
+    [maxWidth, resizeHandlePos, minWidth, onWidthChange, onResizing, onOpen]
+  );
 
   return (
     <div

diff --git a/packages/frontend/core/src/commands/affine-layout.tsx b/packages/frontend/core/src/commands/affine-layout.tsx
@@ -1,17 +1,16 @@
 import type { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import { SidebarIcon } from '@blocksuite/icons/rc';
-import type { createStore } from 'jotai';
 
-import { appSidebarOpenAtom } from '../components/app-sidebar';
+import type { AppSidebarService } from '../modules/app-sidebar';
 import { registerAffineCommand } from './registry';
 
 export function registerAffineLayoutCommands({
   t,
-  store,
+  appSidebarService,
 }: {
   t: ReturnType<typeof useI18n>;
-  store: ReturnType<typeof createStore>;
+  appSidebarService: AppSidebarService;
 }) {
   const unsubs: Array<() => void> = [];
   unsubs.push(
@@ -20,7 +19,7 @@ export function registerAffineLayoutCommands({
       category: 'affine:layout',
       icon: <SidebarIcon />,
       label: () =>
-        store.get(appSidebarOpenAtom)
+        appSidebarService.sidebar.open$.value
           ? t['com.affine.cmdk.affine.left-sidebar.collapse']()
           : t['com.affine.cmdk.affine.left-sidebar.expand'](),
 
@@ -29,8 +28,7 @@ export function registerAffineLayoutCommands({
       },
       run() {
         track.$.navigationPanel.$.toggle();
-
-        store.set(appSidebarOpenAtom, v => !v);
+        appSidebarService.sidebar.toggleSidebar();
       },
     })
   );

diff --git a/packages/frontend/core/src/components/affine/app-container.tsx b/packages/frontend/core/src/components/affine/app-container.tsx
@@ -1,8 +1,11 @@
+import {
+  AppSidebarFallback,
+  ShellAppSidebarFallback,
+} from '@affine/core/modules/app-sidebar/views';
 import clsx from 'clsx';
 import type { PropsWithChildren, ReactElement } from 'react';
 
 import { useAppSettingHelper } from '../../components/hooks/affine/use-app-setting-helper';
-import { AppSidebarFallback, ShellAppSidebarFallback } from '../app-sidebar';
 import type { WorkspaceRootProps } from '../workspace';
 import {
   AppContainer as AppContainerWithoutSettings,

diff --git a/packages/frontend/core/src/components/app-sidebar/index.jotai.ts b/packages/frontend/core/src/components/app-sidebar/index.jotai.ts
diff --git a/packages/frontend/core/src/components/hooks/affine/use-sidebar-status.ts b/packages/frontend/core/src/components/hooks/affine/use-sidebar-status.ts
diff --git a/packages/frontend/core/src/components/hooks/use-register-workspace-commands.ts b/packages/frontend/core/src/components/hooks/use-register-workspace-commands.ts
@@ -1,3 +1,4 @@
+import { AppSidebarService } from '@affine/core/modules/app-sidebar';
 import { useI18n } from '@affine/i18n';
 import type { AffineEditorContainer } from '@blocksuite/affine/presets';
 import { useService, WorkspaceService } from '@toeverything/infra';
@@ -71,6 +72,7 @@ export function useRegisterWorkspaceCommands() {
   const cmdkQuickSearchService = useService(CMDKQuickSearchService);
   const editorSettingService = useService(EditorSettingService);
   const createWorkspaceDialogService = useService(CreateWorkspaceDialogService);
+  const appSidebarService = useService(AppSidebarService);
 
   useEffect(() => {
     const unsub = registerCMDKCommand(cmdkQuickSearchService, editor);
@@ -123,12 +125,12 @@ export function useRegisterWorkspaceCommands() {
 
   // register AffineLayoutCommands
   useEffect(() => {
-    const unsub = registerAffineLayoutCommands({ t, store });
+    const unsub = registerAffineLayoutCommands({ t, appSidebarService });
 
     return () => {
       unsub();
     };
-  }, [store, t]);
+  }, [appSidebarService, store, t]);
 
   // register AffineCreationCommands
   useEffect(() => {

diff --git a/packages/frontend/core/src/components/layouts/workspace-layout.tsx b/packages/frontend/core/src/components/layouts/workspace-layout.tsx
@@ -3,6 +3,7 @@ import {
   pushGlobalLoadingEventAtom,
   resolveGlobalLoadingEventAtom,
 } from '@affine/component/global-loading';
+import { SidebarSwitch } from '@affine/core/modules/app-sidebar/views';
 import { useI18n } from '@affine/i18n';
 import { type DocMode, ZipTransformer } from '@blocksuite/affine/blocks';
 import {
@@ -17,7 +18,7 @@ import {
   useServices,
   WorkspaceService,
 } from '@toeverything/infra';
-import { useAtomValue, useSetAtom } from 'jotai';
+import { useSetAtom } from 'jotai';
 import type { PropsWithChildren } from 'react';
 import { useEffect } from 'react';
 import {
@@ -40,7 +41,6 @@ import { WorkbenchService } from '../../modules/workbench';
 import { WorkspaceAIOnboarding } from '../affine/ai-onboarding';
 import { AppContainer } from '../affine/app-container';
 import { SyncAwareness } from '../affine/awareness';
-import { appSidebarResizingAtom, SidebarSwitch } from '../app-sidebar';
 import { useRegisterFindInPageCommands } from '../hooks/affine/use-register-find-in-page-commands';
 import { useSubscriptionNotifyReader } from '../hooks/affine/use-subscription-notify';
 import { useRegisterWorkspaceCommands } from '../hooks/use-register-workspace-commands';
@@ -221,10 +221,8 @@ const WorkspaceLayoutUIContainer = ({ children }: PropsWithChildren) => {
     })
   );
 
-  const resizing = useAtomValue(appSidebarResizingAtom);
-
   return (
-    <AppContainer data-current-path={currentPath} resizing={resizing}>
+    <AppContainer data-current-path={currentPath}>
       <LayoutComponent>{children}</LayoutComponent>
     </AppContainer>
   );

diff --git a/packages/frontend/core/src/components/pure/header/index.tsx b/packages/frontend/core/src/components/pure/header/index.tsx
@@ -1,8 +1,8 @@
+import { AppSidebarService } from '@affine/core/modules/app-sidebar';
+import { useLiveData, useService } from '@toeverything/infra';
 import clsx from 'clsx';
-import { useAtomValue } from 'jotai';
 import type { ReactNode } from 'react';
 
-import { appSidebarFloatingAtom, appSidebarOpenAtom } from '../../app-sidebar';
 import * as style from './style.css';
 
 interface HeaderPros {
@@ -16,8 +16,9 @@ interface HeaderPros {
 // 1. Manage layout issues independently of page or business logic
 // 2. Dynamic centered middle element (relative to the main-container), when the middle element is detected to collide with the two elements, the line wrapping process is performed
 export const Header = ({ left, center, right }: HeaderPros) => {
-  const open = useAtomValue(appSidebarOpenAtom);
-  const appSidebarFloating = useAtomValue(appSidebarFloatingAtom);
+  const appSidebarService = useService(AppSidebarService).sidebar;
+  const open = useLiveData(appSidebarService.open$);
+  const appSidebarFloating = useLiveData(appSidebarService.responsiveFloating$);
   return (
     <div
       className={clsx(style.header)}

diff --git a/packages/frontend/core/src/components/root-app-sidebar/import-page.tsx b/packages/frontend/core/src/components/root-app-sidebar/import-page.tsx
@@ -1,10 +1,10 @@
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
+import { MenuItem } from '@affine/core/modules/app-sidebar/views';
 import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import type { DocCollection } from '@blocksuite/affine/store';
 import { ImportIcon } from '@blocksuite/icons/rc';
 
-import { MenuItem } from '../app-sidebar';
 import { usePageHelper } from '../blocksuite/block-suite-page-list/utils';
 
 const ImportPage = ({ docCollection }: { docCollection: DocCollection }) => {

diff --git a/packages/frontend/core/src/components/root-app-sidebar/index.tsx b/packages/frontend/core/src/components/root-app-sidebar/index.tsx
@@ -1,5 +1,17 @@
 import { openSettingModalAtom } from '@affine/core/components/atoms';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
+import {
+  AddPageButton,
+  AppDownloadButton,
+  AppSidebar,
+  CategoryDivider,
+  MenuItem,
+  MenuLinkItem,
+  QuickSearchInput,
+  SidebarContainer,
+  SidebarScrollableContainer,
+} from '@affine/core/modules/app-sidebar/views';
+import { ExternalMenuLinkItem } from '@affine/core/modules/app-sidebar/views/menu-item/external-menu-link-item';
 import {
   ExplorerCollections,
   ExplorerFavorites,
@@ -30,18 +42,6 @@ import type { MouseEvent, ReactElement } from 'react';
 import { useCallback, useEffect } from 'react';
 
 import { WorkbenchService } from '../../modules/workbench';
-import {
-  AddPageButton,
-  AppDownloadButton,
-  AppSidebar,
-  CategoryDivider,
-  MenuItem,
-  MenuLinkItem,
-  QuickSearchInput,
-  SidebarContainer,
-  SidebarScrollableContainer,
-} from '../app-sidebar';
-import { ExternalMenuLinkItem } from '../app-sidebar/menu-item/external-menu-link-item';
 import { usePageHelper } from '../blocksuite/block-suite-page-list/utils';
 import { WorkspaceNavigator } from '../workspace-selector';
 import ImportPage from './import-page';

diff --git a/packages/frontend/core/src/components/root-app-sidebar/journal-button.tsx b/packages/frontend/core/src/components/root-app-sidebar/journal-button.tsx
@@ -3,6 +3,7 @@ import {
   useJournalInfoHelper,
   useJournalRouteHelper,
 } from '@affine/core/components/hooks/use-journal';
+import { MenuItem } from '@affine/core/modules/app-sidebar/views';
 import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
 import { WorkbenchService } from '@affine/core/modules/workbench';
 import { isNewTabTrigger } from '@affine/core/utils';
@@ -12,8 +13,6 @@ import { TodayIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import { type MouseEvent } from 'react';
 
-import { MenuItem } from '../app-sidebar';
-
 interface AppSidebarJournalButtonProps {
   docCollection: DocCollection;
 }

diff --git a/packages/frontend/core/src/components/root-app-sidebar/trash-button.tsx b/packages/frontend/core/src/components/root-app-sidebar/trash-button.tsx
@@ -3,6 +3,7 @@ import {
   useConfirmModal,
   useDropTarget,
 } from '@affine/component';
+import { MenuLinkItem } from '@affine/core/modules/app-sidebar/views';
 import type { AffineDNDData } from '@affine/core/types/dnd';
 import { useI18n } from '@affine/i18n';
 import {
@@ -12,8 +13,6 @@ import {
   useService,
 } from '@toeverything/infra';
 
-import { MenuLinkItem } from '../app-sidebar';
-
 export const TrashButton = () => {
   const t = useI18n();
   const docsService = useService(DocsService);

diff --git a/packages/frontend/core/src/components/root-app-sidebar/updater-button.tsx b/packages/frontend/core/src/components/root-app-sidebar/updater-button.tsx
@@ -1,8 +1,7 @@
 import { useAppUpdater } from '@affine/core/components/hooks/use-app-updater';
+import { AppUpdaterButton } from '@affine/core/modules/app-sidebar/views';
 import { Suspense } from 'react';
 
-import { AppUpdaterButton } from '../app-sidebar';
-
 const UpdaterButtonInner = () => {
   const appUpdater = useAppUpdater();
 

diff --git a/packages/frontend/core/src/components/workspace/index.css.ts b/packages/frontend/core/src/components/workspace/index.css.ts
@@ -9,9 +9,6 @@ export const appStyle = style({
   display: 'flex',
   backgroundColor: cssVar('backgroundPrimaryColor'),
   selectors: {
-    '&[data-is-resizing="true"]': {
-      cursor: 'col-resize',
-    },
     '&.blur-background': {
       backgroundColor: 'transparent',
     },