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

src/components/App.vue

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

src/components/Dialog/AllDialog.vue

@@ -23,6 +23,7 @@
   />
   <ExportSongAudioDialog v-model="isExportSongAudioDialogOpen" />
   <ImportSongProjectDialog v-model="isImportSongProjectDialogOpenComputed" />
+  <InitialSettingsDialog v-model="isInitialSettingsDialogOpenComputed" />
 </template>
 
 <script setup lang="ts">
@@ -38,6 +39,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 { useStore } from "@/store";
 import { filterCharacterInfosByStyleType } from "@/store/utility";
@@ -142,6 +144,21 @@ const isAcceptRetrieveTelemetryDialogOpenComputed = computed({
     }),
 });
 
+// 初期設定ダイアログ
+const isInitialSettingsDialogOpenComputed = computed({
+  get: () =>
+    !store.state.isAcceptTermsDialogOpen &&
+    !store.state.isCharacterOrderDialogOpen &&
+    !store.state.isDefaultStyleSelectDialogOpen &&
+    !store.state.isAcceptRetrieveTelemetryDialogOpen &&
+    store.state.isInitialSettingsDialogOpen,
+  set: (val) => {
+    void store.actions.SET_DIALOG_OPEN({
+      isInitialSettingsDialogOpen: val,
+    });
+  },
+});
+
 // エディタのアップデート確認ダイアログ
 const canOpenNotificationDialog = computed(() => {
   return (

src/components/Dialog/InitialSettingsDialog.vue

@@ -0,0 +1,92 @@
+<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_ROOT_MISC_SETTING({
+    key: "openedEditor",
+    value: 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/components/Menu/MenuBar/MenuBar.vue

@@ -526,6 +526,16 @@ const menudata = computed<MenuItemData[]>(() => [
         },
         disableWhenUiLocked: false,
       },
+      {
+        type: "button",
+        label: "初期設定ダイアログデバッグ用ボタン",
+        onClick() {
+          void store.actions.SET_DIALOG_OPEN({
+            isInitialSettingsDialogOpen: true,
+          });
+        },
+        disableWhenUiLocked: true,
+      },
     ],
   },
   {

src/store/type.ts

@@ -1895,9 +1895,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
@@ -2018,6 +2016,7 @@ export type DialogStates = {
   isUpdateNotificationDialogOpen: boolean;
   isExportSongAudioDialogOpen: boolean;
   isImportSongProjectDialogOpen: boolean;
+  isInitialSettingsDialogOpen: boolean;
 };
 
 export type UiStoreTypes = {

src/store/ui.ts

@@ -81,6 +81,7 @@ export const uiStoreState: UiStoreState = {
   isUpdateNotificationDialogOpen: false,
   isExportSongAudioDialogOpen: false,
   isImportSongProjectDialogOpen: false,
+  isInitialSettingsDialogOpen: false,
   isMaximized: false,
   isPinned: false,
   isFullscreen: false,

src/type/preload.ts

@@ -376,7 +376,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),