feat(core): add journal entrance for app-sidebar (#5579)

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

@@ -48,6 +48,7 @@ import FavoriteList from '../pure/workspace-slider-bar/favorite/favorite-list';
 import { UserWithWorkspaceList } from '../pure/workspace-slider-bar/user-with-workspace-list';
 import { WorkspaceCard } from '../pure/workspace-slider-bar/workspace-card';
 import ImportPage from './import-page';
+import { AppSidebarJournalButton } from './journal-button';
 import { UpdaterButton } from './updater-button';
 
 export type RootAppSidebarProps = {
@@ -254,6 +255,11 @@ export const RootAppSidebar = ({
             {t['com.affine.workspaceSubPath.all']()}
           </span>
         </RouteMenuLinkItem>
+        {runtimeConfig.enableJournal ? (
+          <AppSidebarJournalButton
+            workspace={currentWorkspace.blockSuiteWorkspace}
+          />
+        ) : null}
         {runtimeConfig.enableNewSettingModal ? (
           <MenuItem
             data-testid="slider-bar-workspace-setting-button"

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

@@ -0,0 +1,42 @@
+import { MenuItem } from '@affine/component/app-sidebar';
+import { currentPageIdAtom } from '@affine/core/atoms/mode';
+import {
+  useJournalHelper,
+  useJournalInfoHelper,
+} from '@affine/core/hooks/use-journal';
+import type { BlockSuiteWorkspace } from '@affine/core/shared';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { TodayIcon, TomorrowIcon, YesterdayIcon } from '@blocksuite/icons';
+import { useAtomValue } from 'jotai';
+import { useParams } from 'react-router-dom';
+
+interface AppSidebarJournalButtonProps {
+  workspace: BlockSuiteWorkspace;
+}
+
+export const AppSidebarJournalButton = ({
+  workspace,
+}: AppSidebarJournalButtonProps) => {
+  const t = useAFFiNEI18N();
+  const currentPageId = useAtomValue(currentPageIdAtom);
+  const currentPage = currentPageId ? workspace.getPage(currentPageId) : null;
+  const { openToday } = useJournalHelper(workspace);
+  const { journalDate, isJournal } = useJournalInfoHelper(currentPage?.meta);
+  const params = useParams();
+  const isJournalActive = isJournal && !!params.pageId;
+
+  const Icon =
+    isJournalActive && journalDate
+      ? journalDate.isBefore(new Date(), 'day')
+        ? YesterdayIcon
+        : journalDate.isAfter(new Date(), 'day')
+          ? TomorrowIcon
+          : TodayIcon
+      : TodayIcon;
+
+  return (
+    <MenuItem active={isJournalActive} onClick={openToday} icon={<Icon />}>
+      {t['com.affine.journal.app-sidebar-title']()}
+    </MenuItem>
+  );
+};

packages/frontend/i18n/src/resources/en.json

@@ -1048,5 +1048,6 @@
   "com.affine.journal.updated-today": "Updated today",
   "com.affine.journal.daily-count-created-empty-tips": "You haven't created anything yet",
   "com.affine.journal.daily-count-updated-empty-tips": "You haven't updated anything yet",
-  "com.affine.journal.conflict-show-more": "{{count}} more articles"
+  "com.affine.journal.conflict-show-more": "{{count}} more articles",
+  "com.affine.journal.app-sidebar-title": "Journals"
 }