refactor(core): new back&forward button base on workbench (#6012)

# feature:

## In Browser:
- hidden back&forward button in sidebar.
- back and forward is equal with `window.history.back()` `window.history.forward()`

## In Desktop:
- Back and forward can be controlled through the sidebar, cmdk, and shortcut keys.
- back and forward act on the currently **active** view.
- buttons change disable&enable style based on current active view history

# Refactor:

Move app-sidebar and app-container from @affine/component to @affine/core

packages/frontend/core/src/pages/index.tsx

@@ -1,5 +1,4 @@
 import { Menu } from '@affine/component/ui/menu';
-import { WorkspaceFallback } from '@affine/component/workspace';
 import { WorkspaceManager } from '@toeverything/infra';
 import { WorkspaceListService } from '@toeverything/infra';
 import { useService } from '@toeverything/infra';
@@ -9,6 +8,7 @@ import { type LoaderFunction, redirect } from 'react-router-dom';
 
 import { createFirstAppData } from '../bootstrap/first-app-data';
 import { UserWithWorkspaceList } from '../components/pure/workspace-slider-bar/user-with-workspace-list';
+import { WorkspaceFallback } from '../components/workspace';
 import { appConfigStorage } from '../hooks/use-app-config-storage';
 import { useNavigateHelper } from '../hooks/use-navigate-helper';
 import { WorkspaceSubPath } from '../shared';

packages/frontend/core/src/pages/share/share-detail-page.tsx

@@ -1,5 +1,4 @@
 import { Scrollable } from '@affine/component';
-import { MainContainer } from '@affine/component/workspace';
 import { useCurrentLoginStatus } from '@affine/core/hooks/affine/use-current-login-status';
 import { usePageDocumentTitle } from '@affine/core/hooks/use-global-state';
 import { WorkspaceFlavour } from '@affine/env/workspace';
@@ -39,6 +38,7 @@ import {
 import { AppContainer } from '../../components/affine/app-container';
 import { PageDetailEditor } from '../../components/page-detail-editor';
 import { SharePageNotFoundError } from '../../components/share-page-not-found-error';
+import { MainContainer } from '../../components/workspace';
 import { CurrentWorkspaceService } from '../../modules/workspace';
 import * as styles from './share-detail-page.css';
 import { ShareFooter } from './share-footer';

packages/frontend/core/src/pages/workspace/all-collection/index.css.ts

@@ -0,0 +1,9 @@
+import { style } from '@vanilla-extract/css';
+
+export const body = style({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  height: '100%',
+  width: '100%',
+});

packages/frontend/core/src/pages/workspace/all-collection/index.tsx

@@ -18,6 +18,7 @@ import { CollectionService } from '../../../modules/collection';
 import { ViewBodyIsland, ViewHeaderIsland } from '../../../modules/workbench';
 import { EmptyCollectionList } from '../page-list-empty';
 import { AllCollectionHeader } from './header';
+import * as styles from './index.css';
 
 export const AllCollection = () => {
   const t = useAFFiNEI18N();
@@ -65,25 +66,27 @@ export const AllCollection = () => {
         />
       </ViewHeaderIsland>
       <ViewBodyIsland>
-        {collectionMetas.length > 0 ? (
-          <VirtualizedCollectionList
-            collections={collections}
-            collectionMetas={collectionMetas}
-            setHideHeaderCreateNewCollection={setHideHeaderCreateNew}
-            node={node}
-            config={config}
-            handleCreateCollection={handleCreateCollection}
-          />
-        ) : (
-          <EmptyCollectionList
-            heading={
-              <CollectionListHeader
-                node={node}
-                onCreate={handleCreateCollection}
-              />
-            }
-          />
-        )}
+        <div className={styles.body}>
+          {collectionMetas.length > 0 ? (
+            <VirtualizedCollectionList
+              collections={collections}
+              collectionMetas={collectionMetas}
+              setHideHeaderCreateNewCollection={setHideHeaderCreateNew}
+              node={node}
+              config={config}
+              handleCreateCollection={handleCreateCollection}
+            />
+          ) : (
+            <EmptyCollectionList
+              heading={
+                <CollectionListHeader
+                  node={node}
+                  onCreate={handleCreateCollection}
+                />
+              }
+            />
+          )}
+        </div>
       </ViewBodyIsland>
     </>
   );

packages/frontend/core/src/pages/workspace/detail-page/detail-page-header.tsx

@@ -1,5 +1,4 @@
 import type { InlineEditHandle } from '@affine/component';
-import { appSidebarFloatingAtom } from '@affine/component/app-sidebar';
 import { FavoriteButton } from '@affine/core/components/blocksuite/block-suite-header/favorite';
 import { JournalWeekDatePicker } from '@affine/core/components/blocksuite/block-suite-header/journal/date-picker';
 import { JournalTodayButton } from '@affine/core/components/blocksuite/block-suite-header/journal/today-button';
@@ -12,6 +11,7 @@ import { useAtomValue } from 'jotai';
 import { useCallback, useRef } from 'react';
 
 import { SharePageButton } from '../../../components/affine/share-page-modal';
+import { appSidebarFloatingAtom } from '../../../components/app-sidebar';
 import { BlocksuiteHeaderTitle } from '../../../components/blocksuite/block-suite-header/title/index';
 import { HeaderDivider } from '../../../components/pure/header';
 import * as styles from './detail-page-header.css';

packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx

@@ -28,6 +28,7 @@ import {
   type ReactElement,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useState,
 } from 'react';
@@ -269,7 +270,7 @@ export const DetailPage = ({ pageId }: { pageId: string }): ReactElement => {
 
   const [page, setPage] = useState<Doc | null>(null);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!pageRecord) {
       return;
     }

packages/frontend/core/src/pages/workspace/index.tsx

@@ -1,4 +1,3 @@
-import { WorkspaceFallback } from '@affine/component/workspace';
 import { useWorkspace } from '@affine/core/hooks/use-workspace';
 import {
   Workspace,
@@ -22,6 +21,7 @@ import { useParams } from 'react-router-dom';
 
 import { AffineErrorBoundary } from '../../components/affine/affine-error-boundary';
 import { HubIsland } from '../../components/affine/hub-island';
+import { WorkspaceFallback } from '../../components/workspace';
 import { WorkspaceLayout } from '../../layouts/workspace-layout';
 import { RightSidebarContainer } from '../../modules/right-sidebar';
 import { WorkbenchRoot } from '../../modules/workbench';