improve editor for KV

editor/src/kv/SearchFieldChips.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+
+interface Props {
+  fields: string[];
+  onChange: (fields: string[]) => void;
+}
+
+// Pill list of field names that the value-search uses. Each pill is removable;
+// the inline input adds a new field on Enter or comma. Persisting to
+// localStorage is the parent's responsibility.
+export function SearchFieldChips({ fields, onChange }: Props) {
+  const [input, setInput] = useState('');
+
+  const add = (raw: string) => {
+    const next = raw.trim().replace(/,+$/, '');
+    if (!next) return;
+    if (fields.includes(next)) return;
+    onChange([...fields, next]);
+    setInput('');
+  };
+
+  const remove = (f: string) => onChange(fields.filter((x) => x !== f));
+
+  return (
+    <div className="kv-chips">
+      <span className="kv-chips-label">search in:</span>
+      {fields.map((f) => (
+        <span key={f} className="kv-chip">
+          <code>{f}</code>
+          <button
+            className="kv-chip-x"
+            onClick={() => remove(f)}
+            title={`remove ${f}`}
+            aria-label={`remove ${f}`}
+          >×</button>
+        </span>
+      ))}
+      <input
+        className="kv-chip-input"
+        type="text"
+        value={input}
+        placeholder="+ field"
+        onChange={(e) => {
+          const v = e.target.value;
+          if (v.endsWith(',')) add(v);
+          else setInput(v);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') { e.preventDefault(); add(input); }
+          if (e.key === 'Backspace' && input === '' && fields.length > 0) {
+            remove(fields[fields.length - 1]);
+          }
+        }}
+      />
+    </div>
+  );
+}