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

web/src/fields/field-list.tsx

@@ -3,6 +3,8 @@ import { useTranslation } from "react-i18next";
 
 import type { components } from "../api/schema";
 import { useFieldDefinitions, useDeleteFieldDefinition } from "../api/queries";
+import { useLang } from "../lib/use-lang";
+import { rowStateClass } from "../lib/class-recipes";
 import { labelText } from "../lib/labels";
 import { byLabel, compareStrings } from "../lib/sort";
 import { focusRing } from "../lib/focus-ring";
@@ -21,10 +23,10 @@ export function FieldList({
   selectedKey: string | null;
   onSelect: (def: FieldDefinitionView) => void;
 }) {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
   const { data, isLoading, isError } = useFieldDefinitions();
   const deleteField = useDeleteFieldDefinition();
-  const lang = i18n.language.startsWith("sv") ? "sv" : "en";
+  const lang = useLang();
   const [filter, setFilter] = useState("");
 
   if (isLoading) return <ListSkeleton rows={6} />;
@@ -82,9 +84,9 @@ export function FieldList({
                 {[...defs].sort(byLabel(lang)).map((def) => (
                   <li
                     key={def.key}
-                    className={`flex items-center gap-2 border-b px-3 py-2 text-sm ${
-                      def.key === selectedKey ? "bg-primary/10" : ""
-                    }`}
+                    className={`flex items-center gap-2 border-b px-3 py-2 text-sm ${rowStateClass(
+                      def.key === selectedKey,
+                    )}`}
                   >
                     <button
                       type="button"