diff --git a/packages/frontend/component/src/ui/date-picker/calendar/calendar.tsx b/packages/frontend/component/src/ui/date-picker/calendar/calendar.tsx
index d8b078b6f4..bbcbbaf6c2 100644
--- a/packages/frontend/component/src/ui/date-picker/calendar/calendar.tsx
+++ b/packages/frontend/component/src/ui/date-picker/calendar/calendar.tsx
@@ -49,7 +49,11 @@ export const DatePicker = (props: DatePickerProps) => {
   }, []);
 
   return (
-    <div className={styles.calendarRoot} style={variables}>
+    <div
+      className={styles.calendarRoot}
+      style={variables}
+      data-testid="date-picker-calendar"
+    >
       <Component
         cursor={cursor}
         {...finalProps}
diff --git a/packages/frontend/core/src/desktop/pages/workspace/all-collection/index.tsx b/packages/frontend/core/src/desktop/pages/workspace/all-collection/index.tsx
index 267e341f3e..15d57286fc 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/all-collection/index.tsx
+++ b/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 />
     </>
   );
 };
diff --git a/packages/frontend/core/src/desktop/pages/workspace/all-page/all-page.tsx b/packages/frontend/core/src/desktop/pages/workspace/all-page/all-page.tsx
index 64bf7fd8c3..1acb9b51cb 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/all-page/all-page.tsx
+++ b/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 />
     </>
   );
 };
diff --git a/packages/frontend/core/src/desktop/pages/workspace/all-tag/index.tsx b/packages/frontend/core/src/desktop/pages/workspace/all-tag/index.tsx
index 4b6099f104..d672f231cb 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/all-tag/index.tsx
+++ b/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 />
     </>
   );
 };
diff --git a/packages/frontend/core/src/desktop/pages/workspace/collection/index.tsx b/packages/frontend/core/src/desktop/pages/workspace/collection/index.tsx
index 52474a9297..f494882748 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/collection/index.tsx
+++ b/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}
     </>
   );
diff --git a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/journal/index.tsx b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/journal/index.tsx
index d3574a0b0a..7e0105ca1d 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/journal/index.tsx
+++ b/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();
diff --git a/packages/frontend/core/src/desktop/pages/workspace/layouts/all-doc-sidebar-tabs.tsx b/packages/frontend/core/src/desktop/pages/workspace/layouts/all-doc-sidebar-tabs.tsx
new file mode 100644
index 0000000000..e006088c5d
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/frontend/core/src/desktop/pages/workspace/tag/index.tsx b/packages/frontend/core/src/desktop/pages/workspace/tag/index.tsx
index c216ab7fbb..57b5d95870 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/tag/index.tsx
+++ b/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} />;
+    </>
+  );
 };
diff --git a/packages/frontend/core/src/modules/workbench/view/view-islands.tsx b/packages/frontend/core/src/modules/workbench/view/view-islands.tsx
index 928f65e6a3..87fa9d7a5f 100644
--- a/packages/frontend/core/src/modules/workbench/view/view-islands.tsx
+++ b/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 }));
diff --git a/tests/affine-local/e2e/all-page.spec.ts b/tests/affine-local/e2e/all-page.spec.ts
index 89a67f34cf..8be2101775 100644
--- a/tests/affine-local/e2e/all-page.spec.ts
+++ b/tests/affine-local/e2e/all-page.spec.ts
@@ -1,4 +1,4 @@
-/* eslint-disable unicorn/prefer-dom-node-dataset */
+/* oxlint-disable unicorn/prefer-dom-node-dataset */
 import { test } from '@affine-test/kit/playwright';
 import {
   changeFilter,
@@ -80,13 +80,16 @@ test('use monthpicker to modify the month of datepicker', async ({ page }) => {
   await clickDatePicker(page);
   const lastMonth = new Date();
   lastMonth.setMonth(lastMonth.getMonth() - 1);
-  await selectMonthFromMonthPicker(page, lastMonth);
-  await checkDatePickerMonth(page, lastMonth);
+  const datePicker = page.locator(
+    '[role="dialog"] [data-testid="date-picker-calendar"]'
+  );
+  await selectMonthFromMonthPicker(datePicker, lastMonth);
+  await checkDatePickerMonth(datePicker, lastMonth);
   // change month
   const nextMonth = new Date();
   nextMonth.setMonth(nextMonth.getMonth() + 1);
-  await selectMonthFromMonthPicker(page, nextMonth);
-  await checkDatePickerMonth(page, nextMonth);
+  await selectMonthFromMonthPicker(datePicker, nextMonth);
+  await checkDatePickerMonth(datePicker, nextMonth);
 });
 
 test('allow creation of filters by tags', async ({ page }) => {
diff --git a/tests/kit/src/utils/filter.ts b/tests/kit/src/utils/filter.ts
index db4e85664f..17ac802dd6 100644
--- a/tests/kit/src/utils/filter.ts
+++ b/tests/kit/src/utils/filter.ts
@@ -1,4 +1,4 @@
-import type { Page } from '@playwright/test';
+import type { Locator, Page } from '@playwright/test';
 import { expect } from '@playwright/test';
 
 import { clickNewPageButton, getBlockSuiteEditorTitle } from './page-logic';
@@ -49,7 +49,7 @@ export const getPagesCount = async (page: Page) => {
   }
 
   // locator is not a HTMLElement, so we can't use dataset
-  // eslint-disable-next-line unicorn/prefer-dom-node-dataset
+  // oxlint-disable-next-line unicorn/prefer-dom-node-dataset
   const count = await locator.getAttribute('data-total-count');
   return count ? parseInt(count) : 0;
 };
@@ -67,7 +67,7 @@ export const clickDatePicker = async (page: Page) => {
   await page.locator('[data-testid="filter-arg"]').locator('input').click();
 };
 
-const clickMonthPicker = async (page: Page) => {
+const clickMonthPicker = async (page: Page | Locator) => {
   await page.locator('[data-testid="month-picker-button"]').click();
 };
 
@@ -78,7 +78,10 @@ export const fillDatePicker = async (page: Page, date: Date) => {
     .fill(dateFormat(date));
 };
 
-export const selectMonthFromMonthPicker = async (page: Page, date: Date) => {
+export const selectMonthFromMonthPicker = async (
+  page: Page | Locator,
+  date: Date
+) => {
   const month = (date.getMonth() + 1).toString().padStart(2, '0');
   const year = date.getFullYear();
   // Open the month picker popup
@@ -103,7 +106,10 @@ export const selectMonthFromMonthPicker = async (page: Page, date: Date) => {
   await selectMonth();
 };
 
-export const checkDatePickerMonth = async (page: Page, date: Date) => {
+export const checkDatePickerMonth = async (
+  page: Page | Locator,
+  date: Date
+) => {
   expect(
     await page.getByTestId('month-picker-button').evaluate(e => e.dataset.month)
   ).toBe(date.getMonth().toString());