実験：ツールバーにアイコンを追加

package.json

@@ -40,7 +40,8 @@
     "license:generate": "node build/generateLicenses.js",
     "license:merge": "node build/mergeLicenses.js",
     "storybook": "storybook dev --port 6006",
-    "storybook:build": "storybook build"
+    "storybook:build": "storybook build",
+    "generate-icons": "matex -r ./public/matexRecipes.yml -o public"
   },
   "dependencies": {
     "@gtm-support/vue-gtm": "1.2.3",
@@ -81,6 +82,7 @@
     "@openapitools/openapi-generator-cli": "2.15.3",
     "@playwright/test": "1.48.2",
     "@quasar/vite-plugin": "1.8.1",
+    "@sevenc-nanashi/matex": "1.1.2",
     "@storybook/addon-essentials": "8.4.4",
     "@storybook/addon-links": "8.4.4",
     "@storybook/addon-themes": "8.4.4",
@@ -135,6 +137,7 @@
     "vite-plugin-electron": "0.29.0",
     "vite-tsconfig-paths": "5.1.2",
     "vitest": "2.1.2",
+    "vue-component-type-helpers": "2.1.6",
     "vue-tsc": "2.1.10",
     "yargs": "17.2.1"
   }

public/matexRecipes.yml

@@ -0,0 +1,6 @@
+toolbarIcons.svg:
+  playAll: filled:play_arrow + notes
+  exportSelected: filled:save + volume_up
+  exportConnectAll: filled:save + link
+  exportAll: filled:save + notes
+  importText: filled:upload + outlined:import_contacts

src/components/Base/BaseToggleGroup.stories.ts

@@ -5,6 +5,7 @@ import BaseToggleGroup from "./BaseToggleGroup.vue";
 import BaseToggleGroupItem from "./BaseToggleGroupItem.vue";
 
 const meta: Meta<typeof BaseToggleGroup> = {
+  // @ts-expect-error どうやらGenericsと相性が悪いらしい？
   component: BaseToggleGroup,
 };
 

src/components/Base/BaseToggleGroup.vue

@@ -16,12 +16,12 @@
   </ToggleGroupRoot>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends 'single' | 'multiple'">
 import { ToggleGroupRoot } from "radix-vue";
 
 defineProps<{
-  type: "single" | "multiple";
-  modelValue: string | string[];
+  type: T;
+  modelValue: T extends "single" ? string : string[];
   disabled?: boolean;
 }>();
 

src/components/Dialog/SettingDialog/ButtonToggleCell.vue

@@ -33,5 +33,5 @@ defineProps<{
   disable?: boolean;
 }>();
 
-const model = defineModel<string | string[]>({ required: true });
+const model = defineModel<T>({ required: true });
 </script>

src/components/Dialog/SettingDialog/SettingDialog.vue

@@ -341,6 +341,17 @@
                   :modelValue="showAddAudioItemButton"
                   @update:modelValue="changeShowAddAudioItemButton"
                 />
+                <ButtonToggleCell
+                  title="ツールバーの表示"
+                  description="ツールバーの表示を選べます。"
+                  :modelValue="toolbarButtonDisplay"
+                  :options="[
+                    { label: 'アイコンのみ', value: 'ICON_ONLY' },
+                    { label: 'アイコンとテキスト', value: 'ICON_AND_TEXT' },
+                    { label: 'テキストのみ', value: 'TEXT_ONLY' },
+                  ]"
+                  @update:modelValue="changeToolbarButtonDisplay"
+                />
               </div>
 
               <!-- Advanced Card -->
@@ -603,6 +614,11 @@ const [enablePreset, _changeEnablePreset] = useRootMiscSetting(
   "enablePreset",
 );
 
+const [toolbarButtonDisplay, changeToolbarButtonDisplay] = useRootMiscSetting(
+  store,
+  "toolbarButtonDisplay",
+);
+
 const [
   shouldApplyDefaultPresetOnVoiceChanged,
   changeShouldApplyDefaultPresetOnVoiceChanged,

src/components/Talk/ToolBar.vue

@@ -3,15 +3,37 @@
     <QToolbar>
       <template v-for="button in buttons" :key="button.text">
         <QSpace v-if="button.text === null" />
-        <QBtn
-          v-else
-          unelevated
-          color="toolbar-button"
-          textColor="toolbar-button-display"
-          class="text-no-wrap text-bold q-mr-sm"
-          :disable="button.disable.value"
-          @click="button.click"
-          >{{ button.text }}</QBtn
+        <template v-else>
+          <QBtn
+            v-if="toolbarButtonDisplay === 'ICON_ONLY'"
+            unelevated
+            :icon="buttonIcons[button.tag]"
+            color="toolbar-button"
+            textColor="toolbar-button-display"
+            class="text-no-wrap text-bold q-mr-sm"
+            padding="sm"
+            :disable="button.disable.value"
+            @click="button.click"
+          >
+            <QTooltip>
+              {{ button.text }}
+            </QTooltip>
+          </QBtn>
+          <QBtn
+            v-else
+            unelevated
+            :icon="
+              toolbarButtonDisplay === 'ICON_AND_TEXT'
+                ? buttonIcons[button.tag]
+                : undefined
+            "
+            color="toolbar-button"
+            textColor="toolbar-button-display"
+            class="text-no-wrap text-bold q-mr-sm"
+            :disable="button.disable.value"
+            @click="button.click"
+            >{{ button.text }}</QBtn
+          ></template
         >
       </template>
     </QToolbar>
@@ -33,6 +55,7 @@ import { handlePossiblyNotMorphableError } from "@/store/audioGenerate";
 
 type ButtonContent = {
   text: string;
+  tag: ToolbarButtonTagType;
   click(): void;
   disable: ComputedRef<boolean>;
 };
@@ -51,6 +74,7 @@ const activeAudioKey = computed(() => store.getters.ACTIVE_AUDIO_KEY);
 const nowPlayingContinuously = computed(
   () => store.state.nowPlayingContinuously,
 );
+const toolbarButtonDisplay = computed(() => store.state.toolbarButtonDisplay);
 
 const { registerHotkeyWithCleanup } = useHotkeyManager();
 registerHotkeyWithCleanup({
@@ -150,7 +174,7 @@ const importTextFile = () => {
 
 const usableButtons: Record<
   ToolbarButtonTagType,
-  Omit<ButtonContent, "text"> | null
+  Omit<ButtonContent, "text" | "tag"> | null
 > = {
   PLAY_CONTINUOUSLY: {
     click: playContinuously,
@@ -197,13 +221,28 @@ const buttons = computed(() =>
     if (buttonContent) {
       return {
         ...buttonContent,
+        tag,
         text: getToolbarButtonName(tag),
       };
     } else {
       return {
+        tag,
         text: null,
       };
     }
   }),
 );
+
+const buttonIcons: Record<ToolbarButtonTagType, string> = {
+  PLAY_CONTINUOUSLY: "playlist_play",
+  STOP: "stop",
+  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: "svguse:toolbarIcons.svg#importText",
+  SAVE_PROJECT: "save",
+  EMPTY: "",
+};
 </script>

src/store/setting.ts

@@ -72,6 +72,7 @@ export const settingStoreState: SettingStoreState = {
   },
   showSingCharacterPortrait: true,
   playheadPositionDisplayFormat: "MINUTES_SECONDS",
+  toolbarButtonDisplay: "TEXT_ONLY",
 };
 
 export const settingStore = createPartialStore<SettingStoreTypes>({
@@ -150,6 +151,7 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
         "showSingCharacterPortrait",
         "playheadPositionDisplayFormat",
         "openedEditor",
+        "toolbarButtonDisplay",
       ] as const;
 
       // rootMiscSettingKeysに値を足し忘れていたときに型エラーを出す検出用コード

src/type/preload.ts

@@ -569,6 +569,9 @@ export const rootMiscSettingSchema = z.object({
   playheadPositionDisplayFormat: z
     .enum(["MINUTES_SECONDS", "MEASURES_BEATS"])
     .default("MINUTES_SECONDS"), // 再生ヘッド位置の表示モード
+  toolbarButtonDisplay: z
+    .enum(["ICON_ONLY", "ICON_AND_TEXT", "TEXT_ONLY"])
+    .default("TEXT_ONLY"), // ツールバーボタンの表示モード
 });
 export type RootMiscSettingType = z.infer<typeof rootMiscSettingSchema>;