feat(core): allow switch workspace in loading fallback (#6129)

packages/frontend/core/src/components/app-sidebar/index.tsx

@@ -1,10 +1,13 @@
 import { Skeleton } from '@affine/component';
 import { ResizePanel } from '@affine/component/resize-panel';
+import { Workspace } from '@toeverything/infra';
+import { useServiceOptional } from '@toeverything/infra/di';
 import { useAtom, useAtomValue } from 'jotai';
 import { debounce } from 'lodash-es';
 import type { PropsWithChildren, ReactElement } from 'react';
 import { useEffect } from 'react';
 
+import { WorkspaceSelector } from '../workspace-selector';
 import { fallbackHeaderStyle, fallbackStyle } from './fallback.css';
 import {
   floatingMaxWidth,
@@ -113,6 +116,8 @@ export function AppSidebar(props: AppSidebarProps): ReactElement {
 
 export const AppSidebarFallback = (): ReactElement | null => {
   const width = useAtomValue(appSidebarWidthAtom);
+
+  const currentWorkspace = useServiceOptional(Workspace);
   return (
     <div
       style={{ width }}
@@ -125,8 +130,14 @@ export const AppSidebarFallback = (): ReactElement | null => {
         <div className={navBodyStyle}>
           <div className={fallbackStyle}>
             <div className={fallbackHeaderStyle}>
-              <Skeleton variant="circular" width={40} height={40} />
-              <Skeleton variant="rectangular" width={150} height={40} />
+              {currentWorkspace ? (
+                <WorkspaceSelector />
+              ) : (
+                <>
+                  <Skeleton variant="circular" width={40} height={40} />
+                  <Skeleton variant="rectangular" width={150} height={40} />
+                </>
+              )}
             </div>
           </div>
         </div>

packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/styles.ts

@@ -7,6 +7,7 @@ export const StyledSelectorContainer = styled('div')({
   padding: '0 6px',
   borderRadius: '8px',
   outline: 'none',
+  width: '100%',
   color: 'var(--affine-text-primary-color)',
   ':hover': {
     cursor: 'pointer',

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -1,5 +1,4 @@
 import { AnimatedDeleteIcon } from '@affine/component';
-import { Menu } from '@affine/component/ui/menu';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { CollectionService } from '@affine/core/modules/collection';
 import { apis, events } from '@affine/electron-api';
@@ -8,12 +7,11 @@ import { FolderIcon, SettingsIcon } from '@blocksuite/icons';
 import { type Doc } from '@blocksuite/store';
 import { useDroppable } from '@dnd-kit/core';
 import { useLiveData, useService, type Workspace } from '@toeverything/infra';
-import { useAtom, useAtomValue } from 'jotai';
+import { useAtomValue } from 'jotai';
 import { nanoid } from 'nanoid';
 import type { HTMLAttributes, ReactElement } from 'react';
-import { forwardRef, Suspense, useCallback, useEffect } from 'react';
+import { forwardRef, useCallback, useEffect } from 'react';
 
-import { openWorkspaceListModalAtom } from '../../atoms';
 import { useAppSettingHelper } from '../../hooks/affine/use-app-setting-helper';
 import { useDeleteCollectionInfo } from '../../hooks/affine/use-delete-collection-info';
 import { getDropItemId } from '../../hooks/affine/use-sidebar-drag';
@@ -41,8 +39,7 @@ import { CollectionsList } from '../pure/workspace-slider-bar/collections';
 import { AddCollectionButton } from '../pure/workspace-slider-bar/collections/add-collection-button';
 import { AddFavouriteButton } from '../pure/workspace-slider-bar/favorite/add-favourite-button';
 import FavoriteList from '../pure/workspace-slider-bar/favorite/favorite-list';
-import { UserWithWorkspaceList } from '../pure/workspace-slider-bar/user-with-workspace-list';
-import { WorkspaceCard } from '../pure/workspace-slider-bar/workspace-card';
+import { WorkspaceSelector } from '../workspace-selector';
 import ImportPage from './import-page';
 import { AppSidebarJournalButton } from './journal-button';
 import { UpdaterButton } from './updater-button';
@@ -102,9 +99,6 @@ export const RootAppSidebar = ({
   const { appSettings } = useAppSettingHelper();
   const docCollection = currentWorkspace.docCollection;
   const t = useAFFiNEI18N();
-  const [openUserWorkspaceList, setOpenUserWorkspaceList] = useAtom(
-    openWorkspaceListModalAtom
-  );
   const currentPath = useLiveData(useService(Workbench).location).pathname;
 
   const onClickNewPage = useAsyncCallback(async () => {
@@ -149,10 +143,6 @@ export const RootAppSidebar = ({
   const trashDroppable = useDroppable({
     id: dropItemId,
   });
-  const closeUserWorkspaceList = useCallback(() => {
-    setOpenUserWorkspaceList(false);
-  }, [setOpenUserWorkspaceList]);
-  const userInfo = useDeleteCollectionInfo();
 
   const collection = useService(CollectionService);
   const { node, open } = useEditCollectionName({
@@ -170,6 +160,7 @@ export const RootAppSidebar = ({
         console.error(err);
       });
   }, [docCollection.id, collection, navigateHelper, open]);
+  const userInfo = useDeleteCollectionInfo();
 
   const allPageActive = currentPath === '/all';
 
@@ -188,31 +179,7 @@ export const RootAppSidebar = ({
         titles={deletePageTitles}
       />
       <SidebarContainer>
-        <Menu
-          rootOptions={{
-            open: openUserWorkspaceList,
-          }}
-          items={
-            <Suspense>
-              <UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} />
-            </Suspense>
-          }
-          contentOptions={{
-            // hide trigger
-            sideOffset: -58,
-            onInteractOutside: closeUserWorkspaceList,
-            onEscapeKeyDown: closeUserWorkspaceList,
-            style: {
-              width: '300px',
-            },
-          }}
-        >
-          <WorkspaceCard
-            onClick={useCallback(() => {
-              setOpenUserWorkspaceList(true);
-            }, [setOpenUserWorkspaceList])}
-          />
-        </Menu>
+        <WorkspaceSelector />
         <QuickSearchInput
           data-testid="slider-bar-quick-search-button"
           onClick={onOpenQuickSearchModal}

packages/frontend/core/src/components/workspace-selector/index.tsx

@@ -0,0 +1,43 @@
+import { Menu } from '@affine/component';
+import { useAtom } from 'jotai';
+import { Suspense, useCallback } from 'react';
+
+import { openWorkspaceListModalAtom } from '../../atoms';
+import { UserWithWorkspaceList } from '../pure/workspace-slider-bar/user-with-workspace-list';
+import { WorkspaceCard } from '../pure/workspace-slider-bar/workspace-card';
+
+export const WorkspaceSelector = () => {
+  const [isUserWorkspaceListOpened, setOpenUserWorkspaceList] = useAtom(
+    openWorkspaceListModalAtom
+  );
+  const closeUserWorkspaceList = useCallback(() => {
+    setOpenUserWorkspaceList(false);
+  }, [setOpenUserWorkspaceList]);
+  const openUserWorkspaceList = useCallback(() => {
+    setOpenUserWorkspaceList(true);
+  }, [setOpenUserWorkspaceList]);
+
+  return (
+    <Menu
+      rootOptions={{
+        open: isUserWorkspaceListOpened,
+      }}
+      items={
+        <Suspense>
+          <UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} />
+        </Suspense>
+      }
+      contentOptions={{
+        // hide trigger
+        sideOffset: -58,
+        onInteractOutside: closeUserWorkspaceList,
+        onEscapeKeyDown: closeUserWorkspaceList,
+        style: {
+          width: '300px',
+        },
+      }}
+    >
+      <WorkspaceCard onClick={openUserWorkspaceList} />
+    </Menu>
+  );
+};