chore: standardize package references (#9346)

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';