fix(core): restore lost activation state of sidebar menu items (#6520)

https://github.com/toeverything/AFFiNE/assets/102217452/41a53a43-e17d-41b5-b8e5-2ca42bcfae0a

packages/frontend/core/src/components/pure/workspace-slider-bar/collections/page.tsx

@@ -1,12 +1,12 @@
 import { useBlockSuitePageReferences } from '@affine/core/hooks/use-block-suite-page-references';
+import { Workbench } from '@affine/core/modules/workbench';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
 import type { DocCollection, DocMeta } from '@blocksuite/store';
 import { useDraggable } from '@dnd-kit/core';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { PageRecordList, useLiveData, useService } from '@toeverything/infra';
 import React, { useCallback, useMemo } from 'react';
-import { useParams } from 'react-router-dom';
 
 import {
   type DNDIdentifier,
@@ -35,12 +35,13 @@ export const Page = ({
   allPageMeta: Record<string, DocMeta>;
 }) => {
   const [collapsed, setCollapsed] = React.useState(true);
-  const params = useParams();
+  const workbench = useService(Workbench);
+  const location = useLiveData(workbench.location$);
 
   const t = useAFFiNEI18N();
 
   const pageId = page.id;
-  const active = params.pageId === pageId;
+  const active = location.pathname === '/' + pageId;
   const pageRecord = useLiveData(useService(PageRecordList).record$(pageId));
   const pageMode = useLiveData(pageRecord?.mode$);
   const dragItemId = getDNDId('collection-list', 'doc', pageId, parentId);

packages/frontend/core/src/components/pure/workspace-slider-bar/components/reference-page.tsx

@@ -1,11 +1,11 @@
 import { useBlockSuitePageReferences } from '@affine/core/hooks/use-block-suite-page-references';
+import { Workbench } from '@affine/core/modules/workbench';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
 import type { DocCollection, DocMeta } from '@blocksuite/store';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { PageRecordList, useLiveData, useService } from '@toeverything/infra';
 import { useMemo, useState } from 'react';
-import { useParams } from 'react-router-dom';
 
 import { MenuLinkItem } from '../../../app-sidebar';
 import * as styles from '../favorite/styles.css';
@@ -24,8 +24,9 @@ export const ReferencePage = ({
   parentIds,
 }: ReferencePageProps) => {
   const t = useAFFiNEI18N();
-  const params = useParams();
-  const active = params.pageId === pageId;
+  const workbench = useService(Workbench);
+  const location = useLiveData(workbench.location$);
+  const active = location.pathname === '/' + pageId;
 
   const pageRecord = useLiveData(useService(PageRecordList).record$(pageId));
   const pageMode = useLiveData(pageRecord?.mode$);

packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/favourite-nav-item.tsx

@@ -3,14 +3,14 @@ import {
   parseDNDId,
 } from '@affine/core/hooks/affine/use-global-dnd-helper';
 import { useBlockSuitePageReferences } from '@affine/core/hooks/use-block-suite-page-references';
+import { Workbench } from '@affine/core/modules/workbench';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
 import { type AnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { PageRecordList, useLiveData, useService } from '@toeverything/infra';
 import { useMemo, useState } from 'react';
-import { useParams } from 'react-router-dom';
 
 import { MenuLinkItem } from '../../../app-sidebar';
 import { DragMenuItemOverlay } from '../components/drag-menu-item-overlay';
@@ -33,8 +33,9 @@ export const FavouriteDocSidebarNavItem = ({
   sortable?: boolean;
 }) => {
   const t = useAFFiNEI18N();
-  const params = useParams();
-  const linkActive = params.pageId === pageId;
+  const workbench = useService(Workbench);
+  const location = useLiveData(workbench.location$);
+  const linkActive = location.pathname === '/' + pageId;
   const pageRecord = useLiveData(useService(PageRecordList).record$(pageId));
   const pageMode = useLiveData(pageRecord?.mode$);
 

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

@@ -2,11 +2,11 @@ import {
   useJournalInfoHelper,
   useJournalRouteHelper,
 } from '@affine/core/hooks/use-journal';
+import { Workbench } from '@affine/core/modules/workbench';
 import type { DocCollection } from '@affine/core/shared';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { TodayIcon, TomorrowIcon, YesterdayIcon } from '@blocksuite/icons';
-import { Doc, useServiceOptional } from '@toeverything/infra';
-import { useParams } from 'react-router-dom';
+import { useLiveData, useService } from '@toeverything/infra';
 
 import { MenuItem } from '../app-sidebar';
 
@@ -18,17 +18,16 @@ export const AppSidebarJournalButton = ({
   docCollection,
 }: AppSidebarJournalButtonProps) => {
   const t = useAFFiNEI18N();
-  const currentPage = useServiceOptional(Doc);
+  const workbench = useService(Workbench);
+  const location = useLiveData(workbench.location$);
   const { openToday } = useJournalRouteHelper(docCollection);
   const { journalDate, isJournal } = useJournalInfoHelper(
     docCollection,
-    currentPage?.id
+    location.pathname.split('/')[1]
   );
-  const params = useParams();
-  const isJournalActive = isJournal && !!params.pageId;
 
   const Icon =
-    isJournalActive && journalDate
+    isJournal && journalDate
       ? journalDate.isBefore(new Date(), 'day')
         ? YesterdayIcon
         : journalDate.isAfter(new Date(), 'day')
@@ -39,7 +38,7 @@ export const AppSidebarJournalButton = ({
   return (
     <MenuItem
       data-testid="slider-bar-journals-button"
-      active={isJournalActive}
+      active={isJournal}
       onClick={openToday}
       icon={<Icon />}
     >