From 74cde67a54ccee38ad636470a71a80df3ec31947 Mon Sep 17 00:00:00 2001
From: Anders Olsson <anders.e.olsson@gmail.com>
Date: Mon, 8 Jun 2026 23:49:35 +0200
Subject: [PATCH] =?UTF-8?q?refactor(web):=20kit=20consistency=20=E2=80=94?=
 =?UTF-8?q?=20focusRing,=20PageTitle,=20Badge,=20size-4,=20icon=20buttons?=
 =?UTF-8?q?=20(#66)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web/src/auth/login-page.tsx              | 3 ++-
 web/src/fields/field-list.tsx            | 4 ++--
 web/src/objects/object-detail-drawer.tsx | 3 ++-
 web/src/objects/objects-page.tsx         | 9 +++++----
 web/src/shell/header-search.tsx          | 2 +-
 web/src/shell/sidebar.tsx                | 6 ++++--
 web/src/shell/theme-switch.tsx           | 2 +-
 web/src/shell/user-menu.tsx              | 2 +-
 8 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/web/src/auth/login-page.tsx b/web/src/auth/login-page.tsx
index 1eedfeb..f658cb6 100644
--- a/web/src/auth/login-page.tsx
+++ b/web/src/auth/login-page.tsx
@@ -7,6 +7,7 @@ import { useConfig } from "../config/config-context";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { PageTitle } from "@/components/ui/page-title";
 
 /** Accept only a single-leading-slash local path; reject protocol-relative
  *  ("//host") and absolute URLs to avoid an open redirect. */
@@ -46,7 +47,7 @@ export function LoginPage() {
   return (
     <div className="flex min-h-screen items-center justify-center p-4">
       <form onSubmit={onSubmit} className="w-full max-w-sm space-y-4">
-        <h1 className="text-2xl font-semibold">{app_name}</h1>
+        <PageTitle>{app_name}</PageTitle>
         {sessionExpired && (
           <p className="text-sm text-muted-foreground">{t("auth.sessionExpired")}</p>
         )}
diff --git a/web/src/fields/field-list.tsx b/web/src/fields/field-list.tsx
index 9888734..c97e239 100644
--- a/web/src/fields/field-list.tsx
+++ b/web/src/fields/field-list.tsx
@@ -96,9 +96,9 @@ export function FieldList({
                     >
                       <span className="font-medium">{labelText(def.labels, lang)}</span>
                       <span className="text-xs text-muted-foreground">{def.key}</span>
-                      <span className="rounded-md bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
+                      <Badge variant="secondary">
                         {t(`fields.types.${def.data_type}`)}
-                      </span>
+                      </Badge>
                       {def.required && (
                         <span
                           className="text-xs text-destructive"
diff --git a/web/src/objects/object-detail-drawer.tsx b/web/src/objects/object-detail-drawer.tsx
index d9bd52e..84cc341 100644
--- a/web/src/objects/object-detail-drawer.tsx
+++ b/web/src/objects/object-detail-drawer.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { X } from "lucide-react";
 
 import { Drawer, DrawerClose, DrawerContent } from "@/components/ui/drawer";
+import { Button } from "@/components/ui/button";
 
 /**
  * Narrow-viewport object detail: the nested <Outlet/> inside a Base UI Drawer that
@@ -30,7 +31,7 @@ export function ObjectDetailDrawer({
         <div className="flex justify-end border-b p-2">
           <DrawerClose
             aria-label={t("actions.closeDetail")}
-            className="rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
+            render={<Button variant="ghost" size="icon-sm" />}
           >
             <X className="size-4" aria-hidden="true" />
           </DrawerClose>
diff --git a/web/src/objects/objects-page.tsx b/web/src/objects/objects-page.tsx
index 5894ec6..ad823e6 100644
--- a/web/src/objects/objects-page.tsx
+++ b/web/src/objects/objects-page.tsx
@@ -7,6 +7,7 @@ import { ObjectsTable } from "./objects-table";
 import { useMediaQuery } from "../lib/use-media-query";
 import { useDocumentTitle } from "../lib/use-document-title";
 import { useBreadcrumb } from "../shell/use-breadcrumb";
+import { Button } from "@/components/ui/button";
 import { PageTitle } from "@/components/ui/page-title";
 
 const ObjectDetailDrawer = lazy(() =>
@@ -47,14 +48,14 @@ export function ObjectsPage() {
         {open && (
           <div className="flex h-full flex-col overflow-hidden border-l">
             <div className="flex justify-end border-b p-2">
-              <button
-                type="button"
+              <Button
+                variant="ghost"
+                size="icon-sm"
                 onClick={closeDetail}
                 aria-label={t("actions.closeDetail")}
-                className="rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
               >
                 <X className="size-4" aria-hidden="true" />
-              </button>
+              </Button>
             </div>
             <div className="flex-1 overflow-auto">
               <Outlet />
diff --git a/web/src/shell/header-search.tsx b/web/src/shell/header-search.tsx
index c0b50ca..afdf27d 100644
--- a/web/src/shell/header-search.tsx
+++ b/web/src/shell/header-search.tsx
@@ -20,7 +20,7 @@ export function HeaderSearch() {
     <form onSubmit={onSubmit} className="hidden sm:block">
       <div className="relative">
         <Search
-          className="pointer-events-none absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
+          className="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 text-muted-foreground"
           aria-hidden
         />
         <Input
diff --git a/web/src/shell/sidebar.tsx b/web/src/shell/sidebar.tsx
index e354241..31fd1bf 100644
--- a/web/src/shell/sidebar.tsx
+++ b/web/src/shell/sidebar.tsx
@@ -13,6 +13,7 @@ import {
 import type { LucideIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
+import { focusRing } from "../lib/focus-ring";
 import { Tooltip } from "@/components/ui/tooltip";
 import { useMediaQuery } from "@/lib/use-media-query";
 import { useConfig } from "../config/config-context";
@@ -43,7 +44,7 @@ function navLinkClass(collapsed: boolean) {
   return ({ isActive }: { isActive: boolean }) =>
     cn(
       "flex items-center gap-2 rounded-md px-2 py-1 outline-none",
-      "focus-visible:ring-3 focus-visible:ring-ring/50",
+      focusRing,
       collapsed && "justify-center",
       isActive && "bg-accent font-medium",
     );
@@ -85,7 +86,8 @@ export function Sidebar() {
           title={t(collapsed ? "nav.expandSidebar" : "nav.collapseSidebar")}
           className={cn(
             "flex items-center justify-center rounded-md p-1 outline-none",
-            "hover:bg-accent focus-visible:ring-3 focus-visible:ring-ring/50",
+            "hover:bg-accent",
+            focusRing,
             "disabled:pointer-events-none disabled:opacity-50",
           )}
         >
diff --git a/web/src/shell/theme-switch.tsx b/web/src/shell/theme-switch.tsx
index 266751b..50bded4 100644
--- a/web/src/shell/theme-switch.tsx
+++ b/web/src/shell/theme-switch.tsx
@@ -36,7 +36,7 @@ export function ThemeSwitch() {
                 : "text-muted-foreground hover:text-foreground",
             )}
           >
-            <Icon className="h-4 w-4" aria-hidden />
+            <Icon className="size-4" aria-hidden />
           </button>
         );
       })}
diff --git a/web/src/shell/user-menu.tsx b/web/src/shell/user-menu.tsx
index 643feb1..6d7cf0f 100644
--- a/web/src/shell/user-menu.tsx
+++ b/web/src/shell/user-menu.tsx
@@ -24,7 +24,7 @@ export function UserMenu() {
       <MenuTrigger
         render={
           <Button variant="ghost" size="sm" className="max-w-44">
-            <CircleUser className="h-4 w-4" aria-hidden />
+            <CircleUser className="size-4" aria-hidden />
             <span className="truncate">{me.email}</span>
           </Button>
         }