From 12e3cf1d07d72fed96067e432f38ead250c355d1 Mon Sep 17 00:00:00 2001 From: EYHN Date: Mon, 4 Nov 2024 04:38:03 +0000 Subject: [PATCH] refactor(core): set edgeless theme on doc created (#8670) --- packages/common/infra/src/index.ts | 3 - .../infra/src/modules/doc/events/index.ts | 4 ++ .../common/infra/src/modules/doc/index.ts | 1 + .../infra/src/modules/doc/services/docs.ts | 2 + .../common/infra/src/modules/theme/index.ts | 9 --- packages/frontend/apps/android/src/app.tsx | 2 +- .../frontend/apps/electron/renderer/app.tsx | 2 +- .../apps/electron/renderer/shell/app.tsx | 4 +- packages/frontend/apps/ios/src/app.tsx | 2 +- packages/frontend/apps/mobile/src/app.tsx | 2 +- packages/frontend/apps/web/src/app.tsx | 2 +- .../specs/custom/root-block.ts | 2 +- .../journal/date-picker.tsx | 10 +--- .../journal/today-button.tsx | 11 +--- .../block-suite-page-list/utils.tsx | 13 ---- .../src/components/context/index.tsx | 5 +- .../core/src/components/hooks/use-journal.ts | 60 ++++--------------- .../src/components/root-app-sidebar/index.tsx | 4 +- .../root-app-sidebar/journal-button.tsx | 11 +--- .../src/components/theme-provider/index.tsx | 5 +- .../detail-page/detail-page-header.tsx | 9 +-- .../workspace/detail-page/tabs/journal.tsx | 4 +- packages/frontend/core/src/modules/index.ts | 2 + .../core}/src/modules/theme/entities/theme.ts | 3 +- .../frontend/core/src/modules/theme/index.ts | 16 +++++ .../modules/theme/services/edgeless-theme.ts | 42 +++++++++++++ .../core}/src/modules/theme/services/theme.ts | 3 +- 27 files changed, 107 insertions(+), 126 deletions(-) create mode 100644 packages/common/infra/src/modules/doc/events/index.ts delete mode 100644 packages/common/infra/src/modules/theme/index.ts rename packages/frontend/{component => core}/src/components/context/index.tsx (85%) rename packages/frontend/{component => core}/src/components/theme-provider/index.tsx (81%) rename packages/{common/infra => frontend/core}/src/modules/theme/entities/theme.ts (51%) create mode 100644 packages/frontend/core/src/modules/theme/index.ts create mode 100644 packages/frontend/core/src/modules/theme/services/edgeless-theme.ts rename packages/{common/infra => frontend/core}/src/modules/theme/services/theme.ts (75%) diff --git a/packages/common/infra/src/index.ts b/packages/common/infra/src/index.ts index 5026ea5bcee37..07b6c95cb75e1 100644 --- a/packages/common/infra/src/index.ts +++ b/packages/common/infra/src/index.ts @@ -10,7 +10,6 @@ export * from './modules/feature-flag'; export * from './modules/global-context'; export * from './modules/lifecycle'; export * from './modules/storage'; -export * from './modules/theme'; export * from './modules/workspace'; export * from './orm'; export * from './storage'; @@ -27,7 +26,6 @@ import { configureGlobalStorageModule, configureTestingGlobalStorage, } from './modules/storage'; -import { configureAppThemeModule } from './modules/theme'; import { configureTestingWorkspaceProvider, configureWorkspaceModule, @@ -41,7 +39,6 @@ export function configureInfraModules(framework: Framework) { configureGlobalContextModule(framework); configureLifecycleModule(framework); configureFeatureFlagModule(framework); - configureAppThemeModule(framework); } export function configureTestingInfraModules(framework: Framework) { diff --git a/packages/common/infra/src/modules/doc/events/index.ts b/packages/common/infra/src/modules/doc/events/index.ts new file mode 100644 index 0000000000000..a7720e362eecc --- /dev/null +++ b/packages/common/infra/src/modules/doc/events/index.ts @@ -0,0 +1,4 @@ +import { createEvent } from '../../../framework'; +import type { DocRecord } from '../entities/record'; + +export const DocCreated = createEvent('DocCreated'); diff --git a/packages/common/infra/src/modules/doc/index.ts b/packages/common/infra/src/modules/doc/index.ts index 70fce26c3a8ac..fdb8e4c877196 100644 --- a/packages/common/infra/src/modules/doc/index.ts +++ b/packages/common/infra/src/modules/doc/index.ts @@ -1,6 +1,7 @@ export { Doc } from './entities/doc'; export { DocRecord } from './entities/record'; export { DocRecordList } from './entities/record-list'; +export { DocCreated } from './events'; export { DocScope } from './scopes/doc'; export { DocService } from './services/doc'; export { DocsService } from './services/docs'; diff --git a/packages/common/infra/src/modules/doc/services/docs.ts b/packages/common/infra/src/modules/doc/services/docs.ts index 6f80c12ea8e65..54951ad012ecd 100644 --- a/packages/common/infra/src/modules/doc/services/docs.ts +++ b/packages/common/infra/src/modules/doc/services/docs.ts @@ -11,6 +11,7 @@ import { ObjectPool } from '../../../utils'; import type { Doc } from '../entities/doc'; import { DocPropertyList } from '../entities/property-list'; import { DocRecordList } from '../entities/record-list'; +import { DocCreated } from '../events'; import { DocScope } from '../scopes/doc'; import type { DocsStore } from '../stores/docs'; import { DocService } from './doc'; @@ -74,6 +75,7 @@ export class DocsService extends Service { if (options.primaryMode) { docRecord.setPrimaryMode(options.primaryMode); } + this.eventBus.emit(DocCreated, docRecord); return docRecord; } diff --git a/packages/common/infra/src/modules/theme/index.ts b/packages/common/infra/src/modules/theme/index.ts deleted file mode 100644 index 37e2276c01896..0000000000000 --- a/packages/common/infra/src/modules/theme/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -export { AppThemeService } from './services/theme'; - -import type { Framework } from '../../framework'; -import { AppTheme } from './entities/theme'; -import { AppThemeService } from './services/theme'; - -export function configureAppThemeModule(framework: Framework) { - framework.service(AppThemeService).entity(AppTheme); -} diff --git a/packages/frontend/apps/android/src/app.tsx b/packages/frontend/apps/android/src/app.tsx index 4f88ff26cc9ba..452494e203188 100644 --- a/packages/frontend/apps/android/src/app.tsx +++ b/packages/frontend/apps/android/src/app.tsx @@ -1,5 +1,5 @@ -import { AffineContext } from '@affine/component/context'; import { AppFallback } from '@affine/core/components/affine/app-container'; +import { AffineContext } from '@affine/core/components/context'; import { Telemetry } from '@affine/core/components/telemetry'; import { configureMobileModules } from '@affine/core/mobile/modules'; import { router } from '@affine/core/mobile/router'; diff --git a/packages/frontend/apps/electron/renderer/app.tsx b/packages/frontend/apps/electron/renderer/app.tsx index 24b878561dd86..3c06bc49950d1 100644 --- a/packages/frontend/apps/electron/renderer/app.tsx +++ b/packages/frontend/apps/electron/renderer/app.tsx @@ -1,6 +1,6 @@ -import { AffineContext } from '@affine/component/context'; import { GlobalLoading } from '@affine/component/global-loading'; import { AppFallback } from '@affine/core/components/affine/app-container'; +import { AffineContext } from '@affine/core/components/context'; import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls'; import { Telemetry } from '@affine/core/components/telemetry'; import { router } from '@affine/core/desktop/router'; diff --git a/packages/frontend/apps/electron/renderer/shell/app.tsx b/packages/frontend/apps/electron/renderer/shell/app.tsx index 13eb48313c1b6..58f44fd821872 100644 --- a/packages/frontend/apps/electron/renderer/shell/app.tsx +++ b/packages/frontend/apps/electron/renderer/shell/app.tsx @@ -1,6 +1,6 @@ -import { ThemeProvider } from '@affine/component/theme-provider'; import { ShellAppFallback } from '@affine/core/components/affine/app-container'; import { useAppSettingHelper } from '@affine/core/components/hooks/affine/use-app-setting-helper'; +import { ThemeProvider } from '@affine/core/components/theme-provider'; import { configureAppSidebarModule } from '@affine/core/modules/app-sidebar'; import { AppTabsHeader, @@ -9,9 +9,9 @@ import { import { configureDesktopApiModule } from '@affine/core/modules/desktop-api'; import { configureI18nModule, I18nProvider } from '@affine/core/modules/i18n'; import { configureElectronStateStorageImpls } from '@affine/core/modules/storage'; +import { configureAppThemeModule } from '@affine/core/modules/theme'; import { SplitViewFallback } from '@affine/core/modules/workbench/view/split-view/split-view'; import { - configureAppThemeModule, configureGlobalStorageModule, Framework, FrameworkRoot, diff --git a/packages/frontend/apps/ios/src/app.tsx b/packages/frontend/apps/ios/src/app.tsx index 9678c83f8c7f4..dffbc5dafc9ed 100644 --- a/packages/frontend/apps/ios/src/app.tsx +++ b/packages/frontend/apps/ios/src/app.tsx @@ -1,5 +1,5 @@ -import { AffineContext } from '@affine/component/context'; import { AppFallback } from '@affine/core/components/affine/app-container'; +import { AffineContext } from '@affine/core/components/context'; import { Telemetry } from '@affine/core/components/telemetry'; import { configureMobileModules } from '@affine/core/mobile/modules'; import { router } from '@affine/core/mobile/router'; diff --git a/packages/frontend/apps/mobile/src/app.tsx b/packages/frontend/apps/mobile/src/app.tsx index b9fcfafcb24b0..416fcf327bbba 100644 --- a/packages/frontend/apps/mobile/src/app.tsx +++ b/packages/frontend/apps/mobile/src/app.tsx @@ -1,5 +1,5 @@ -import { AffineContext } from '@affine/component/context'; import { AppFallback } from '@affine/core/components/affine/app-container'; +import { AffineContext } from '@affine/core/components/context'; import { Telemetry } from '@affine/core/components/telemetry'; import { configureMobileModules } from '@affine/core/mobile/modules'; import { router } from '@affine/core/mobile/router'; diff --git a/packages/frontend/apps/web/src/app.tsx b/packages/frontend/apps/web/src/app.tsx index 506d2925c1bf5..8ad5453044264 100644 --- a/packages/frontend/apps/web/src/app.tsx +++ b/packages/frontend/apps/web/src/app.tsx @@ -1,6 +1,6 @@ -import { AffineContext } from '@affine/component/context'; import { GlobalLoading } from '@affine/component/global-loading'; import { AppFallback } from '@affine/core/components/affine/app-container'; +import { AffineContext } from '@affine/core/components/context'; import { Telemetry } from '@affine/core/components/telemetry'; import { router } from '@affine/core/desktop/router'; import { configureCommonModules } from '@affine/core/modules'; diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/root-block.ts b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/root-block.ts index 8b20ab7730924..c23b6e13ab95c 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/root-block.ts +++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/root-block.ts @@ -3,6 +3,7 @@ import { AIPageRootBlockSpec, } from '@affine/core/blocksuite/presets/ai'; import { EditorSettingService } from '@affine/core/modules/editor-setting'; +import { AppThemeService } from '@affine/core/modules/theme'; import { mixpanel } from '@affine/track'; import { ConfigExtension, @@ -32,7 +33,6 @@ import { } from '@blocksuite/affine-shared/utils'; import type { Container } from '@blocksuite/global/di'; import { - AppThemeService, DocService, DocsService, type FrameworkProvider, diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-header/journal/date-picker.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-header/journal/date-picker.tsx index f07b8616920d4..0a060c61dc2de 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-header/journal/date-picker.tsx +++ b/packages/frontend/core/src/components/blocksuite/block-suite-header/journal/date-picker.tsx @@ -2,26 +2,22 @@ import type { WeekDatePickerHandle } from '@affine/component'; import { WeekDatePicker } from '@affine/component'; import { useJournalRouteHelper } from '@affine/core/components/hooks/use-journal'; import { JournalService } from '@affine/core/modules/journal'; -import type { Doc, DocCollection } from '@blocksuite/affine/store'; +import type { Doc } from '@blocksuite/affine/store'; import { useLiveData, useService } from '@toeverything/infra'; import dayjs from 'dayjs'; import { useEffect, useRef, useState } from 'react'; export interface JournalWeekDatePickerProps { - docCollection: DocCollection; page: Doc; } const weekStyle = { maxWidth: 800, width: '100%' }; -export const JournalWeekDatePicker = ({ - docCollection, - page, -}: JournalWeekDatePickerProps) => { +export const JournalWeekDatePicker = ({ page }: JournalWeekDatePickerProps) => { const handleRef = useRef(null); const journalService = useService(JournalService); const journalDateStr = useLiveData(journalService.journalDate$(page.id)); const journalDate = journalDateStr ? dayjs(journalDateStr) : null; - const { openJournal } = useJournalRouteHelper(docCollection); + const { openJournal } = useJournalRouteHelper(); const [date, setDate] = useState( (journalDate ?? dayjs()).format('YYYY-MM-DD') ); diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-header/journal/today-button.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-header/journal/today-button.tsx index d528b38a8718e..e72aa63939efe 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-header/journal/today-button.tsx +++ b/packages/frontend/core/src/components/blocksuite/block-suite-header/journal/today-button.tsx @@ -1,18 +1,11 @@ import { Button } from '@affine/component'; import { useJournalRouteHelper } from '@affine/core/components/hooks/use-journal'; import { useI18n } from '@affine/i18n'; -import type { DocCollection } from '@blocksuite/affine/store'; import { useCallback } from 'react'; -export interface JournalTodayButtonProps { - docCollection: DocCollection; -} - -export const JournalTodayButton = ({ - docCollection, -}: JournalTodayButtonProps) => { +export const JournalTodayButton = () => { const t = useI18n(); - const journalHelper = useJournalRouteHelper(docCollection); + const journalHelper = useJournalRouteHelper(); const onToday = useCallback(() => { journalHelper.openToday(); diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-page-list/utils.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-page-list/utils.tsx index aea697c7de5da..45ad23dba9ac4 100644 --- a/packages/frontend/core/src/components/blocksuite/block-suite-page-list/utils.tsx +++ b/packages/frontend/core/src/components/blocksuite/block-suite-page-list/utils.tsx @@ -5,11 +5,8 @@ import { WorkbenchService } from '@affine/core/modules/workbench'; import { type DocMode } from '@blocksuite/affine/blocks'; import type { DocCollection } from '@blocksuite/affine/store'; import { type DocProps, DocsService, useServices } from '@toeverything/infra'; -import { useTheme } from 'next-themes'; import { useCallback, useMemo } from 'react'; -import { getValueByDefaultTheme } from '../../hooks/use-journal'; - export const usePageHelper = (docCollection: DocCollection) => { const { docsService, @@ -25,7 +22,6 @@ export const usePageHelper = (docCollection: DocCollection) => { const workbench = workbenchService.workbench; const docRecordList = docsService.list; const appSidebar = appSidebarService.sidebar; - const { resolvedTheme } = useTheme(); const createPageAndOpen = useCallback( (mode?: DocMode, open?: boolean | 'new-tab') => { @@ -35,14 +31,6 @@ export const usePageHelper = (docCollection: DocCollection) => { }; const page = docsService.createDoc({ docProps }); - const value = getValueByDefaultTheme( - editorSettingService.editorSetting.settings$.value.edgelessDefaultTheme, - resolvedTheme || 'light' - ); - docRecordList - .doc$(page.id) - .value?.setProperty('edgelessColorTheme', value); - if (mode) { docRecordList.doc$(page.id).value?.setPrimaryMode(mode); } @@ -58,7 +46,6 @@ export const usePageHelper = (docCollection: DocCollection) => { docRecordList, docsService, editorSettingService.editorSetting, - resolvedTheme, workbench, ] ); diff --git a/packages/frontend/component/src/components/context/index.tsx b/packages/frontend/core/src/components/context/index.tsx similarity index 85% rename from packages/frontend/component/src/components/context/index.tsx rename to packages/frontend/core/src/components/context/index.tsx index d8928dc668598..0551d414ffa05 100644 --- a/packages/frontend/component/src/components/context/index.tsx +++ b/packages/frontend/core/src/components/context/index.tsx @@ -1,12 +1,11 @@ +import { ConfirmModalProvider } from '@affine/component'; import { ProviderComposer } from '@affine/component/provider-composer'; -import { ThemeProvider } from '@affine/component/theme-provider'; +import { ThemeProvider } from '@affine/core/components/theme-provider'; import type { createStore } from 'jotai'; import { Provider } from 'jotai'; import type { PropsWithChildren } from 'react'; import { useMemo } from 'react'; -import { ConfirmModalProvider } from '../../ui/modal'; - export type AffineContextProps = PropsWithChildren<{ store?: ReturnType; }>; diff --git a/packages/frontend/core/src/components/hooks/use-journal.ts b/packages/frontend/core/src/components/hooks/use-journal.ts index 3562e4d3211be..7cb0f13306c93 100644 --- a/packages/frontend/core/src/components/hooks/use-journal.ts +++ b/packages/frontend/core/src/components/hooks/use-journal.ts @@ -1,9 +1,8 @@ import { EditorSettingService } from '@affine/core/modules/editor-setting'; -import type { EdgelessDefaultTheme } from '@affine/core/modules/editor-setting/schema'; import { JournalService } from '@affine/core/modules/journal'; import { i18nTime } from '@affine/i18n'; import { track } from '@affine/track'; -import { type DocCollection, Text } from '@blocksuite/affine/store'; +import { Text } from '@blocksuite/affine/store'; import { type DocProps, DocsService, @@ -12,29 +11,9 @@ import { useServices, } from '@toeverything/infra'; import dayjs from 'dayjs'; -import { useTheme } from 'next-themes'; import { useCallback, useMemo } from 'react'; import { WorkbenchService } from '../../modules/workbench'; -import { useDocCollectionHelper } from './use-block-suite-workspace-helper'; - -export const getValueByDefaultTheme = ( - defaultTheme: EdgelessDefaultTheme, - currentAppTheme: string -) => { - switch (defaultTheme) { - case 'dark': - return 'dark'; - case 'light': - return 'light'; - case 'specified': - return currentAppTheme === 'dark' ? 'dark' : 'light'; - case 'auto': - return 'system'; - default: - return 'system'; - } -}; type MaybeDate = Date | string | number; export const JOURNAL_DATE_FORMAT = 'YYYY-MM-DD'; @@ -53,9 +32,7 @@ function toDayjs(j?: string | false) { /** * @deprecated use `JournalService` directly */ -export const useJournalHelper = (docCollection: DocCollection) => { - const bsWorkspaceHelper = useDocCollectionHelper(docCollection); - const { resolvedTheme } = useTheme(); +export const useJournalHelper = () => { const { docsService, editorSettingService, journalService } = useServices({ DocsService, EditorSettingService, @@ -69,17 +46,11 @@ export const useJournalHelper = (docCollection: DocCollection) => { (maybeDate: MaybeDate) => { const day = dayjs(maybeDate); const title = day.format(JOURNAL_DATE_FORMAT); - const page = bsWorkspaceHelper.createDoc(); - const value = getValueByDefaultTheme( - editorSettingService.editorSetting.settings$.value.edgelessDefaultTheme, - resolvedTheme || 'light' - ); - docsService.list - .doc$(page.id) - .value?.setProperty('edgelessColorTheme', value); - docsService.list.setPrimaryMode(page.id, 'page'); + const docRecord = docsService.createDoc(); + const { doc, release } = docsService.open(docRecord.id); + docsService.list.setPrimaryMode(docRecord.id, 'page'); // set created date to match the journal date - page.collection.setDocMeta(page.id, { + docRecord.setMeta({ createDate: dayjs() .set('year', day.year()) .set('month', day.month()) @@ -91,17 +62,12 @@ export const useJournalHelper = (docCollection: DocCollection) => { page: { title: new Text(title) }, note: editorSettingService.editorSetting.get('affine:note'), }; - initDocFromProps(page, docProps); - journalService.setJournalDate(page.id, title); - return page; + initDocFromProps(doc.blockSuiteDoc, docProps); + release(); + journalService.setJournalDate(docRecord.id, title); + return docRecord; }, - [ - bsWorkspaceHelper, - editorSettingService.editorSetting, - resolvedTheme, - docsService.list, - journalService, - ] + [docsService, editorSettingService.editorSetting, journalService] ); /** @@ -138,8 +104,8 @@ export const useJournalHelper = (docCollection: DocCollection) => { }; // split useJournalRouteHelper since it requires a context, which may not work in lit -export const useJournalRouteHelper = (docCollection: DocCollection) => { - const { getJournalByDate } = useJournalHelper(docCollection); +export const useJournalRouteHelper = () => { + const { getJournalByDate } = useJournalHelper(); const workbench = useService(WorkbenchService).workbench; /** * open journal by date, create one if not exist diff --git a/packages/frontend/core/src/components/root-app-sidebar/index.tsx b/packages/frontend/core/src/components/root-app-sidebar/index.tsx index 585098d5f1734..7ea2279ecd1fa 100644 --- a/packages/frontend/core/src/components/root-app-sidebar/index.tsx +++ b/packages/frontend/core/src/components/root-app-sidebar/index.tsx @@ -149,9 +149,7 @@ export const RootAppSidebar = (): ReactElement => { {t['com.affine.workspaceSubPath.all']()} - + } diff --git a/packages/frontend/core/src/components/root-app-sidebar/journal-button.tsx b/packages/frontend/core/src/components/root-app-sidebar/journal-button.tsx index b4302298716d0..544197f749274 100644 --- a/packages/frontend/core/src/components/root-app-sidebar/journal-button.tsx +++ b/packages/frontend/core/src/components/root-app-sidebar/journal-button.tsx @@ -8,23 +8,16 @@ import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta'; import { WorkbenchService } from '@affine/core/modules/workbench'; import { isNewTabTrigger } from '@affine/core/utils'; import { useI18n } from '@affine/i18n'; -import type { DocCollection } from '@blocksuite/affine/store'; import { TodayIcon } from '@blocksuite/icons/rc'; import { useLiveData, useService } from '@toeverything/infra'; import { type MouseEvent } from 'react'; -interface AppSidebarJournalButtonProps { - docCollection: DocCollection; -} - -export const AppSidebarJournalButton = ({ - docCollection, -}: AppSidebarJournalButtonProps) => { +export const AppSidebarJournalButton = () => { const t = useI18n(); const docDisplayMetaService = useService(DocDisplayMetaService); const workbench = useService(WorkbenchService).workbench; const location = useLiveData(workbench.location$); - const { openToday } = useJournalRouteHelper(docCollection); + const { openToday } = useJournalRouteHelper(); const maybeDocId = location.pathname.split('/')[1]; const { isJournal } = useJournalInfoHelper(maybeDocId); diff --git a/packages/frontend/component/src/components/theme-provider/index.tsx b/packages/frontend/core/src/components/theme-provider/index.tsx similarity index 81% rename from packages/frontend/component/src/components/theme-provider/index.tsx rename to packages/frontend/core/src/components/theme-provider/index.tsx index 72590b669a825..e053be563217a 100644 --- a/packages/frontend/component/src/components/theme-provider/index.tsx +++ b/packages/frontend/core/src/components/theme-provider/index.tsx @@ -1,11 +1,12 @@ -import { AppThemeService, useService } from '@toeverything/infra'; +import { AppThemeService } from '@affine/core/modules/theme'; +import { useService } from '@toeverything/infra'; import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes'; import type { PropsWithChildren } from 'react'; import { useEffect } from 'react'; const themes = ['dark', 'light']; -export function ThemeObserver() { +function ThemeObserver() { const { resolvedTheme } = useTheme(); const service = useService(AppThemeService); diff --git a/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page-header.tsx b/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page-header.tsx index 2ee4772cc93a9..0e014726b416e 100644 --- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page-header.tsx +++ b/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page-header.tsx @@ -67,14 +67,9 @@ export function JournalPageHeader({ page, workspace }: PageHeaderProps) {
- +
- {hideToday ? null : ( - - )} + {hideToday ? null : } { const t = useI18n(); const doc = useService(DocService).doc; - const workspace = useService(WorkspaceService).workspace; const journalService = useService(JournalService); const journalDateStr = useLiveData(journalService.journalDate$(doc.id)); const journalDate = journalDateStr ? dayjs(journalDateStr) : null; const isJournal = !!journalDate; - const { openJournal } = useJournalRouteHelper(workspace.docCollection); + const { openJournal } = useJournalRouteHelper(); const onDateSelect = useCallback( (date: string) => { diff --git a/packages/frontend/core/src/modules/index.ts b/packages/frontend/core/src/modules/index.ts index 9551d69bd6a28..7e6486a98733f 100644 --- a/packages/frontend/core/src/modules/index.ts +++ b/packages/frontend/core/src/modules/index.ts @@ -26,6 +26,7 @@ import { configureShareSettingModule } from './share-setting'; import { configureSystemFontFamilyModule } from './system-font-family'; import { configureTagModule } from './tag'; import { configureTelemetryModule } from './telemetry'; +import { configureAppThemeModule } from './theme'; import { configureThemeEditorModule } from './theme-editor'; import { configureUrlModule } from './url'; import { configureUserspaceModule } from './userspace'; @@ -61,4 +62,5 @@ export function configureCommonModules(framework: Framework) { configureAppSidebarModule(framework); configureJournalModule(framework); configureUrlModule(framework); + configureAppThemeModule(framework); } diff --git a/packages/common/infra/src/modules/theme/entities/theme.ts b/packages/frontend/core/src/modules/theme/entities/theme.ts similarity index 51% rename from packages/common/infra/src/modules/theme/entities/theme.ts rename to packages/frontend/core/src/modules/theme/entities/theme.ts index 055b7e486dc32..0aa3205c44fed 100644 --- a/packages/common/infra/src/modules/theme/entities/theme.ts +++ b/packages/frontend/core/src/modules/theme/entities/theme.ts @@ -1,5 +1,4 @@ -import { Entity } from '../../../framework'; -import { LiveData } from '../../../livedata'; +import { Entity, LiveData } from '@toeverything/infra'; export class AppTheme extends Entity { theme$ = new LiveData(undefined); diff --git a/packages/frontend/core/src/modules/theme/index.ts b/packages/frontend/core/src/modules/theme/index.ts new file mode 100644 index 0000000000000..f54ba14281b4e --- /dev/null +++ b/packages/frontend/core/src/modules/theme/index.ts @@ -0,0 +1,16 @@ +export { AppThemeService } from './services/theme'; + +import { type Framework, WorkspaceScope } from '@toeverything/infra'; + +import { EditorSettingService } from '../editor-setting'; +import { AppTheme } from './entities/theme'; +import { EdgelessThemeService } from './services/edgeless-theme'; +import { AppThemeService } from './services/theme'; + +export function configureAppThemeModule(framework: Framework) { + framework + .service(AppThemeService) + .entity(AppTheme) + .scope(WorkspaceScope) + .service(EdgelessThemeService, [AppThemeService, EditorSettingService]); +} diff --git a/packages/frontend/core/src/modules/theme/services/edgeless-theme.ts b/packages/frontend/core/src/modules/theme/services/edgeless-theme.ts new file mode 100644 index 0000000000000..d9806bf708525 --- /dev/null +++ b/packages/frontend/core/src/modules/theme/services/edgeless-theme.ts @@ -0,0 +1,42 @@ +import type { DocRecord } from '@toeverything/infra'; +import { DocCreated, OnEvent, Service } from '@toeverything/infra'; + +import type { EditorSettingService } from '../../editor-setting'; +import type { EdgelessDefaultTheme } from '../../editor-setting/schema'; +import type { AppThemeService } from './theme'; + +const getValueByDefaultTheme = ( + defaultTheme: EdgelessDefaultTheme, + currentAppTheme: string +) => { + switch (defaultTheme) { + case 'dark': + return 'dark'; + case 'light': + return 'light'; + case 'specified': + return currentAppTheme === 'dark' ? 'dark' : 'light'; + case 'auto': + return 'system'; + default: + return 'system'; + } +}; + +@OnEvent(DocCreated, i => i.onDocCreated) +export class EdgelessThemeService extends Service { + constructor( + private readonly appThemeService: AppThemeService, + private readonly editorSettingService: EditorSettingService + ) { + super(); + } + + onDocCreated(docRecord: DocRecord) { + const value = getValueByDefaultTheme( + this.editorSettingService.editorSetting.get('edgelessDefaultTheme'), + this.appThemeService.appTheme.theme$.value ?? 'light' + ); + docRecord.setProperty('edgelessColorTheme', value); + } +} diff --git a/packages/common/infra/src/modules/theme/services/theme.ts b/packages/frontend/core/src/modules/theme/services/theme.ts similarity index 75% rename from packages/common/infra/src/modules/theme/services/theme.ts rename to packages/frontend/core/src/modules/theme/services/theme.ts index 74d086ce5bbb0..98ec2e61222c7 100644 --- a/packages/common/infra/src/modules/theme/services/theme.ts +++ b/packages/frontend/core/src/modules/theme/services/theme.ts @@ -1,4 +1,5 @@ -import { Service } from '../../../framework'; +import { Service } from '@toeverything/infra'; + import { AppTheme } from '../entities/theme'; export class AppThemeService extends Service {