refactor(web): adopt useLang + segmentClass/rowStateClass across sites (#66)

web/src/vocab/vocabulary-list.tsx

@@ -3,6 +3,8 @@ import { NavLink } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 import { useVocabularies, useCreateVocabulary, useRenameVocabulary, useDeleteVocabulary } from "../api/queries";
+import { useLang } from "../lib/use-lang";
+import { rowStateClass } from "../lib/class-recipes";
 import { byKey } from "../lib/sort";
 import { DeleteConfirmDialog } from "../components/delete-confirm-dialog";
 import { MutationError } from "../components/mutation-error";
@@ -12,9 +14,9 @@ import { Label } from "@/components/ui/label";
 import { ListSkeleton } from "@/components/ui/skeletons";
 
 export function VocabularyList() {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
 
-  const lang = i18n.language.startsWith("sv") ? "sv" : "en";
+  const lang = useLang();
 
   const { data, isLoading, isError } = useVocabularies();
 
@@ -110,7 +112,7 @@ export function VocabularyList() {
                 <NavLink
                   to={`/vocabularies/${v.id}`}
                   className={({ isActive }) =>
-                    `block flex-1 px-3 py-2 text-sm ${isActive ? "bg-primary/10" : "hover:bg-muted"}`
+                    `block flex-1 px-3 py-2 text-sm ${rowStateClass(isActive)}`
                   }
                 >
                   {v.key}

web/src/vocab/vocabulary-terms.tsx

@@ -2,15 +2,16 @@ import { useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 import { useTerms, useAddTerm, useVocabularies } from "../api/queries";
+import { useLang } from "../lib/use-lang";
 import { useBreadcrumb } from "../shell/use-breadcrumb";
 import { FilteredRecordList } from "../components/filtered-record-list";
 import { LabelledRecordCreateForm } from "../components/labelled-record-create-form";
 import { TermRow } from "./term-row";
 
 export function VocabularyTerms() {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
   const { id } = useParams();
-  const lang = i18n.language.startsWith("sv") ? "sv" : "en";
+  const lang = useLang();
 
   const { data: terms, isLoading, isError } = useTerms(id);
   const addTerm = useAddTerm();