refactor: MenuBarの定義を分散

eslint.config.js

@@ -243,7 +243,7 @@ export default defineConfigWithVueTs(
         {
           patterns: [
             {
-              group: ["electron"],
+              regex: "^electron(\\/|$)",
               message:
                 "このファイル内でelectronはimportできません。許可されているファイル内へ移すか、ESLintの設定を見直してください",
             },

src/backend/electron/ipc.ts

@@ -1,41 +1,23 @@
-import {
-  BrowserWindow,
-  ipcMain,
-  IpcMainInvokeEvent,
-  IpcRendererEvent,
-} from "electron";
+import { BrowserWindow, ipcMain, IpcMainInvokeEvent } from "electron";
 import { IpcIHData, IpcSOData } from "@/type/ipc";
 import { createLogger } from "@/helpers/log";
 
 const log = createLogger("ipc");
 
-export type IpcRendererInvoke = {
-  [K in keyof IpcIHData]: (
-    ...args: IpcIHData[K]["args"]
-  ) => Promise<IpcIHData[K]["return"]>;
-};
-
 export type IpcMainHandle = {
   [K in keyof IpcIHData]: (
     event: IpcMainInvokeEvent,
     ...args: IpcIHData[K]["args"]
   ) => Promise<IpcIHData[K]["return"]> | IpcIHData[K]["return"];
 };
 
-export type IpcMainSend = {
+type IpcMainSend = {
   [K in keyof IpcSOData]: (
     win: BrowserWindow,
     ...args: IpcSOData[K]["args"]
   ) => void;
 };
 
-export type IpcRendererOn = {
-  [K in keyof IpcSOData]: (
-    event: IpcRendererEvent,
-    ...args: IpcSOData[K]["args"]
-  ) => Promise<IpcSOData[K]["return"]> | IpcSOData[K]["return"];
-};
-
 // FIXME: asを使わないようオーバーロードにした。オーバーロードも使わない書き方にしたい。
 export function registerIpcMainHandle<T extends IpcMainHandle>(
   listeners: T,

src/backend/electron/renderer/ipc.ts

@@ -0,0 +1,7 @@
+import { IpcIHData } from "@/type/ipc";
+
+export type IpcRendererInvoke = {
+  [K in keyof IpcIHData]: (
+    ...args: IpcIHData[K]["args"]
+  ) => Promise<IpcIHData[K]["return"]>;
+};

src/backend/electron/renderer/menuBarData.ts

@@ -0,0 +1,116 @@
+import { computed } from "vue";
+import { useEngineIcons } from "@/composables/useEngineIcons";
+import {
+  MaybeComputedMenuBarContent,
+  MenuBarContent,
+} from "@/components/Menu/MenuBar/menuBarData";
+import { MenuItemData } from "@/components/Menu/type";
+import { Store } from "@/store";
+import { removeNullableAndBoolean } from "@/helpers/arrayHelper";
+
+export const useElectronMenuBarData = (
+  store: Store,
+): MaybeComputedMenuBarContent => {
+  const engineIds = computed(() => store.state.engineIds);
+  const engineInfos = computed(() => store.state.engineInfos);
+  const engineManifests = computed(() => store.state.engineManifests);
+  const engineIcons = useEngineIcons(engineManifests);
+  const enableMultiEngine = computed(() => store.state.enableMultiEngine);
+
+  // 「エンジン」メニューのエンジン毎の項目
+  const engineSubMenuData = computed<MenuBarContent["engine"]>(() => {
+    let singleEngineSubMenuData: MenuItemData[];
+    if (Object.values(engineInfos.value).length === 1) {
+      singleEngineSubMenuData = [
+        {
+          type: "button",
+          label: "再起動",
+          onClick: () => {
+            void store.actions.RESTART_ENGINES({
+              engineIds: [engineIds.value[0]],
+            });
+          },
+          disableWhenUiLocked: false,
+        },
+      ];
+    } else {
+      singleEngineSubMenuData = store.getters.GET_SORTED_ENGINE_INFOS.map(
+        (engineInfo): MenuItemData => ({
+          type: "root",
+          label: engineInfo.name,
+          icon:
+            engineManifests.value[engineInfo.uuid] &&
+            engineIcons.value[engineInfo.uuid],
+          disableWhenUiLocked: false,
+          subMenu: removeNullableAndBoolean([
+            engineInfo.path != "" && {
+              type: "button",
+              label: "フォルダを開く",
+              onClick: () => {
+                void store.actions.OPEN_ENGINE_DIRECTORY({
+                  engineId: engineInfo.uuid,
+                });
+              },
+              disableWhenUiLocked: false,
+            },
+            {
+              type: "button",
+              label: "再起動",
+              onClick: () => {
+                void store.actions.RESTART_ENGINES({
+                  engineIds: [engineInfo.uuid],
+                });
+              },
+              disableWhenUiLocked: false,
+            },
+          ]),
+        }),
+      );
+    }
+
+    const allEnginesSubMenuData = enableMultiEngine.value
+      ? removeNullableAndBoolean<MenuItemData>([
+          {
+            type: "button",
+            label: "全てのエンジンを再起動",
+            onClick: () => {
+              void store.actions.RESTART_ENGINES({
+                engineIds: engineIds.value,
+              });
+            },
+            disableWhenUiLocked: false,
+          },
+          {
+            type: "button",
+            label: "エンジンの管理",
+            onClick: () => {
+              void store.actions.SET_DIALOG_OPEN({
+                isEngineManageDialogOpen: true,
+              });
+            },
+            disableWhenUiLocked: false,
+          },
+          store.state.isMultiEngineOffMode && {
+            type: "button",
+            label: "マルチエンジンをオンにして再読み込み",
+            onClick() {
+              void store.actions.RELOAD_APP({
+                isMultiEngineOffMode: false,
+              });
+            },
+            disableWhenUiLocked: false,
+            disableWhileReloadingLock: true,
+          },
+        ])
+      : [];
+
+    return {
+      singleEngine: singleEngineSubMenuData,
+      allEngines: allEnginesSubMenuData,
+    };
+  });
+
+  return {
+    engine: engineSubMenuData,
+  };
+};

src/components/App.vue

@@ -3,9 +3,11 @@
     <TooltipProvider disableHoverableContent :delayDuration="500">
       <MenuBar
         v-if="openedEditor != undefined"
-        :fileSubMenuData="subMenuData.fileSubMenuData.value"
-        :editSubMenuData="subMenuData.editSubMenuData.value"
-        :viewSubMenuData="subMenuData.viewSubMenuData.value"
+        :fileSubMenuData="subMenuData.file"
+        :editSubMenuData="subMenuData.edit"
+        :viewSubMenuData="subMenuData.view"
+        :engineSubMenuData="subMenuData.engine"
+        :settingSubMenuData="subMenuData.setting"
         :editor="openedEditor"
       />
       <KeepAlive>
@@ -37,22 +39,29 @@ import MenuBar from "@/components/Menu/MenuBar/MenuBar.vue";
 import { useMenuBarData as useTalkMenuBarData } from "@/components/Talk/menuBarData";
 import { useMenuBarData as useSingMenuBarData } from "@/components/Sing/menuBarData";
 import { setFontToCss, setThemeToCss } from "@/domain/dom";
-import { ExhaustiveError } from "@/type/utility";
+import { useCommonMenuBarData } from "@/components/Menu/MenuBar/menuBarData";
+import { concatMenuBarData } from "@/components/Menu/MenuBar/menuBarData";
+import { isElectron } from "@/helpers/platform";
+import { useElectronMenuBarData } from "@/backend/electron/renderer/menuBarData";
+import { removeNullableAndBoolean } from "@/helpers/arrayHelper";
 
 const store = useStore();
 
-const talkMenuBarData = useTalkMenuBarData();
-const singMenuBarData = useSingMenuBarData();
-
-const subMenuData = computed(() => {
-  if (openedEditor.value === "talk" || openedEditor.value == undefined) {
-    return talkMenuBarData;
-  } else if (openedEditor.value === "song") {
-    return singMenuBarData;
-  }
-
-  throw new ExhaustiveError(openedEditor.value);
-});
+const commonMenuBarData = useCommonMenuBarData(store);
+const talkMenuBarData = useTalkMenuBarData(store);
+const singMenuBarData = useSingMenuBarData(store);
+const electronMenuBarData = useElectronMenuBarData(store);
+
+const subMenuData = computed(() =>
+  concatMenuBarData(
+    removeNullableAndBoolean([
+      commonMenuBarData,
+      store.state.openedEditor === "talk" && talkMenuBarData,
+      store.state.openedEditor === "song" && singMenuBarData,
+      isElectron && electronMenuBarData,
+    ]),
+  ),
+);
 
 const openedEditor = computed(() => store.state.openedEditor);