feat(component): support sort workspace card (#1837)

apps/web/src/components/pure/workspace-list-modal/index.tsx

@@ -4,10 +4,12 @@ import {
   ModalWrapper,
   Tooltip,
 } from '@affine/component';
-import { WorkspaceCard } from '@affine/component/workspace-card';
+import { WorkspaceList } from '@affine/component/workspace-list';
 import { useTranslation } from '@affine/i18n';
 import type { AccessTokenMessage } from '@affine/workspace/affine/login';
 import { HelpIcon, PlusIcon } from '@blocksuite/icons';
+import type { DragEndEvent } from '@dnd-kit/core';
+import { useCallback } from 'react';
 
 import type { AllWorkspace } from '../../../shared';
 import { Footer } from '../footer';
@@ -37,6 +39,7 @@ interface WorkspaceModalProps {
   onClickLogin: () => void;
   onClickLogout: () => void;
   onCreateWorkspace: () => void;
+  onMoveWorkspace: (activeId: string, overId: string) => void;
 }
 
 export const WorkspaceListModal = ({
@@ -50,6 +53,7 @@ export const WorkspaceListModal = ({
   onClickWorkspaceSetting,
   onCreateWorkspace,
   currentWorkspaceId,
+  onMoveWorkspace,
 }: WorkspaceModalProps) => {
   const { t } = useTranslation();
 
@@ -91,18 +95,21 @@ export const WorkspaceListModal = ({
         </StyledModalHeader>
 
         <StyledModalContent>
-          {workspaces.map(workspace => {
-            return (
-              <WorkspaceCard
-                workspace={workspace}
-                currentWorkspaceId={currentWorkspaceId}
-                onClick={onClickWorkspace}
-                onSettingClick={onClickWorkspaceSetting}
-                key={workspace.id}
-              />
-            );
-          })}
-
+          <WorkspaceList
+            items={workspaces}
+            currentWorkspaceId={currentWorkspaceId}
+            onClick={onClickWorkspace}
+            onSettingClick={onClickWorkspaceSetting}
+            onDragEnd={useCallback(
+              (event: DragEndEvent) => {
+                const { active, over } = event;
+                if (active.id !== over?.id) {
+                  onMoveWorkspace(active.id as string, over?.id as string);
+                }
+              },
+              [onMoveWorkspace]
+            )}
+          />
           <StyledCreateWorkspaceCard
             data-testid="new-workspace"
             onClick={onCreateWorkspace}

apps/web/src/layouts/index.tsx

@@ -2,7 +2,7 @@ import { DebugLogger } from '@affine/debug';
 import { config } from '@affine/env';
 import { setUpLanguage, useTranslation } from '@affine/i18n';
 import { createAffineGlobalChannel } from '@affine/workspace/affine/sync';
-import { jotaiWorkspacesAtom } from '@affine/workspace/atom';
+import { jotaiStore, jotaiWorkspacesAtom } from '@affine/workspace/atom';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { assertExists, nanoid } from '@blocksuite/store';
 import { NoSsr } from '@mui/material';
@@ -122,6 +122,8 @@ export const WorkspaceLayout: FC<PropsWithChildren> =
       setUpLanguage(i18n);
     }, [i18n]);
     useCreateFirstWorkspace();
+    const currentWorkspaceId = useAtomValue(currentWorkspaceIdAtom);
+    const jotaiWorkspaces = useAtomValue(jotaiWorkspacesAtom);
     const set = useSetAtom(jotaiWorkspacesAtom);
     useEffect(() => {
       logger.info('mount');
@@ -131,10 +133,19 @@ export const WorkspaceLayout: FC<PropsWithChildren> =
         .map(({ CRUD }) => CRUD.list);
 
       async function fetch() {
+        const jotaiWorkspaces = jotaiStore.get(jotaiWorkspacesAtom);
         const items = [];
         for (const list of lists) {
           try {
             const item = await list();
+            if (jotaiWorkspaces.length) {
+              item.sort((a, b) => {
+                return (
+                  jotaiWorkspaces.findIndex(x => x.id === a.id) -
+                  jotaiWorkspaces.findIndex(x => x.id === b.id)
+                );
+              });
+            }
             items.push(...item.map(x => ({ id: x.id, flavour: x.flavour })));
           } catch (e) {
             logger.error('list data error:', e);
@@ -153,8 +164,6 @@ export const WorkspaceLayout: FC<PropsWithChildren> =
         logger.info('unmount');
       };
     }, [set]);
-    const currentWorkspaceId = useAtomValue(currentWorkspaceIdAtom);
-    const jotaiWorkspaces = useAtomValue(jotaiWorkspacesAtom);
 
     useEffect(() => {
       const flavour = jotaiWorkspaces.find(

apps/web/src/providers/ModalProvider.tsx

@@ -1,4 +1,6 @@
-import { useAtom, useAtomValue } from 'jotai';
+import { jotaiWorkspacesAtom } from '@affine/workspace/atom';
+import { arrayMove } from '@dnd-kit/sortable';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import type React from 'react';
@@ -39,6 +41,7 @@ export function Modals() {
   const { jumpToSubPath } = useRouterHelper(router);
   const user = useCurrentUser();
   const workspaces = useWorkspaces();
+  const setWorkspaces = useSetAtom(jotaiWorkspacesAtom);
   const currentWorkspaceId = useAtomValue(currentWorkspaceIdAtom);
   const [, setCurrentWorkspace] = useCurrentWorkspace();
   const { createLocalWorkspace } = useWorkspacesHelper();
@@ -53,6 +56,16 @@ export function Modals() {
         onClose={useCallback(() => {
           setOpenWorkspacesModal(false);
         }, [setOpenWorkspacesModal])}
+        onMoveWorkspace={useCallback(
+          (activeId, overId) => {
+            const oldIndex = workspaces.findIndex(w => w.id === activeId);
+            const newIndex = workspaces.findIndex(w => w.id === overId);
+            setWorkspaces(workspaces =>
+              arrayMove(workspaces, oldIndex, newIndex)
+            );
+          },
+          [setWorkspaces, workspaces]
+        )}
         onClickWorkspace={useCallback(
           workspace => {
             setOpenWorkspacesModal(false);