feat(web): rename vocabularies + edit/delete terms in place (#30)

web/src/vocab/term-row.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent } from 'storybook/test'
+
+import { TermRow } from './term-row'
+
+const meta = {
+  component: TermRow,
+  tags: ['ai-generated'],
+  args: {
+    vocabularyId: 'v1',
+    lang: 'en',
+    term: { id: 't1', external_uri: null, labels: [{ lang: 'en', label: 'Wood' }] },
+  },
+} satisfies Meta<typeof TermRow>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Display: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText('Wood')).toBeVisible()
+  },
+}
+
+export const TogglesEdit: Story = {
+  play: async ({ canvas }) => {
+    await userEvent.click(canvas.getByRole('button', { name: 'Edit' }))
+    await expect(canvas.getByRole('button', { name: 'Save' })).toBeVisible()
+  },
+}
+
+export const CancelsEdit: Story = {
+  play: async ({ canvas }) => {
+    await userEvent.click(canvas.getByRole('button', { name: 'Edit' }))
+    await userEvent.click(canvas.getByRole('button', { name: 'Cancel' }))
+    await expect(canvas.getByText('Wood')).toBeVisible()
+  },
+}

web/src/vocab/term-row.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import type { components } from "../api/schema";
+import { useUpdateTerm, useDeleteTerm } 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 TermView = components["schemas"]["TermView"];
+type LabelInput = components["schemas"]["LabelInput"];
+
+export function TermRow({ vocabularyId, term, lang }: { vocabularyId: string; term: TermView; lang: string }) {
+  const { t } = useTranslation();
+
+  const updateTerm = useUpdateTerm();
+  const deleteTerm = useDeleteTerm();
+
+  const [editing, setEditing] = useState(false);
+  const [labels, setLabels] = useState<LabelInput[]>(term.labels as LabelInput[]);
+  const [uri, setUri] = useState(term.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={`term-uri-${term.id}`}>{t("labels.externalUri")}</Label>
+          <Input id={`term-uri-${term.id}`} value={uri} onChange={(e) => setUri(e.target.value)} />
+        </div>
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            size="sm"
+            disabled={updateTerm.isPending}
+            onClick={() =>
+              updateTerm.mutate(
+                { vocabularyId, termId: term.id, 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(term.labels, lang)}</span>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        onClick={() => {
+          setLabels(term.labels as LabelInput[]);
+          setUri(term.external_uri ?? "");
+          setEditing(true);
+        }}
+      >
+        {t("actions.edit")}
+      </Button>
+      <DeleteConfirmDialog
+        description={t("actions.confirmDeleteTerm")}
+        onConfirm={() => deleteTerm.mutateAsync({ vocabularyId, termId: term.id })}
+      />
+    </li>
+  );
+}

web/src/vocab/vocabulary-list.tsx

@@ -2,7 +2,8 @@ import { useState, type FormEvent } from "react";
 import { NavLink } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
-import { useVocabularies, useCreateVocabulary } from "../api/queries";
+import { useVocabularies, useCreateVocabulary, useRenameVocabulary, useDeleteVocabulary } from "../api/queries";
+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";
@@ -13,8 +14,12 @@ export function VocabularyList() {
   const { data, isLoading, isError } = useVocabularies();
 
   const create = useCreateVocabulary();
+  const renameVocabulary = useRenameVocabulary();
+  const deleteVocabulary = useDeleteVocabulary();
 
   const [key, setKey] = useState("");
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [draftKey, setDraftKey] = useState("");
 
   const onCreate = (event: FormEvent) => {
     event.preventDefault();
@@ -56,15 +61,59 @@ export function VocabularyList() {
           <li className="p-3 text-sm text-neutral-500">{t("vocab.empty")}</li>
         )}
         {data?.map((v) => (
-          <li key={v.id}>
+          <li key={v.id} className="flex items-center gap-1 border-b pr-2">
+            {editingId === v.id ? (
+              <form
+                className="flex flex-1 flex-wrap gap-1 p-1"
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  renameVocabulary.mutate(
+                    { id: v.id, key: draftKey.trim() },
+                    { onSuccess: () => setEditingId(null) },
+                  );
+                }}
+              >
+                <Input
+                  aria-label={t("vocab.key")}
+                  value={draftKey}
+                  onChange={(e) => setDraftKey(e.target.value)}
+                />
+                <Button type="submit" size="sm" disabled={renameVocabulary.isPending}>
+                  {t("actions.save")}
+                </Button>
+                <Button type="button" variant="ghost" size="sm" onClick={() => setEditingId(null)}>
+                  {t("form.cancel")}
+                </Button>
+                {renameVocabulary.isError && (
+                  <p role="alert" className="text-xs text-red-600">
+                    {t("form.rejected")}
+                  </p>
+                )}
+              </form>
+            ) : (
+              <>
                 <NavLink
                   to={`/vocabularies/${v.id}`}
                   className={({ isActive }) =>
-                `block border-b px-3 py-2 text-sm ${isActive ? "bg-indigo-50" : "hover:bg-neutral-50"}`
+                    `block flex-1 px-3 py-2 text-sm ${isActive ? "bg-indigo-50" : "hover:bg-neutral-50"}`
                   }
                 >
                   {v.key}
                 </NavLink>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => { setEditingId(v.id); setDraftKey(v.key); }}
+                >
+                  {t("actions.rename")}
+                </Button>
+                <DeleteConfirmDialog
+                  description={t("actions.confirmDeleteVocabulary")}
+                  onConfirm={() => deleteVocabulary.mutateAsync(v.id)}
+                />
+              </>
+            )}
           </li>
         ))}
       </ul>

web/src/vocab/vocabulary-terms.tsx

@@ -5,10 +5,10 @@ import { useTranslation } from "react-i18next";
 import type { components } from "../api/schema";
 import { useTerms, useAddTerm } from "../api/queries";
 import { LabelEditor } from "../components/label-editor";
+import { TermRow } from "./term-row";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { labelText } from "../lib/labels";
 
 type LabelInput = components["schemas"]["LabelInput"];
 
@@ -63,9 +63,7 @@ export function VocabularyTerms() {
           <li className="text-sm text-neutral-500">{t("vocab.noTerms")}</li>
         )}
         {terms?.map((term) => (
-          <li key={term.id} className="border-b py-1 text-sm">
+          <TermRow key={term.id} vocabularyId={id} term={term} lang={lang} />
-            {labelText(term.labels, lang)}
-          </li>
         ))}
       </ul>
       <form onSubmit={onAdd} className="space-y-2 border-t pt-3">