feat(web): vocab list/terms sort+filter, external_uri in rows, rename guard, url input (#50)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/vocab/term-row.tsx

@@ -5,6 +5,7 @@ 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 { ExternalUriLink } from "../components/external-uri-link";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -29,7 +30,7 @@ export function TermRow({ vocabularyId, term, lang }: { vocabularyId: string; te
         <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)} />
+          <Input id={`term-uri-${term.id}`} type="url" placeholder={t("labels.uriPlaceholder")} value={uri} onChange={(e) => setUri(e.target.value)} />
         </div>
         <div className="flex gap-2">
           <Button
@@ -55,7 +56,10 @@ export function TermRow({ vocabularyId, term, lang }: { vocabularyId: string; te
 
   return (
     <li className="flex items-center gap-2 border-b py-1 text-sm">
-      <span className="flex-1">{labelText(term.labels, lang)}</span>
+      <div className="flex-1">
+        <div>{labelText(term.labels, lang)}</div>
+        {term.external_uri && <ExternalUriLink uri={term.external_uri} />}
+      </div>
       <Button
         type="button"
         variant="ghost"