refactor(core): desktop project struct (#8334)

packages/frontend/apps/electron/renderer/app.tsx

@@ -1,8 +1,6 @@
-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 { AppContainer } from '@affine/core/desktop/components/app-container';
 import { router } from '@affine/core/desktop/router';
 import { configureCommonModules } from '@affine/core/modules';
 import { configureAppTabsHeaderModule } from '@affine/core/modules/app-tabs-header';
@@ -11,27 +9,35 @@ import {
   configureDesktopApiModule,
   DesktopApiService,
 } from '@affine/core/modules/desktop-api';
+import { GlobalDialogService } from '@affine/core/modules/dialogs';
+import { EditorSettingService } from '@affine/core/modules/editor-setting';
 import { configureFindInPageModule } from '@affine/core/modules/find-in-page';
 import { I18nProvider } from '@affine/core/modules/i18n';
 import { configureElectronStateStorageImpls } from '@affine/core/modules/storage';
-import { CustomThemeModifier } from '@affine/core/modules/theme-editor';
 import {
   ClientSchemeProvider,
   PopupWindowProvider,
 } from '@affine/core/modules/url';
 import { configureSqliteUserspaceStorageProvider } from '@affine/core/modules/userspace';
-import { configureDesktopWorkbenchModule } from '@affine/core/modules/workbench';
+import {
+  configureDesktopWorkbenchModule,
+  WorkbenchService,
+} from '@affine/core/modules/workbench';
 import {
   configureBrowserWorkspaceFlavours,
   configureSqliteWorkspaceEngineStorageProvider,
 } from '@affine/core/modules/workspace-engine';
 import createEmotionCache from '@affine/core/utils/create-emotion-cache';
+import { apis, events } from '@affine/electron-api';
 import { CacheProvider } from '@emotion/react';
 import {
+  DocsService,
   Framework,
   FrameworkRoot,
   getCurrentStore,
+  GlobalContextService,
   LifecycleService,
+  WorkspacesService,
 } from '@toeverything/infra';
 import { Suspense } from 'react';
 import { RouterProvider } from 'react-router-dom';
@@ -111,6 +117,49 @@ window.addEventListener('focus', () => {
 });
 frameworkProvider.get(LifecycleService).applicationStart();
 
+events?.applicationMenu.openAboutPageInSettingModal(() =>
+  frameworkProvider.get(GlobalDialogService).open('setting', {
+    activeTab: 'about',
+  })
+);
+events?.applicationMenu.onNewPageAction(() => {
+  const currentWorkspaceId = frameworkProvider
+    .get(GlobalContextService)
+    .globalContext.workspaceId.get();
+  const workspacesService = frameworkProvider.get(WorkspacesService);
+  const workspaceMetadata = currentWorkspaceId
+    ? workspacesService.list.workspace$(currentWorkspaceId).value
+    : null;
+  const workspaceRef =
+    workspaceMetadata &&
+    workspacesService.open({ metadata: workspaceMetadata });
+  if (!workspaceRef) {
+    return;
+  }
+  const { workspace, dispose } = workspaceRef;
+  const editorSettingService = frameworkProvider.get(EditorSettingService);
+  const docsService = workspace.scope.get(DocsService);
+  const editorSetting = editorSettingService.editorSetting;
+
+  const docProps = {
+    note: editorSetting.get('affine:note'),
+  };
+  apis?.ui
+    .isActiveTab()
+    .then(isActive => {
+      if (!isActive) {
+        return;
+      }
+      const page = docsService.createDoc({ docProps });
+      workspace.scope.get(WorkbenchService).workbench.openDoc(page.id);
+    })
+    .catch(err => {
+      console.error(err);
+    });
+
+  dispose();
+});
+
 export function App() {
   return (
     <Suspense>
@@ -119,11 +168,8 @@ export function App() {
           <I18nProvider>
             <AffineContext store={getCurrentStore()}>
               <DesktopThemeSync />
-              <Telemetry />
-              <CustomThemeModifier />
-              <GlobalLoading />
               <RouterProvider
-                fallbackElement={<AppFallback />}
+                fallbackElement={<AppContainer fallback />}
                 router={router}
                 future={future}
               />

packages/frontend/apps/electron/renderer/shell/app.css.ts

@@ -16,18 +16,17 @@ export const root = style({
   },
 });
 
+export const body = style({
+  flex: 1,
+  paddingTop: 52,
+});
+
 export const appTabsHeader = style({
   zIndex: 1,
   position: 'absolute',
   top: 0,
 });
 
-export const fallbackRoot = style({
-  width: '100%',
-  height: '100%',
-  paddingTop: 52,
-});
-
 export const splitViewFallback = style({
   width: '100%',
   height: '100%',

packages/frontend/apps/electron/renderer/shell/app.tsx

@@ -1,7 +1,7 @@
-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 { ShellAppSidebarFallback } from '@affine/core/modules/app-sidebar/views';
 import {
   AppTabsHeader,
   configureAppTabsHeaderModule,
@@ -10,7 +10,6 @@ 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 {
   configureGlobalStorageModule,
   Framework,
@@ -41,9 +40,9 @@ export function App() {
         <I18nProvider>
           <div className={styles.root} data-translucent={translucent}>
             <AppTabsHeader mode="shell" className={styles.appTabsHeader} />
-            <ShellAppFallback className={styles.fallbackRoot}>
-              <SplitViewFallback className={styles.splitViewFallback} />
-            </ShellAppFallback>
+            <div className={styles.body}>
+              <ShellAppSidebarFallback />
+            </div>
           </div>
         </I18nProvider>
       </ThemeProvider>

packages/frontend/apps/electron/renderer/theme-sync.ts

@@ -1,4 +1,4 @@
-import { DesktopApiService } from '@affine/core/modules/desktop-api/service';
+import { DesktopApiService } from '@affine/core/modules/desktop-api';
 import { useService } from '@toeverything/infra';
 import { useTheme } from 'next-themes';
 import { useRef } from 'react';