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

web/src/search/search-panel.tsx

@@ -4,9 +4,8 @@ import { useTranslation } from "react-i18next";
 
 import { useSearch, HttpError } from "../api/queries";
 import { useDebouncedValue } from "../lib/use-debounced-value";
-import { focusRing } from "../lib/focus-ring";
+import { segmentClass } from "../lib/class-recipes";
 import { SearchResultRow } from "./search-result-row";
-import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ListSkeleton } from "@/components/ui/skeletons";
@@ -73,7 +72,7 @@ export function SearchPanel() {
                 type="button"
                 aria-pressed={active}
                 onClick={() => setVisibility(value)}
-                className={cn("rounded-md px-2 py-0.5", focusRing, active ? "bg-primary text-primary-foreground" : "border")}
+                className={segmentClass(active, "px-2 py-0.5")}
               >
                 {value === "all" ? t("search.all") : t(`visibility.${value}`)}
               </button>

web/src/search/search-result-row.tsx

@@ -2,6 +2,7 @@ import { NavLink } from "react-router-dom";
 
 import type { components } from "../api/schema";
 import { VisibilityBadge } from "../objects/visibility-badge";
+import { rowStateClass } from "../lib/class-recipes";
 import { Highlight } from "./highlight";
 
 type SearchHitView = components["schemas"]["SearchHitView"];
@@ -12,7 +13,7 @@ export function SearchResultRow({ hit }: { hit: SearchHitView }) {
       <NavLink
         to={`/search/${hit.id}`}
         className={({ isActive }) =>
-          `block border-b px-3 py-2 ${isActive ? "bg-primary/10" : "hover:bg-muted"}`
+          `block border-b px-3 py-2 ${rowStateClass(isActive)}`
         }
       >
         <div className="text-sm font-semibold">{hit.object_name}</div>