Make LensTheme fully injectable and runnable

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/features/preferences/renderer/preference-items/application/theme/theme.tsx

@@ -8,25 +8,30 @@ import { Select } from "../../../../../../renderer/components/select";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import { observer } from "mobx-react";
 import type { UserStore } from "../../../../../../common/user-store";
-import type { ThemeStore } from "../../../../../../renderer/themes/store";
-import { defaultThemeId } from "../../../../../../common/vars";
+import type { LensTheme } from "../../../../../../renderer/themes/lens-theme";
 import userStoreInjectable from "../../../../../../common/user-store/user-store.injectable";
-import themeStoreInjectable from "../../../../../../renderer/themes/store.injectable";
+import defaultLensThemeInjectable from "../../../../../../renderer/themes/default-theme.injectable";
+import { lensThemeDeclarationInjectionToken } from "../../../../../../renderer/themes/declaration";
 
 interface Dependencies {
   userStore: UserStore;
-  themeStore: ThemeStore;
+  defaultTheme: LensTheme;
+  themes: LensTheme[];
 }
 
-const NonInjectedTheme = observer(({ userStore, themeStore }: Dependencies) => {
+const NonInjectedTheme = observer(({
+  userStore,
+  themes,
+  defaultTheme,
+}: Dependencies) => {
   const themeOptions = [
     {
       value: "system", // TODO: replace with a sentinal value that isn't string (and serialize it differently)
       label: "Sync with computer",
     },
-    ...Array.from(themeStore.themes, ([themeId, { name }]) => ({
-      value: themeId,
-      label: name,
+    ...themes.map(theme => ({
+      value: theme.name,
+      label: theme.name,
     })),
   ];
 
@@ -38,7 +43,7 @@ const NonInjectedTheme = observer(({ userStore, themeStore }: Dependencies) => {
         options={themeOptions}
         value={userStore.colorTheme}
         onChange={(value) =>
-          (userStore.colorTheme = value?.value ?? defaultThemeId)
+          (userStore.colorTheme = value?.value ?? defaultTheme.name)
         }
         themeName="lens"
       />
@@ -46,13 +51,10 @@ const NonInjectedTheme = observer(({ userStore, themeStore }: Dependencies) => {
   );
 });
 
-export const Theme = withInjectables<Dependencies>(
-  NonInjectedTheme,
-
-  {
-    getProps: (di) => ({
-      userStore: di.inject(userStoreInjectable),
-      themeStore: di.inject(themeStoreInjectable),
-    }),
-  },
-);
+export const Theme = withInjectables<Dependencies>(NonInjectedTheme, {
+  getProps: (di) => ({
+    userStore: di.inject(userStoreInjectable),
+    defaultTheme: di.inject(defaultLensThemeInjectable),
+    themes: di.injectMany(lensThemeDeclarationInjectionToken),
+  }),
+});

src/features/preferences/renderer/preference-items/terminal/terminal-theme/terminal-theme.tsx

@@ -9,50 +9,48 @@ import type { UserStore } from "../../../../../../common/user-store";
 import userStoreInjectable from "../../../../../../common/user-store/user-store.injectable";
 import { observer } from "mobx-react";
 import { Select } from "../../../../../../renderer/components/select";
-import themeStoreInjectable from "../../../../../../renderer/themes/store.injectable";
-import type { ThemeStore } from "../../../../../../renderer/themes/store";
+import type { LensTheme } from "../../../../../../renderer/themes/lens-theme";
+import { lensThemeDeclarationInjectionToken } from "../../../../../../renderer/themes/declaration";
 
 interface Dependencies {
   userStore: UserStore;
-  themeStore: ThemeStore;
+  themes: LensTheme[];
 }
 
-const NonInjectedTerminalTheme = observer(
-  ({ userStore, themeStore }: Dependencies) => {
+const NonInjectedTerminalTheme = observer(({
+  userStore,
+  themes,
+}: Dependencies) => {
 
-    const themeOptions = [
-      {
-        value: "", // TODO: replace with a sentinal value that isn't string (and serialize it differently)
-        label: "Match Lens Theme",
-      },
-      ...Array.from(themeStore.themes, ([themeId, { name }]) => ({
-        value: themeId,
-        label: name,
-      })),
-    ];
+  const themeOptions = [
+    {
+      value: "", // TODO: replace with a sentinal value that isn't string (and serialize it differently)
+      label: "Match Lens Theme",
+    },
+    ...themes.map(theme => ({
+      value: theme.name,
+      label: theme.name,
+    })),
+  ];
 
-    return (
-      <section id="terminalTheme">
-        <SubTitle title="Terminal theme" />
-        <Select
-          id="terminal-theme-input"
-          themeName="lens"
-          options={themeOptions}
-          value={userStore.terminalTheme}
-          onChange={option => userStore.terminalTheme = option?.value ?? ""}
-        />
-      </section>
-    );
-  },
+  return (
+    <section id="terminalTheme">
+      <SubTitle title="Terminal theme" />
+      <Select
+        id="terminal-theme-input"
+        themeName="lens"
+        options={themeOptions}
+        value={userStore.terminalTheme}
+        onChange={option => userStore.terminalTheme = option?.value ?? ""}
+      />
+    </section>
+  );
+},
 );
 
-export const TerminalTheme = withInjectables<Dependencies>(
-  NonInjectedTerminalTheme,
-
-  {
-    getProps: (di) => ({
-      userStore: di.inject(userStoreInjectable),
-      themeStore: di.inject(themeStoreInjectable),
-    }),
-  },
-);
+export const TerminalTheme = withInjectables<Dependencies>(NonInjectedTerminalTheme, {
+  getProps: (di) => ({
+    userStore: di.inject(userStoreInjectable),
+    themes: di.injectMany(lensThemeDeclarationInjectionToken),
+  }),
+});

src/features/theme/system-type/common/channels.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type { MessageChannel } from "../../../../common/utils/channel/message-channel-listener-injection-token";
+import type { RequestChannel } from "../../../../common/utils/channel/request-channel-listener-injection-token";
+
+export type SystemThemeType = "dark" | "light";
+
+export const initialSystemThemeTypeChannel: RequestChannel<void, SystemThemeType> = {
+  id: "initial-system-theme-type",
+};
+
+export const systemThemeTypeUpdateChannel: MessageChannel<SystemThemeType> = {
+  id: "system-theme-type-update",
+};

src/features/theme/system-type/main/emit-update.injectable.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import type { MessageChannelHandler } from "../../../../common/utils/channel/message-channel-listener-injection-token";
+import { sendMessageToChannelInjectionToken } from "../../../../common/utils/channel/message-to-channel-injection-token";
+import { systemThemeTypeUpdateChannel } from "../common/channels";
+
+export type EmitSystemThemeTypeUpdate = MessageChannelHandler<typeof systemThemeTypeUpdateChannel>;
+
+const emitSystemThemeTypeUpdateInjectable = getInjectable({
+  id: "emit-system-theme-type-update",
+  instantiate: (di): EmitSystemThemeTypeUpdate => {
+    const sendMessageToChannel = di.inject(sendMessageToChannelInjectionToken);
+
+    return (type) => sendMessageToChannel(systemThemeTypeUpdateChannel, type);
+  },
+});
+
+export default emitSystemThemeTypeUpdateInjectable;

src/features/theme/system-type/main/handle-initial.injectable.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import operatingSystemThemeInjectable from "../../../../main/theme/operating-system-theme.injectable";
+import { getRequestChannelListenerInjectable } from "../../../../main/utils/channel/channel-listeners/listener-tokens";
+import { initialSystemThemeTypeChannel } from "../common/channels";
+
+const initialSystemThemeTypeHandler = getRequestChannelListenerInjectable({
+  channel: initialSystemThemeTypeChannel,
+  handler: (di) => {
+    const operatingSystemTheme = di.inject(operatingSystemThemeInjectable);
+
+    return () => operatingSystemTheme.get();
+  },
+});
+
+export default initialSystemThemeTypeHandler;

src/features/theme/system-type/main/setup-update-emitter.injectable.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { reaction } from "mobx";
+import { onLoadOfApplicationInjectionToken } from "../../../../main/start-main-application/runnable-tokens/on-load-of-application-injection-token";
+import operatingSystemThemeInjectable from "../../../../main/theme/operating-system-theme.injectable";
+import emitSystemThemeTypeUpdateInjectable from "./emit-update.injectable";
+
+const setupSystemThemeTypeUpdaterEmitterInjectable = getInjectable({
+  id: "setup-system-theme-type-updater-emitter",
+  instantiate: (di) => {
+    const operatingSystemTheme = di.inject(operatingSystemThemeInjectable);
+    const emitSystemThemeTypeUpdate = di.inject(emitSystemThemeTypeUpdateInjectable);
+
+    return {
+      id: "setup-system-theme-type-updater-emitter",
+      run: () => {
+        reaction(
+          () => operatingSystemTheme.get(),
+          emitSystemThemeTypeUpdate,
+          {
+            fireImmediately: true,
+          },
+        );
+      },
+    };
+  },
+  injectionToken: onLoadOfApplicationInjectionToken,
+});
+
+export default setupSystemThemeTypeUpdaterEmitterInjectable;

src/features/theme/system-type/renderer/initialize.injectable.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { beforeFrameStartsInjectionToken } from "../../../../renderer/before-frame-starts/tokens";
+import initUserStoreInjectable from "../../../../renderer/stores/init-user-store.injectable";
+import systemThemeConfigurationInjectable from "../../../../renderer/themes/system-theme.injectable";
+import requestInitialSystemThemeTypeInjectable from "./request-initial.injectable";
+
+const initializeSystemThemeTypeInjectable = getInjectable({
+  id: "initialize-system-theme-type",
+  instantiate: (di) => {
+    const systemThemeConfiguration = di.inject(systemThemeConfigurationInjectable);
+    const requestInitialSystemThemeType = di.inject(requestInitialSystemThemeTypeInjectable);
+
+    return {
+      id: "initialize-system-theme-type",
+      run: async () => {
+        systemThemeConfiguration.set(await requestInitialSystemThemeType());
+      },
+      runAfter: di.inject(initUserStoreInjectable),
+    };
+  },
+  injectionToken: beforeFrameStartsInjectionToken,
+});
+
+export default initializeSystemThemeTypeInjectable;

src/features/theme/system-type/renderer/request-initial.injectable.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import type { RequestChannelHandler } from "../../../../main/utils/channel/channel-listeners/listener-tokens";
+import requestFromChannelInjectable from "../../../../renderer/utils/channel/request-from-channel.injectable";
+import { initialSystemThemeTypeChannel } from "../common/channels";
+
+export type RequestInitialSystemThemeType = RequestChannelHandler<typeof initialSystemThemeTypeChannel>;
+
+const requestInitialSystemThemeTypeInjectable = getInjectable({
+  id: "request-initial-system-theme-type",
+  instantiate: (di): RequestInitialSystemThemeType => {
+    const requestFromChannel = di.inject(requestFromChannelInjectable);
+
+    return () => requestFromChannel(initialSystemThemeTypeChannel);
+  },
+});
+
+export default requestInitialSystemThemeTypeInjectable;

src/features/theme/system-type/renderer/update-listener.injectable.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getMessageChannelListenerInjectable } from "../../../../common/utils/channel/message-channel-listener-injection-token";
+import systemThemeConfigurationInjectable from "../../../../renderer/themes/system-theme.injectable";
+import { systemThemeTypeUpdateChannel } from "../common/channels";
+
+const systemThemeTypeUpdateListenerInjectable = getMessageChannelListenerInjectable({
+  channel: systemThemeTypeUpdateChannel,
+  id: "main",
+  handler: (di) => {
+    const systemThemeConfiguration = di.inject(systemThemeConfigurationInjectable);
+
+    return (type) => systemThemeConfiguration.set(type);
+  },
+});
+
+export default systemThemeTypeUpdateListenerInjectable;