From 3e3af23377997902961cebea35b4b1adc7531d4a Mon Sep 17 00:00:00 2001
From: sevenc-nanashi <sevenc7c@sevenc7c.com>
Date: Sat, 20 Jan 2024 22:45:06 +0900
Subject: [PATCH 01/11] =?UTF-8?q?Delete:=20MobileHeaderBar=E3=81=AE?=
 =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=A0=E3=81=91=E3=82=92HeaderBar?=
 =?UTF-8?q?=E3=81=AB=E7=A7=BB=E5=8B=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HeaderBar.vue       |  10 ++-
 src/components/MobileHeaderBar.vue | 133 -----------------------------
 src/views/EditorHome.vue           |   3 +-
 vite.config.ts                     |   6 +-
 4 files changed, 13 insertions(+), 139 deletions(-)
 delete mode 100644 src/components/MobileHeaderBar.vue

diff --git a/src/components/HeaderBar.vue b/src/components/HeaderBar.vue
index b0de364d96..27215e2fff 100644
--- a/src/components/HeaderBar.vue
+++ b/src/components/HeaderBar.vue
@@ -1,5 +1,8 @@
 <template>
-  <q-header class="q-py-sm">
+  <q-toolbar v-if="isMobile" class="bg-primary text-white">
+    <mobile-menu v-if="isMobile" />
+  </q-toolbar>
+  <q-header v-else class="q-py-sm">
     <q-toolbar>
       <template v-for="button in headerButtons" :key="button.text">
         <q-space v-if="button.text === null" />
@@ -20,6 +23,8 @@
 
 <script setup lang="ts">
 import { computed, ComputedRef } from "vue";
+import { useQuasar } from "quasar";
+import MobileMenu from "./MobileMenu.vue";
 import {
   generateAndConnectAndSaveAudioWithDialog,
   multiGenerateAndSaveAudioWithDialog,
@@ -34,6 +39,9 @@ import {
 } from "@/type/preload";
 import { getToolbarButtonName } from "@/store/utility";
 
+const $q = useQuasar();
+const isMobile = computed(() => !$q.platform.is.desktop);
+
 type ButtonContent = {
   text: string;
   click(): void;
diff --git a/src/components/MobileHeaderBar.vue b/src/components/MobileHeaderBar.vue
deleted file mode 100644
index 25a757f372..0000000000
--- a/src/components/MobileHeaderBar.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<!-- TODO: PC版ヘッダーと統合する -->
-<template>
-  <q-toolbar class="bg-primary text-white">
-    <q-btn flat round dense>
-      <q-icon name="menu" />
-      <q-menu transition-show="none" transition-hide="none">
-        <q-list dense>
-          <menu-item
-            v-for="(item, index) in menudata"
-            :key="item.label"
-            v-model:selected="subMenuOpenFlags[index]"
-            :menudata="item"
-          />
-        </q-list>
-      </q-menu>
-    </q-btn>
-    <q-space />
-    <q-btn
-      v-for="button in headerButtons"
-      :key="button.icon"
-      :disable="button.disable"
-      flat
-      round
-      dense
-      :icon="button.icon"
-      @click="button.onClick"
-    />
-  </q-toolbar>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { MenuItemData } from "./MenuBar.vue";
-import MenuItem from "./MenuItem.vue";
-import { useStore } from "@/store";
-const store = useStore();
-
-const uiLocked = computed(() => store.getters.UI_LOCKED);
-const canUndo = computed(() => store.getters.CAN_UNDO);
-const canRedo = computed(() => store.getters.CAN_REDO);
-
-const headerButtons = computed(() => [
-  {
-    icon: "svguse:toolbarIcons.svg#saveVoice",
-    onClick: () => {
-      alert("TODO: 音声書きだし");
-    },
-    disable: uiLocked.value,
-  },
-  {
-    icon: "file_upload",
-    onClick: () => {
-      alert("TODO: 一つ保存する");
-    },
-    disable: uiLocked.value,
-  },
-  {
-    icon: "undo",
-    onClick: () => {
-      store.dispatch("UNDO");
-    },
-    disable: !canUndo.value,
-  },
-  {
-    icon: "redo",
-    onClick: () => {
-      store.dispatch("REDO");
-    },
-    disable: !canRedo.value,
-  },
-]);
-
-const menudata = ref<MenuItemData[]>([
-  {
-    type: "button",
-    label: "選択している音声を書き出し",
-    onClick: () => {
-      alert("TODO");
-    },
-    disableWhenUiLocked: true,
-  },
-  {
-    type: "button",
-    label: "すべての音声を書き出し",
-    onClick: () => {
-      alert("TODO");
-    },
-    disableWhenUiLocked: true,
-  },
-  {
-    type: "button",
-    label: "すべての音声を繋げて書き出し",
-    onClick: () => {
-      alert("TODO");
-    },
-    disableWhenUiLocked: true,
-  },
-  {
-    type: "separator",
-  },
-  {
-    type: "button",
-    label: "テキストを繋げて書き出し",
-    onClick: () => {
-      alert("TODO");
-    },
-    disableWhenUiLocked: true,
-  },
-  {
-    type: "button",
-    label: "テキスト読み込み",
-    onClick: () => {
-      alert("TODO");
-    },
-    disableWhenUiLocked: true,
-  },
-  {
-    type: "separator",
-  },
-  {
-    type: "button",
-    label: "メニューに戻る",
-    onClick: () => {
-      alert("TODO");
-    },
-    disableWhenUiLocked: true,
-  },
-]);
-
-const subMenuOpenFlags = ref<boolean[]>(
-  [...Array(menudata.value.length)].map(() => false)
-);
-</script>
diff --git a/src/views/EditorHome.vue b/src/views/EditorHome.vue
index 426487ce4c..4a812c07d3 100644
--- a/src/views/EditorHome.vue
+++ b/src/views/EditorHome.vue
@@ -2,8 +2,7 @@
   <menu-bar v-if="$q.platform.is.desktop" />
 
   <q-layout reveal elevated container class="layout-container">
-    <header-bar v-if="$q.platform.is.desktop" />
-    <mobile-header-bar v-else />
+    <header-bar />
 
     <q-page-container>
       <q-page class="main-row-panes">
diff --git a/vite.config.ts b/vite.config.ts
index 940ec1bca4..b40837a452 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -99,9 +99,9 @@ export default defineConfig((options) => {
       options.mode !== "test" &&
         checker({
           overlay: false,
-          eslint: {
-            lintCommand: "eslint --ext .ts,.vue .",
-          },
+          // eslint: {
+          //   lintCommand: "eslint --ext .ts,.vue .",
+          // },
           vueTsc: true,
         }),
       isElectron &&

From a6be99fe436327b56dc25c3812ee1a451d3e77b2 Mon Sep 17 00:00:00 2001
From: sevenc-nanashi <sevenc7c@sevenc7c.com>
Date: Mon, 22 Jan 2024 23:58:27 +0900
Subject: [PATCH 02/11] =?UTF-8?q?WIP:=20=E3=83=9C=E3=82=BF=E3=83=B3?=
 =?UTF-8?q?=E3=81=ABtag=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HeaderBar.vue  | 32 +++++++++++++-
 src/components/MobileMenu.vue | 82 +++++++++++++++++++++++++++++++++++
 2 files changed, 113 insertions(+), 1 deletion(-)
 create mode 100644 src/components/MobileMenu.vue

diff --git a/src/components/HeaderBar.vue b/src/components/HeaderBar.vue
index 27215e2fff..054b5bf1c9 100644
--- a/src/components/HeaderBar.vue
+++ b/src/components/HeaderBar.vue
@@ -1,6 +1,19 @@
 <template>
   <q-toolbar v-if="isMobile" class="bg-primary text-white">
     <mobile-menu v-if="isMobile" />
+    <template v-for="button in headerButtons" :key="button.text">
+      <q-space v-if="button.text === null" />
+      <q-btn
+        v-else
+        unelevated
+        color="toolbar-button"
+        text-color="toolbar-button-display"
+        class="text-no-wrap text-bold q-mr-sm"
+        :disable="button.disable.value"
+        :icon="buttonIcons[button.tag]"
+        @click="button.click"
+      />
+    </template>
   </q-toolbar>
   <q-header v-else class="q-py-sm">
     <q-toolbar>
@@ -46,10 +59,12 @@ type ButtonContent = {
   text: string;
   click(): void;
   disable: ComputedRef<boolean>;
+  tag: ToolbarButtonTagType;
 };
 
 type SpacerContent = {
   text: null;
+  tag: null;
 };
 
 const store = useStore();
@@ -174,7 +189,7 @@ const importTextFile = () => {
 
 const usableButtons: Record<
   ToolbarButtonTagType,
-  Omit<ButtonContent, "text"> | null
+  Omit<ButtonContent, "text" | "tag"> | null
 > = {
   PLAY_CONTINUOUSLY: {
     click: playContinuously,
@@ -222,12 +237,27 @@ const headerButtons = computed(() =>
       return {
         ...buttonContent,
         text: getToolbarButtonName(tag),
+        tag,
       };
     } else {
       return {
         text: null,
+        tag: null,
       };
     }
   })
 );
+
+const buttonIcons: Record<ToolbarButtonTagType, string> = {
+  PLAY_CONTINUOUSLY: "play_arrow",
+  STOP: "stop",
+  EXPORT_AUDIO_SELECTED: "svguse:toolbarIcons.svg#saveVoice",
+  EXPORT_AUDIO_ALL: "save",
+  EXPORT_AUDIO_CONNECT_ALL: "save_alt",
+  SAVE_PROJECT: "save",
+  UNDO: "undo",
+  REDO: "redo",
+  IMPORT_TEXT: "import_export",
+  EMPTY: "",
+};
 </script>
diff --git a/src/components/MobileMenu.vue b/src/components/MobileMenu.vue
new file mode 100644
index 0000000000..85b1321073
--- /dev/null
+++ b/src/components/MobileMenu.vue
@@ -0,0 +1,82 @@
+<template>
+  <q-btn flat round dense>
+    <q-icon name="menu" />
+    <q-menu transition-show="none" transition-hide="none">
+      <q-list dense>
+        <menu-item
+          v-for="(item, index) in menudata"
+          :key="item.label"
+          v-model:selected="subMenuOpenFlags[index]"
+          :menudata="item"
+        />
+      </q-list>
+    </q-menu>
+  </q-btn>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { MenuItemData } from "./MenuBar.vue";
+import MenuItem from "./MenuItem.vue";
+
+const menudata = ref<MenuItemData[]>([
+  {
+    type: "button",
+    label: "選択している音声を書き出し",
+    onClick: () => {
+      alert("TODO");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "すべての音声を書き出し",
+    onClick: () => {
+      alert("TODO");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "すべての音声を繋げて書き出し",
+    onClick: () => {
+      alert("TODO");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "separator",
+  },
+  {
+    type: "button",
+    label: "テキストを繋げて書き出し",
+    onClick: () => {
+      alert("TODO");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "button",
+    label: "テキスト読み込み",
+    onClick: () => {
+      alert("TODO");
+    },
+    disableWhenUiLocked: true,
+  },
+  {
+    type: "separator",
+  },
+  {
+    type: "button",
+    label: "メニューに戻る",
+    onClick: () => {
+      alert("TODO");
+    },
+    disableWhenUiLocked: true,
+  },
+]);
+
+const subMenuOpenFlags = ref<boolean[]>(
+  [...Array(menudata.value.length)].map(() => false)
+);
+</script>

From 3723c663d87e6283231479a6a72fec8e9a7a67ab Mon Sep 17 00:00:00 2001
From: sevenc-nanashi <sevenc7c@sevenc7c.com>
Date: Thu, 25 Jan 2024 18:18:38 +0900
Subject: [PATCH 03/11] =?UTF-8?q?Add:=20=E3=82=A2=E3=82=A4=E3=82=B3?=
 =?UTF-8?q?=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/matexRecipes.yml        |  6 +++++-
 public/toolbarIcons.svg       |  2 +-
 src/App.vue                   |  6 ++++++
 src/components/HeaderBar.vue  | 23 ++++++++++++-----------
 src/components/MobileMenu.vue |  1 +
 src/views/EditorHome.vue      |  8 +++++---
 6 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/build/matexRecipes.yml b/build/matexRecipes.yml
index 86c0afbecf..160a459859 100644
--- a/build/matexRecipes.yml
+++ b/build/matexRecipes.yml
@@ -1,2 +1,6 @@
 toolbarIcons.svg:
-  saveVoice: save + volume_up
+  playAll: play_arrow + notes
+  exportSelected: upload + volume_up
+  exportConnectAll: upload + fast_forward
+  exportAll: upload + notes
+  importText: file_download + notes
diff --git a/public/toolbarIcons.svg b/public/toolbarIcons.svg
index c4cb3377e4..d50167070b 100644
--- a/public/toolbarIcons.svg
+++ b/public/toolbarIcons.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" standalone="yes"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-<symbol id="saveVoice" viewBox="0 0 512 512"><defs><clipPath id="clip-1"><rect x="0" y="0" transform="scale(21.33333,21.33333)" width="24" height="24" fill="none"></rect></clipPath><clipPath id="clip-2"><rect x="24" y="24" transform="scale(10.66667,10.66667)" width="24" height="24" fill="none"></rect></clipPath></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g clip-path="url(#clip-1)"><path d="M448,149.33333v106.66667h-42.66667v-88.96l-60.37333,-60.37333h-238.29333v298.66667l149.33333,0l0,42.66667h-149.33333c-23.56415,0 -42.66667,-19.10252 -42.66667,-42.66667v-298.66667c0,-23.56415 19.10252,-42.66667 42.66667,-42.66667h256zM192,320c0,-35.41333 28.58667,-64 64,-64v128c-35.41333,0 -64,-28.58667 -64,-64zM128,128h192v85.33333h-192z" fill="currentColor"></path></g><g clip-path="url(#clip-2)"><path d="M288,352v64h42.66667l53.33333,53.33333v-170.66667l-53.33333,53.33333zM432,384c-0.00457,-18.23022 -10.33591,-34.88435 -26.66667,-42.98667v85.86667c15.78667,-7.78667 26.66667,-24 26.66667,-42.88zM405.33333,290.45333v21.97333c30.82667,9.17333 53.33333,37.76 53.33333,71.57333c0,33.81333 -22.50667,62.4 -53.33333,71.57333v21.97333c42.77333,-9.70667 74.66667,-47.89333 74.66667,-93.54667c0,-45.65333 -31.89333,-83.84 -74.66667,-93.54667z" fill="currentColor"></path></g></g></symbol>
+<symbol id="playAll" viewBox="0 0 512 512"><defs><clipPath id="clip-1"><rect x="0" y="0" transform="scale(21.33333,21.33333)" width="24" height="24" fill="none"></rect></clipPath><clipPath id="clip-2"><rect x="24" y="24" transform="scale(10.66667,10.66667)" width="24" height="24" fill="none"></rect></clipPath></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g clip-path="url(#clip-1)"><path d="M213.33333,327.68l42.66667,-27.20304v50.55334l-85.33333,54.30303v-298.66667l234.66667,149.33333h-79.57333l-112.42667,-71.68z" fill="currentColor"></path></g><g clip-path="url(#clip-2)"><path d="M288,448h128v-21.33333h-128zM288,320v21.33333h192v-21.33333zM288,394.66667h192v-21.33333h-192z" fill="currentColor"></path></g></g></symbol><symbol id="exportSelected" viewBox="0 0 512 512"><defs><clipPath id="clip-1"><rect x="0" y="0" transform="scale(21.33333,21.33333)" width="24" height="24" fill="none"></rect></clipPath><clipPath id="clip-2"><rect x="24" y="24" transform="scale(10.66667,10.66667)" width="24" height="24" fill="none"></rect></clipPath></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g clip-path="url(#clip-1)"><path d="M192,213.33333h-85.33333l149.33333,-149.33333l149.33333,149.33333h-85.33333v42.66667h-42.66667v-85.33333h24.96l-46.29333,-46.29333l-46.29333,46.29333h24.96v128h21.33333v42.66667l-64,0zM106.66667,384l149.33333,0l0,42.66667h-149.33333z" fill="currentColor"></path></g><g clip-path="url(#clip-2)"><path d="M288,352v64h42.66667l53.33333,53.33333v-170.66667l-53.33333,53.33333zM432,384c-0.00457,-18.23022 -10.33591,-34.88435 -26.66667,-42.98667v85.86667c15.78667,-7.78667 26.66667,-24 26.66667,-42.88zM405.33333,290.45333v21.97333c30.82667,9.17333 53.33333,37.76 53.33333,71.57333c0,33.81333 -22.50667,62.4 -53.33333,71.57333v21.97333c42.77333,-9.70667 74.66667,-47.89333 74.66667,-93.54667c0,-45.65333 -31.89333,-83.84 -74.66667,-93.54667z" fill="currentColor"></path></g></g></symbol><symbol id="exportConnectAll" viewBox="0 0 512 512"><defs><clipPath id="clip-1"><rect x="0" y="0" transform="scale(21.33333,21.33333)" width="24" height="24" fill="none"></rect></clipPath><clipPath id="clip-2"><rect x="24" y="24" transform="scale(10.66667,10.66667)" width="24" height="24" fill="none"></rect></clipPath></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g clip-path="url(#clip-1)"><path d="M192,213.33333h-85.33333l149.33333,-149.33333l149.33333,149.33333h-85.33333v42.66667h-42.66667v-85.33333h24.96l-46.29333,-46.29333l-46.29333,46.29333h24.96v128h21.33333v42.66667l-64,0zM106.66667,384l149.33333,0l0,42.66667h-149.33333z" fill="currentColor"></path></g><g clip-path="url(#clip-2)"><path d="M298.66667,448l90.66667,-64l-90.66667,-64zM394.66667,320v128l90.66667,-64z" fill="currentColor"></path></g></g></symbol><symbol id="exportAll" viewBox="0 0 512 512"><defs><clipPath id="clip-1"><rect x="0" y="0" transform="scale(21.33333,21.33333)" width="24" height="24" fill="none"></rect></clipPath><clipPath id="clip-2"><rect x="24" y="24" transform="scale(10.66667,10.66667)" width="24" height="24" fill="none"></rect></clipPath></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g clip-path="url(#clip-1)"><path d="M192,213.33333h-85.33333l149.33333,-149.33333l149.33333,149.33333h-85.33333v42.66667h-42.66667v-85.33333h24.96l-46.29333,-46.29333l-46.29333,46.29333h24.96v128h21.33333v42.66667l-64,0zM106.66667,384l149.33333,0l0,42.66667h-149.33333z" fill="currentColor"></path></g><g clip-path="url(#clip-2)"><path d="M288,448h128v-21.33333h-128zM288,320v21.33333h192v-21.33333zM288,394.66667h192v-21.33333h-192z" fill="currentColor"></path></g></g></symbol><symbol id="importText" viewBox="0 0 512 512"><defs><clipPath id="clip-1"><rect x="0" y="0" transform="scale(21.33333,21.33333)" width="24" height="24" fill="none"></rect></clipPath><clipPath id="clip-2"><rect x="24" y="24" transform="scale(10.66667,10.66667)" width="24" height="24" fill="none"></rect></clipPath></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g clip-path="url(#clip-1)"><path d="M128,426.66667c-23.46667,0 -42.66667,-19.2 -42.66667,-42.66667v-64h42.66667v64l128,0l0,42.66667zM149.33333,234.66667l30.08,-30.08l55.25333,55.04v-174.29333h42.66667l0,170.66667h-21.33333v85.33333zM332.58667,204.58667l30.08,30.08l-21.33333,21.33333l-60.35928,0z" fill="currentColor"></path></g><g clip-path="url(#clip-2)"><path d="M288,448h128v-21.33333h-128zM288,320v21.33333h192v-21.33333zM288,394.66667h192v-21.33333h-192z" fill="currentColor"></path></g></g></symbol>
 </svg>
diff --git a/src/App.vue b/src/App.vue
index b392f1993d..7d781e8db7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,12 +8,18 @@
 import { watch, computed } from "vue";
 import { useGtm } from "@gtm-support/vue-gtm";
 import { useRoute } from "vue-router";
+import { useQuasar, Notify } from "quasar";
 import ErrorBoundary from "@/components/ErrorBoundary.vue";
 import { useStore } from "@/store";
 
 const store = useStore();
 store.dispatch("INIT_VUEX");
 
+const $q = useQuasar();
+Notify.setDefaults({
+  position: $q.platform.is.desktop ? "bottom" : "top",
+});
+
 // URLパラメータに従ってマルチエンジンをオフにする
 const route = useRoute();
 const query = computed(() => route.query);
diff --git a/src/components/HeaderBar.vue b/src/components/HeaderBar.vue
index 050b7556f4..cb068f16ea 100644
--- a/src/components/HeaderBar.vue
+++ b/src/components/HeaderBar.vue
@@ -5,14 +5,15 @@
       <q-space v-if="button.text === null" />
       <q-btn
         v-else
-        unelevated
-        color="toolbar-button"
-        text-color="toolbar-button-display"
-        class="text-no-wrap text-bold q-mr-sm"
+        flat
+        round
+        dense
         :disable="button.disable.value"
         :icon="buttonIcons[button.tag]"
         @click="button.click"
-      />
+      >
+        <q-tooltip>{{ button.text }}</q-tooltip>
+      </q-btn>
     </template>
   </q-toolbar>
   <q-header v-else class="q-py-sm">
@@ -249,15 +250,15 @@ const headerButtons = computed(() =>
 );
 
 const buttonIcons: Record<ToolbarButtonTagType, string> = {
-  PLAY_CONTINUOUSLY: "play_arrow",
+  PLAY_CONTINUOUSLY: "playlist_play",
   STOP: "stop",
-  EXPORT_AUDIO_SELECTED: "svguse:toolbarIcons.svg#saveVoice",
-  EXPORT_AUDIO_ALL: "save",
-  EXPORT_AUDIO_CONNECT_ALL: "save_alt",
-  SAVE_PROJECT: "save",
+  EXPORT_AUDIO_SELECTED: "svguse:toolbarIcons.svg#exportSelected",
+  EXPORT_AUDIO_ALL: "svguse:toolbarIcons.svg#exportAll",
+  EXPORT_AUDIO_CONNECT_ALL: "svguse:toolbarIcons.svg#exportConnectAll",
   UNDO: "undo",
   REDO: "redo",
-  IMPORT_TEXT: "import_export",
+  IMPORT_TEXT: "svguse:toolbarIcons.svg#importText",
+  SAVE_PROJECT: "save",
   EMPTY: "",
 };
 </script>
diff --git a/src/components/MobileMenu.vue b/src/components/MobileMenu.vue
index 85b1321073..a5d629af12 100644
--- a/src/components/MobileMenu.vue
+++ b/src/components/MobileMenu.vue
@@ -12,6 +12,7 @@
       </q-list>
     </q-menu>
   </q-btn>
+  <q-separator vertical spaced inset color="background" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/EditorHome.vue b/src/views/EditorHome.vue
index 47f2e4aee5..58ade8759d 100644
--- a/src/views/EditorHome.vue
+++ b/src/views/EditorHome.vue
@@ -2,8 +2,7 @@
   <menu-bar v-if="$q.platform.is.desktop" />
 
   <q-layout reveal elevated container class="layout-container">
-    <header-bar />
-
+    <header-bar v-if="$q.platform.is.desktop" />
     <q-page-container>
       <q-page class="main-row-panes">
         <progress-dialog />
@@ -151,6 +150,7 @@
             />
           </template>
         </q-splitter>
+        <header-bar v-if="!$q.platform.is.desktop" />
 
         <q-resize-observer
           ref="resizeObserverRef"
@@ -228,7 +228,6 @@ import {
 } from "@/type/preload";
 import { isOnCommandOrCtrlKeyDown } from "@/store/utility";
 import { parseCombo, setHotkeyFunctions } from "@/store/setting";
-import MobileHeaderBar from "@/components/MobileHeaderBar.vue";
 
 const props =
   defineProps<{
@@ -984,6 +983,9 @@ const onAudioCellPaneClick = () => {
   flex-basis: 0;
 
   display: flex;
+  flex-direction: column;
+
+  border-top: 2px solid colors.$splitter;
 
   .q-splitter--horizontal {
     height: calc(100vh - #{vars.$top-bar-height});

From 2d9b3b0daccce89ef97410a8054add7c720928ed Mon Sep 17 00:00:00 2001
From: sevenc-nanashi <sevenc7c@sevenc7c.com>
Date: Fri, 26 Jan 2024 21:54:06 +0900
Subject: [PATCH 04/11] =?UTF-8?q?Change:=20=E3=82=A2=E3=82=A4=E3=82=B3?=
 =?UTF-8?q?=E3=83=B3=E3=82=92=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/matexRecipes.yml  | 10 +++++-----
 package-lock.json       | 14 +++++++-------
 package.json            |  2 +-
 public/toolbarIcons.svg |  2 +-
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/build/matexRecipes.yml b/build/matexRecipes.yml
index 160a459859..b94cebc368 100644
--- a/build/matexRecipes.yml
+++ b/build/matexRecipes.yml
@@ -1,6 +1,6 @@
 toolbarIcons.svg:
-  playAll: play_arrow + notes
-  exportSelected: upload + volume_up
-  exportConnectAll: upload + fast_forward
-  exportAll: upload + notes
-  importText: file_download + notes
+  playAll: filled:play_arrow + notes
+  exportSelected: filled:save + volume_up
+  exportConnectAll: filled:save + link
+  exportAll: filled:save + notes
+  importText: filled:upload + outlined:import_contacts
diff --git a/package-lock.json b/package-lock.json
index 227e881ea8..4047ca81b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,7 +48,7 @@
         "@openapitools/openapi-generator-cli": "2.7.0",
         "@playwright/test": "1.40.1",
         "@quasar/vite-plugin": "1.3.0",
-        "@sevenc-nanashi/matex": "1.0.1",
+        "@sevenc-nanashi/matex": "1.1.1",
         "@types/async-lock": "1.4.0",
         "@types/clone-deep": "4.0.1",
         "@types/crypto-js": "4.1.1",
@@ -1977,9 +1977,9 @@
       }
     },
     "node_modules/@sevenc-nanashi/matex": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@sevenc-nanashi/matex/-/matex-1.0.1.tgz",
-      "integrity": "sha512-xphUlZ/LGm+VsfPAMquGDwWU90DlqGsn8FdFOxZuZ3yJH4GfmxwtDNZdCqPRD5PqGMbIf09FrINXPDfDV/CArA==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@sevenc-nanashi/matex/-/matex-1.1.1.tgz",
+      "integrity": "sha512-7nMvAN1VtVx7VTBmv7Ug4lw+UMq4/HqYuiPpwDS4gA7gBd4WS68n5n5j/iXlUG/rqk1nJXQv2NgoLQO+ppFomQ==",
       "dev": true,
       "dependencies": {
         "axios": "1.6.2",
@@ -19660,9 +19660,9 @@
       }
     },
     "@sevenc-nanashi/matex": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@sevenc-nanashi/matex/-/matex-1.0.1.tgz",
-      "integrity": "sha512-xphUlZ/LGm+VsfPAMquGDwWU90DlqGsn8FdFOxZuZ3yJH4GfmxwtDNZdCqPRD5PqGMbIf09FrINXPDfDV/CArA==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@sevenc-nanashi/matex/-/matex-1.1.1.tgz",
+      "integrity": "sha512-7nMvAN1VtVx7VTBmv7Ug4lw+UMq4/HqYuiPpwDS4gA7gBd4WS68n5n5j/iXlUG/rqk1nJXQv2NgoLQO+ppFomQ==",
       "dev": true,
       "requires": {
         "axios": "1.6.2",
diff --git a/package.json b/package.json
index cf677de8d0..c8bc10e1bc 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
     "@openapitools/openapi-generator-cli": "2.7.0",
     "@playwright/test": "1.40.1",
     "@quasar/vite-plugin": "1.3.0",
-    "@sevenc-nanashi/matex": "1.0.1",
+    "@sevenc-nanashi/matex": "1.1.1",
     "@types/async-lock": "1.4.0",
     "@types/clone-deep": "4.0.1",
     "@types/crypto-js": "4.1.1",
diff --git a/public/toolbarIcons.svg b/public/toolbarIcons.svg
index d50167070b..3f744a1853 100644
--- a/public/toolbarIcons.svg
+++ b/public/toolbarIcons.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" standalone="yes"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-<symbol id="playAll" viewBox="0 0 512 512"><defs><clipPath id="clip-1"><rect x="0" y="0" transform="scale(21.33333,21.33333)" width="24" height="24" fill="none"></rect></clipPath><clipPath id="clip-2"><rect x="24" y="24" transform="scale(10.66667,10.66667)" width="24" height="24" fill="none"></rect></clipPath></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g clip-path="url(#clip-1)"><path d="M213.33333,327.68l42.66667,-27.20304v50.55334l-85.33333,54.30303v-298.66667l234.66667,149.33333h-79.57333l-112.42667,-71.68z" fill="currentColor"></path></g><g clip-path="url(#clip-2)"><path d="M288,448h128v-21.33333h-128zM288,320v21.33333h192v-21.33333zM288,394.66667h192v-21.33333h-192z" fill="currentColor"></path></g></g></symbol><symbol id="exportSelected" viewBox="0 0 512 512"><defs><clipPath id="clip-1"><rect x="0" y="0" transform="scale(21.33333,21.33333)" width="24" height="24" fill="none"></rect></clipPath><clipPath id="clip-2"><rect x="24" y="24" transform="scale(10.66667,10.66667)" width="24" height="24" fill="none"></rect></clipPath></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g clip-path="url(#clip-1)"><path d="M192,213.33333h-85.33333l149.33333,-149.33333l149.33333,149.33333h-85.33333v42.66667h-42.66667v-85.33333h24.96l-46.29333,-46.29333l-46.29333,46.29333h24.96v128h21.33333v42.66667l-64,0zM106.66667,384l149.33333,0l0,42.66667h-149.33333z" fill="currentColor"></path></g><g clip-path="url(#clip-2)"><path d="M288,352v64h42.66667l53.33333,53.33333v-170.66667l-53.33333,53.33333zM432,384c-0.00457,-18.23022 -10.33591,-34.88435 -26.66667,-42.98667v85.86667c15.78667,-7.78667 26.66667,-24 26.66667,-42.88zM405.33333,290.45333v21.97333c30.82667,9.17333 53.33333,37.76 53.33333,71.57333c0,33.81333 -22.50667,62.4 -53.33333,71.57333v21.97333c42.77333,-9.70667 74.66667,-47.89333 74.66667,-93.54667c0,-45.65333 -31.89333,-83.84 -74.66667,-93.54667z" fill="currentColor"></path></g></g></symbol><symbol id="exportConnectAll" viewBox="0 0 512 512"><defs><clipPath id="clip-1"><rect x="0" y="0" transform="scale(21.33333,21.33333)" width="24" height="24" fill="none"></rect></clipPath><clipPath id="clip-2"><rect x="24" y="24" transform="scale(10.66667,10.66667)" width="24" height="24" fill="none"></rect></clipPath></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g clip-path="url(#clip-1)"><path d="M192,213.33333h-85.33333l149.33333,-149.33333l149.33333,149.33333h-85.33333v42.66667h-42.66667v-85.33333h24.96l-46.29333,-46.29333l-46.29333,46.29333h24.96v128h21.33333v42.66667l-64,0zM106.66667,384l149.33333,0l0,42.66667h-149.33333z" fill="currentColor"></path></g><g clip-path="url(#clip-2)"><path d="M298.66667,448l90.66667,-64l-90.66667,-64zM394.66667,320v128l90.66667,-64z" fill="currentColor"></path></g></g></symbol><symbol id="exportAll" viewBox="0 0 512 512"><defs><clipPath id="clip-1"><rect x="0" y="0" transform="scale(21.33333,21.33333)" width="24" height="24" fill="none"></rect></clipPath><clipPath id="clip-2"><rect x="24" y="24" transform="scale(10.66667,10.66667)" width="24" height="24" fill="none"></rect></clipPath></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g clip-path="url(#clip-1)"><path d="M192,213.33333h-85.33333l149.33333,-149.33333l149.33333,149.33333h-85.33333v42.66667h-42.66667v-85.33333h24.96l-46.29333,-46.29333l-46.29333,46.29333h24.96v128h21.33333v42.66667l-64,0zM106.66667,384l149.33333,0l0,42.66667h-149.33333z" fill="currentColor"></path></g><g clip-path="url(#clip-2)"><path d="M288,448h128v-21.33333h-128zM288,320v21.33333h192v-21.33333zM288,394.66667h192v-21.33333h-192z" fill="currentColor"></path></g></g></symbol><symbol id="importText" viewBox="0 0 512 512"><defs><clipPath id="clip-1"><rect x="0" y="0" transform="scale(21.33333,21.33333)" width="24" height="24" fill="none"></rect></clipPath><clipPath id="clip-2"><rect x="24" y="24" transform="scale(10.66667,10.66667)" width="24" height="24" fill="none"></rect></clipPath></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g clip-path="url(#clip-1)"><path d="M128,426.66667c-23.46667,0 -42.66667,-19.2 -42.66667,-42.66667v-64h42.66667v64l128,0l0,42.66667zM149.33333,234.66667l30.08,-30.08l55.25333,55.04v-174.29333h42.66667l0,170.66667h-21.33333v85.33333zM332.58667,204.58667l30.08,30.08l-21.33333,21.33333l-60.35928,0z" fill="currentColor"></path></g><g clip-path="url(#clip-2)"><path d="M288,448h128v-21.33333h-128zM288,320v21.33333h192v-21.33333zM288,394.66667h192v-21.33333h-192z" fill="currentColor"></path></g></g></symbol>
+<symbol id="playAll" viewBox="0 0 512 512"><defs><clipPath id="clip-1"><rect x="0" y="0" transform="scale(21.33333,21.33333)" width="24" height="24" fill="none"></rect></clipPath><clipPath id="clip-2"><rect x="24" y="24" transform="scale(10.66667,10.66667)" width="24" height="24" fill="none"></rect></clipPath></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g clip-path="url(#clip-1)"><path d="M170.66667,405.33333v-298.66667l234.66667,149.33333h-149.33333v95.0303z" fill="currentColor"></path></g><g clip-path="url(#clip-2)"><path d="M288,448h128v-21.33333h-128zM288,320v21.33333h192v-21.33333zM288,394.66667h192v-21.33333h-192z" fill="currentColor"></path></g></g></symbol><symbol id="exportSelected" viewBox="0 0 512 512"><defs><clipPath id="clip-1"><rect x="0" y="0" transform="scale(21.33333,21.33333)" width="24" height="24" fill="none"></rect></clipPath><clipPath id="clip-2"><rect x="24" y="24" transform="scale(10.66667,10.66667)" width="24" height="24" fill="none"></rect></clipPath></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g clip-path="url(#clip-1)"><path d="M448,149.33333v106.66667h-192v21.33333c-35.41333,0 -64,28.58667 -64,64c0,35.41333 28.58667,64 64,64l0,42.66667h-149.33333c-23.56415,0 -42.66667,-19.10252 -42.66667,-42.66667v-298.66667c0,-23.56415 19.10252,-42.66667 42.66667,-42.66667h256zM320,106.66667h-213.33333v85.33333h213.33333z" fill="currentColor"></path></g><g clip-path="url(#clip-2)"><path d="M288,352v64h42.66667l53.33333,53.33333v-170.66667l-53.33333,53.33333zM432,384c-0.00457,-18.23022 -10.33591,-34.88435 -26.66667,-42.98667v85.86667c15.78667,-7.78667 26.66667,-24 26.66667,-42.88zM405.33333,290.45333v21.97333c30.82667,9.17333 53.33333,37.76 53.33333,71.57333c0,33.81333 -22.50667,62.4 -53.33333,71.57333v21.97333c42.77333,-9.70667 74.66667,-47.89333 74.66667,-93.54667c0,-45.65333 -31.89333,-83.84 -74.66667,-93.54667z" fill="currentColor"></path></g></g></symbol><symbol id="exportConnectAll" viewBox="0 0 512 512"><defs><clipPath id="clip-1"><rect x="0" y="0" transform="scale(21.33333,21.33333)" width="24" height="24" fill="none"></rect></clipPath><clipPath id="clip-2"><rect x="24" y="24" transform="scale(10.66667,10.66667)" width="24" height="24" fill="none"></rect></clipPath></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g clip-path="url(#clip-1)"><path d="M448,149.33333v106.66667h-192v21.33333c-35.41333,0 -64,28.58667 -64,64c0,35.41333 28.58667,64 64,64l0,42.66667h-149.33333c-23.56415,0 -42.66667,-19.10252 -42.66667,-42.66667v-298.66667c0,-23.56415 19.10252,-42.66667 42.66667,-42.66667h256zM320,106.66667h-213.33333v85.33333h213.33333z" fill="currentColor"></path></g><g clip-path="url(#clip-2)"><path d="M297.6,384c0,-18.24 14.82667,-33.06667 33.06667,-33.06667h42.66667v-20.26667h-42.66667c-29.44,0 -53.33333,23.89333 -53.33333,53.33333c0,29.44 23.89333,53.33333 53.33333,53.33333h42.66667v-20.26667h-42.66667c-18.24,0 -33.06667,-14.82667 -33.06667,-33.06667zM341.33333,394.66667h85.33333v-21.33333h-85.33333zM437.33333,330.66667h-42.66667v20.26667h42.66667c18.24,0 33.06667,14.82667 33.06667,33.06667c0,18.24 -14.82667,33.06667 -33.06667,33.06667h-42.66667v20.26667h42.66667c29.44,0 53.33333,-23.89333 53.33333,-53.33333c0,-29.44 -23.89333,-53.33333 -53.33333,-53.33333z" fill="currentColor"></path></g></g></symbol><symbol id="exportAll" viewBox="0 0 512 512"><defs><clipPath id="clip-1"><rect x="0" y="0" transform="scale(21.33333,21.33333)" width="24" height="24" fill="none"></rect></clipPath><clipPath id="clip-2"><rect x="24" y="24" transform="scale(10.66667,10.66667)" width="24" height="24" fill="none"></rect></clipPath></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g clip-path="url(#clip-1)"><path d="M448,149.33333v106.66667h-192v21.33333c-35.41333,0 -64,28.58667 -64,64c0,35.41333 28.58667,64 64,64l0,42.66667h-149.33333c-23.56415,0 -42.66667,-19.10252 -42.66667,-42.66667v-298.66667c0,-23.56415 19.10252,-42.66667 42.66667,-42.66667h256zM320,106.66667h-213.33333v85.33333h213.33333z" fill="currentColor"></path></g><g clip-path="url(#clip-2)"><path d="M288,448h128v-21.33333h-128zM288,320v21.33333h192v-21.33333zM288,394.66667h192v-21.33333h-192z" fill="currentColor"></path></g></g></symbol><symbol id="importText" viewBox="0 0 512 512"><defs><clipPath id="clip-1"><rect x="0" y="0" transform="scale(21.33333,21.33333)" width="24" height="24" fill="none"></rect></clipPath><clipPath id="clip-2"><rect x="24" y="24" transform="scale(10.66667,10.66667)" width="24" height="24" fill="none"></rect></clipPath></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g clip-path="url(#clip-1)"><path d="M106.66667,384l149.33333,0l0,42.66667h-149.33333zM256,64l149.33333,149.33333h-85.33333l0,42.66667h-64v85.33333l-64,0v-128h-85.33333z" fill="currentColor"></path></g><g clip-path="url(#clip-2)"><path d="M480,309.33333c-11.84,-3.73333 -24.85333,-5.33333 -37.33333,-5.33333c-20.8,0 -43.2,4.26667 -58.66667,16c-15.46667,-11.73333 -37.86667,-16 -58.66667,-16c-20.8,0 -43.2,4.26667 -58.66667,16v156.26667c0,2.66667 2.66667,5.33333 5.33333,5.33333c1.06667,0 1.6,-0.53333 2.66667,-0.53333c14.4,-6.93333 35.2,-11.73333 50.66667,-11.73333c20.8,0 43.2,4.26667 58.66667,16c14.4,-9.06667 40.53333,-16 58.66667,-16c17.6,0 35.73333,3.2 50.66667,11.2c1.06667,0.53333 1.6,0.53333 2.66667,0.53333c2.66667,0 5.33333,-2.66667 5.33333,-5.33333v-155.73333c-6.4,-4.8 -13.33333,-8 -21.33333,-10.66667zM480,453.33333c-11.73333,-3.73333 -24.53333,-5.33333 -37.33333,-5.33333c-18.13333,0 -44.26667,6.93333 -58.66667,16v-122.66667c14.4,-9.06667 40.53333,-16 58.66667,-16c12.8,0 25.6,1.6 37.33333,5.33333z" fill="currentColor"></path></g></g></symbol>
 </svg>

From 9228080bd4d3b5e800b7ebd3de808481d6b4eb93 Mon Sep 17 00:00:00 2001
From: Nanashi <sevenc7c@sevenc7c.com>
Date: Sat, 27 Jan 2024 16:53:24 +0900
Subject: [PATCH 05/11] =?UTF-8?q?Revert:=20eslint=E3=82=92=E6=9C=89?=
 =?UTF-8?q?=E5=8A=B9=E6=B4=BB=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite.config.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/vite.config.ts b/vite.config.ts
index b40837a452..940ec1bca4 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -99,9 +99,9 @@ export default defineConfig((options) => {
       options.mode !== "test" &&
         checker({
           overlay: false,
-          // eslint: {
-          //   lintCommand: "eslint --ext .ts,.vue .",
-          // },
+          eslint: {
+            lintCommand: "eslint --ext .ts,.vue .",
+          },
           vueTsc: true,
         }),
       isElectron &&

From 80c1cb5fdd9b53708b5fcd6f09d8a6c3179afa23 Mon Sep 17 00:00:00 2001
From: Nanashi <sevenc7c@sevenc7c.com>
Date: Sat, 27 Jan 2024 16:54:01 +0900
Subject: [PATCH 06/11] =?UTF-8?q?Add:=20TODO=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/EditorHome.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/EditorHome.vue b/src/views/EditorHome.vue
index 58ade8759d..1359c79502 100644
--- a/src/views/EditorHome.vue
+++ b/src/views/EditorHome.vue
@@ -150,6 +150,7 @@
             />
           </template>
         </q-splitter>
+        <!-- TODO: Headerではないので、いい感じの名前にする -->
         <header-bar v-if="!$q.platform.is.desktop" />
 
         <q-resize-observer

From 262dec22591ddf3d7a14d7157805769d586474b2 Mon Sep 17 00:00:00 2001
From: sevenc-nanashi <sevenc7c@sevenc7c.com>
Date: Sat, 27 Jan 2024 19:01:49 +0900
Subject: [PATCH 07/11] =?UTF-8?q?Fix:=20border=E3=81=AE=E8=A1=A8=E7=A4=BA?=
 =?UTF-8?q?=E6=9D=A1=E4=BB=B6=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/EditorHome.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/views/EditorHome.vue b/src/views/EditorHome.vue
index 1359c79502..1c057c7020 100644
--- a/src/views/EditorHome.vue
+++ b/src/views/EditorHome.vue
@@ -986,7 +986,9 @@ const onAudioCellPaneClick = () => {
   display: flex;
   flex-direction: column;
 
-  border-top: 2px solid colors.$splitter;
+  :not(.desktop) & {
+    border-top: 2px solid colors.$splitter;
+  }
 
   .q-splitter--horizontal {
     height: calc(100vh - #{vars.$top-bar-height});

From ba1b6502ede9af4dd3e4e82a5f20971fe06fc7e5 Mon Sep 17 00:00:00 2001
From: sevenc-nanashi <sevenc7c@sevenc7c.com>
Date: Wed, 28 Feb 2024 21:01:24 +0900
Subject: [PATCH 08/11] =?UTF-8?q?Delete:=20EditorHome.vue=E3=82=92?=
 =?UTF-8?q?=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Talk/TalkEditor.vue |    4 +-
 src/views/EditorHome.vue           | 1044 ----------------------------
 2 files changed, 2 insertions(+), 1046 deletions(-)
 delete mode 100644 src/views/EditorHome.vue

diff --git a/src/components/Talk/TalkEditor.vue b/src/components/Talk/TalkEditor.vue
index fdab3ff9a4..f153fe0162 100644
--- a/src/components/Talk/TalkEditor.vue
+++ b/src/components/Talk/TalkEditor.vue
@@ -3,7 +3,6 @@
 
   <QLayout reveal elevated container class="layout-container">
     <ToolBar v-if="$q.platform.is.desktop" />
-    <MobileHeaderBar v-else />
 
     <QPageContainer>
       <QPage class="main-row-panes">
@@ -118,6 +117,8 @@
           </template>
         </QSplitter>
 
+        <ToolBar v-if="!$q.platform.is.desktop" />
+
         <QResizeObserver
           ref="resizeObserverRef"
           @resize="({ height }) => changeAudioDetailPaneMaxHeight(height)"
@@ -149,7 +150,6 @@ import {
   SplitterPositionType,
   Voice,
 } from "@/type/preload";
-import MobileHeaderBar from "@/components/MobileHeaderBar.vue";
 import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 import onetimeWatch from "@/helpers/onetimeWatch";
 
diff --git a/src/views/EditorHome.vue b/src/views/EditorHome.vue
deleted file mode 100644
index 1c057c7020..0000000000
--- a/src/views/EditorHome.vue
+++ /dev/null
@@ -1,1044 +0,0 @@
-<template>
-  <menu-bar v-if="$q.platform.is.desktop" />
-
-  <q-layout reveal elevated container class="layout-container">
-    <header-bar v-if="$q.platform.is.desktop" />
-    <q-page-container>
-      <q-page class="main-row-panes">
-        <progress-dialog />
-
-        <!-- TODO: 複数エンジン対応 -->
-        <!-- TODO: allEngineStateが "ERROR" のときエラーになったエンジンを探してトーストで案内 -->
-        <div v-if="allEngineState === 'FAILED_STARTING'" class="waiting-engine">
-          <div>
-            エンジンの起動に失敗しました。エンジンの再起動をお試しください。
-          </div>
-        </div>
-        <div
-          v-else-if="
-            !isCompletedInitialStartup || allEngineState === 'STARTING'
-          "
-          class="waiting-engine"
-        >
-          <div>
-            <q-spinner color="primary" size="2.5rem" />
-            <div class="q-mt-xs">
-              {{
-                allEngineState === "STARTING"
-                  ? "エンジン起動中・・・"
-                  : "データ準備中・・・"
-              }}
-            </div>
-
-            <template v-if="isEngineWaitingLong">
-              <q-separator spaced />
-              エンジン起動に時間がかかっています。<br />
-              <q-btn
-                v-if="isMultipleEngine"
-                outline
-                :disable="reloadingLocked"
-                @click="reloadAppWithMultiEngineOffMode"
-              >
-                マルチエンジンをオフにして再読み込みする</q-btn
-              >
-              <q-btn v-else outline @click="openQa">Q&Aを見る</q-btn>
-            </template>
-          </div>
-        </div>
-        <q-splitter
-          horizontal
-          reverse
-          unit="px"
-          :limits="[audioDetailPaneMinHeight, audioDetailPaneMaxHeight]"
-          separator-class="home-splitter"
-          :separator-style="{ height: shouldShowPanes ? '3px' : '0' }"
-          class="full-width"
-          before-class="overflow-hidden"
-          :disable="!shouldShowPanes"
-          :model-value="audioDetailPaneHeight"
-          @update:model-value="updateAudioDetailPane"
-        >
-          <template #before>
-            <q-splitter
-              :limits="[MIN_PORTRAIT_PANE_WIDTH, MAX_PORTRAIT_PANE_WIDTH]"
-              separator-class="home-splitter"
-              :separator-style="{ width: shouldShowSidePanes ? '3px' : '0' }"
-              before-class="overflow-hidden"
-              :disable="!shouldShowSidePanes"
-              :model-value="portraitPaneWidth"
-              @update:model-value="updatePortraitPane"
-            >
-              <template #before>
-                <character-portrait />
-              </template>
-              <template #after>
-                <q-splitter
-                  reverse
-                  unit="px"
-                  :limits="[audioInfoPaneMinWidth, audioInfoPaneMaxWidth]"
-                  separator-class="home-splitter"
-                  :separator-style="{
-                    width: shouldShowSidePanes ? '3px' : '0',
-                  }"
-                  class="full-width overflow-hidden"
-                  :disable="!shouldShowSidePanes"
-                  :model-value="audioInfoPaneWidth"
-                  @update:model-value="updateAudioInfoPane"
-                >
-                  <template #before>
-                    <div
-                      class="audio-cell-pane"
-                      :class="{ 'is-dragging': dragEventCounter > 0 }"
-                      @dragenter="dragEventCounter++"
-                      @dragleave="dragEventCounter--"
-                      @dragover.prevent
-                      @drop.prevent="
-                        dragEventCounter = 0;
-                        loadDraggedFile($event);
-                      "
-                      @click="onAudioCellPaneClick"
-                    >
-                      <draggable
-                        ref="cellsRef"
-                        class="audio-cells"
-                        :model-value="audioKeys"
-                        :item-key="itemKey"
-                        ghost-class="ghost"
-                        filter="input"
-                        :prevent-on-filter="false"
-                        @update:model-value="updateAudioKeys"
-                      >
-                        <template #item="{ element }">
-                          <audio-cell
-                            :ref="addAudioCellRef"
-                            class="draggable-cursor"
-                            :audio-key="element"
-                            @focus-cell="focusCell"
-                          />
-                        </template>
-                      </draggable>
-                      <div
-                        v-if="showAddAudioItemButton"
-                        class="add-button-wrapper"
-                      >
-                        <q-btn
-                          fab
-                          icon="add"
-                          color="primary"
-                          text-color="display-on-primary"
-                          :disable="uiLocked"
-                          aria-label="テキストを追加"
-                          @click="addAudioItem"
-                        ></q-btn>
-                      </div>
-                    </div>
-                  </template>
-                  <template #after>
-                    <audio-info
-                      v-if="activeAudioKey != undefined"
-                      :active-audio-key="activeAudioKey"
-                    />
-                  </template>
-                </q-splitter>
-              </template>
-            </q-splitter>
-          </template>
-          <template #after>
-            <audio-detail
-              v-if="activeAudioKey != undefined"
-              :active-audio-key="activeAudioKey"
-            />
-          </template>
-        </q-splitter>
-        <!-- TODO: Headerではないので、いい感じの名前にする -->
-        <header-bar v-if="!$q.platform.is.desktop" />
-
-        <q-resize-observer
-          ref="resizeObserverRef"
-          @resize="({ height }) => changeAudioDetailPaneMaxHeight(height)"
-        />
-      </q-page>
-    </q-page-container>
-  </q-layout>
-  <help-dialog v-model="isHelpDialogOpenComputed" />
-  <setting-dialog v-model="isSettingDialogOpenComputed" />
-  <hotkey-setting-dialog v-model="isHotkeySettingDialogOpenComputed" />
-  <header-bar-custom-dialog v-model="isToolbarSettingDialogOpenComputed" />
-  <character-order-dialog
-    v-if="orderedAllCharacterInfos.length > 0"
-    v-model="isCharacterOrderDialogOpenComputed"
-    :character-infos="orderedAllCharacterInfos"
-  />
-  <default-style-list-dialog
-    v-if="orderedAllCharacterInfos.length > 0"
-    v-model="isDefaultStyleSelectDialogOpenComputed"
-    :character-infos="orderedAllCharacterInfos"
-  />
-  <dictionary-manage-dialog v-model="isDictionaryManageDialogOpenComputed" />
-  <engine-manage-dialog v-model="isEngineManageDialogOpenComputed" />
-  <accept-retrieve-telemetry-dialog
-    v-model="isAcceptRetrieveTelemetryDialogOpenComputed"
-  />
-  <accept-terms-dialog v-model="isAcceptTermsDialogOpenComputed" />
-  <update-notification-dialog
-    v-if="newUpdateResult.status == 'updateAvailable'"
-    v-model="isUpdateNotificationDialogOpenComputed"
-    :latest-version="newUpdateResult.latestVersion"
-    :new-update-infos="newUpdateResult.newUpdateInfos"
-    @skip-this-version-click="handleSkipThisVersionClick"
-  />
-</template>
-
-<script setup lang="ts">
-import path from "path";
-import { computed, onBeforeUpdate, onMounted, ref, VNodeRef, watch } from "vue";
-import draggable from "vuedraggable";
-import { QResizeObserver, useQuasar } from "quasar";
-import cloneDeep from "clone-deep";
-import Mousetrap from "mousetrap";
-import semver from "semver";
-import { useStore } from "@/store";
-import HeaderBar from "@/components/HeaderBar.vue";
-import AudioCell from "@/components/AudioCell.vue";
-import AudioDetail from "@/components/AudioDetail.vue";
-import AudioInfo from "@/components/AudioInfo.vue";
-import MenuBar from "@/components/MenuBar.vue";
-import HelpDialog from "@/components/help/HelpDialog.vue";
-import SettingDialog from "@/components/SettingDialog.vue";
-import HotkeySettingDialog from "@/components/HotkeySettingDialog.vue";
-import HeaderBarCustomDialog from "@/components/HeaderBarCustomDialog.vue";
-import CharacterPortrait from "@/components/CharacterPortrait.vue";
-import DefaultStyleListDialog from "@/components/DefaultStyleListDialog.vue";
-import CharacterOrderDialog from "@/components/CharacterOrderDialog.vue";
-import AcceptRetrieveTelemetryDialog from "@/components/AcceptRetrieveTelemetryDialog.vue";
-import AcceptTermsDialog from "@/components/AcceptTermsDialog.vue";
-import DictionaryManageDialog from "@/components/DictionaryManageDialog.vue";
-import EngineManageDialog from "@/components/EngineManageDialog.vue";
-import ProgressDialog from "@/components/ProgressDialog.vue";
-import UpdateNotificationDialog from "@/components/UpdateNotificationDialog.vue";
-import { useFetchNewUpdateInfos } from "@/composables/useFetchNewUpdateInfos";
-import { AudioItem, EngineState } from "@/store/type";
-import {
-  AudioKey,
-  EngineId,
-  HotkeyActionType,
-  HotkeyReturnType,
-  PresetKey,
-  SplitterPositionType,
-  Voice,
-} from "@/type/preload";
-import { isOnCommandOrCtrlKeyDown } from "@/store/utility";
-import { parseCombo, setHotkeyFunctions } from "@/store/setting";
-
-const props =
-  defineProps<{
-    projectFilePath: string;
-  }>();
-
-const store = useStore();
-const $q = useQuasar();
-
-const isDesktop = computed(() => $q.platform.is.desktop);
-
-const audioKeys = computed(() => store.state.audioKeys);
-const uiLocked = computed(() => store.getters.UI_LOCKED);
-const reloadingLocked = computed(() => store.state.reloadingLock);
-
-const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
-
-// hotkeys handled by Mousetrap
-const hotkeyMap = new Map<HotkeyActionType, () => HotkeyReturnType>([
-  [
-    "テキスト欄にフォーカスを戻す",
-    () => {
-      if (activeAudioKey.value != undefined) {
-        focusCell({ audioKey: activeAudioKey.value, focusTarget: "textField" });
-      }
-      return false; // this is the same with event.preventDefault()
-    },
-  ],
-  [
-    // FIXME: テキスト欄にフォーカスがある状態でも実行できるようにする
-    // https://github.com/VOICEVOX/voicevox/pull/1096#issuecomment-1378651920
-    "テキスト欄を複製",
-    () => {
-      if (activeAudioKey.value != undefined) {
-        duplicateAudioItem();
-      }
-      return false;
-    },
-  ],
-]);
-
-setHotkeyFunctions(hotkeyMap);
-
-const removeAudioItem = async () => {
-  if (activeAudioKey.value == undefined) throw new Error();
-  audioCellRefs[activeAudioKey.value].removeCell();
-};
-
-// convert the hotkey array to Map to get value with keys easier
-// this only happens here where we deal with native methods
-const hotkeySettingsMap = computed(
-  () =>
-    new Map(
-      store.state.hotkeySettings.map((obj) => [obj.action, obj.combination])
-    )
-);
-
-// hotkeys handled by native, for they are made to be working while focusing input elements
-const hotkeyActionsNative = [
-  (event: KeyboardEvent) => {
-    if (
-      !event.isComposing &&
-      !uiLocked.value &&
-      parseCombo(event) == hotkeySettingsMap.value.get("テキスト欄を追加")
-    ) {
-      addAudioItem();
-      event.preventDefault();
-    }
-  },
-  (event: KeyboardEvent) => {
-    if (
-      !event.isComposing &&
-      !uiLocked.value &&
-      parseCombo(event) == hotkeySettingsMap.value.get("テキスト欄を削除")
-    ) {
-      removeAudioItem();
-      event.preventDefault();
-    }
-  },
-  (event: KeyboardEvent) => {
-    if (
-      !event.isComposing &&
-      !uiLocked.value &&
-      parseCombo(event) ==
-        hotkeySettingsMap.value.get("テキスト欄からフォーカスを外す")
-    ) {
-      if (document.activeElement instanceof HTMLInputElement) {
-        document.activeElement.blur();
-      }
-      event.preventDefault();
-    }
-  },
-];
-
-// view
-const DEFAULT_PORTRAIT_PANE_WIDTH = 25; // %
-const MIN_PORTRAIT_PANE_WIDTH = 0;
-const MAX_PORTRAIT_PANE_WIDTH = 40;
-const MIN_AUDIO_INFO_PANE_WIDTH = 160; // px
-const MAX_AUDIO_INFO_PANE_WIDTH = 250;
-const MIN_AUDIO_DETAIL_PANE_HEIGHT = isDesktop.value ? 185 : 220; // px
-const MAX_AUDIO_DETAIL_PANE_HEIGHT = 500;
-
-const portraitPaneWidth = ref(0);
-const audioInfoPaneWidth = ref(0);
-const audioInfoPaneMinWidth = ref(0);
-const audioInfoPaneMaxWidth = ref(0);
-const audioDetailPaneHeight = ref(0);
-const audioDetailPaneMinHeight = ref(0);
-const audioDetailPaneMaxHeight = ref(0);
-
-const changeAudioDetailPaneMaxHeight = (height: number) => {
-  if (!activeAudioKey.value) return;
-
-  const maxHeight = height - 200;
-  if (maxHeight > MAX_AUDIO_DETAIL_PANE_HEIGHT) {
-    // 最大値以上なら最大値に設定
-    audioDetailPaneMaxHeight.value = MAX_AUDIO_DETAIL_PANE_HEIGHT;
-  } else if (height < 200 + MIN_AUDIO_DETAIL_PANE_HEIGHT) {
-    // 最低値以下になってしまう場合は無制限に
-    audioDetailPaneMaxHeight.value = Infinity;
-  } else {
-    audioDetailPaneMaxHeight.value = maxHeight;
-  }
-};
-
-const splitterPosition = computed<SplitterPositionType>(
-  () => store.state.splitterPosition
-);
-
-const updateSplitterPosition = async (
-  propertyName: keyof SplitterPositionType,
-  newValue: number
-) => {
-  const newSplitterPosition = {
-    ...splitterPosition.value,
-    [propertyName]: newValue,
-  };
-  await store.dispatch("SET_ROOT_MISC_SETTING", {
-    key: "splitterPosition",
-    value: newSplitterPosition,
-  });
-};
-
-const updatePortraitPane = async (width: number) => {
-  portraitPaneWidth.value = width;
-  await updateSplitterPosition("portraitPaneWidth", width);
-};
-
-const updateAudioInfoPane = async (width: number) => {
-  audioInfoPaneWidth.value = width;
-  await updateSplitterPosition("audioInfoPaneWidth", width);
-};
-
-const updateAudioDetailPane = async (height: number) => {
-  audioDetailPaneHeight.value = height;
-  await updateSplitterPosition("audioDetailPaneHeight", height);
-};
-// component
-let audioCellRefs: Record<AudioKey, InstanceType<typeof AudioCell>> = {};
-const addAudioCellRef: VNodeRef = (audioCellRef) => {
-  if (audioCellRef && !(audioCellRef instanceof Element)) {
-    const typedAudioCellRef = audioCellRef as InstanceType<typeof AudioCell>;
-    audioCellRefs[typedAudioCellRef.audioKey] = typedAudioCellRef;
-  }
-};
-onBeforeUpdate(() => {
-  audioCellRefs = {};
-});
-
-const resizeObserverRef = ref<QResizeObserver>();
-
-// DaD
-const updateAudioKeys = (audioKeys: AudioKey[]) =>
-  store.dispatch("COMMAND_SET_AUDIO_KEYS", { audioKeys });
-const itemKey = (key: string) => key;
-
-// セルを追加
-const activeAudioKey = computed<AudioKey | undefined>(
-  () => store.getters.ACTIVE_AUDIO_KEY
-);
-const addAudioItem = async () => {
-  const prevAudioKey = activeAudioKey.value;
-  let voice: Voice | undefined = undefined;
-  let presetKey: PresetKey | undefined = undefined;
-  let baseAudioItem: AudioItem | undefined = undefined;
-
-  if (prevAudioKey != undefined) {
-    voice = store.state.audioItems[prevAudioKey].voice;
-    presetKey = store.state.audioItems[prevAudioKey].presetKey;
-    baseAudioItem = store.state.audioItems[prevAudioKey];
-  }
-
-  const audioItem = await store.dispatch("GENERATE_AUDIO_ITEM", {
-    voice,
-    presetKey,
-    baseAudioItem,
-  });
-
-  const newAudioKey = await store.dispatch("COMMAND_REGISTER_AUDIO_ITEM", {
-    audioItem,
-    prevAudioKey: activeAudioKey.value,
-  });
-  audioCellRefs[newAudioKey].focusCell({ focusTarget: "textField" });
-};
-const duplicateAudioItem = async () => {
-  const prevAudioKey = activeAudioKey.value;
-
-  // audioItemが選択されていない状態で押されたら何もしない
-  if (prevAudioKey == undefined) return;
-
-  const prevAudioItem = store.state.audioItems[prevAudioKey];
-
-  const newAudioKey = await store.dispatch("COMMAND_REGISTER_AUDIO_ITEM", {
-    audioItem: cloneDeep(prevAudioItem),
-    prevAudioKey: activeAudioKey.value,
-  });
-  audioCellRefs[newAudioKey].focusCell({ focusTarget: "textField" });
-};
-
-// Pane
-const shouldShowPanes = computed<boolean>(
-  () => store.getters.SHOULD_SHOW_PANES
-);
-const shouldShowSidePanes = computed<boolean>(
-  () => shouldShowPanes.value && $q.screen.gt.xs // 横幅がある程度大きいかどうか
-);
-const clamp = (value: number, min: number, max: number) =>
-  Math.max(Math.min(value, max), min);
-
-watch(shouldShowPanes, (val, old) => {
-  if (val === old) return;
-
-  if (val) {
-    audioDetailPaneMinHeight.value = MIN_AUDIO_DETAIL_PANE_HEIGHT;
-    changeAudioDetailPaneMaxHeight(
-      resizeObserverRef.value?.$el.parentElement.clientHeight
-    );
-    audioDetailPaneHeight.value = clamp(
-      splitterPosition.value.audioDetailPaneHeight ??
-        MIN_AUDIO_DETAIL_PANE_HEIGHT,
-      audioDetailPaneMinHeight.value,
-      audioDetailPaneMaxHeight.value
-    );
-  } else {
-    audioDetailPaneHeight.value = 0;
-    audioDetailPaneMinHeight.value = 0;
-    audioDetailPaneMaxHeight.value = 0;
-  }
-});
-watch(shouldShowSidePanes, (val, old) => {
-  if (val === old) return;
-  if (val) {
-    // 設定ファイルを書き換えれば異常な値が入り得るのですべてclampしておく
-    portraitPaneWidth.value = clamp(
-      splitterPosition.value.portraitPaneWidth ?? DEFAULT_PORTRAIT_PANE_WIDTH,
-      MIN_PORTRAIT_PANE_WIDTH,
-      MAX_PORTRAIT_PANE_WIDTH
-    );
-
-    audioInfoPaneWidth.value = clamp(
-      splitterPosition.value.audioInfoPaneWidth ?? MIN_AUDIO_INFO_PANE_WIDTH,
-      MIN_AUDIO_INFO_PANE_WIDTH,
-      MAX_AUDIO_INFO_PANE_WIDTH
-    );
-    audioInfoPaneMinWidth.value = MIN_AUDIO_INFO_PANE_WIDTH;
-    audioInfoPaneMaxWidth.value = MAX_AUDIO_INFO_PANE_WIDTH;
-  } else {
-    portraitPaneWidth.value = 0;
-    audioInfoPaneWidth.value = 0;
-    audioInfoPaneMinWidth.value = 0;
-    audioInfoPaneMaxWidth.value = 0;
-  }
-});
-
-// セルをフォーカス
-const focusCell = ({
-  audioKey,
-  focusTarget,
-}: {
-  audioKey: AudioKey;
-  focusTarget?: "root" | "textField";
-}) => {
-  audioCellRefs[audioKey].focusCell({
-    focusTarget: focusTarget ?? "textField",
-  });
-};
-
-// Electronのデフォルトのundo/redoを無効化
-const disableDefaultUndoRedo = (event: KeyboardEvent) => {
-  // ctrl+z, ctrl+shift+z, ctrl+y
-  if (
-    isOnCommandOrCtrlKeyDown(event) &&
-    (event.key == "z" || (!event.shiftKey && event.key == "y"))
-  ) {
-    event.preventDefault();
-  }
-};
-
-const userOrderedCharacterInfos = computed(
-  () => store.state.userCharacterOrder
-);
-const audioItems = computed(() => store.state.audioItems);
-// 並び替え後、テキスト欄が１つで空欄なら話者を更新
-// 経緯 https://github.com/VOICEVOX/voicevox/issues/1229
-watch(userOrderedCharacterInfos, (userOrderedCharacterInfos) => {
-  if (userOrderedCharacterInfos.length < 1) {
-    return;
-  }
-
-  if (audioKeys.value.length === 1) {
-    const first = audioKeys.value[0] as AudioKey;
-    const audioItem = audioItems.value[first];
-    if (audioItem.text.length > 0) {
-      return;
-    }
-
-    const speakerId = userOrderedCharacterInfos[0];
-    const defaultStyleId = store.state.defaultStyleIds.find(
-      (styleId) => styleId.speakerUuid === speakerId
-    );
-    if (!defaultStyleId || audioItem.voice.speakerId === speakerId) return;
-
-    const voice: Voice = {
-      engineId: defaultStyleId.engineId,
-      speakerId: defaultStyleId.speakerUuid,
-      styleId: defaultStyleId.defaultStyleId,
-    };
-
-    // FIXME: UNDOができてしまうのでできれば直したい
-    store.dispatch("COMMAND_MULTI_CHANGE_VOICE", {
-      audioKeys: [first],
-      voice: voice,
-    });
-  }
-});
-
-// エディタのアップデート確認
-if (!import.meta.env.VITE_LATEST_UPDATE_INFOS_URL) {
-  throw new Error(
-    "環境変数VITE_LATEST_UPDATE_INFOS_URLが設定されていません。.envに記載してください。"
-  );
-}
-const newUpdateResult = useFetchNewUpdateInfos(
-  () => window.electron.getAppInfos().then((obj) => obj.version), // アプリのバージョン
-  import.meta.env.VITE_LATEST_UPDATE_INFOS_URL
-);
-const handleSkipThisVersionClick = (version: string) => {
-  store.dispatch("SET_ROOT_MISC_SETTING", {
-    key: "skipUpdateVersion",
-    value: version,
-  });
-};
-
-// ソフトウェアを初期化
-const isCompletedInitialStartup = ref(false);
-onMounted(async () => {
-  await store.dispatch("GET_ENGINE_INFOS");
-
-  let engineIds: EngineId[];
-  if (store.state.isMultiEngineOffMode) {
-    // デフォルトエンジンだけを含める
-    const main = Object.values(store.state.engineInfos).find(
-      (engine) => engine.type === "default"
-    );
-    if (!main) {
-      throw new Error("No main engine found");
-    }
-    engineIds = [main.uuid];
-  } else {
-    engineIds = store.state.engineIds;
-  }
-  await store.dispatch("LOAD_USER_CHARACTER_ORDER");
-  await store.dispatch("POST_ENGINE_START", {
-    engineIds,
-  });
-
-  // 辞書を同期
-  await store.dispatch("SYNC_ALL_USER_DICT");
-
-  // プロジェクトファイルが指定されていればロード
-  let projectFileLoaded = false;
-  if (props.projectFilePath != undefined && props.projectFilePath !== "") {
-    projectFileLoaded = await store.dispatch("LOAD_PROJECT_FILE", {
-      filePath: props.projectFilePath,
-    });
-  }
-
-  if (!projectFileLoaded) {
-    // 最初のAudioCellを作成
-    const audioItem = await store.dispatch("GENERATE_AUDIO_ITEM", {});
-    const newAudioKey = await store.dispatch("REGISTER_AUDIO_ITEM", {
-      audioItem,
-    });
-    focusCell({ audioKey: newAudioKey, focusTarget: "textField" });
-
-    // 最初の話者を初期化
-    store.dispatch("SETUP_SPEAKER", {
-      audioKeys: [newAudioKey],
-      engineId: audioItem.voice.engineId,
-      styleId: audioItem.voice.styleId,
-    });
-  }
-
-  // ショートカットキー操作を止める条件の設定
-  // 止めるなら`true`を返す
-  Mousetrap.prototype.stopCallback = (
-    e: Mousetrap.ExtendedKeyboardEvent, // 未使用
-    element: Element,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    combo: string // 未使用
-  ) => {
-    return (
-      element.tagName === "INPUT" ||
-      element.tagName === "SELECT" ||
-      element.tagName === "TEXTAREA" ||
-      (element instanceof HTMLElement && element.contentEditable === "true") ||
-      // メニュー項目ではショートカットキーを無効化
-      element.classList.contains("q-item")
-    );
-  };
-
-  // ショートカットキーの設定
-  document.addEventListener("keydown", disableDefaultUndoRedo);
-
-  hotkeyActionsNative.forEach((item) => {
-    document.addEventListener("keyup", item);
-  });
-
-  // 設定の読み込みを待機する
-  // FIXME: 設定が必要な処理はINIT_VUEXを実行しているApp.vueで行うべき
-  let vuexReadyTimeout = 0;
-  while (!store.state.isVuexReady) {
-    if (vuexReadyTimeout >= 15000) {
-      throw new Error("Vuexが準備できませんでした");
-    }
-    await new Promise((resolve) => setTimeout(resolve, 300));
-    vuexReadyTimeout += 300;
-  }
-
-  isAcceptRetrieveTelemetryDialogOpenComputed.value =
-    store.state.acceptRetrieveTelemetry === "Unconfirmed";
-
-  isAcceptTermsDialogOpenComputed.value =
-    import.meta.env.MODE !== "development" &&
-    store.state.acceptTerms !== "Accepted";
-
-  // アップデート通知ダイアログ
-  if (newUpdateResult.value.status === "updateAvailable") {
-    const skipUpdateVersion = store.state.skipUpdateVersion ?? "0.0.0";
-    if (semver.valid(skipUpdateVersion) == undefined) {
-      // 処理を止めるほどではないので警告だけ
-      store.dispatch(
-        "LOG_WARN",
-        `skipUpdateVersionが不正です: ${skipUpdateVersion}`
-      );
-    } else if (
-      semver.gt(newUpdateResult.value.latestVersion, skipUpdateVersion)
-    ) {
-      isUpdateNotificationDialogOpenComputed.value = true;
-    }
-  }
-
-  isCompletedInitialStartup.value = true;
-});
-
-// エンジン待機
-// TODO: 個別のエンジンの状態をUIで確認できるようにする
-const allEngineState = computed(() => {
-  const engineStates = store.state.engineStates;
-
-  let lastEngineState: EngineState | undefined = undefined;
-
-  // 登録されているすべてのエンジンについて状態を確認する
-  for (const engineId of store.state.engineIds) {
-    const engineState: EngineState | undefined = engineStates[engineId];
-    if (engineState == undefined)
-      throw new Error(`No such engineState set: engineId == ${engineId}`);
-
-    // FIXME: 1つでも接続テストに成功していないエンジンがあれば、暫定的に起動中とする
-    if (engineState === "STARTING") {
-      return engineState;
-    }
-
-    lastEngineState = engineState;
-  }
-
-  return lastEngineState; // FIXME: 暫定的に1つのエンジンの状態を返す
-});
-
-const isEngineWaitingLong = ref<boolean>(false);
-let engineTimer: number | undefined = undefined;
-watch(allEngineState, (newEngineState) => {
-  if (engineTimer != undefined) {
-    clearTimeout(engineTimer);
-    engineTimer = undefined;
-  }
-  if (newEngineState === "STARTING") {
-    isEngineWaitingLong.value = false;
-    engineTimer = window.setTimeout(() => {
-      isEngineWaitingLong.value = true;
-    }, 30000);
-  } else {
-    isEngineWaitingLong.value = false;
-  }
-});
-
-// 代替ポート情報の変更を監視
-watch(
-  () => [store.state.altPortInfos, store.state.isVuexReady],
-  async () => {
-    // この watch がエンジンが起動した時 (=> 設定ファイルを読み込む前) に発火して, "今後この通知をしない" を無視するのを防ぐ
-    if (!store.state.isVuexReady) return;
-
-    // "今後この通知をしない" を考慮
-    if (store.state.confirmedTips.engineStartedOnAltPort) return;
-
-    // 代替ポートをトースト通知する
-    for (const engineId of store.state.engineIds) {
-      const engineName = store.state.engineInfos[engineId].name;
-      const altPort = store.state.altPortInfos[engineId];
-      if (!altPort) return;
-
-      store.dispatch("SHOW_NOTIFY_AND_NOT_SHOW_AGAIN_BUTTON", {
-        message: `${altPort.from}番ポートが使用中であるため ${engineName} は、${altPort.to}番ポートで起動しました`,
-        icon: "compare_arrows",
-        tipName: "engineStartedOnAltPort",
-      });
-    }
-  }
-);
-
-const reloadAppWithMultiEngineOffMode = () => {
-  store.dispatch("CHECK_EDITED_AND_NOT_SAVE", {
-    closeOrReload: "reload",
-    isMultiEngineOffMode: true,
-  });
-};
-
-const openQa = () => {
-  window.open("https://voicevox.hiroshiba.jp/qa/", "_blank");
-};
-
-// ライセンス表示
-const isHelpDialogOpenComputed = computed({
-  get: () => store.state.isHelpDialogOpen,
-  set: (val) => store.dispatch("SET_DIALOG_OPEN", { isHelpDialogOpen: val }),
-});
-
-// 設定
-const isSettingDialogOpenComputed = computed({
-  get: () => store.state.isSettingDialogOpen,
-  set: (val) => store.dispatch("SET_DIALOG_OPEN", { isSettingDialogOpen: val }),
-});
-
-// ショートカットキー設定
-const isHotkeySettingDialogOpenComputed = computed({
-  get: () => store.state.isHotkeySettingDialogOpen,
-  set: (val) =>
-    store.dispatch("SET_DIALOG_OPEN", {
-      isHotkeySettingDialogOpen: val,
-    }),
-});
-
-// ツールバーのカスタム設定
-const isToolbarSettingDialogOpenComputed = computed({
-  get: () => store.state.isToolbarSettingDialogOpen,
-  set: (val) =>
-    store.dispatch("SET_DIALOG_OPEN", {
-      isToolbarSettingDialogOpen: val,
-    }),
-});
-
-// 利用規約表示
-const isAcceptTermsDialogOpenComputed = computed({
-  get: () => store.state.isAcceptTermsDialogOpen,
-  set: (val) =>
-    store.dispatch("SET_DIALOG_OPEN", {
-      isAcceptTermsDialogOpen: val,
-    }),
-});
-
-// キャラクター並び替え
-const orderedAllCharacterInfos = computed(
-  () => store.getters.GET_ORDERED_ALL_CHARACTER_INFOS
-);
-const isCharacterOrderDialogOpenComputed = computed({
-  get: () =>
-    !store.state.isAcceptTermsDialogOpen &&
-    store.state.isCharacterOrderDialogOpen,
-  set: (val) =>
-    store.dispatch("SET_DIALOG_OPEN", {
-      isCharacterOrderDialogOpen: val,
-    }),
-});
-
-// デフォルトスタイル選択
-const isDefaultStyleSelectDialogOpenComputed = computed({
-  get: () =>
-    !store.state.isAcceptTermsDialogOpen &&
-    !store.state.isCharacterOrderDialogOpen &&
-    store.state.isDefaultStyleSelectDialogOpen,
-  set: (val) =>
-    store.dispatch("SET_DIALOG_OPEN", {
-      isDefaultStyleSelectDialogOpen: val,
-    }),
-});
-
-// エンジン管理
-const isEngineManageDialogOpenComputed = computed({
-  get: () => store.state.isEngineManageDialogOpen,
-  set: (val) =>
-    store.dispatch("SET_DIALOG_OPEN", {
-      isEngineManageDialogOpen: val,
-    }),
-});
-
-// 読み方＆アクセント辞書
-const isDictionaryManageDialogOpenComputed = computed({
-  get: () => store.state.isDictionaryManageDialogOpen,
-  set: (val) =>
-    store.dispatch("SET_DIALOG_OPEN", {
-      isDictionaryManageDialogOpen: val,
-    }),
-});
-
-const isAcceptRetrieveTelemetryDialogOpenComputed = computed({
-  get: () =>
-    !store.state.isAcceptTermsDialogOpen &&
-    !store.state.isCharacterOrderDialogOpen &&
-    !store.state.isDefaultStyleSelectDialogOpen &&
-    store.state.isAcceptRetrieveTelemetryDialogOpen,
-  set: (val) =>
-    store.dispatch("SET_DIALOG_OPEN", {
-      isAcceptRetrieveTelemetryDialogOpen: val,
-    }),
-});
-
-// アップデート通知
-const isUpdateNotificationDialogOpenComputed = computed({
-  get: () =>
-    !store.state.isAcceptTermsDialogOpen &&
-    !store.state.isCharacterOrderDialogOpen &&
-    !store.state.isDefaultStyleSelectDialogOpen &&
-    !store.state.isAcceptRetrieveTelemetryDialogOpen &&
-    store.state.isUpdateNotificationDialogOpen,
-  set: (val) =>
-    store.dispatch("SET_DIALOG_OPEN", {
-      isUpdateNotificationDialogOpen: val,
-    }),
-});
-
-// ドラッグ＆ドロップ
-const dragEventCounter = ref(0);
-const loadDraggedFile = (event: { dataTransfer: DataTransfer | null }) => {
-  if (!event.dataTransfer || event.dataTransfer.files.length === 0) return;
-  const file = event.dataTransfer.files[0];
-  switch (path.extname(file.name)) {
-    case ".txt":
-      store.dispatch("COMMAND_IMPORT_FROM_FILE", { filePath: file.path });
-      break;
-    case ".vvproj":
-      store.dispatch("LOAD_PROJECT_FILE", { filePath: file.path });
-      break;
-    default:
-      store.dispatch("SHOW_ALERT_DIALOG", {
-        title: "対応していないファイルです",
-        message:
-          "テキストファイル (.txt) とVOICEVOXプロジェクトファイル (.vvproj) に対応しています。",
-      });
-  }
-};
-
-// AudioCellの自動スクロール
-const cellsRef = ref<InstanceType<typeof draggable> | undefined>();
-watch(activeAudioKey, (audioKey) => {
-  if (audioKey == undefined) return;
-  const activeCellElement = audioCellRefs[audioKey].$el;
-  const cellsElement = cellsRef.value?.$el;
-  if (
-    !(activeCellElement instanceof Element) ||
-    !(cellsElement instanceof Element)
-  )
-    throw new Error(
-      `invalid element: activeCellElement=${activeCellElement}, cellsElement=${cellsElement}`
-    );
-  const activeCellRect = activeCellElement.getBoundingClientRect();
-  const cellsRect = cellsElement.getBoundingClientRect();
-  const overflowTop = activeCellRect.top <= cellsRect.top;
-  const overflowBottom = activeCellRect.bottom >= cellsRect.bottom;
-  if (overflowTop || overflowBottom) {
-    activeCellElement.scrollIntoView(overflowTop || !overflowBottom);
-  }
-});
-
-const showAddAudioItemButton = computed(() => {
-  return store.state.showAddAudioItemButton;
-});
-
-const onAudioCellPaneClick = () => {
-  if (
-    store.state.experimentalSetting.enableMultiSelect &&
-    activeAudioKey.value
-  ) {
-    store.dispatch("SET_SELECTED_AUDIO_KEYS", {
-      audioKeys: [activeAudioKey.value],
-    });
-  }
-};
-</script>
-
-<style scoped lang="scss">
-@use '@/styles/variables' as vars;
-@use '@/styles/colors' as colors;
-
-.q-header {
-  height: vars.$header-height;
-}
-
-.layout-container {
-  min-height: calc(100vh - #{vars.$menubar-height});
-}
-
-.q-layout-container > :deep(.absolute-full) {
-  right: 0 !important;
-  > .scroll {
-    width: unset !important;
-    overflow: hidden;
-  }
-}
-
-.waiting-engine {
-  background-color: rgba(colors.$display-rgb, 0.15);
-  position: absolute;
-  inset: 0;
-  z-index: 10;
-  display: flex;
-  text-align: center;
-  align-items: center;
-  justify-content: center;
-
-  > div {
-    color: colors.$display;
-    background: colors.$surface;
-    border-radius: 6px;
-    padding: 14px;
-  }
-}
-
-.main-row-panes {
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-basis: 0;
-
-  display: flex;
-  flex-direction: column;
-
-  :not(.desktop) & {
-    border-top: 2px solid colors.$splitter;
-  }
-
-  .q-splitter--horizontal {
-    height: calc(100vh - #{vars.$top-bar-height});
-  }
-}
-
-.ghost {
-  background-color: rgba(colors.$display-rgb, 0.15);
-}
-
-.audio-cell-pane {
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-basis: 0;
-
-  position: relative;
-  height: 100%;
-
-  &.is-dragging {
-    background-color: rgba(colors.$display-rgb, 0.15);
-  }
-
-  .audio-cells {
-    overflow-x: hidden;
-    overflow-y: scroll;
-
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-
-    padding-bottom: 70px;
-  }
-
-  .draggable-cursor {
-    cursor: grab;
-  }
-
-  .add-button-wrapper {
-    position: absolute;
-    right: 0px;
-    bottom: 0px;
-
-    margin-right: 26px;
-    margin-bottom: 10px;
-  }
-}
-
-.q-splitter > :deep(.home-splitter) {
-  background: colors.$splitter !important;
-}
-</style>

From aa5b0b702c7c74a526e3b781a5fa6615a581cf9e Mon Sep 17 00:00:00 2001
From: sevenc-nanashi <sevenc7c@sevenc7c.com>
Date: Wed, 28 Feb 2024 21:06:54 +0900
Subject: [PATCH 09/11] =?UTF-8?q?Change:=20QFooter=E3=82=92=E4=BD=BF?=
 =?UTF-8?q?=E3=81=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Talk/ToolBar.vue | 38 +++++++++++++++++----------------
 src/styles/_index.scss          |  3 +++
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/components/Talk/ToolBar.vue b/src/components/Talk/ToolBar.vue
index bb082335ff..30e1a47edf 100644
--- a/src/components/Talk/ToolBar.vue
+++ b/src/components/Talk/ToolBar.vue
@@ -1,21 +1,23 @@
 <template>
-  <QToolbar v-if="isMobile" class="bg-primary text-white">
-    <MobileMenuButton />
-    <template v-for="button in buttons" :key="button.text">
-      <QSpace v-if="button.text === null" />
-      <QBtn
-        v-else
-        flat
-        round
-        dense
-        :disable="button.disable.value"
-        :icon="buttonIcons[button.tag]"
-        @click="button.click"
-      >
-        <QTooltip>{{ button.text }}</QTooltip>
-      </QBtn>
-    </template>
-  </QToolbar>
+  <QFooter v-if="isMobile" class="bg-primary text-white">
+    <QToolbar>
+      <MobileMenuButton />
+      <template v-for="button in buttons" :key="button.text">
+        <QSpace v-if="button.text === null" />
+        <QBtn
+          v-else
+          flat
+          round
+          dense
+          :disable="button.disable.value"
+          :icon="buttonIcons[button.tag]"
+          @click="button.click"
+        >
+          <QTooltip>{{ button.text }}</QTooltip>
+        </QBtn>
+      </template>
+    </QToolbar>
+  </QFooter>
   <QHeader v-else class="q-py-sm">
     <QToolbar>
       <template v-for="button in buttons" :key="button.text">
@@ -37,7 +39,7 @@
 
 <script setup lang="ts">
 import { computed, ComputedRef } from "vue";
-import { useQuasar } from "quasar";
+import { QFooter, useQuasar } from "quasar";
 import MobileMenuButton from "./MobileMenuButton.vue";
 import {
   generateAndConnectAndSaveAudioWithDialog,
diff --git a/src/styles/_index.scss b/src/styles/_index.scss
index 02912d5603..a440dcaf89 100644
--- a/src/styles/_index.scss
+++ b/src/styles/_index.scss
@@ -8,6 +8,9 @@ body:not(#dummy) {
   border-left: solid #{vars.$window-border-width} #{colors.$splitter};
   border-right: solid #{vars.$window-border-width} #{colors.$splitter};
   border-bottom: solid #{vars.$window-border-width} #{colors.$splitter};
+  &:not(.desktop) {
+    border-top: solid #{vars.$window-border-width} #{colors.$splitter};
+  }
   color: colors.$display;
   background: colors.$background;
 }

From 847b820af9f1b7bb26a7d2a6b747749dc104d996 Mon Sep 17 00:00:00 2001
From: sevenc-nanashi <sevenc7c@sevenc7c.com>
Date: Sat, 30 Mar 2024 22:38:46 +0900
Subject: [PATCH 10/11] =?UTF-8?q?Fix:=20=E8=AC=8E=E3=81=AE=E9=9A=99?=
 =?UTF-8?q?=E9=96=93=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Talk/TalkEditor.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Talk/TalkEditor.vue b/src/components/Talk/TalkEditor.vue
index c103c573b1..a4cf4e5315 100644
--- a/src/components/Talk/TalkEditor.vue
+++ b/src/components/Talk/TalkEditor.vue
@@ -117,14 +117,13 @@
           </template>
         </QSplitter>
 
-        <ToolBar v-if="!$q.platform.is.desktop" />
-
         <QResizeObserver
           ref="resizeObserverRef"
           @resize="({ height }) => changeAudioDetailPaneMaxHeight(height)"
         />
       </QPage>
     </QPageContainer>
+    <ToolBar v-if="!$q.platform.is.desktop" />
   </QLayout>
 </template>
 

From b26fc5023b8522136ccad8d85e0a036ad5c1bdcf Mon Sep 17 00:00:00 2001
From: sevenc-nanashi <sevenc7c@sevenc7c.com>
Date: Sat, 30 Mar 2024 22:56:38 +0900
Subject: [PATCH 11/11] =?UTF-8?q?Fix:=20=E6=8A=9C=E3=81=91=E3=81=A6?=
 =?UTF-8?q?=E3=81=84=E3=81=9F=E5=87=A6=E7=90=86=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/backend/mobile/sandbox.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/backend/mobile/sandbox.ts b/src/backend/mobile/sandbox.ts
index 5f516ce132..5013c780c3 100644
--- a/src/backend/mobile/sandbox.ts
+++ b/src/backend/mobile/sandbox.ts
@@ -276,7 +276,10 @@ export const api: Sandbox = {
       );
   },
   vuexReady() {
-    SplashScreen.hide();
+    // 1フレーム遅らせることで、真っ白の画面が表示されるのを防ぐ。
+    requestAnimationFrame(() => {
+      SplashScreen.hide();
+    });
   },
   async getSetting(key) {
     const configManager = await getConfigManager();