(fix) ファイル名表示

packages/frontend/src/pages/settings/sounds.sound.vue

@@ -7,11 +7,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div class="_gaps_m">
 	<MkSelect v-model="type">
 		<template #label>{{ i18n.ts.sound }}</template>
-		<option v-for="x in soundsTypes" :key="x ?? 'null'" :value="x">{{ getFileName(x) }}</option>
+		<option v-for="x in soundsTypes" :key="x ?? 'null'" :value="x">{{ getSoundTypeName(x) }}</option>
 	</MkSelect>
 	<div v-if="type === 'driveFile'" :class="$style.fileSelectorRoot">
 		<MkButton :class="$style.fileSelectorButton" inline rounded primary @click="selectSound">{{ i18n.ts.selectFile }}</MkButton>
-		<div :class="['_nowrap', !fileUrl && $style.fileNotSelected]">{{ fileName === '' ? i18n.ts._soundSettings.driveFileWarn : fileName }}</div>
+		<div :class="['_nowrap', !fileUrl && $style.fileNotSelected]">{{ friendlyFileName }}</div>
 	</div>
 	<MkRange v-model="volume" :min="0" :max="1" :step="0.05" :textConverter="(v) => `${Math.floor(v * 100)}%`">
 		<template #label>{{ i18n.ts.volume }}</template>
@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import type { SoundType } from '@/scripts/sound.js';
 import MkSelect from '@/components/MkSelect.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -59,7 +59,7 @@ if (type.value === 'driveFile' && fileId.value) {
 	fileName.value = apiRes.name;
 }
 
-function getFileName(f: SoundType): string {
+function getSoundTypeName(f: SoundType): string {
 	switch (f) {
 		case null:
 			return i18n.ts.none;
@@ -70,6 +70,17 @@ function getFileName(f: SoundType): string {
 	}
 }
 
+const friendlyFileName = computed<string>(() => {
+	if (fileName.value) {
+		return fileName.value;
+	}
+	if (fileUrl.value) {
+		return fileUrl.value;
+	}
+
+	return i18n.ts._soundSettings.driveFileWarn;
+});
+
 function selectSound(ev) {
 	selectFile(ev.currentTarget ?? ev.target, i18n.ts._soundSettings.driveFile).then(async (file) => {
 		if (!file.type.startsWith('audio')) {

packages/frontend/src/pages/settings/sounds.vue

@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div class="_gaps_s">
 			<MkFolder v-for="type in soundsKeys" :key="type">
 				<template #label>{{ i18n.t('_sfx.' + type) }}</template>
-				<template #suffix>{{ getFileName(sounds[type].type) }}</template>
+				<template #suffix>{{ getSoundTypeName(sounds[type].type) }}</template>
 
 				<XSound :type="sounds[type].type" :volume="sounds[type].volume" :fileId="sounds[type].fileId" :fileUrl="sounds[type].fileUrl" @update="(res) => updated(type, res)"/>
 			</MkFolder>
@@ -51,7 +51,7 @@ const sounds = ref<Record<OperationType, Ref<SoundStore>>>({
 	reaction: defaultStore.reactiveState.sound_reaction,
 });
 
-function getFileName(f: SoundType): string {
+function getSoundTypeName(f: SoundType): string {
 	switch (f) {
 		case null:
 			return i18n.ts.none;