feat(web): edit/delete field definitions on /fields (in-place edit pane) (#36)

web/src/fields/field-list.tsx

@@ -1,15 +1,23 @@
 import { useTranslation } from "react-i18next";
 
 import type { components } from "../api/schema";
-import { useFieldDefinitions } from "../api/queries";
+import { useFieldDefinitions, useDeleteFieldDefinition } from "../api/queries";
 import { labelText } from "../lib/labels";
+import { DeleteConfirmDialog } from "../components/delete-confirm-dialog";
 import { Skeleton } from "@/components/ui/skeleton";
 
 type FieldDefinitionView = components["schemas"]["FieldDefinitionView"];
 
-export function FieldList() {
+export function FieldList({
+  selectedKey,
+  onSelect,
+}: {
+  selectedKey: string | null;
+  onSelect: (def: FieldDefinitionView) => void;
+}) {
   const { t, i18n } = useTranslation();
   const { data, isLoading, isError } = useFieldDefinitions();
+  const deleteField = useDeleteFieldDefinition();
   const lang = i18n.language.startsWith("sv") ? "sv" : "en";
 
   if (isLoading) {
@@ -50,21 +58,37 @@ export function FieldList() {
           </div>
           <ul>
             {defs.map((def) => (
-              <li key={def.key} className="flex items-center gap-2 border-b px-3 py-2 text-sm">
-                <span className="font-medium">{labelText(def.labels, lang)}</span>
-                <span className="text-xs text-neutral-400">{def.key}</span>
-                <span className="rounded bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-600">
-                  {t(`fields.types.${def.data_type}`)}
-                </span>
-                {def.required && (
-                  <span
-                    className="text-xs text-red-600"
-                    title={t("fields.required")}
-                    aria-label={t("fields.required")}
-                  >
-                    *
+              <li
+                key={def.key}
+                className={`flex items-center gap-2 border-b px-3 py-2 text-sm ${
+                  def.key === selectedKey ? "bg-indigo-50" : ""
+                }`}
+              >
+                <button
+                  type="button"
+                  className="flex flex-1 items-center gap-2 text-left"
+                  aria-pressed={def.key === selectedKey}
+                  onClick={() => onSelect(def)}
+                >
+                  <span className="font-medium">{labelText(def.labels, lang)}</span>
+                  <span className="text-xs text-neutral-400">{def.key}</span>
+                  <span className="rounded bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-600">
+                    {t(`fields.types.${def.data_type}`)}
                   </span>
-                )}
+                  {def.required && (
+                    <span
+                      className="text-xs text-red-600"
+                      title={t("fields.required")}
+                      aria-label={t("fields.required")}
+                    >
+                      *
+                    </span>
+                  )}
+                </button>
+                <DeleteConfirmDialog
+                  description={t("actions.confirmDeleteField")}
+                  onConfirm={() => deleteField.mutateAsync(def.key)}
+                />
               </li>
             ))}
           </ul>