feat(core): make some tabs in sidebar persistent for all docs page (#10014)

close AF-2164

![CleanShot 2025-02-07 at 14.23.36.gif](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/deb15a06-32e9-40bf-8a15-07a3c2fa8227.gif)

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

@@ -18,6 +18,7 @@ import { useCallback, useMemo, useState } from 'react';
 
 import { CollectionService } from '../../../../modules/collection';
 import { ViewBody, ViewHeader } from '../../../../modules/workbench';
+import { AllDocSidebarTabs } from '../layouts/all-doc-sidebar-tabs';
 import { EmptyCollectionList } from '../page-list-empty';
 import { AllCollectionHeader } from './header';
 import * as styles from './index.css';
@@ -102,6 +103,7 @@ export const AllCollection = () => {
           )}
         </div>
       </ViewBody>
+      <AllDocSidebarTabs />
     </>
   );
 };

packages/frontend/core/src/desktop/pages/workspace/all-page/all-page.tsx

@@ -19,6 +19,7 @@ import {
   ViewIcon,
   ViewTitle,
 } from '../../../../modules/workbench';
+import { AllDocSidebarTabs } from '../layouts/all-doc-sidebar-tabs';
 import { EmptyPageList } from '../page-list-empty';
 import * as styles from './all-page.css';
 import { FilterContainer } from './all-page-filter';
@@ -78,6 +79,7 @@ export const AllPage = () => {
           )}
         </div>
       </ViewBody>
+      <AllDocSidebarTabs />
     </>
   );
 };

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

@@ -16,6 +16,7 @@ import {
   ViewIcon,
   ViewTitle,
 } from '../../../../modules/workbench';
+import { AllDocSidebarTabs } from '../layouts/all-doc-sidebar-tabs';
 import { EmptyTagList } from '../page-list-empty';
 import * as styles from './all-tag.css';
 import { AllTagHeader } from './header';
@@ -72,6 +73,7 @@ export const AllTag = () => {
           )}
         </div>
       </ViewBody>
+      <AllDocSidebarTabs />
     </>
   );
 };

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

@@ -21,6 +21,7 @@ import {
   ViewIcon,
   ViewTitle,
 } from '../../../../modules/workbench';
+import { AllDocSidebarTabs } from '../layouts/all-doc-sidebar-tabs';
 import { CollectionDetailHeader } from './header';
 
 export const CollectionDetail = ({
@@ -123,6 +124,7 @@ export const Component = function CollectionPage() {
     <>
       <ViewIcon icon="collection" />
       <ViewTitle title={collection.name} />
+      <AllDocSidebarTabs />
       {inner}
     </>
   );

packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/journal/index.tsx

@@ -21,7 +21,11 @@ import { JournalService } from '@affine/core/modules/journal';
 import { WorkbenchLink } from '@affine/core/modules/workbench';
 import { useI18n } from '@affine/i18n';
 import { CalendarXmarkIcon, EditIcon } from '@blocksuite/icons/rc';
-import { useLiveData, useService } from '@toeverything/infra';
+import {
+  useLiveData,
+  useService,
+  useServiceOptional,
+} from '@toeverything/infra';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import dayjs from 'dayjs';
@@ -99,9 +103,11 @@ interface JournalBlockProps {
 const mobile = environment.isMobile;
 export const EditorJournalPanel = () => {
   const t = useI18n();
-  const doc = useService(DocService).doc;
+  const doc = useServiceOptional(DocService)?.doc;
   const journalService = useService(JournalService);
-  const journalDateStr = useLiveData(journalService.journalDate$(doc.id));
+  const journalDateStr = useLiveData(
+    doc ? journalService.journalDate$(doc.id) : null
+  );
   const journalDate = journalDateStr ? dayjs(journalDateStr) : null;
   const isJournal = !!journalDate;
   const { openJournal } = useJournalRouteHelper();

packages/frontend/core/src/desktop/pages/workspace/layouts/all-doc-sidebar-tabs.tsx

@@ -0,0 +1,19 @@
+import { Scrollable } from '@affine/component';
+import { ViewSidebarTab } from '@affine/core/modules/workbench';
+import { TodayIcon } from '@blocksuite/icons/rc';
+
+import { sidebarScrollArea } from '../detail-page/detail-page.css';
+import { EditorJournalPanel } from '../detail-page/tabs/journal';
+
+export const AllDocSidebarTabs = () => {
+  return (
+    <ViewSidebarTab tabId="all-docs-journal" icon={<TodayIcon />}>
+      <Scrollable.Root className={sidebarScrollArea}>
+        <Scrollable.Viewport>
+          <EditorJournalPanel />
+        </Scrollable.Viewport>
+        <Scrollable.Scrollbar />
+      </Scrollable.Root>
+    </ViewSidebarTab>
+  );
+};

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

@@ -19,6 +19,7 @@ import { useEffect, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { PageNotFound } from '../../404';
+import { AllDocSidebarTabs } from '../layouts/all-doc-sidebar-tabs';
 import { EmptyPageList } from '../page-list-empty';
 import { TagDetailHeader } from './header';
 import * as styles from './index.css';
@@ -99,5 +100,10 @@ export const TagDetail = ({ tagId }: { tagId?: string }) => {
 export const Component = () => {
   const params = useParams();
 
-  return <TagDetail tagId={params.tagId} />;
+  return (
+    <>
+      <AllDocSidebarTabs />
+      <TagDetail tagId={params.tagId} />;
+    </>
+  );
 };

packages/frontend/core/src/modules/workbench/view/view-islands.tsx

@@ -73,7 +73,7 @@ const ViewIsland = ({
     );
   }
 
-  const [island] = useState<Island>(createIsland());
+  const [island] = useState<Island>(createIsland);
 
   useEffect(() => {
     setter(prev => ({ ...prev, [id]: island }));