WIP: 初回起動時にトークとソングのどちらかを選択できるダイアログを表示する

src/components/App.vue

@@ -157,6 +157,7 @@ onMounted(async () => {
     isAcceptTermsDialogOpen:
       import.meta.env.MODE !== "development" &&
       store.state.acceptTerms !== "Accepted",
+    isInitialSettingsDialogOpen: store.state.openedEditor == undefined,
   });
 
   // プロジェクトファイルが指定されていればロード

src/components/Dialog/AllDialog.vue

@@ -29,6 +29,7 @@
   />
   <ExportSongAudioDialog v-model:dialogOpened="isExportSongAudioDialogOpen" />
   <ImportSongProjectDialog v-model="isImportSongProjectDialogOpenComputed" />
+  <InitialSettingsDialog v-model="isInitialSettingsDialogOpenComputed" />
   <PresetManageDialog v-model:dialogOpened="isPresetManageDialogOpenComputed" />
   <HelpDialog v-model:dialogOpened="isHelpDialogOpenComputed" />
 </template>
@@ -46,6 +47,7 @@ import DictionaryManageDialog from "@/components/Dialog/DictionaryManageDialog.v
 import EngineManageDialog from "@/components/Dialog/EngineManageDialog.vue";
 import UpdateNotificationDialogContainer from "@/components/Dialog/UpdateNotificationDialog/Container.vue";
 import ImportSongProjectDialog from "@/components/Dialog/ImportSongProjectDialog.vue";
+import InitialSettingsDialog from "@/components/Dialog/InitialSettingsDialog.vue";
 import ExportSongAudioDialog from "@/components/Dialog/ExportSongAudioDialog/Container.vue";
 import PresetManageDialog from "@/components/Dialog/PresetManageDialog.vue";
 import HelpDialog from "@/components/Dialog/HelpDialog/HelpDialog.vue";
@@ -152,6 +154,20 @@ const isAcceptRetrieveTelemetryDialogOpenComputed = computed({
     }),
 });
 
+// 初期設定ダイアログ
+const isInitialSettingsDialogOpenComputed = computed({
+  get: () =>
+    !store.state.isAcceptTermsDialogOpen &&
+    !store.state.isCharacterOrderDialogOpen &&
+    !store.state.isDefaultStyleSelectDialogOpen &&
+    !store.state.isAcceptRetrieveTelemetryDialogOpen &&
+    store.state.isInitialSettingsDialogOpen,
+  set: (val) =>
+    store.actions.SET_DIALOG_OPEN({
+      isInitialSettingsDialogOpen: val,
+    }),
+});
+
 // エディタのアップデート確認ダイアログ
 const canOpenNotificationDialog = computed(() => {
   return (

src/components/Dialog/InitialSettingsDialog.vue

@@ -0,0 +1,91 @@
+<template>
+  <QDialog v-model="isInitialSettingsDialogOpenComputed">
+    <QCard class="q-pa-md">
+      <QCardSection class="dialog-text">
+        <div class="text-h5">どちらに興味がありますか？</div>
+        <div class="text-body2 text-grey-8">
+          選択したエディタを開きます。アプリケーション右上からトークとソングを切り替えることができます。
+        </div>
+      </QCardSection>
+      <QCardActions class="q-px-md q-py-sm">
+        <div class="button-group col q-px-md">
+          <QBtn
+            outline
+            textColor="display"
+            class="text-no-wrap text-h4 text-bold q-mr-sm"
+            @click="selectEditor('talk')"
+            @update:modelValue="selectEditor"
+          >
+            <label>トーク</label>
+            <QIcon
+              name="mic"
+              class="q-icon material-icons"
+              aria-hidden="true"
+              size="5rem"
+            />
+          </QBtn>
+          <QBtn
+            outline
+            textColor="display"
+            class="text-no-wrap text-h4 text-bold q-mr-sm"
+            @click="selectEditor('song')"
+            @update:modelValue="selectEditor"
+          >
+            <label>ソング</label>
+            <QIcon
+              name="music_note"
+              class="q-icon material-icons"
+              aria-hidden="true"
+              size="5rem"
+            />
+          </QBtn>
+        </div>
+      </QCardActions>
+    </QCard>
+  </QDialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { QIcon } from "quasar";
+import { useStore } from "@/store";
+import { EditorType } from "@/type/preload";
+
+const props = defineProps<{
+  modelValue: boolean;
+}>();
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+}>();
+
+const isInitialSettingsDialogOpenComputed = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
+});
+
+const store = useStore();
+
+const selectEditor = async (editorType: EditorType) => {
+  await store.actions.SET_INIT_OPEN_EDITOR({
+    editorType: editorType,
+  });
+
+  isInitialSettingsDialogOpenComputed.value = false;
+};
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/colors" as colors;
+
+.dialog-text {
+  text-align: center;
+}
+
+.button-group {
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  gap: 1rem;
+  width: fit-content;
+}
+</style>

src/store/setting.ts

@@ -15,6 +15,7 @@ import {
   EngineId,
   ConfirmedTips,
   RootMiscSettingType,
+  EditorType,
 } from "@/type/preload";
 import { IsEqual } from "@/type/utility";
 import { HotkeySettingType } from "@/domain/hotkeyAction";
@@ -431,4 +432,14 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
       );
     },
   },
+
+  SET_INIT_OPEN_EDITOR: {
+    mutation(state, { editorType }: { editorType: EditorType }) {
+      state.openedEditor = editorType;
+    },
+    action({ mutations }, { editorType }: { editorType: EditorType }) {
+      void window.backend.setSetting("openedEditor", editorType);
+      mutations.SET_INIT_OPEN_EDITOR({ editorType });
+    },
+  },
 });

src/store/type.ts

@@ -1905,9 +1905,7 @@ export type SettingStoreState = {
   experimentalSetting: ExperimentalSettingType;
   confirmedTips: ConfirmedTips;
   engineSettings: EngineSettings;
-} & Omit<RootMiscSettingType, "openedEditor"> & {
-    openedEditor: EditorType | undefined; // undefinedのときはどのエディタを開くか定まっていない
-  };
+} & RootMiscSettingType;
 
 // keyとvalueの型を連動するようにしたPayloadを作る
 type KeyValuePayload<R, K extends keyof R = keyof R> = K extends keyof R
@@ -1996,6 +1994,11 @@ export type SettingStoreTypes = {
   APPEND_RECENTLY_USED_PROJECT: {
     action(payload: { filePath: string }): Promise<void>;
   };
+
+  SET_INIT_OPEN_EDITOR: {
+    mutation: { editorType: EditorType };
+    action(payload: { editorType: EditorType }): void;
+  };
 };
 
 /*
@@ -2028,6 +2031,7 @@ export type DialogStates = {
   isUpdateNotificationDialogOpen: boolean;
   isExportSongAudioDialogOpen: boolean;
   isImportSongProjectDialogOpen: boolean;
+  isInitialSettingsDialogOpen: boolean;
   isPresetManageDialogOpen: boolean;
   isHelpDialogOpen: boolean;
 };

src/store/ui.ts

@@ -78,6 +78,7 @@ export const uiStoreState: UiStoreState = {
   isUpdateNotificationDialogOpen: false,
   isExportSongAudioDialogOpen: false,
   isImportSongProjectDialogOpen: false,
+  isInitialSettingsDialogOpen: false,
   isPresetManageDialogOpen: false,
   isHelpDialogOpen: false,
   isMaximized: false,

src/type/preload.ts

@@ -370,7 +370,7 @@ export type ConfirmedTips = {
 
 // ルート直下にある雑多な設定値
 export const rootMiscSettingSchema = z.object({
-  openedEditor: z.enum(["talk", "song"]).default("talk"),
+  openedEditor: z.enum(["talk", "song"]).optional(),
   editorFont: z.enum(["default", "os"]).default("default"),
   showTextLineNumber: z.boolean().default(false),
   showAddAudioItemButton: z.boolean().default(true),