feat(web): edit/delete authorities in place (#30)

web/src/authorities/authorities-page.tsx

@@ -6,7 +6,7 @@ import type { components } from "../api/schema";
 import { useAuthorities, useCreateAuthority } from "../api/queries";
 import { LabelEditor } from "../components/label-editor";
 import { Button } from "@/components/ui/button";
-import { labelText } from "../lib/labels";
+import { AuthorityRow } from "./authority-row";
 
 type LabelInput = components["schemas"]["LabelInput"];
 
@@ -72,9 +72,7 @@ export function AuthoritiesPage() {
           <li className="text-sm text-neutral-500">{t("authorities.empty")}</li>
         )}
         {authorities?.map((a) => (
-          <li key={a.id} className="border-b py-1 text-sm">
+          <AuthorityRow key={a.id} authority={a} kind={currentKind} lang={lang} />
-            {labelText(a.labels, lang)}
-          </li>
         ))}
       </ul>
 

web/src/authorities/authority-row.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent } from 'storybook/test'
+
+import { AuthorityRow } from './authority-row'
+
+const meta = {
+  component: AuthorityRow,
+  tags: ['ai-generated'],
+  args: {
+    kind: 'person',
+    lang: 'en',
+    authority: { id: 'a1', kind: 'person', external_uri: null, labels: [{ lang: 'en', label: 'Astrid Lindgren' }] },
+  },
+} satisfies Meta<typeof AuthorityRow>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Display: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText('Astrid Lindgren')).toBeVisible()
+  },
+}
+
+export const TogglesEdit: Story = {
+  play: async ({ canvas }) => {
+    await userEvent.click(canvas.getByRole('button', { name: 'Edit' }))
+    await expect(canvas.getByRole('button', { name: 'Save' })).toBeVisible()
+  },
+}

web/src/authorities/authority-row.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import type { components } from "../api/schema";
+import { useUpdateAuthority, useDeleteAuthority } from "../api/queries";
+import { LabelEditor } from "../components/label-editor";
+import { DeleteConfirmDialog } from "../components/delete-confirm-dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { labelText } from "../lib/labels";
+
+type AuthorityView = components["schemas"]["AuthorityView"];
+type LabelInput = components["schemas"]["LabelInput"];
+
+export function AuthorityRow({ authority, kind, lang }: { authority: AuthorityView; kind: string; lang: string }) {
+  const { t } = useTranslation();
+
+  const updateAuthority = useUpdateAuthority();
+  const deleteAuthority = useDeleteAuthority();
+
+  const [editing, setEditing] = useState(false);
+  const [labels, setLabels] = useState<LabelInput[]>(authority.labels as LabelInput[]);
+  const [uri, setUri] = useState(authority.external_uri ?? "");
+
+  if (editing) {
+    return (
+      <li className="space-y-2 border-b py-2">
+        <LabelEditor value={labels} onChange={setLabels} />
+        <div className="space-y-1">
+          <Label htmlFor={`auth-uri-${authority.id}`}>{t("labels.externalUri")}</Label>
+          <Input id={`auth-uri-${authority.id}`} value={uri} onChange={(e) => setUri(e.target.value)} />
+        </div>
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            size="sm"
+            disabled={updateAuthority.isPending}
+            onClick={() =>
+              updateAuthority.mutate(
+                { id: authority.id, kind, external_uri: uri.trim() || null, labels },
+                { onSuccess: () => setEditing(false) },
+              )
+            }
+          >
+            {t("actions.save")}
+          </Button>
+          <Button type="button" variant="ghost" size="sm" onClick={() => setEditing(false)}>
+            {t("form.cancel")}
+          </Button>
+        </div>
+      </li>
+    );
+  }
+
+  return (
+    <li className="flex items-center gap-2 border-b py-1 text-sm">
+      <span className="flex-1">{labelText(authority.labels, lang)}</span>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        onClick={() => {
+          setLabels(authority.labels as LabelInput[]);
+          setUri(authority.external_uri ?? "");
+          setEditing(true);
+        }}
+      >
+        {t("actions.edit")}
+      </Button>
+      <DeleteConfirmDialog
+        description={t("actions.confirmDeleteAuthority")}
+        onConfirm={() => deleteAuthority.mutateAsync({ id: authority.id, kind })}
+      />
+    </li>
+  );
+}