fix(desktop): カスタム通知音の削除確認をカスタムダイアログ化

apps/desktop/src/renderer/routes/_authenticated/settings/ringtones/components/RingtonesSettings/RingtonesSettings.tsx

@@ -33,6 +33,7 @@ import {
 	SETTING_ITEM_ID,
 	type SettingItemId,
 } from "../../../utils/settings-search";
+import { DeleteRingtoneDialog } from "./components/DeleteRingtoneDialog";
 import { RenameRingtoneDialog } from "./components/RenameRingtoneDialog";
 import { VolumeDropdown } from "./components/VolumeDropdown";
 import { YouTubeImportDialog } from "./components/YouTubeImportDialog";
@@ -273,15 +274,19 @@ export function RingtonesSettings({ visibleItems }: RingtonesSettingsProps) {
 		},
 	});
 
+	const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+	const [deleteError, setDeleteError] = useState<string | null>(null);
 	const deleteCustomRingtone = electronTrpc.ringtone.deleteCustom.useMutation({
 		onSuccess: async () => {
 			if (selectedRingtoneId === CUSTOM_RINGTONE_ID) {
 				setRingtone(AVAILABLE_RINGTONES[0]?.id ?? "");
 			}
+			setDeleteError(null);
+			setDeleteDialogOpen(false);
 			await utils.ringtone.getCustom.invalidate();
 		},
 		onError: (error) => {
-			console.error("Failed to delete custom ringtone:", error);
+			setDeleteError(error.message);
 		},
 	});
 
@@ -299,11 +304,14 @@ export function RingtonesSettings({ visibleItems }: RingtonesSettingsProps) {
 	}, []);
 
 	const handleDeleteCustom = useCallback(() => {
-		const confirmed = window.confirm(
-			"Delete the custom notification sound? This cannot be undone.",
-		);
-		if (!confirmed) return;
-		deleteCustomRingtone.mutate();
+		setDeleteError(null);
+		setDeleteDialogOpen(true);
+	}, []);
+
+	const handleConfirmDelete = useCallback(async () => {
+		await deleteCustomRingtone.mutateAsync().catch(() => {
+			// Error surfaced via deleteError state.
+		});
 	}, [deleteCustomRingtone]);
 
 	// Clean up timer and stop any playing sound on unmount
@@ -489,6 +497,18 @@ export function RingtonesSettings({ visibleItems }: RingtonesSettingsProps) {
 				errorMessage={youtubeError}
 			/>
 
+			<DeleteRingtoneDialog
+				open={deleteDialogOpen}
+				onOpenChange={(open) => {
+					setDeleteDialogOpen(open);
+					if (!open) setDeleteError(null);
+				}}
+				ringtoneName={customRingtone?.name ?? ""}
+				onConfirm={handleConfirmDelete}
+				isSubmitting={deleteCustomRingtone.isPending}
+				errorMessage={deleteError}
+			/>
+
 			<RenameRingtoneDialog
 				open={renameDialogOpen}
 				onOpenChange={(open) => {

apps/desktop/src/renderer/routes/_authenticated/settings/ringtones/components/RingtonesSettings/components/DeleteRingtoneDialog/DeleteRingtoneDialog.tsx

@@ -0,0 +1,77 @@
+import { Button } from "@superset/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@superset/ui/dialog";
+import { LuLoaderCircle } from "react-icons/lu";
+
+interface DeleteRingtoneDialogProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	ringtoneName: string;
+	onConfirm: () => Promise<void> | void;
+	isSubmitting: boolean;
+	errorMessage?: string | null;
+}
+
+export function DeleteRingtoneDialog({
+	open,
+	onOpenChange,
+	ringtoneName,
+	onConfirm,
+	isSubmitting,
+	errorMessage,
+}: DeleteRingtoneDialogProps) {
+	return (
+		<Dialog
+			open={open}
+			onOpenChange={(next) => {
+				if (!next && isSubmitting) return;
+				onOpenChange(next);
+			}}
+		>
+			<DialogContent className="sm:max-w-sm">
+				<DialogHeader>
+					<DialogTitle>Delete custom audio</DialogTitle>
+					<DialogDescription>
+						{ringtoneName
+							? `Delete “${ringtoneName}”? This cannot be undone.`
+							: "Delete the custom notification sound? This cannot be undone."}
+					</DialogDescription>
+				</DialogHeader>
+
+				{errorMessage && (
+					<p className="text-sm text-destructive break-words">{errorMessage}</p>
+				)}
+
+				<DialogFooter>
+					<Button
+						type="button"
+						variant="ghost"
+						onClick={() => onOpenChange(false)}
+						disabled={isSubmitting}
+					>
+						Cancel
+					</Button>
+					<Button
+						type="button"
+						variant="destructive"
+						onClick={() => {
+							void onConfirm();
+						}}
+						disabled={isSubmitting}
+					>
+						{isSubmitting && (
+							<LuLoaderCircle className="mr-2 h-4 w-4 animate-spin" />
+						)}
+						Delete
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

apps/desktop/src/renderer/routes/_authenticated/settings/ringtones/components/RingtonesSettings/components/DeleteRingtoneDialog/index.ts

@@ -0,0 +1 @@
+export { DeleteRingtoneDialog } from "./DeleteRingtoneDialog";