refactor: move list or workspace to a new component

src/components/WorkspaceIcon/SortableWorkspaceSelector.tsx

@@ -2,7 +2,7 @@ import { useCallback, MouseEvent, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import WorkspaceSelector from './WorkspaceSelector';
+import { WorkspaceSelector } from './WorkspaceSelector';
 import { IWorkspace } from '@services/workspaces/interface';
 import { getWorkspaceMenuTemplate, openWorkspaceTagTiddler } from '@services/workspaces/getWorkspaceMenuTemplate';
 

src/components/WorkspaceIcon/SortableWorkspaceSelectorList.tsx

@@ -0,0 +1,56 @@
+import { DndContext, useSensor, useSensors, PointerSensor } from '@dnd-kit/core';
+import { SortableContext, arrayMove, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { IWorkspace, IWorkspaceWithMetadata } from '@services/workspaces/interface';
+import { SortableWorkspaceSelector } from './SortableWorkspaceSelector';
+
+export interface ISortableListProps {
+  sidebarShortcutHints: boolean;
+  workspacesList: IWorkspaceWithMetadata[];
+}
+
+export function SortableWorkspaceSelectorList({ workspacesList, sidebarShortcutHints }: ISortableListProps): JSX.Element {
+  const dndSensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+  );
+
+  const workspaceIDs = workspacesList?.map((workspace) => workspace.id) ?? [];
+
+  return (
+    <DndContext
+      sensors={dndSensors}
+      modifiers={[restrictToVerticalAxis]}
+      onDragEnd={async ({ active, over }) => {
+        if (over === null || active.id === over.id) return;
+        const oldIndex = workspaceIDs.indexOf(active.id);
+        const newIndex = workspaceIDs.indexOf(over.id);
+
+        const newWorkspacesList = arrayMove(workspacesList, oldIndex, newIndex);
+        const newWorkspaces: Record<string, IWorkspace> = {};
+        newWorkspacesList.forEach((workspace, index) => {
+          newWorkspaces[workspace.id] = workspace;
+          newWorkspaces[workspace.id].order = index;
+        });
+
+        await window.service.workspace.setWorkspaces(newWorkspaces);
+      }}>
+      <SortableContext items={workspaceIDs} strategy={verticalListSortingStrategy}>
+        {workspacesList
+          .sort((a, b) => a.order - b.order)
+          .map((workspace, index) => (
+            <SortableWorkspaceSelector
+              key={`item-${workspace.id}`}
+              index={index}
+              workspace={workspace}
+              showSidebarShortcutHints={sidebarShortcutHints}
+              workspaceCount={workspaceIDs.length}
+            />
+          ))}
+      </SortableContext>
+    </DndContext>
+  );
+}

src/components/WorkspaceIcon/WorkspaceSelector.tsx

@@ -39,7 +39,7 @@ const Root = styled.div<{ active?: boolean; hibernated?: boolean; workspaceClick
     `}
       box-sizing: border-box;
   border-left: ${({ workspaceCount }) => (workspaceCount > 1 ? '3px' : '0')} solid
-    ${({ active, theme }) => (active ? theme.palette.text.primary : 'transparent')};
+    ${({ active, theme }) => (active === true ? theme.palette.text.primary : 'transparent')};
   ${({ workspaceClickedLoading }) =>
     workspaceClickedLoading === true &&
     css`
@@ -134,10 +134,10 @@ interface Props {
   showSidebarShortcutHints?: boolean;
   transparentBackground?: boolean;
   workspaceClickedLoading?: boolean;
-  workspaceName?: string;
   workspaceCount?: number;
+  workspaceName?: string;
 }
-export default function WorkspaceSelector({
+export function WorkspaceSelector({
   active = false,
   badgeCount = 0,
   hibernated = false,

src/components/WorkspaceIcon/index.ts

@@ -0,0 +1,3 @@
+export * from './WorkspaceSelector';
+export * from './SortableWorkspaceSelector';
+export * from './SortableWorkspaceSelectorList';

src/pages/Main/index.tsx

@@ -2,9 +2,6 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import { useTranslation } from 'react-i18next';
 import { Helmet } from 'react-helmet';
-import { DndContext, useSensor, useSensors, PointerSensor } from '@dnd-kit/core';
-import { SortableContext, arrayMove, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 
 import SimpleBar from 'simplebar-react';
 import 'simplebar/dist/simplebar.min.css';
@@ -18,12 +15,10 @@ import { IUpdaterStatus } from '@services/updater/interface';
 import { usePromiseValue } from '@/helpers/useServiceValue';
 import { useUpdaterObservable } from '@services/updater/hooks';
 
-import WorkspaceSelector from './WorkspaceSelector';
 import FindInPage from '../../components/FindInPage';
 import { latestStableUpdateUrl } from '@/constants/urls';
 
-import { SortableWorkspaceSelector } from './SortableWorkspaceSelector';
-import { IWorkspace } from '@services/workspaces/interface';
+import { WorkspaceSelector, SortableWorkspaceSelectorList } from '@/components/WorkspaceIcon';
 import { useWorkspacesListObservable } from '@services/workspaces/hooks';
 import { usePreferenceObservable } from '@services/preferences/hooks';
 import { CommandPaletteIcon } from '@/components/icon/CommandPaletteSVG';
@@ -150,15 +145,6 @@ export default function Main(): JSX.Element {
   const preferences = usePreferenceObservable();
   const isFullScreen = usePromiseValue<boolean | undefined>(window.service.window.isFullScreen, false)!;
 
-  const dndSensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        distance: 5,
-      },
-    }),
-  );
-
-  const workspaceIDs = workspacesList?.map((workspace) => workspace.id) ?? [];
   const activeWorkspaceMetadata = workspacesList
     ?.map((workspace) => ({ active: workspace.active, ...workspace.metadata }))
     ?.find((workspace) => workspace.active);
@@ -184,37 +170,7 @@ export default function Main(): JSX.Element {
               {workspacesList === undefined ? (
                 <div>{t('Loading')}</div>
               ) : (
-                <DndContext
-                  sensors={dndSensors}
-                  modifiers={[restrictToVerticalAxis]}
-                  onDragEnd={async ({ active, over }) => {
-                    if (over === null || active.id === over.id) return;
-                    const oldIndex = workspaceIDs.indexOf(active.id);
-                    const newIndex = workspaceIDs.indexOf(over.id);
-
-                    const newWorkspacesList = arrayMove(workspacesList, oldIndex, newIndex);
-                    const newWorkspaces: Record<string, IWorkspace> = {};
-                    newWorkspacesList.forEach((workspace, index) => {
-                      newWorkspaces[workspace.id] = workspace;
-                      newWorkspaces[workspace.id].order = index;
-                    });
-
-                    await window.service.workspace.setWorkspaces(newWorkspaces);
-                  }}>
-                  <SortableContext items={workspaceIDs} strategy={verticalListSortingStrategy}>
-                    {workspacesList
-                      .sort((a, b) => a.order - b.order)
-                      .map((workspace, index) => (
-                        <SortableWorkspaceSelector
-                          key={`item-${workspace.id}`}
-                          index={index}
-                          workspace={workspace}
-                          showSidebarShortcutHints={sidebarShortcutHints}
-                          workspaceCount={workspaceIDs.length}
-                        />
-                      ))}
-                  </SortableContext>
-                </DndContext>
+                <SortableWorkspaceSelectorList sidebarShortcutHints={sidebarShortcutHints} workspacesList={workspacesList} />
               )}
               <WorkspaceSelector
                 id="add"