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/vocabulary-list.tsx

@@ -3,6 +3,7 @@ import { NavLink } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 import { useVocabularies, useCreateVocabulary, useRenameVocabulary, useDeleteVocabulary } from "../api/queries";
+import { byKey } from "../lib/sort";
 import { DeleteConfirmDialog } from "../components/delete-confirm-dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -10,7 +11,9 @@ import { Label } from "@/components/ui/label";
 import { ListSkeleton } from "@/components/ui/skeletons";
 
 export function VocabularyList() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+
+  const lang = i18n.language.startsWith("sv") ? "sv" : "en";
 
   const { data, isLoading, isError } = useVocabularies();
 
@@ -19,6 +22,7 @@ export function VocabularyList() {
   const deleteVocabulary = useDeleteVocabulary();
 
   const [key, setKey] = useState("");
+  const [filter, setFilter] = useState("");
   const [editingId, setEditingId] = useState<string | null>(null);
   const [draftKey, setDraftKey] = useState("");
 
@@ -30,6 +34,11 @@ export function VocabularyList() {
     create.mutate({ key: key.trim() }, { onSuccess: () => setKey("") });
   };
 
+  const q = filter.trim().toLowerCase();
+  const rows = [...(data ?? [])]
+    .filter((v) => !q || v.key.toLowerCase().includes(q))
+    .sort(byKey(lang));
+
   return (
     <div className="flex h-full flex-col">
       <form onSubmit={onCreate} className="space-y-1 border-b p-3">
@@ -51,6 +60,14 @@ export function VocabularyList() {
           </p>
         )}
       </form>
+      <div className="border-b p-2">
+        <Input
+          aria-label={t("common.filter")}
+          placeholder={t("common.filter")}
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+        />
+      </div>
       {isLoading ? (
         <ListSkeleton className="flex-1 overflow-auto" />
       ) : (
@@ -61,13 +78,17 @@ export function VocabularyList() {
           {data?.length === 0 && (
             <li className="p-3 text-sm text-muted-foreground">{t("vocab.empty")}</li>
           )}
-          {data?.map((v) => (
+          {data && data.length > 0 && rows.length === 0 && (
+            <li className="p-3 text-sm text-muted-foreground">{t("common.noMatches")}</li>
+          )}
+          {rows.map((v) => (
           <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();
+                  if (!draftKey.trim()) return;
                   renameVocabulary.mutate(
                     { id: v.id, key: draftKey.trim() },
                     { onSuccess: () => setEditingId(null) },