feat(web): add modular theme library

apps/desktop/src/electron/ElectronDialog.ts

@@ -23,6 +23,21 @@ export class ElectronDialogPickFolderError extends Schema.TaggedErrorClass<Elect
   }
 }
 
+export class ElectronDialogPickFilesError extends Schema.TaggedErrorClass<ElectronDialogPickFilesError>()(
+  "ElectronDialogPickFilesError",
+  {
+    ownerWindowId: Schema.NullOr(Schema.Number),
+    defaultPath: Schema.NullOr(Schema.String),
+    cause: Schema.Defect(),
+  },
+) {
+  override get message(): string {
+    const owner = this.ownerWindowId === null ? "the application" : `window ${this.ownerWindowId}`;
+    const defaultPath = this.defaultPath === null ? "no default path" : this.defaultPath;
+    return `Failed to open the Electron file picker for ${owner} with ${defaultPath}.`;
+  }
+}
+
 export class ElectronDialogConfirmError extends Schema.TaggedErrorClass<ElectronDialogConfirmError>()(
   "ElectronDialogConfirmError",
   {
@@ -69,6 +84,7 @@ export class ElectronDialogShowErrorBoxError extends Schema.TaggedErrorClass<Ele
 
 export const ElectronDialogError = Schema.Union([
   ElectronDialogPickFolderError,
+  ElectronDialogPickFilesError,
   ElectronDialogConfirmError,
   ElectronDialogShowMessageBoxError,
   ElectronDialogShowErrorBoxError,
@@ -81,6 +97,12 @@ export interface ElectronDialogPickFolderInput {
   readonly defaultPath: Option.Option<string>;
 }
 
+export interface ElectronDialogPickFilesInput {
+  readonly owner: Option.Option<Electron.BrowserWindow>;
+  readonly defaultPath: Option.Option<string>;
+  readonly filters: readonly Electron.FileFilter[];
+}
+
 export interface ElectronDialogConfirmInput {
   readonly owner: Option.Option<Electron.BrowserWindow>;
   readonly message: string;
@@ -92,6 +114,9 @@ export class ElectronDialog extends Context.Service<
     readonly pickFolder: (
       input: ElectronDialogPickFolderInput,
     ) => Effect.Effect<Option.Option<string>, ElectronDialogPickFolderError>;
+    readonly pickFiles: (
+      input: ElectronDialogPickFilesInput,
+    ) => Effect.Effect<readonly string[], ElectronDialogPickFilesError>;
     readonly confirm: (
       input: ElectronDialogConfirmInput,
     ) => Effect.Effect<boolean, ElectronDialogConfirmError>;
@@ -137,6 +162,32 @@ export const make = ElectronDialog.of({
     }
     return Option.fromNullishOr(result.filePaths[0]);
   }),
+  pickFiles: Effect.fn("desktop.electron.dialog.pickFiles")(function* (input) {
+    const ownerWindowId = Option.match(input.owner, {
+      onNone: () => null,
+      onSome: (owner) => owner.id,
+    });
+    const defaultPath = Option.getOrNull(input.defaultPath);
+    const openDialogOptions: Electron.OpenDialogOptions = {
+      properties: ["openFile", "multiSelections"],
+      filters: [...input.filters],
+      ...(defaultPath === null ? {} : { defaultPath }),
+    };
+    const result = yield* Effect.tryPromise({
+      try: () =>
+        Option.match(input.owner, {
+          onNone: () => Electron.dialog.showOpenDialog(openDialogOptions),
+          onSome: (owner) => Electron.dialog.showOpenDialog(owner, openDialogOptions),
+        }),
+      catch: (cause) =>
+        new ElectronDialogPickFilesError({
+          ownerWindowId,
+          defaultPath,
+          cause,
+        }),
+    });
+    return result.canceled ? [] : result.filePaths;
+  }),
   confirm: Effect.fn("desktop.electron.dialog.confirm")(function* (input) {
     const normalizedMessage = input.message.trim();
     if (normalizedMessage.length === 0) {

apps/desktop/src/ipc/DesktopIpcHandlers.ts

@@ -38,6 +38,7 @@ import {
   getWindowFullscreenState,
   openExternal,
   pickFolder,
+  pickThemeFiles,
   setTheme,
   showContextMenu,
 } from "./methods/window.ts";
@@ -79,6 +80,7 @@ export const installDesktopIpcHandlers = Effect.fn("desktop.ipc.installHandlers"
   yield* ipc.handle(setWslOnly);
 
   yield* ipc.handle(pickFolder);
+  yield* ipc.handle(pickThemeFiles);
   yield* ipc.handle(confirm);
   yield* ipc.handle(setTheme);
   yield* ipc.handle(showContextMenu);

apps/desktop/src/ipc/channels.ts

@@ -1,4 +1,5 @@
 export const PICK_FOLDER_CHANNEL = "desktop:pick-folder";
+export const PICK_THEME_FILES_CHANNEL = "desktop:pick-theme-files";
 export const CONFIRM_CHANNEL = "desktop:confirm";
 export const SET_THEME_CHANNEL = "desktop:set-theme";
 export const CONTEXT_MENU_CHANNEL = "desktop:context-menu";

apps/desktop/src/ipc/methods/window.ts

@@ -3,10 +3,15 @@ import {
   DesktopAppBrandingSchema,
   DesktopEnvironmentBootstrapSchema,
   DesktopThemeSchema,
+  PickedThemeFileSchema,
   PickFolderOptionsSchema,
   PRIMARY_LOCAL_ENVIRONMENT_ID,
   type DesktopEnvironmentBootstrap,
+  type PickedThemeFile,
 } from "@t3tools/contracts";
+import * as NodeOS from "node:os";
+import * as FileSystem from "effect/FileSystem";
+import * as Path from "effect/Path";
 import * as Effect from "effect/Effect";
 import * as Option from "effect/Option";
 import * as Schema from "effect/Schema";
@@ -268,3 +273,49 @@ export const openExternal = DesktopIpc.makeIpcMethod({
     return yield* shell.openExternal(url);
   }),
 });
+
+/** Theme files are a few KB; anything larger returns empty text and lets the
+ *  renderer reject it by size without the contents ever crossing the bridge. */
+const PICKED_THEME_FILE_MAX_BYTES = 256 * 1024;
+
+export const pickThemeFiles = DesktopIpc.makeIpcMethod({
+  channel: IpcChannels.PICK_THEME_FILES_CHANNEL,
+  payload: Schema.Undefined,
+  result: Schema.NullOr(Schema.Array(PickedThemeFileSchema)),
+  handler: Effect.fn("desktop.ipc.window.pickThemeFiles")(function* () {
+    const dialog = yield* ElectronDialog.ElectronDialog;
+    const electronWindow = yield* ElectronWindow.ElectronWindow;
+    const fileSystem = yield* FileSystem.FileSystem;
+    const path = yield* Path.Path;
+    // The VS Code extensions directory is the same dotfolder on Windows,
+    // macOS, and Linux; when it is missing the picker opens wherever the
+    // platform would by default.
+    const extensionsDir = path.join(NodeOS.homedir(), ".vscode", "extensions");
+    const defaultPath = yield* fileSystem
+      .exists(extensionsDir)
+      .pipe(Effect.orElseSucceed(() => false));
+    const paths = yield* dialog.pickFiles({
+      owner: yield* electronWindow.focusedMainOrFirst,
+      defaultPath: defaultPath ? Option.some(extensionsDir) : Option.none(),
+      filters: [{ name: "JSON", extensions: ["json"] }],
+    });
+    if (paths.length === 0) {
+      return null;
+    }
+    return yield* Effect.forEach(paths, (filePath) => {
+      const name = path.basename(filePath);
+      return Effect.gen(function* () {
+        const info = yield* fileSystem.stat(filePath);
+        const size = Number(info.size);
+        if (size > PICKED_THEME_FILE_MAX_BYTES) {
+          return { name, size, text: "" } satisfies PickedThemeFile;
+        }
+        const text = yield* fileSystem.readFileString(filePath);
+        return { name, size, text } satisfies PickedThemeFile;
+      }).pipe(
+        // An unreadable file degrades to an entry the renderer reports.
+        Effect.orElseSucceed((): PickedThemeFile => ({ name, size: 0, text: "" })),
+      );
+    });
+  }),
+});

apps/desktop/src/preload.ts

@@ -97,6 +97,7 @@ contextBridge.exposeInMainWorld("desktopBridge", {
   setWslDistro: (distro) => ipcRenderer.invoke(IpcChannels.SET_WSL_DISTRO_CHANNEL, distro),
   setWslOnly: (enabled) => ipcRenderer.invoke(IpcChannels.SET_WSL_ONLY_CHANNEL, enabled),
   pickFolder: (options) => ipcRenderer.invoke(IpcChannels.PICK_FOLDER_CHANNEL, options),
+  pickThemeFiles: () => ipcRenderer.invoke(IpcChannels.PICK_THEME_FILES_CHANNEL, undefined),
   confirm: (message) => ipcRenderer.invoke(IpcChannels.CONFIRM_CHANNEL, message),
   setTheme: (theme) => ipcRenderer.invoke(IpcChannels.SET_THEME_CHANNEL, theme),
   showContextMenu: (items, position) =>

apps/desktop/src/window/DesktopApplicationMenu.test.ts

@@ -52,6 +52,7 @@ const electronAppLayer = Layer.succeed(ElectronApp.ElectronApp, {
 
 const electronDialogLayer = Layer.succeed(ElectronDialog.ElectronDialog, {
   pickFolder: () => Effect.succeed(Option.none()),
+  pickFiles: () => Effect.succeed([]),
   confirm: () => Effect.succeed(false),
   showMessageBox: () => Effect.succeed({ response: 0, checkboxChecked: false }),
   showErrorBox: () => Effect.void,

apps/server/src/keybindings.test.ts

@@ -198,6 +198,7 @@ it.layer(NodeServices.layer)("keybindings", (it) => {
       assert.equal(defaultsByCommand.get("thread.jump.1"), "mod+1");
       assert.equal(defaultsByCommand.get("thread.jump.9"), "mod+9");
       assert.equal(defaultsByCommand.get("modelPicker.toggle"), "mod+shift+m");
+      assert.equal(defaultsByCommand.get("themeEditor.toggle"), "mod+alt+shift+t");
       assert.equal(defaultsByCommand.get("filePicker.toggle"), "mod+p");
       assert.equal(defaultsByCommand.get("projectSearch.toggle"), "mod+shift+f");
       assert.equal(defaultsByCommand.get("sidebar.toggle"), "mod+b");