chore: standardize package references (#9346)

packages/frontend/apps/electron-renderer/src/app.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const fallback = style({
+  paddingTop: 52,
+});

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

@@ -0,0 +1,190 @@
+import { AffineContext } from '@affine/core/components/context';
+import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls';
+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';
+import { ValidatorProvider } from '@affine/core/modules/cloud';
+import {
+  configureDesktopApiModule,
+  DesktopApiService,
+} from '@affine/core/modules/desktop-api';
+import { GlobalDialogService } from '@affine/core/modules/dialogs';
+import { DocsService } from '@affine/core/modules/doc';
+import {
+  configureSpellCheckSettingModule,
+  EditorSettingService,
+} from '@affine/core/modules/editor-setting';
+import { configureFindInPageModule } from '@affine/core/modules/find-in-page';
+import { GlobalContextService } from '@affine/core/modules/global-context';
+import { I18nProvider } from '@affine/core/modules/i18n';
+import { LifecycleService } from '@affine/core/modules/lifecycle';
+import { configureElectronStateStorageImpls } from '@affine/core/modules/storage';
+import {
+  ClientSchemeProvider,
+  PopupWindowProvider,
+} from '@affine/core/modules/url';
+import { configureSqliteUserspaceStorageProvider } from '@affine/core/modules/userspace';
+import {
+  configureDesktopWorkbenchModule,
+  WorkbenchService,
+} from '@affine/core/modules/workbench';
+import { WorkspacesService } from '@affine/core/modules/workspace';
+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 { Framework, FrameworkRoot, getCurrentStore } from '@toeverything/infra';
+import { Suspense } from 'react';
+import { RouterProvider } from 'react-router-dom';
+
+import { DesktopThemeSync } from './theme-sync';
+
+const desktopWhiteList = [
+  '/open-app/signin-redirect',
+  '/open-app/url',
+  '/upgrade-success',
+  '/ai-upgrade-success',
+  '/share',
+  '/oauth',
+  '/magic-link',
+];
+if (
+  !BUILD_CONFIG.isElectron &&
+  BUILD_CONFIG.debug &&
+  desktopWhiteList.every(path => !location.pathname.startsWith(path))
+) {
+  document.body.innerHTML = `<h1 style="color:red;font-size:5rem;text-align:center;">Don't run electron entry in browser.</h1>`;
+  throw new Error('Wrong distribution');
+}
+
+const cache = createEmotionCache();
+
+const future = {
+  v7_startTransition: true,
+} as const;
+
+const framework = new Framework();
+configureCommonModules(framework);
+configureElectronStateStorageImpls(framework);
+configureBrowserWorkspaceFlavours(framework);
+configureSqliteWorkspaceEngineStorageProvider(framework);
+configureSqliteUserspaceStorageProvider(framework);
+configureDesktopWorkbenchModule(framework);
+configureAppTabsHeaderModule(framework);
+configureFindInPageModule(framework);
+configureDesktopApiModule(framework);
+configureSpellCheckSettingModule(framework);
+
+framework.impl(PopupWindowProvider, p => {
+  const apis = p.get(DesktopApiService).api;
+  return {
+    open: (url: string) => {
+      apis.handler.ui.openExternal(url).catch(e => {
+        console.error('Failed to open external URL', e);
+      });
+    },
+  };
+});
+framework.impl(ClientSchemeProvider, p => {
+  const appInfo = p.get(DesktopApiService).appInfo;
+  return {
+    getClientScheme() {
+      return appInfo?.scheme;
+    },
+  };
+});
+framework.impl(ValidatorProvider, p => {
+  const apis = p.get(DesktopApiService).api;
+  return {
+    async validate(_challenge, resource) {
+      const token = await apis.handler.ui.getChallengeResponse(resource);
+      if (!token) {
+        throw new Error('Challenge failed');
+      }
+      return token;
+    },
+  };
+});
+const frameworkProvider = framework.provider();
+
+// setup application lifecycle events, and emit application start event
+window.addEventListener('focus', () => {
+  frameworkProvider.get(LifecycleService).applicationFocus();
+});
+frameworkProvider.get(LifecycleService).applicationStart();
+window.addEventListener('unload', () => {
+  frameworkProvider
+    .get(DesktopApiService)
+    .api.handler.ui.pingAppLayoutReady(false)
+    .catch(console.error);
+});
+
+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 workspaceRef = currentWorkspaceId
+    ? workspacesService.openByWorkspaceId(currentWorkspaceId)
+    : null;
+  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>
+      <FrameworkRoot framework={frameworkProvider}>
+        <CacheProvider value={cache}>
+          <I18nProvider>
+            <AffineContext store={getCurrentStore()}>
+              <DesktopThemeSync />
+              <RouterProvider
+                fallbackElement={<AppContainer fallback />}
+                router={router}
+                future={future}
+              />
+              {environment.isWindows && (
+                <div style={{ position: 'fixed', right: 0, top: 0, zIndex: 5 }}>
+                  <WindowsAppControls />
+                </div>
+              )}
+            </AffineContext>
+          </I18nProvider>
+        </CacheProvider>
+      </FrameworkRoot>
+    </Suspense>
+  );
+}

packages/frontend/apps/electron-renderer/src/global.css

@@ -0,0 +1,29 @@
+button,
+input,
+select,
+textarea
+/* [role='button']  */ {
+  -webkit-app-region: no-drag;
+}
+
+#webpack-dev-server-client-overlay {
+  -webkit-app-region: no-drag;
+}
+
+html[data-active='true'] {
+  opacity: 1;
+}
+
+html:is([data-active='false'], [data-dragging='true']) * {
+  -webkit-app-region: no-drag !important;
+}
+
+html[data-active='false'] {
+  opacity: 0;
+  transition: opacity 0.2s 0.1s;
+}
+
+html[data-active='true']:has([data-blur-background='true']) {
+  opacity: 1;
+  transition: opacity 0.2s;
+}

packages/frontend/apps/electron-renderer/src/index.tsx

@@ -0,0 +1,33 @@
+import './setup';
+
+import { appConfigProxy } from '@affine/core/components/hooks/use-app-config-storage';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { App } from './app';
+
+function main() {
+  // load persistent config for electron
+  // TODO(@Peng): should be sync, but it's not necessary for now
+  appConfigProxy
+    .getSync()
+    .catch(() => console.error('failed to load app config'));
+
+  mountApp();
+}
+
+function mountApp() {
+  // oxlint-disable-next-line typescript-eslint/no-non-null-assertion
+  const root = document.getElementById('app')!;
+  createRoot(root).render(
+    <StrictMode>
+      <App />
+    </StrictMode>
+  );
+}
+
+try {
+  main();
+} catch (err) {
+  console.error('Failed to bootstrap app', err);
+}

packages/frontend/apps/electron-renderer/src/setup.ts

@@ -0,0 +1,3 @@
+import '@affine/core/bootstrap/electron';
+import '@affine/component/theme';
+import './global.css';

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

@@ -0,0 +1,38 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { createVar, style } from '@vanilla-extract/css';
+
+export const sidebarOffsetVar = createVar();
+
+export const root = style({
+  width: '100vw',
+  height: '100vh',
+  display: 'flex',
+  flexDirection: 'column',
+  background: cssVarV2('layer/background/primary'),
+  selectors: {
+    '&[data-translucent="true"]': {
+      background: 'transparent',
+    },
+  },
+});
+
+export const body = style({
+  flex: 1,
+  paddingTop: 52,
+});
+
+export const appTabsHeader = style({
+  zIndex: 1,
+  position: 'absolute',
+  top: 0,
+});
+
+export const splitViewFallback = style({
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  bottom: 0,
+  right: 0,
+  zIndex: 0,
+  background: cssVarV2('layer/background/primary'),
+});

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

@@ -0,0 +1,56 @@
+import { useAppSettingHelper } from '@affine/core/components/hooks/affine/use-app-setting-helper';
+import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls';
+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,
+} from '@affine/core/modules/app-tabs-header';
+import { configureDesktopApiModule } from '@affine/core/modules/desktop-api';
+import { configureI18nModule, I18nProvider } from '@affine/core/modules/i18n';
+import {
+  configureElectronStateStorageImpls,
+  configureGlobalStorageModule,
+} from '@affine/core/modules/storage';
+import { configureAppThemeModule } from '@affine/core/modules/theme';
+import { Framework, FrameworkRoot } from '@toeverything/infra';
+
+import * as styles from './app.css';
+
+const framework = new Framework();
+configureGlobalStorageModule(framework);
+configureElectronStateStorageImpls(framework);
+configureAppTabsHeaderModule(framework);
+configureAppSidebarModule(framework);
+configureI18nModule(framework);
+configureDesktopApiModule(framework);
+configureAppThemeModule(framework);
+const frameworkProvider = framework.provider();
+
+export function App() {
+  const { appSettings } = useAppSettingHelper();
+  const translucent =
+    BUILD_CONFIG.isElectron &&
+    environment.isMacOs &&
+    appSettings.enableBlurBackground;
+  return (
+    <FrameworkRoot framework={frameworkProvider}>
+      <ThemeProvider>
+        <I18nProvider>
+          <div className={styles.root} data-translucent={translucent}>
+            <AppTabsHeader mode="shell" className={styles.appTabsHeader} />
+            <div className={styles.body}>
+              <ShellAppSidebarFallback />
+            </div>
+            {environment.isWindows && (
+              <div style={{ position: 'fixed', right: 0, top: 0, zIndex: 5 }}>
+                <WindowsAppControls />
+              </div>
+            )}
+          </div>
+        </I18nProvider>
+      </ThemeProvider>
+    </FrameworkRoot>
+  );
+}

packages/frontend/apps/electron-renderer/src/shell/index.tsx

@@ -0,0 +1,29 @@
+import './setup';
+
+import { events } from '@affine/electron-api';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { App } from './app';
+
+async function main() {
+  const handleActive = (active: boolean | undefined) => {
+    document.documentElement.dataset.active = String(active);
+  };
+  events?.ui.onTabShellViewActiveChange(handleActive);
+  mountApp();
+}
+
+function mountApp() {
+  const root = document.getElementById('app');
+  if (!root) {
+    throw new Error('Root element not found');
+  }
+  createRoot(root).render(
+    <StrictMode>
+      <App />
+    </StrictMode>
+  );
+}
+
+main().catch(console.error);

packages/frontend/apps/electron-renderer/src/shell/setup.ts

@@ -0,0 +1,3 @@
+import '@affine/core/bootstrap/electron';
+import '@affine/component/theme';
+import '../global.css';

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

@@ -0,0 +1,25 @@
+import { DesktopApiService } from '@affine/core/modules/desktop-api';
+import { useService } from '@toeverything/infra';
+import { useTheme } from 'next-themes';
+import { useRef } from 'react';
+
+export const DesktopThemeSync = () => {
+  const { theme } = useTheme();
+  const lastThemeRef = useRef(theme);
+  const onceRef = useRef(false);
+
+  const handler = useService(DesktopApiService).api.handler;
+
+  if (lastThemeRef.current !== theme || !onceRef.current) {
+    if (BUILD_CONFIG.isElectron && theme) {
+      handler.ui
+        .handleThemeChange(theme as 'dark' | 'light' | 'system')
+        .catch(err => {
+          console.error(err);
+        });
+    }
+    lastThemeRef.current = theme;
+    onceRef.current = true;
+  }
+  return null;
+};