Refactor desktop app into separate client and proxy apps

apps/yaak-client/theme.ts

@@ -0,0 +1,50 @@
+import { listen } from '@tauri-apps/api/event';
+import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
+import { setWindowTheme } from '@yaakapp-internal/mac-window';
+import type { ModelPayload } from '@yaakapp-internal/models';
+import { getSettings } from './lib/settings';
+import type { Appearance } from './lib/theme/appearance';
+import { getCSSAppearance, subscribeToPreferredAppearance } from './lib/theme/appearance';
+import { getResolvedTheme } from './lib/theme/themes';
+import { addThemeStylesToDocument, setThemeOnDocument } from './lib/theme/window';
+
+// NOTE: CSS appearance isn't as accurate as getting it async from the window (next step), but we want
+//  a good appearance guess so we're not waiting too long
+let preferredAppearance: Appearance = getCSSAppearance();
+subscribeToPreferredAppearance(async (a) => {
+  preferredAppearance = a;
+  await configureTheme();
+});
+
+configureTheme().then(
+  async () => {
+    // To prevent theme flashing, the backend hides new windows by default, so we
+    // need to show it here, after configuring the theme for the first time.
+    await getCurrentWebviewWindow().show();
+  },
+  (err) => console.log('Failed to configure theme', err),
+);
+
+// Listen for settings changes, the re-compute theme
+listen<ModelPayload>('model_write', async (event) => {
+  if (event.payload.change.type !== 'upsert') return;
+
+  const model = event.payload.model.model;
+  if (model !== 'settings' && model !== 'plugin') return;
+  await configureTheme();
+}).catch(console.error);
+
+async function configureTheme() {
+  const settings = await getSettings();
+  const theme = await getResolvedTheme(
+    preferredAppearance,
+    settings.appearance,
+    settings.themeLight,
+    settings.themeDark,
+  );
+  addThemeStylesToDocument(theme.active);
+  setThemeOnDocument(theme.active);
+  if (theme.active.base.surface != null) {
+    setWindowTheme(theme.active.base.surface);
+  }
+}