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

src/components/Dialog/AllDialog.vue

@@ -24,6 +24,7 @@
   />
   <ExportSongAudioDialog v-model="isExportSongAudioDialogOpen" />
   <ImportSongProjectDialog v-model="isImportSongProjectDialogOpenComputed" />
+  <InitialSettingsDialog v-model="isInitialSettingsDialogOpenComputed" />
 </template>
 
 <script setup lang="ts">
@@ -40,6 +41,7 @@
 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";
@@ -178,4 +180,18 @@
       isImportSongProjectDialogOpen: val,
     }),
 });
+
+// 初期設定ダイアログ
+const isSelectedEditorType = computed(() => store.state.openedEditor);
+console.log(isSelectedEditorType.value);
+const isInitialSettingsDialogOpenComputed = computed({
+  get: () => store.state.isInitialSettingsDialogOpen,
+  set: (val) => {
+    if (isSelectedEditorType.value) {
+      void store.actions.SET_DIALOG_OPEN({
+        isInitialSettingsDialogOpen: val,
+      });
+    }
+  },
+});
 </script>

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

@@ -532,6 +532,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

@@ -1977,6 +1977,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: true,
   isMaximized: false,
   isPinned: false,
   isFullscreen: false,