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

web/src/authorities/authorities-page.tsx

@@ -6,17 +6,17 @@ import { FilteredRecordList } from "../components/filtered-record-list";
 import { LabelledRecordCreateForm } from "../components/labelled-record-create-form";
 import { PageTitle } from "@/components/ui/page-title";
 import { AuthorityRow } from "./authority-row";
-import { focusRing } from "../lib/focus-ring";
+import { useLang } from "../lib/use-lang";
+import { segmentClass } from "../lib/class-recipes";
 import { useDocumentTitle } from "../lib/use-document-title";
 import { useBreadcrumb } from "../shell/use-breadcrumb";
-import { cn } from "@/lib/utils";
 
 const KINDS = ["person", "organisation", "place"] as const;
 
 export function AuthoritiesPage() {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
   const { kind } = useParams();
-  const lang = i18n.language.startsWith("sv") ? "sv" : "en";
+  const lang = useLang();
 
   const isValidKind = (KINDS as readonly string[]).includes(kind ?? "");
   const currentKind = isValidKind ? (kind as string) : "person";
@@ -37,9 +37,7 @@ export function AuthoritiesPage() {
           <NavLink
             key={k}
             to={`/authorities/${k}`}
-            className={({ isActive }) =>
-              cn("rounded-md px-3 py-1 text-sm", focusRing, isActive ? "bg-primary text-primary-foreground" : "border")
-            }
+            className={({ isActive }) => segmentClass(isActive, "px-3 py-1 text-sm")}
           >
             {t(`authorities.${k}`)}
           </NavLink>