refactor: batch 3

src/components/KeyInput.tsx

@@ -1,6 +1,6 @@
 import { PiFileAudio } from 'react-icons/pi';
 import { MdDelete, MdVpnKey } from 'react-icons/md';
-import React from 'react';
+import type { ReactNode } from 'react';
 
 export interface KeyInputProps {
   sequence: number;
@@ -12,24 +12,34 @@ export interface KeyInputProps {
   onSetValue: (value: string) => void;
   onDelete: () => void;
 
-  nameLabel?: React.ReactNode;
-  valueLabel?: React.ReactNode;
+  quality?: string;
+  onSetQuality?: (quality: string) => void;
+
+  nameLabel?: ReactNode;
+  valueLabel?: ReactNode;
+  qualityLabel?: ReactNode;
+
   namePlaceholder?: string;
   valuePlaceholder?: string;
+  qualityPlaceholder?: string;
 }
 
 export function KeyInput(props: KeyInputProps) {
   const {
     nameLabel,
     valueLabel,
+    qualityLabel,
     namePlaceholder,
+    qualityPlaceholder,
     valuePlaceholder,
     sequence,
     name,
+    quality,
     value,
     onSetName,
     onSetValue,
     onDelete,
+    onSetQuality,
     isValidKey,
   } = props;
 
@@ -40,22 +50,39 @@ export function KeyInput(props: KeyInputProps) {
       </div>
 
       <div className="join join-vertical flex-1">
-        <label className="input w-full rounded-tl-md rounded-tr-md">
-          <span className="cucursor-default inline-flex items-center gap-1 select-none">
-            {nameLabel || (
-              <>
-                文件 <PiFileAudio />
-              </>
-            )}
-          </span>
-          <input
-            type="text"
-            className="font-mono"
-            placeholder={namePlaceholder}
-            value={name}
-            onChange={(e) => onSetName(e.target.value)}
-          />
-        </label>
+        <div className="flex">
+          <label className="input w-full rounded-tl-md last:rounded-tr-md">
+            <span className="cucursor-default inline-flex items-center gap-1 select-none">
+              {nameLabel || (
+                <>
+                  文件 <PiFileAudio />
+                </>
+              )}
+            </span>
+            <input
+              type="text"
+              className="font-mono"
+              placeholder={namePlaceholder}
+              value={name}
+              onChange={(e) => onSetName(e.target.value)}
+              data-name="key-input--name"
+            />
+          </label>
+          {onSetQuality && (
+            <label className="input min-w-0 max-w-[10rem] ml-[-1px] rounded-tr-md">
+              <span className="cucursor-default inline-flex items-center gap-1 select-none">
+                {qualityLabel || '音质'}
+              </span>
+              <input
+                type="text"
+                className="font-mono"
+                placeholder={qualityPlaceholder}
+                value={quality}
+                onChange={(e) => onSetQuality(e.target.value)}
+              />
+            </label>
+          )}
+        </div>
         <label className="input w-full rounded-bl-md rounded-br-md mt-[-1px]">
           <span className="cursor-default inline-flex items-center gap-1 select-none">
             {valueLabel || (