From 4dd85b837cd1c0290bb1f01d445d6e797ac7941d Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Wed, 21 Aug 2024 13:09:17 +0900
Subject: [PATCH 1/3] =?UTF-8?q?=E7=B7=A8=E9=9B=86=E3=81=AB=E9=96=A2?=
 =?UTF-8?q?=E3=81=99=E3=82=8B=E3=83=86=E3=83=B3=E3=83=97=E3=83=AC=E3=83=BC?=
 =?UTF-8?q?=E3=83=88=E3=81=A8=E5=87=A6=E7=90=86=E3=82=92=E7=A7=BB=E5=8B=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryEditWordDialog.vue       | 479 ++++++++++++++++++
 .../Dialog/DictionaryManageDialog.vue         | 462 ++---------------
 2 files changed, 530 insertions(+), 411 deletions(-)
 create mode 100644 src/components/Dialog/DictionaryEditWordDialog.vue

diff --git a/src/components/Dialog/DictionaryEditWordDialog.vue b/src/components/Dialog/DictionaryEditWordDialog.vue
new file mode 100644
index 0000000000..a54cb44c11
--- /dev/null
+++ b/src/components/Dialog/DictionaryEditWordDialog.vue
@@ -0,0 +1,479 @@
+<template>
+  <div v-show="wordEditing" class="col-8 no-wrap text-no-wrap word-editor">
+    <div class="row q-pl-md q-mt-md">
+      <div class="text-h6">単語</div>
+      <QInput
+        ref="surfaceInput"
+        v-model="$props.surface"
+        class="word-input"
+        dense
+        :disable="$props.uiLocked"
+        @focus="clearSurfaceInputSelection()"
+        @blur="setSurface(props.surface)"
+        @keydown.enter="yomiFocus"
+      >
+        <ContextMenu
+          ref="surfaceContextMenu"
+          :header="surfaceContextMenuHeader"
+          :menudata="surfaceContextMenudata"
+          @beforeShow="startSurfaceContextMenuOperation()"
+          @beforeHide="endSurfaceContextMenuOperation()"
+        />
+      </QInput>
+    </div>
+    <div class="row q-pl-md q-pt-sm">
+      <div class="text-h6">読み</div>
+      <QInput
+        ref="yomiInput"
+        v-model="$props.yomi"
+        class="word-input q-pb-none"
+        dense
+        :error="!$props.isOnlyHiraOrKana"
+        :disable="uiLocked"
+        @focus="clearYomiInputSelection()"
+        @blur="$props.setYomi(props.yomi)"
+        @keydown.enter="setYomiWhenEnter"
+      >
+        <template #error>
+          読みに使える文字はひらがなとカタカナのみです。
+        </template>
+        <ContextMenu
+          ref="yomiContextMenu"
+          :header="yomiContextMenuHeader"
+          :menudata="yomiContextMenudata"
+          @beforeShow="startYomiContextMenuOperation()"
+          @beforeHide="endYomiContextMenuOperation()"
+        />
+      </QInput>
+    </div>
+    <div class="row q-pl-md q-mt-lg text-h6">アクセント調整</div>
+    <div class="row q-pl-md desc-row">
+      語尾のアクセントを考慮するため、「が」が自動で挿入されます。
+    </div>
+    <div class="row q-px-md" style="height: 130px">
+      <div class="play-button">
+        <QBtn
+          v-if="!nowPlaying && !nowGenerating"
+          fab
+          color="primary"
+          textColor="display-on-primary"
+          icon="play_arrow"
+          @click="play"
+        />
+        <QBtn
+          v-else
+          fab
+          color="primary"
+          textColor="display-on-primary"
+          icon="stop"
+          :disable="nowGenerating"
+          @click="stop"
+        />
+      </div>
+      <div
+        ref="accentPhraseTable"
+        class="accent-phrase-table overflow-hidden-y"
+      >
+        <div v-if="accentPhrase" class="mora-table">
+          <AudioAccent
+            v-if="$props.accentPhrase"
+            :accentPhrase="$props.accentPhrase"
+            :accentPhraseIndex="0"
+            :uiLocked
+            :onChangeAccent="changeAccent"
+          />
+          <template
+            v-for="(mora, moraIndex) in $props.accentPhrase
+              ? $props.accentPhrase.moras
+              : []"
+            :key="moraIndex"
+          >
+            <div
+              class="text-cell"
+              :style="{
+                gridColumn: `${moraIndex * 2 + 1} / span 1`,
+              }"
+            >
+              {{ mora.text }}
+            </div>
+            <div
+              v-if="
+                moraIndex <
+                ($props.accentPhrase
+                  ? $props.accentPhrase.moras.length - 1
+                  : -1)
+              "
+              class="splitter-cell"
+              :style="{
+                gridColumn: `${moraIndex * 2 + 2} / span 1`,
+              }"
+            />
+          </template>
+        </div>
+      </div>
+    </div>
+    <div class="row q-pl-md q-pt-lg text-h6">単語優先度</div>
+    <div class="row q-pl-md desc-row">
+      単語を登録しても反映されない場合は優先度を高くしてください。
+    </div>
+    <div
+      class="row q-px-md"
+      :style="{
+        justifyContent: 'center',
+      }"
+    >
+      <QSlider
+        v-model="$props.wordPriority"
+        snap
+        dense
+        color="primary"
+        markers
+        :min="0"
+        :max="10"
+        :step="1"
+        :markerLabels="wordPriorityLabels"
+        :style="{
+          width: '80%',
+        }"
+      />
+    </div>
+    <div class="row q-px-md save-delete-reset-buttons">
+      <QSpace />
+      <QBtn
+        v-show="!!props.selectedId"
+        outline
+        textColor="display"
+        class="text-no-wrap text-bold q-mr-sm"
+        :disable="uiLocked || !isWordChanged"
+        @click="resetWord(props.selectedId)"
+        >リセット</QBtn
+      >
+      <QBtn
+        outline
+        textColor="display"
+        class="text-no-wrap text-bold q-mr-sm"
+        :disable="$props.uiLocked"
+        @click="$props.discardOrNotDialog(props.cancel)"
+        >キャンセル</QBtn
+      >
+      <QBtn
+        outline
+        textColor="display"
+        class="text-no-wrap text-bold q-mr-sm"
+        :disable="uiLocked || !isWordChanged"
+        @click="saveWord"
+        >保存</QBtn
+      >
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ComputedRef, ref } from "vue";
+import { QInput } from "quasar";
+import AudioAccent from "@/components/Talk/AudioAccent.vue";
+import ContextMenu from "@/components/Menu/ContextMenu.vue";
+import { useRightClickContextMenu } from "@/composables/useRightClickContextMenu";
+import type { FetchAudioResult } from "@/store/type";
+import { useStore } from "@/store";
+import { AccentPhrase, UserDictWord } from "@/openapi";
+
+const props = defineProps<{
+  wordEditing: boolean;
+  isWordChanged: boolean | "" | AccentPhrase | undefined;
+  selectedId: string;
+  surface: string;
+  yomi: string;
+  voiceComputed: ComputedRef<{
+    engineId: string & BRAND<"EngineId">;
+    speakerId: string & BRAND<"SpeakerId">;
+    styleId: number & BRAND<"StyleId">;
+  }>;
+  isOnlyHiraOrKana: boolean;
+  accentPhrase: AccentPhrase | undefined;
+  wordPriority: number;
+  uiLocked: boolean;
+  userDict: Record<string, UserDictWord>;
+  setYomi: (text: string, changeWord?: boolean) => Promise<void>;
+  createUILockAction: <T>(action: Promise<T>) => Promise<T>;
+  loadingDictProcess: () => Promise<void>;
+  computeRegisteredAccent: () => number;
+  discardOrNotDialog: (okCallback: () => void) => Promise<void>;
+  toWordEditingState: () => void;
+  cancel: () => void;
+  toInitialState: () => void;
+}>();
+
+const emit = defineEmits<{
+  (e: "updateSelectedId", newId: string): void;
+  (e: "updateSurface", newSurface: string): void;
+  (
+    e: "updateAccentPhraseValueAccent",
+    newAccentPhraseValueAccent: number,
+  ): void;
+  (e: "updateAccentPhrase", newAccentPhrase: AccentPhrase | undefined): void;
+  (e: "updateWordPriority", newPriority: number): void;
+}>();
+
+const surfaceInput = ref<QInput>();
+const yomiInput = ref<QInput>();
+const accentPhraseTable = ref<HTMLElement>();
+const nowGenerating = ref(false);
+const nowPlaying = ref(false);
+const store = useStore();
+const wordPriorityLabels = {
+  0: "最低",
+  3: "低",
+  5: "標準",
+  7: "高",
+  10: "最高",
+};
+
+const yomiFocus = (event?: KeyboardEvent) => {
+  if (event && event.isComposing) return;
+  yomiInput.value?.focus();
+};
+
+const setYomiWhenEnter = (event?: KeyboardEvent) => {
+  if (event && event.isComposing) return;
+  void props.setYomi(props.yomi);
+};
+
+const setSurface = (text: string) => {
+  // surfaceを全角化する
+  // 入力は半角でも問題ないが、登録時に全角に変換され、isWordChangedの判断がおかしくなることがあるので、
+  // 入力後に自動で変換するようにする
+  const convertedText = convertHankakuToZenkaku(text);
+  emit("updateSurface", convertedText);
+};
+
+const convertHankakuToZenkaku = (text: string) => {
+  // " "などの目に見えない文字をまとめて全角スペース(0x3000)に置き換える
+  text = text.replace(/\p{Z}/gu, () => String.fromCharCode(0x3000));
+
+  // "!"から"~"までの範囲の文字(数字やアルファベット)を全角に置き換える
+  return text.replace(/[\u0021-\u007e]/g, (s) => {
+    return String.fromCharCode(s.charCodeAt(0) + 0xfee0);
+  });
+};
+
+const changeAccent = async (_: number, accent: number) => {
+  const { engineId, styleId } = props.voiceComputed.value;
+
+  if (props.accentPhrase) {
+    emit("updateAccentPhraseValueAccent", accent);
+    const newAccentPhrase = (
+      await props.createUILockAction(
+        store.dispatch("FETCH_MORA_DATA", {
+          accentPhrases: [props.accentPhrase],
+          engineId,
+          styleId,
+        }),
+      )
+    )[0];
+    emit("updateAccentPhrase", newAccentPhrase);
+  }
+};
+
+const play = async () => {
+  if (!props.accentPhrase) return;
+
+  nowGenerating.value = true;
+  const audioItem = await store.dispatch("GENERATE_AUDIO_ITEM", {
+    text: props.yomi,
+    voice: props.voiceComputed.value,
+  });
+
+  if (audioItem.query == undefined)
+    throw new Error(`assert audioItem.query !== undefined`);
+
+  audioItem.query.accentPhrases = [props.accentPhrase];
+
+  let fetchAudioResult: FetchAudioResult;
+  try {
+    fetchAudioResult = await store.dispatch("FETCH_AUDIO_FROM_AUDIO_ITEM", {
+      audioItem,
+    });
+  } catch (e) {
+    window.backend.logError(e);
+    nowGenerating.value = false;
+    void store.dispatch("SHOW_ALERT_DIALOG", {
+      title: "生成に失敗しました",
+      message: "エンジンの再起動をお試しください。",
+    });
+    return;
+  }
+
+  const { blob } = fetchAudioResult;
+  nowGenerating.value = false;
+  nowPlaying.value = true;
+  await store.dispatch("PLAY_AUDIO_BLOB", { audioBlob: blob });
+  nowPlaying.value = false;
+};
+
+const stop = () => {
+  void store.dispatch("STOP_AUDIO");
+};
+
+const saveWord = async () => {
+  if (!props.accentPhrase) throw new Error(`accentPhrase === undefined`);
+  const accent = props.computeRegisteredAccent();
+  if (props.selectedId) {
+    try {
+      await store.dispatch("REWRITE_WORD", {
+        wordUuid: props.selectedId,
+        surface: props.surface,
+        pronunciation: props.yomi,
+        accentType: accent,
+        priority: props.wordPriority,
+      });
+    } catch {
+      void store.dispatch("SHOW_ALERT_DIALOG", {
+        title: "単語の更新に失敗しました",
+        message: "エンジンの再起動をお試しください。",
+      });
+      return;
+    }
+  } else {
+    try {
+      await props.createUILockAction(
+        store.dispatch("ADD_WORD", {
+          surface: props.surface,
+          pronunciation: props.yomi,
+          accentType: accent,
+          priority: props.wordPriority,
+        }),
+      );
+    } catch {
+      void store.dispatch("SHOW_ALERT_DIALOG", {
+        title: "単語の登録に失敗しました",
+        message: "エンジンの再起動をお試しください。",
+      });
+      return;
+    }
+  }
+  await props.loadingDictProcess();
+  props.toInitialState();
+};
+
+const resetWord = async (id: string) => {
+  const result = await store.dispatch("SHOW_WARNING_DIALOG", {
+    title: "単語の変更をリセットしますか？",
+    message: "単語の変更は破棄されてリセットされます。",
+    actionName: "リセット",
+  });
+  if (result === "OK") {
+    emit("updateSelectedId", id);
+    emit("updateSurface", props.userDict[id].surface);
+    void props.setYomi(props.userDict[id].yomi, true);
+    emit("updateWordPriority", props.userDict[id].priority);
+    props.toWordEditingState();
+  }
+};
+
+const surfaceContextMenu = ref<InstanceType<typeof ContextMenu>>();
+const yomiContextMenu = ref<InstanceType<typeof ContextMenu>>();
+const surfaceRef = ref(props.surface);
+const yomiRef = ref(props.yomi);
+
+const {
+  contextMenuHeader: surfaceContextMenuHeader,
+  contextMenudata: surfaceContextMenudata,
+  startContextMenuOperation: startSurfaceContextMenuOperation,
+  clearInputSelection: clearSurfaceInputSelection,
+  endContextMenuOperation: endSurfaceContextMenuOperation,
+} = useRightClickContextMenu(surfaceContextMenu, surfaceInput, surfaceRef);
+
+const {
+  contextMenuHeader: yomiContextMenuHeader,
+  contextMenudata: yomiContextMenudata,
+  startContextMenuOperation: startYomiContextMenuOperation,
+  clearInputSelection: clearYomiInputSelection,
+  endContextMenuOperation: endYomiContextMenuOperation,
+} = useRightClickContextMenu(yomiContextMenu, yomiInput, yomiRef);
+</script>
+
+<style lang="scss" scoped>
+@use "@/styles/colors" as colors;
+@use "@/styles/variables" as vars;
+
+.word-editor {
+  display: flex;
+  flex-flow: column;
+  height: calc(
+    100vh - #{vars.$menubar-height + vars.$toolbar-height +
+      vars.$window-border-width}
+  ) !important;
+  overflow: auto;
+}
+
+.word-input {
+  padding-left: 10px;
+  width: calc(66vw - 80px);
+
+  :deep(.q-field__control) {
+    height: 2rem;
+  }
+
+  :deep(.q-placeholder) {
+    padding: 0;
+    font-size: 20px;
+  }
+
+  :deep(.q-field__after) {
+    height: 2rem;
+  }
+}
+
+.desc-row {
+  color: rgba(colors.$display-rgb, 0.5);
+  font-size: 12px;
+}
+
+.play-button {
+  margin: auto 0;
+  padding-right: 16px;
+}
+
+.accent-phrase-table {
+  flex-grow: 1;
+  align-self: stretch;
+
+  display: flex;
+  height: 130px;
+  overflow-x: scroll;
+  width: calc(66vw - 140px);
+
+  .mora-table {
+    display: inline-grid;
+    align-self: stretch;
+    grid-template-rows: 1fr 60px 30px;
+
+    .text-cell {
+      padding: 0;
+      min-width: 20px;
+      max-width: 20px;
+      grid-row-start: 3;
+      text-align: center;
+      white-space: nowrap;
+      color: colors.$display;
+      position: relative;
+    }
+
+    .splitter-cell {
+      min-width: 20px;
+      max-width: 20px;
+      grid-row: 3 / span 1;
+      z-index: vars.$detail-view-splitter-cell-z-index;
+    }
+  }
+}
+
+.save-delete-reset-buttons {
+  padding: 20px;
+
+  display: flex;
+  flex: 1;
+  align-items: flex-end;
+}
+</style>
diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index 2d4c1dcfb0..91c01b5d6f 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -117,168 +117,32 @@
           </div>
 
           <!-- 右側のpane -->
-          <div
-            v-show="wordEditing"
-            class="col-8 no-wrap text-no-wrap word-editor"
-          >
-            <div class="row q-pl-md q-mt-md">
-              <div class="text-h6">単語</div>
-              <QInput
-                ref="surfaceInput"
-                v-model="surface"
-                class="word-input"
-                dense
-                :disable="uiLocked"
-                @focus="clearSurfaceInputSelection()"
-                @blur="setSurface(surface)"
-                @keydown.enter="yomiFocus"
-              >
-                <ContextMenu
-                  ref="surfaceContextMenu"
-                  :header="surfaceContextMenuHeader"
-                  :menudata="surfaceContextMenudata"
-                  @beforeShow="startSurfaceContextMenuOperation()"
-                  @beforeHide="endSurfaceContextMenuOperation()"
-                />
-              </QInput>
-            </div>
-            <div class="row q-pl-md q-pt-sm">
-              <div class="text-h6">読み</div>
-              <QInput
-                ref="yomiInput"
-                v-model="yomi"
-                class="word-input q-pb-none"
-                dense
-                :error="!isOnlyHiraOrKana"
-                :disable="uiLocked"
-                @focus="clearYomiInputSelection()"
-                @blur="setYomi(yomi)"
-                @keydown.enter="setYomiWhenEnter"
-              >
-                <template #error>
-                  読みに使える文字はひらがなとカタカナのみです。
-                </template>
-                <ContextMenu
-                  ref="yomiContextMenu"
-                  :header="yomiContextMenuHeader"
-                  :menudata="yomiContextMenudata"
-                  @beforeShow="startYomiContextMenuOperation()"
-                  @beforeHide="endYomiContextMenuOperation()"
-                />
-              </QInput>
-            </div>
-            <div class="row q-pl-md q-mt-lg text-h6">アクセント調整</div>
-            <div class="row q-pl-md desc-row">
-              語尾のアクセントを考慮するため、「が」が自動で挿入されます。
-            </div>
-            <div class="row q-px-md" style="height: 130px">
-              <div class="play-button">
-                <QBtn
-                  v-if="!nowPlaying && !nowGenerating"
-                  fab
-                  color="primary"
-                  textColor="display-on-primary"
-                  icon="play_arrow"
-                  @click="play"
-                />
-                <QBtn
-                  v-else
-                  fab
-                  color="primary"
-                  textColor="display-on-primary"
-                  icon="stop"
-                  :disable="nowGenerating"
-                  @click="stop"
-                />
-              </div>
-              <div
-                ref="accentPhraseTable"
-                class="accent-phrase-table overflow-hidden-y"
-              >
-                <div v-if="accentPhrase" class="mora-table">
-                  <AudioAccent
-                    :accentPhrase
-                    :accentPhraseIndex="0"
-                    :uiLocked
-                    :onChangeAccent="changeAccent"
-                  />
-                  <template
-                    v-for="(mora, moraIndex) in accentPhrase.moras"
-                    :key="moraIndex"
-                  >
-                    <div
-                      class="text-cell"
-                      :style="{
-                        gridColumn: `${moraIndex * 2 + 1} / span 1`,
-                      }"
-                    >
-                      {{ mora.text }}
-                    </div>
-                    <div
-                      v-if="moraIndex < accentPhrase.moras.length - 1"
-                      class="splitter-cell"
-                      :style="{
-                        gridColumn: `${moraIndex * 2 + 2} / span 1`,
-                      }"
-                    />
-                  </template>
-                </div>
-              </div>
-            </div>
-            <div class="row q-pl-md q-pt-lg text-h6">単語優先度</div>
-            <div class="row q-pl-md desc-row">
-              単語を登録しても反映されない場合は優先度を高くしてください。
-            </div>
-            <div
-              class="row q-px-md"
-              :style="{
-                justifyContent: 'center',
-              }"
-            >
-              <QSlider
-                v-model="wordPriority"
-                snap
-                dense
-                color="primary"
-                markers
-                :min="0"
-                :max="10"
-                :step="1"
-                :markerLabels="wordPriorityLabels"
-                :style="{
-                  width: '80%',
-                }"
-              />
-            </div>
-            <div class="row q-px-md save-delete-reset-buttons">
-              <QSpace />
-              <QBtn
-                v-show="!!selectedId"
-                outline
-                textColor="display"
-                class="text-no-wrap text-bold q-mr-sm"
-                :disable="uiLocked || !isWordChanged"
-                @click="resetWord(selectedId)"
-                >リセット</QBtn
-              >
-              <QBtn
-                outline
-                textColor="display"
-                class="text-no-wrap text-bold q-mr-sm"
-                :disable="uiLocked"
-                @click="discardOrNotDialog(cancel)"
-                >キャンセル</QBtn
-              >
-              <QBtn
-                outline
-                textColor="display"
-                class="text-no-wrap text-bold q-mr-sm"
-                :disable="uiLocked || !isWordChanged"
-                @click="saveWord"
-                >保存</QBtn
-              >
-            </div>
-          </div>
+          <DictionaryEditWordDialog
+            :wordEditing
+            :isWordChanged
+            :selectedId
+            :surface
+            :yomi
+            :voiceComputed
+            :isOnlyHiraOrKana
+            :accentPhrase
+            :wordPriority
+            :uiLocked
+            :userDict
+            @setYomi="setYomi"
+            @createUILockAction="createUILockAction"
+            @loadingDictProcess="loadingDictProcess"
+            @computeRegisteredAccent="computeRegisteredAccent"
+            @discardOrNotDialog="discardOrNotDialog"
+            @toWordEditingState="toWordEditingState"
+            @cancel="cancel"
+            @toInitialState="toInitialState"
+            @updateSelectedId="updateSelectedId"
+            @updateSurface="updateSurface"
+            @updateAccentPhraseValue="updateAccentPhraseValueAccent"
+            @updateAccentPhrase="updateAccentPhrase"
+            @updateWordPriority="updateWordPriority"
+          ></DictionaryEditWordDialog>
         </QPage>
       </QPageContainer>
     </QLayout>
@@ -287,12 +151,8 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
-import { QInput } from "quasar";
-import AudioAccent from "@/components/Talk/AudioAccent.vue";
-import ContextMenu from "@/components/Menu/ContextMenu.vue";
-import { useRightClickContextMenu } from "@/composables/useRightClickContextMenu";
+import DictionaryEditWordDialog from "./DictionaryEditWordDialog.vue";
 import { useStore } from "@/store";
-import type { FetchAudioResult } from "@/store/type";
 import { AccentPhrase, UserDictWord } from "@/openapi";
 import {
   convertHiraToKana,
@@ -316,8 +176,6 @@ const dictionaryManageDialogOpenedComputed = computed({
   set: (val) => emit("update:modelValue", val),
 });
 const uiLocked = ref(false); // ダイアログ内でstore.getters.UI_LOCKEDは常にtrueなので独自に管理
-const nowGenerating = ref(false);
-const nowPlaying = ref(false);
 
 // word-list の要素のうち、どの要素がホバーされているか
 const hoveredKey = ref<string | undefined>(undefined);
@@ -369,22 +227,18 @@ watch(dictionaryManageDialogOpenedComputed, async (newValue) => {
 });
 
 const wordEditing = ref(false);
-
-const surfaceInput = ref<QInput>();
-const yomiInput = ref<QInput>();
-const yomiFocus = (event?: KeyboardEvent) => {
-  if (event && event.isComposing) return;
-  yomiInput.value?.focus();
-};
-const setYomiWhenEnter = (event?: KeyboardEvent) => {
-  if (event && event.isComposing) return;
-  void setYomi(yomi.value);
-};
-
 const selectedId = ref("");
 const surface = ref("");
 const yomi = ref("");
 
+const updateSelectedId = (newId: string) => {
+  selectedId.value = newId;
+};
+
+const updateSurface = (newSurface: string) => {
+  surface.value = newSurface;
+};
+
 const voiceComputed = computed(() => {
   const userOrderedCharacterInfos =
     store.getters.USER_ORDERED_CHARACTER_INFOS("talk");
@@ -401,23 +255,19 @@ const voiceComputed = computed(() => {
 const kanaRegex = createKanaRegex();
 const isOnlyHiraOrKana = ref(true);
 const accentPhrase = ref<AccentPhrase | undefined>();
-const accentPhraseTable = ref<HTMLElement>();
-
-const convertHankakuToZenkaku = (text: string) => {
-  // " "などの目に見えない文字をまとめて全角スペース(0x3000)に置き換える
-  text = text.replace(/\p{Z}/gu, () => String.fromCharCode(0x3000));
 
-  // "!"から"~"までの範囲の文字(数字やアルファベット)を全角に置き換える
-  return text.replace(/[\u0021-\u007e]/g, (s) => {
-    return String.fromCharCode(s.charCodeAt(0) + 0xfee0);
-  });
+const updateAccentPhraseValueAccent = (
+  newAccentPhraseValueAccent: number | undefined,
+) => {
+  if (accentPhrase.value && newAccentPhraseValueAccent != undefined) {
+    accentPhrase.value.accent = newAccentPhraseValueAccent;
+  }
 };
-const setSurface = (text: string) => {
-  // surfaceを全角化する
-  // 入力は半角でも問題ないが、登録時に全角に変換され、isWordChangedの判断がおかしくなることがあるので、
-  // 入力後に自動で変換するようにする
-  surface.value = convertHankakuToZenkaku(text);
+
+const updateAccentPhrase = (newAccentPhrase: AccentPhrase | undefined) => {
+  accentPhrase.value = newAccentPhrase;
 };
+
 const setYomi = async (text: string, changeWord?: boolean) => {
   const { engineId, styleId } = voiceComputed.value;
 
@@ -458,62 +308,6 @@ const setYomi = async (text: string, changeWord?: boolean) => {
   yomi.value = text;
 };
 
-const changeAccent = async (_: number, accent: number) => {
-  const { engineId, styleId } = voiceComputed.value;
-
-  if (accentPhrase.value) {
-    accentPhrase.value.accent = accent;
-    accentPhrase.value = (
-      await createUILockAction(
-        store.dispatch("FETCH_MORA_DATA", {
-          accentPhrases: [accentPhrase.value],
-          engineId,
-          styleId,
-        }),
-      )
-    )[0];
-  }
-};
-
-const play = async () => {
-  if (!accentPhrase.value) return;
-
-  nowGenerating.value = true;
-  const audioItem = await store.dispatch("GENERATE_AUDIO_ITEM", {
-    text: yomi.value,
-    voice: voiceComputed.value,
-  });
-
-  if (audioItem.query == undefined)
-    throw new Error(`assert audioItem.query !== undefined`);
-
-  audioItem.query.accentPhrases = [accentPhrase.value];
-
-  let fetchAudioResult: FetchAudioResult;
-  try {
-    fetchAudioResult = await store.dispatch("FETCH_AUDIO_FROM_AUDIO_ITEM", {
-      audioItem,
-    });
-  } catch (e) {
-    window.backend.logError(e);
-    nowGenerating.value = false;
-    void store.dispatch("SHOW_ALERT_DIALOG", {
-      title: "生成に失敗しました",
-      message: "エンジンの再起動をお試しください。",
-    });
-    return;
-  }
-
-  const { blob } = fetchAudioResult;
-  nowGenerating.value = false;
-  nowPlaying.value = true;
-  await store.dispatch("PLAY_AUDIO_BLOB", { audioBlob: blob });
-  nowPlaying.value = false;
-};
-const stop = () => {
-  void store.dispatch("STOP_AUDIO");
-};
-
 // accent phraseにあるaccentと実際に登録するアクセントには差が生まれる
 // アクセントが自動追加される「ガ」に指定されている場合、
 // 実際に登録するaccentの値は0となるので、そうなるように処理する
@@ -533,12 +327,9 @@ const computeDisplayAccent = () => {
 };
 
 const wordPriority = ref(defaultDictPriority);
-const wordPriorityLabels = {
-  0: "最低",
-  3: "低",
-  5: "標準",
-  7: "高",
-  10: "最高",
+
+const updateWordPriority = (newPriority: number) => {
+  wordPriority.value = newPriority;
 };
 
 // 操作（ステートの移動）
@@ -557,46 +348,7 @@ const isWordChanged = computed(() => {
       dictData.priority !== wordPriority.value)
   );
 });
-const saveWord = async () => {
-  if (!accentPhrase.value) throw new Error(`accentPhrase === undefined`);
-  const accent = computeRegisteredAccent();
-  if (selectedId.value) {
-    try {
-      await store.dispatch("REWRITE_WORD", {
-        wordUuid: selectedId.value,
-        surface: surface.value,
-        pronunciation: yomi.value,
-        accentType: accent,
-        priority: wordPriority.value,
-      });
-    } catch {
-      void store.dispatch("SHOW_ALERT_DIALOG", {
-        title: "単語の更新に失敗しました",
-        message: "エンジンの再起動をお試しください。",
-      });
-      return;
-    }
-  } else {
-    try {
-      await createUILockAction(
-        store.dispatch("ADD_WORD", {
-          surface: surface.value,
-          pronunciation: yomi.value,
-          accentType: accent,
-          priority: wordPriority.value,
-        }),
-      );
-    } catch {
-      void store.dispatch("SHOW_ALERT_DIALOG", {
-        title: "単語の登録に失敗しました",
-        message: "エンジンの再起動をお試しください。",
-      });
-      return;
-    }
-  }
-  await loadingDictProcess();
-  toInitialState();
-};
+
 const deleteWord = async () => {
   const result = await store.dispatch("SHOW_WARNING_DIALOG", {
     title: "登録された単語を削除しますか？",
@@ -621,20 +373,7 @@ const deleteWord = async () => {
     toInitialState();
   }
 };
-const resetWord = async (id: string) => {
-  const result = await store.dispatch("SHOW_WARNING_DIALOG", {
-    title: "単語の変更をリセットしますか？",
-    message: "単語の変更は破棄されてリセットされます。",
-    actionName: "リセット",
-  });
-  if (result === "OK") {
-    selectedId.value = id;
-    surface.value = userDict.value[id].surface;
-    void setYomi(userDict.value[id].yomi, true);
-    wordPriority.value = userDict.value[id].priority;
-    toWordEditingState();
-  }
-};
+
 const discardOrNotDialog = async (okCallback: () => void) => {
   if (isWordChanged.value) {
     const result = await store.dispatch("SHOW_WARNING_DIALOG", {
@@ -689,31 +428,12 @@ const toWordSelectedState = () => {
 // 単語が編集されている状態
 const toWordEditingState = () => {
   wordEditing.value = true;
-  surfaceInput.value?.focus();
+  // surfaceInput.value?.focus();
 };
 // ダイアログが閉じている状態
 const toDialogClosedState = () => {
   dictionaryManageDialogOpenedComputed.value = false;
 };
-
-const surfaceContextMenu = ref<InstanceType<typeof ContextMenu>>();
-const yomiContextMenu = ref<InstanceType<typeof ContextMenu>>();
-
-const {
-  contextMenuHeader: surfaceContextMenuHeader,
-  contextMenudata: surfaceContextMenudata,
-  startContextMenuOperation: startSurfaceContextMenuOperation,
-  clearInputSelection: clearSurfaceInputSelection,
-  endContextMenuOperation: endSurfaceContextMenuOperation,
-} = useRightClickContextMenu(surfaceContextMenu, surfaceInput, surface);
-
-const {
-  contextMenuHeader: yomiContextMenuHeader,
-  contextMenudata: yomiContextMenudata,
-  startContextMenuOperation: startYomiContextMenuOperation,
-  clearInputSelection: clearYomiInputSelection,
-  endContextMenuOperation: endYomiContextMenuOperation,
-} = useRightClickContextMenu(yomiContextMenu, yomiInput, yomi);
 </script>
 
 <style lang="scss" scoped>
@@ -778,84 +498,4 @@ const {
   position: absolute;
   z-index: 10;
 }
-
-.word-editor {
-  display: flex;
-  flex-flow: column;
-  height: calc(
-    100vh - #{vars.$menubar-height + vars.$toolbar-height +
-      vars.$window-border-width}
-  ) !important;
-  overflow: auto;
-}
-
-.word-input {
-  padding-left: 10px;
-  width: calc(66vw - 80px);
-
-  :deep(.q-field__control) {
-    height: 2rem;
-  }
-
-  :deep(.q-placeholder) {
-    padding: 0;
-    font-size: 20px;
-  }
-
-  :deep(.q-field__after) {
-    height: 2rem;
-  }
-}
-
-.desc-row {
-  color: rgba(colors.$display-rgb, 0.5);
-  font-size: 12px;
-}
-
-.play-button {
-  margin: auto 0;
-  padding-right: 16px;
-}
-
-.accent-phrase-table {
-  flex-grow: 1;
-  align-self: stretch;
-
-  display: flex;
-  height: 130px;
-  overflow-x: scroll;
-  width: calc(66vw - 140px);
-
-  .mora-table {
-    display: inline-grid;
-    align-self: stretch;
-    grid-template-rows: 1fr 60px 30px;
-
-    .text-cell {
-      padding: 0;
-      min-width: 20px;
-      max-width: 20px;
-      grid-row-start: 3;
-      text-align: center;
-      white-space: nowrap;
-      color: colors.$display;
-      position: relative;
-    }
-
-    .splitter-cell {
-      min-width: 20px;
-      max-width: 20px;
-      grid-row: 3 / span 1;
-      z-index: vars.$detail-view-splitter-cell-z-index;
-    }
-  }
-}
-
-.save-delete-reset-buttons {
-  padding: 20px;
-
-  display: flex;
-  flex: 1;
-  align-items: flex-end;
-}
 </style>

From b30df751d2d5b908dd67d625e833dc183291388e Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Wed, 21 Aug 2024 13:24:15 +0900
Subject: [PATCH 2/3] =?UTF-8?q?style=E9=83=A8=E5=88=86=E3=82=92=E6=88=BB?=
 =?UTF-8?q?=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryEditWordDialog.vue       | 85 -------------------
 .../Dialog/DictionaryManageDialog.vue         | 80 +++++++++++++++++
 2 files changed, 80 insertions(+), 85 deletions(-)

diff --git a/src/components/Dialog/DictionaryEditWordDialog.vue b/src/components/Dialog/DictionaryEditWordDialog.vue
index a54cb44c11..9a3063c1d4 100644
--- a/src/components/Dialog/DictionaryEditWordDialog.vue
+++ b/src/components/Dialog/DictionaryEditWordDialog.vue
@@ -392,88 +392,3 @@ const {
   endContextMenuOperation: endYomiContextMenuOperation,
 } = useRightClickContextMenu(yomiContextMenu, yomiInput, yomiRef);
 </script>
-
-<style lang="scss" scoped>
-@use "@/styles/colors" as colors;
-@use "@/styles/variables" as vars;
-
-.word-editor {
-  display: flex;
-  flex-flow: column;
-  height: calc(
-    100vh - #{vars.$menubar-height + vars.$toolbar-height +
-      vars.$window-border-width}
-  ) !important;
-  overflow: auto;
-}
-
-.word-input {
-  padding-left: 10px;
-  width: calc(66vw - 80px);
-
-  :deep(.q-field__control) {
-    height: 2rem;
-  }
-
-  :deep(.q-placeholder) {
-    padding: 0;
-    font-size: 20px;
-  }
-
-  :deep(.q-field__after) {
-    height: 2rem;
-  }
-}
-
-.desc-row {
-  color: rgba(colors.$display-rgb, 0.5);
-  font-size: 12px;
-}
-
-.play-button {
-  margin: auto 0;
-  padding-right: 16px;
-}
-
-.accent-phrase-table {
-  flex-grow: 1;
-  align-self: stretch;
-
-  display: flex;
-  height: 130px;
-  overflow-x: scroll;
-  width: calc(66vw - 140px);
-
-  .mora-table {
-    display: inline-grid;
-    align-self: stretch;
-    grid-template-rows: 1fr 60px 30px;
-
-    .text-cell {
-      padding: 0;
-      min-width: 20px;
-      max-width: 20px;
-      grid-row-start: 3;
-      text-align: center;
-      white-space: nowrap;
-      color: colors.$display;
-      position: relative;
-    }
-
-    .splitter-cell {
-      min-width: 20px;
-      max-width: 20px;
-      grid-row: 3 / span 1;
-      z-index: vars.$detail-view-splitter-cell-z-index;
-    }
-  }
-}
-
-.save-delete-reset-buttons {
-  padding: 20px;
-
-  display: flex;
-  flex: 1;
-  align-items: flex-end;
-}
-</style>
diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index 91c01b5d6f..0ef14df891 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -498,4 +498,84 @@ const toDialogClosedState = () => {
   position: absolute;
   z-index: 10;
 }
+
+.word-editor {
+  display: flex;
+  flex-flow: column;
+  height: calc(
+    100vh - #{vars.$menubar-height + vars.$toolbar-height +
+      vars.$window-border-width}
+  ) !important;
+  overflow: auto;
+}
+
+.word-input {
+  padding-left: 10px;
+  width: calc(66vw - 80px);
+
+  :deep(.q-field__control) {
+    height: 2rem;
+  }
+
+  :deep(.q-placeholder) {
+    padding: 0;
+    font-size: 20px;
+  }
+
+  :deep(.q-field__after) {
+    height: 2rem;
+  }
+}
+
+.desc-row {
+  color: rgba(colors.$display-rgb, 0.5);
+  font-size: 12px;
+}
+
+.play-button {
+  margin: auto 0;
+  padding-right: 16px;
+}
+
+.accent-phrase-table {
+  flex-grow: 1;
+  align-self: stretch;
+
+  display: flex;
+  height: 130px;
+  overflow-x: scroll;
+  width: calc(66vw - 140px);
+
+  .mora-table {
+    display: inline-grid;
+    align-self: stretch;
+    grid-template-rows: 1fr 60px 30px;
+
+    .text-cell {
+      padding: 0;
+      min-width: 20px;
+      max-width: 20px;
+      grid-row-start: 3;
+      text-align: center;
+      white-space: nowrap;
+      color: colors.$display;
+      position: relative;
+    }
+
+    .splitter-cell {
+      min-width: 20px;
+      max-width: 20px;
+      grid-row: 3 / span 1;
+      z-index: vars.$detail-view-splitter-cell-z-index;
+    }
+  }
+}
+
+.save-delete-reset-buttons {
+  padding: 20px;
+
+  display: flex;
+  flex: 1;
+  align-items: flex-end;
+}
 </style>

From 595a694a5669d6da1e1f6ad4493c4ed25304bbba Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Wed, 21 Aug 2024 15:21:07 +0900
Subject: [PATCH 3/3] =?UTF-8?q?props=E3=81=A7=E6=B8=A1=E3=81=99=E5=A4=89?=
 =?UTF-8?q?=E6=95=B0=E3=81=AE=E5=9E=8B=E5=AE=9A=E7=BE=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryEditWordDialog.vue       | 115 ++++++++++++++++--
 .../Dialog/DictionaryManageDialog.vue         | 111 +++--------------
 2 files changed, 122 insertions(+), 104 deletions(-)

diff --git a/src/components/Dialog/DictionaryEditWordDialog.vue b/src/components/Dialog/DictionaryEditWordDialog.vue
index 9a3063c1d4..4934817f06 100644
--- a/src/components/Dialog/DictionaryEditWordDialog.vue
+++ b/src/components/Dialog/DictionaryEditWordDialog.vue
@@ -4,10 +4,11 @@
       <div class="text-h6">単語</div>
       <QInput
         ref="surfaceInput"
-        v-model="$props.surface"
+        :modelValue="$props.surface"
+        :disable="$props.uiLocked"
         class="word-input"
         dense
-        :disable="$props.uiLocked"
+        @update="onUpdateSurface"
         @focus="clearSurfaceInputSelection()"
         @blur="setSurface(props.surface)"
         @keydown.enter="yomiFocus"
@@ -25,11 +26,12 @@
       <div class="text-h6">読み</div>
       <QInput
         ref="yomiInput"
-        v-model="$props.yomi"
+        :modelValue="$props.yomi"
+        :disable="uiLocked"
         class="word-input q-pb-none"
-        dense
         :error="!$props.isOnlyHiraOrKana"
-        :disable="uiLocked"
+        dense
+        @update="onUpdateYomi"
         @focus="clearYomiInputSelection()"
         @blur="$props.setYomi(props.yomi)"
         @keydown.enter="setYomiWhenEnter"
@@ -169,7 +171,7 @@
 </template>
 
 <script setup lang="ts">
-import { ComputedRef, ref } from "vue";
+import { ref } from "vue";
 import { QInput } from "quasar";
 import AudioAccent from "@/components/Talk/AudioAccent.vue";
 import ContextMenu from "@/components/Menu/ContextMenu.vue";
@@ -177,6 +179,7 @@ import { useRightClickContextMenu } from "@/composables/useRightClickContextMenu
 import type { FetchAudioResult } from "@/store/type";
 import { useStore } from "@/store";
 import { AccentPhrase, UserDictWord } from "@/openapi";
+import { EngineId, SpeakerId, StyleId } from "@/type/preload";
 
 const props = defineProps<{
   wordEditing: boolean;
@@ -184,11 +187,11 @@ const props = defineProps<{
   selectedId: string;
   surface: string;
   yomi: string;
-  voiceComputed: ComputedRef<{
-    engineId: string & BRAND<"EngineId">;
-    speakerId: string & BRAND<"SpeakerId">;
-    styleId: number & BRAND<"StyleId">;
-  }>;
+  voiceComputed: {
+    engineId: string & EngineId;
+    speakerId: string & SpeakerId;
+    styleId: number & StyleId;
+  };
   isOnlyHiraOrKana: boolean;
   accentPhrase: AccentPhrase | undefined;
   wordPriority: number;
@@ -207,6 +210,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: "updateSelectedId", newId: string): void;
   (e: "updateSurface", newSurface: string): void;
+  (e: "updateYomi", newYomi: string): void;
   (
     e: "updateAccentPhraseValueAccent",
     newAccentPhraseValueAccent: number,
@@ -258,7 +262,7 @@ const convertHankakuToZenkaku = (text: string) => {
 };
 
 const changeAccent = async (_: number, accent: number) => {
-  const { engineId, styleId } = props.voiceComputed.value;
+  const { engineId, styleId } = props.voiceComputed;
 
   if (props.accentPhrase) {
     emit("updateAccentPhraseValueAccent", accent);
@@ -281,7 +285,7 @@ const play = async () => {
   nowGenerating.value = true;
   const audioItem = await store.dispatch("GENERATE_AUDIO_ITEM", {
     text: props.yomi,
-    voice: props.voiceComputed.value,
+    voice: props.voiceComputed,
   });
 
   if (audioItem.query == undefined)
@@ -392,3 +396,88 @@ const {
   endContextMenuOperation: endYomiContextMenuOperation,
 } = useRightClickContextMenu(yomiContextMenu, yomiInput, yomiRef);
 </script>
+
+<style lang="scss" scoped>
+@use "@/styles/colors" as colors;
+@use "@/styles/variables" as vars;
+
+.word-editor {
+  display: flex;
+  flex-flow: column;
+  height: calc(
+    100vh - #{vars.$menubar-height + vars.$toolbar-height +
+      vars.$window-border-width}
+  ) !important;
+  overflow: auto;
+}
+
+.word-input {
+  padding-left: 10px;
+  width: calc(66vw - 80px);
+
+  :deep(.q-field__control) {
+    height: 2rem;
+  }
+
+  :deep(.q-placeholder) {
+    padding: 0;
+    font-size: 20px;
+  }
+
+  :deep(.q-field__after) {
+    height: 2rem;
+  }
+}
+
+.desc-row {
+  color: rgba(colors.$display-rgb, 0.5);
+  font-size: 12px;
+}
+
+.play-button {
+  margin: auto 0;
+  padding-right: 16px;
+}
+
+.accent-phrase-table {
+  flex-grow: 1;
+  align-self: stretch;
+
+  display: flex;
+  height: 130px;
+  overflow-x: scroll;
+  width: calc(66vw - 140px);
+
+  .mora-table {
+    display: inline-grid;
+    align-self: stretch;
+    grid-template-rows: 1fr 60px 30px;
+
+    .text-cell {
+      padding: 0;
+      min-width: 20px;
+      max-width: 20px;
+      grid-row-start: 3;
+      text-align: center;
+      white-space: nowrap;
+      color: colors.$display;
+      position: relative;
+    }
+
+    .splitter-cell {
+      min-width: 20px;
+      max-width: 20px;
+      grid-row: 3 / span 1;
+      z-index: vars.$detail-view-splitter-cell-z-index;
+    }
+  }
+}
+
+.save-delete-reset-buttons {
+  padding: 20px;
+
+  display: flex;
+  flex: 1;
+  align-items: flex-end;
+}
+</style>
diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index 0ef14df891..aeb285a775 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -129,16 +129,17 @@
             :wordPriority
             :uiLocked
             :userDict
-            @setYomi="setYomi"
-            @createUILockAction="createUILockAction"
-            @loadingDictProcess="loadingDictProcess"
-            @computeRegisteredAccent="computeRegisteredAccent"
-            @discardOrNotDialog="discardOrNotDialog"
-            @toWordEditingState="toWordEditingState"
-            @cancel="cancel"
-            @toInitialState="toInitialState"
+            :setYomi
+            :createUILockAction
+            :loadingDictProcess
+            :computeRegisteredAccent
+            :discardOrNotDialog
+            :toWordEditingState
+            :cancel
+            :toInitialState
             @updateSelectedId="updateSelectedId"
-            @updateSurface="updateSurface"
+            @updateSurface="onUpdateSurface"
+            @onUpdateYomi="onUpdateYomi"
             @updateAccentPhraseValue="updateAccentPhraseValueAccent"
             @updateAccentPhrase="updateAccentPhrase"
             @updateWordPriority="updateWordPriority"
@@ -235,8 +236,16 @@ const updateSelectedId = (newId: string) => {
   selectedId.value = newId;
 };
 
-const updateSurface = (newSurface: string) => {
-  surface.value = newSurface;
+const onUpdateSurface = (newSurface: string | number | null) => {
+  if (typeof newSurface === "string") {
+    surface.value = newSurface;
+  }
+};
+
+const onUpdateYomi = (newYomi: string | number | null) => {
+  if (typeof newYomi === "string") {
+    yomi.value = newYomi;
+  }
 };
 
 const voiceComputed = computed(() => {
@@ -498,84 +507,4 @@ const toDialogClosedState = () => {
   position: absolute;
   z-index: 10;
 }
-
-.word-editor {
-  display: flex;
-  flex-flow: column;
-  height: calc(
-    100vh - #{vars.$menubar-height + vars.$toolbar-height +
-      vars.$window-border-width}
-  ) !important;
-  overflow: auto;
-}
-
-.word-input {
-  padding-left: 10px;
-  width: calc(66vw - 80px);
-
-  :deep(.q-field__control) {
-    height: 2rem;
-  }
-
-  :deep(.q-placeholder) {
-    padding: 0;
-    font-size: 20px;
-  }
-
-  :deep(.q-field__after) {
-    height: 2rem;
-  }
-}
-
-.desc-row {
-  color: rgba(colors.$display-rgb, 0.5);
-  font-size: 12px;
-}
-
-.play-button {
-  margin: auto 0;
-  padding-right: 16px;
-}
-
-.accent-phrase-table {
-  flex-grow: 1;
-  align-self: stretch;
-
-  display: flex;
-  height: 130px;
-  overflow-x: scroll;
-  width: calc(66vw - 140px);
-
-  .mora-table {
-    display: inline-grid;
-    align-self: stretch;
-    grid-template-rows: 1fr 60px 30px;
-
-    .text-cell {
-      padding: 0;
-      min-width: 20px;
-      max-width: 20px;
-      grid-row-start: 3;
-      text-align: center;
-      white-space: nowrap;
-      color: colors.$display;
-      position: relative;
-    }
-
-    .splitter-cell {
-      min-width: 20px;
-      max-width: 20px;
-      grid-row: 3 / span 1;
-      z-index: vars.$detail-view-splitter-cell-z-index;
-    }
-  }
-}
-
-.save-delete-reset-buttons {
-  padding: 20px;
-
-  display: flex;
-  flex: 1;
-  align-items: flex-end;
-}
 </style>