merge: design-kit consistency — useLang, class recipes, kit adoption (#66)
CI / web (push) Has been cancelled
CI / web (push) Has been cancelled
This commit is contained in:
@@ -0,0 +1,211 @@
|
||||
# Design-Kit Consistency — Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Add three shared helpers (`useLang`, `segmentClass`, `rowStateClass`), adopt them across the duplicated sites, and apply behavior-preserving kit one-offs (delete dead Card, sidebar focusRing, login PageTitle, field-list Badge, size-4, icon dismiss buttons).
|
||||
|
||||
**Architecture:** Task 1 creates the helpers + deletes Card (additive/safe). Task 2 adopts the 3 helpers across 6 + 3 + 4 sites. Task 3 applies the one-off cleanups + full gate. Behavior-preserving throughout; `check:colors`/`check:size`/existing component tests are the guards.
|
||||
|
||||
**Tech Stack:** React 19 + TS + pnpm, Tailwind v4 (token classes + `cn`), react-i18next, Base UI, Vitest 4 + RTL.
|
||||
|
||||
**Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; no codename; double-quote+semicolon; token classes only (`check:colors`). `tsconfig` has `noUnusedLocals`, so remove any destructure that becomes unused.
|
||||
|
||||
**Spec:** `docs/superpowers/specs/2026-06-08-design-kit-consistency-design.md`
|
||||
|
||||
**Key facts (verified current):**
|
||||
- `lib/focus-ring.ts` exports `focusRing = "outline-none focus-visible:ring-3 focus-visible:ring-ring/50"`. `cn` is `@/lib/utils`.
|
||||
- `Button` (`@/components/ui/button`) has sizes incl. `icon-sm`. `Badge` (`@/components/ui/badge`) has a `secondary` variant. `PageTitle` (`@/components/ui/page-title`) is an `<h1>` styled `text-2xl font-semibold tracking-tight`.
|
||||
- `components/ui/card.tsx` has ZERO importers and no `card.stories`.
|
||||
- `useLang` sites (each currently `const lang = i18n.language.startsWith("sv") ? "sv" : "en";`): `objects/object-detail.tsx:59`, `objects/field-input.tsx:32`, `vocab/vocabulary-terms.tsx:13`, `vocab/vocabulary-list.tsx:17`, `fields/field-list.tsx:27`, `authorities/authorities-page.tsx:19`.
|
||||
- `segmentClass` sites: `objects/objects-table.tsx:174` (`` className={`${focusRing} rounded-md px-2 py-1 ${active ? "bg-primary text-primary-foreground" : "border"}`} ``), `search/search-panel.tsx:76` (`className={cn("rounded-md px-2 py-0.5", focusRing, active ? "bg-primary text-primary-foreground" : "border")}`), `authorities/authorities-page.tsx:41` (`cn("rounded-md px-3 py-1 text-sm", focusRing, isActive ? "bg-primary text-primary-foreground" : "border")`).
|
||||
- `rowStateClass` sites: `objects/objects-table.tsx:252` (`selected ? "bg-primary/10" : "hover:bg-muted"`), `vocab/vocabulary-list.tsx:113` (`isActive ? "bg-primary/10" : "hover:bg-muted"`), `search/search-result-row.tsx:15` (`isActive ? "bg-primary/10" : "hover:bg-muted"`), `fields/field-list.tsx:86` (`def.key === selectedKey ? "bg-primary/10" : ""` — note the missing idle hover).
|
||||
|
||||
---
|
||||
|
||||
# Task 1: Create helpers + delete dead Card
|
||||
|
||||
**Files:** Create `web/src/lib/use-lang.ts`, `web/src/lib/class-recipes.ts`, `web/src/lib/class-recipes.test.ts`; Delete `web/src/components/ui/card.tsx`.
|
||||
|
||||
- [ ] **Step 1: `web/src/lib/use-lang.ts`:**
|
||||
```ts
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
/** The instance's active UI language, narrowed to the two supported locales. */
|
||||
export function useLang(): "sv" | "en" {
|
||||
const { i18n } = useTranslation();
|
||||
return i18n.language.startsWith("sv") ? "sv" : "en";
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: `web/src/lib/class-recipes.ts`:**
|
||||
```ts
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
import { focusRing } from "./focus-ring";
|
||||
|
||||
/** Segmented-control / filter-pill item. Unifies the active/inactive token recipe +
|
||||
* focus ring; callers pass their contextual padding/size via `className`. */
|
||||
export function segmentClass(active: boolean, className?: string): string {
|
||||
return cn("rounded-md", focusRing, active ? "bg-primary text-primary-foreground" : "border", className);
|
||||
}
|
||||
|
||||
/** Selected vs idle row background for master-detail / list rows. */
|
||||
export function rowStateClass(active: boolean): string {
|
||||
return active ? "bg-primary/10" : "hover:bg-muted";
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 3: `web/src/lib/class-recipes.test.ts`** (write + run):
|
||||
```ts
|
||||
import { expect, test } from "vitest";
|
||||
|
||||
import { rowStateClass, segmentClass } from "./class-recipes";
|
||||
|
||||
test("segmentClass active uses the primary tokens + focus ring", () => {
|
||||
const cls = segmentClass(true, "px-2 py-1");
|
||||
expect(cls).toContain("bg-primary");
|
||||
expect(cls).toContain("text-primary-foreground");
|
||||
expect(cls).toContain("focus-visible:ring-ring/50");
|
||||
expect(cls).toContain("px-2");
|
||||
});
|
||||
|
||||
test("segmentClass inactive uses border, not the primary fill", () => {
|
||||
const cls = segmentClass(false);
|
||||
expect(cls).toContain("border");
|
||||
expect(cls).not.toContain("bg-primary");
|
||||
});
|
||||
|
||||
test("rowStateClass toggles selected vs idle-hover", () => {
|
||||
expect(rowStateClass(true)).toBe("bg-primary/10");
|
||||
expect(rowStateClass(false)).toBe("hover:bg-muted");
|
||||
});
|
||||
```
|
||||
Run: `cd web && pnpm vitest run src/lib/class-recipes.test.ts` → 3 passing.
|
||||
|
||||
- [ ] **Step 4: Delete the dead Card component:**
|
||||
```bash
|
||||
cd /Users/olsson/Laboratory/biggus-dickus
|
||||
git rm web/src/components/ui/card.tsx
|
||||
```
|
||||
(Confirm no references first: `git grep -n "components/ui/card\"" web/src` returns nothing.)
|
||||
|
||||
- [ ] **Step 5: Verify + lint:**
|
||||
```bash
|
||||
cd web && pnpm vitest run src/lib/class-recipes.test.ts && pnpm typecheck && pnpm lint
|
||||
```
|
||||
Expected: green (Card had no importers, so its deletion can't break typecheck/lint).
|
||||
|
||||
- [ ] **Step 6: Commit**
|
||||
```bash
|
||||
cd /Users/olsson/Laboratory/biggus-dickus
|
||||
git add web/src/lib/use-lang.ts web/src/lib/class-recipes.ts web/src/lib/class-recipes.test.ts
|
||||
git rm -q web/src/components/ui/card.tsx 2>/dev/null; git add -A web/src/components/ui
|
||||
git commit -m "feat(web): useLang + segmentClass/rowStateClass helpers; delete dead Card (#66)"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# Task 2: Adopt the helpers across the duplicated sites
|
||||
|
||||
**Files:** Modify `objects/object-detail.tsx`, `objects/field-input.tsx`, `vocab/vocabulary-terms.tsx`, `vocab/vocabulary-list.tsx`, `fields/field-list.tsx`, `authorities/authorities-page.tsx`, `objects/objects-table.tsx`, `search/search-panel.tsx`, `search/search-result-row.tsx`.
|
||||
|
||||
- [ ] **Step 1: Adopt `useLang()` in the 6 components.** In each of `objects/object-detail.tsx`, `objects/field-input.tsx`, `vocab/vocabulary-terms.tsx`, `vocab/vocabulary-list.tsx`, `fields/field-list.tsx`, `authorities/authorities-page.tsx`: add `import { useLang } from "../lib/use-lang";` and replace `const lang = i18n.language.startsWith("sv") ? "sv" : "en";` with `const lang = useLang();`. Then, if `i18n` is no longer referenced anywhere else in that component, change `const { t, i18n } = useTranslation();` to `const { t } = useTranslation();` (the `noUnusedLocals` typecheck will fail otherwise — so this removal is required wherever `i18n` becomes unused). Note `authorities/authorities-page.tsx` also imports `focusRing` and uses `cn` — leave those.
|
||||
|
||||
- [ ] **Step 2: Adopt `segmentClass` at the 3 segmented sites.**
|
||||
- `objects/objects-table.tsx`: add `import { segmentClass } from "../lib/class-recipes";`; change the pill `className` (currently `` `${focusRing} rounded-md px-2 py-1 ${active ? "bg-primary text-primary-foreground" : "border"}` ``) to `className={segmentClass(active, "px-2 py-1")}`. If `focusRing` is now unused in this file, remove its import. (The object-number `<Link>` also uses `focusRing` — if so, KEEP the import.)
|
||||
- `search/search-panel.tsx`: add the import; change `className={cn("rounded-md px-2 py-0.5", focusRing, active ? "bg-primary text-primary-foreground" : "border")}` to `className={segmentClass(active, "px-2 py-0.5")}`. Remove now-unused `focusRing`/`cn` imports if they're unused elsewhere in the file.
|
||||
- `authorities/authorities-page.tsx`: add the import; change the NavLink className callback body `cn("rounded-md px-3 py-1 text-sm", focusRing, isActive ? "bg-primary text-primary-foreground" : "border")` to `segmentClass(isActive, "px-3 py-1 text-sm")`. Remove now-unused `focusRing`/`cn` imports if unused elsewhere.
|
||||
|
||||
- [ ] **Step 3: Adopt `rowStateClass` at the 4 selected-row sites.** Add `import { rowStateClass } from "…/lib/class-recipes";` (or extend the existing class-recipes import) to each:
|
||||
- `objects/objects-table.tsx`: in the row `className`, change `${selected ? "bg-primary/10" : "hover:bg-muted"}` to `${rowStateClass(selected)}`.
|
||||
- `vocab/vocabulary-list.tsx`: change `${isActive ? "bg-primary/10" : "hover:bg-muted"}` to `${rowStateClass(isActive)}`.
|
||||
- `search/search-result-row.tsx`: change `${isActive ? "bg-primary/10" : "hover:bg-muted"}` to `${rowStateClass(isActive)}`.
|
||||
- `fields/field-list.tsx`: change `${def.key === selectedKey ? "bg-primary/10" : ""}` to `${rowStateClass(def.key === selectedKey)}` (this ADDS the `hover:bg-muted` idle hover the others have — an intended consistency fix).
|
||||
|
||||
- [ ] **Step 4: Verify (vitest ONCE for the affected suites), typecheck, lint:**
|
||||
```bash
|
||||
cd web && pnpm vitest run src/objects src/vocab src/fields src/authorities src/search && pnpm typecheck && pnpm lint
|
||||
```
|
||||
Expected: green. These are class-string-equivalent changes (segmentClass/rowStateClass produce the same token sets; `cn` ordering is irrelevant to Tailwind), so the existing component tests pass unchanged. `field-list`'s row now also carries `hover:bg-muted` (additive). If a test asserted the exact old className string, update it to match the new equivalent (unlikely — tests query by role/text).
|
||||
|
||||
- [ ] **Step 5: Commit**
|
||||
```bash
|
||||
cd /Users/olsson/Laboratory/biggus-dickus
|
||||
git add web/src/objects/object-detail.tsx web/src/objects/field-input.tsx web/src/vocab/vocabulary-terms.tsx web/src/vocab/vocabulary-list.tsx web/src/fields/field-list.tsx web/src/authorities/authorities-page.tsx web/src/objects/objects-table.tsx web/src/search/search-panel.tsx web/src/search/search-result-row.tsx
|
||||
git commit -m "refactor(web): adopt useLang + segmentClass/rowStateClass across sites (#66)"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# Task 3: One-off kit cleanups + full gate
|
||||
|
||||
**Files:** Modify `shell/sidebar.tsx`, `auth/login-page.tsx`, `fields/field-list.tsx`, `shell/theme-switch.tsx`, `shell/user-menu.tsx`, `shell/header-search.tsx`, `objects/objects-page.tsx`, `objects/object-detail-drawer.tsx`.
|
||||
|
||||
- [ ] **Step 1: `shell/sidebar.tsx`** — use the `focusRing` constant. Add `import { focusRing } from "../lib/focus-ring";` (if not already imported). At the two `cn(...)` sites (lines ~46 and ~88) replace the literal `"focus-visible:ring-3 focus-visible:ring-ring/50"` entry with `focusRing`. (Both are inside `cn(...)` lists, so just swap the string for the constant.)
|
||||
|
||||
- [ ] **Step 2: `auth/login-page.tsx`** — use `PageTitle`. Add `import { PageTitle } from "@/components/ui/page-title";` and change `<h1 className="text-2xl font-semibold">{app_name}</h1>` to `<PageTitle>{app_name}</PageTitle>`.
|
||||
|
||||
- [ ] **Step 3: `fields/field-list.tsx`** — type-tag → `Badge`. Add `import { Badge } from "@/components/ui/badge";` and change the type-tag `<span className="rounded-md bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">{…}</span>` (line ~97) to `<Badge variant="secondary">{…}</Badge>` (keep the inner expression/children unchanged).
|
||||
|
||||
- [ ] **Step 4: Icon sizing → `size-4`** in the 3 app-source sites: `shell/theme-switch.tsx:39` (`<Icon className="h-4 w-4" …>` → `className="size-4"`), `shell/user-menu.tsx:27` (`<CircleUser className="h-4 w-4" …>` → `size-4`), `shell/header-search.tsx:23` (the search icon's `… h-4 w-4 …` → replace `h-4 w-4` with `size-4`, keeping the other classes). Do NOT touch `components/ui/select.tsx`.
|
||||
|
||||
- [ ] **Step 5: Icon dismiss buttons → kit Button.**
|
||||
- `objects/objects-page.tsx:54`: add `import { Button } from "@/components/ui/button";` (if absent) and change the `<button type="button" 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>` to:
|
||||
```tsx
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={closeDetail}
|
||||
aria-label={t("actions.closeDetail")}
|
||||
>
|
||||
<X className="size-4" aria-hidden="true" />
|
||||
</Button>
|
||||
```
|
||||
- `objects/object-detail-drawer.tsx:31-36`: add `import { Button } from "@/components/ui/button";` and render the `DrawerClose` AS the kit Button via the render prop:
|
||||
```tsx
|
||||
<DrawerClose
|
||||
aria-label={t("actions.closeDetail")}
|
||||
render={<Button variant="ghost" size="icon-sm" />}
|
||||
>
|
||||
<X className="size-4" aria-hidden="true" />
|
||||
</DrawerClose>
|
||||
```
|
||||
(This mirrors the `AlertDialogTrigger render={<Button … />}` pattern in `components/delete-confirm-dialog.tsx`; the `DrawerClose` keeps its close-on-click behaviour and the `aria-label`.)
|
||||
|
||||
- [ ] **Step 6: FULL FRONTEND GATE (run tests EXACTLY ONCE):**
|
||||
```bash
|
||||
cd web && pnpm typecheck && pnpm lint && pnpm test && pnpm build && pnpm check:size && pnpm check:colors
|
||||
```
|
||||
All green. Report test totals, largest chunk (gz) from check:size (should be ≤ the prior ~216.5 KB — the Card delete only removes dead code), and the `check:colors` line. The existing `user-menu`, `objects-table`, `object-detail`/drawer, `login-page`, sidebar, `field-list`, search tests must pass unchanged (the icon buttons keep their `aria-label`s; the drawer still closes; login still renders an `<h1>` via PageTitle).
|
||||
|
||||
- [ ] **Step 7: Codename + status:**
|
||||
```bash
|
||||
cd /Users/olsson/Laboratory/biggus-dickus
|
||||
git grep -in 'biggus\|dickus' -- web/src; echo "codename-exit=$?"
|
||||
git status --short
|
||||
```
|
||||
Expected: no matches (`codename-exit=1`).
|
||||
|
||||
- [ ] **Step 8: Manual smoke (recommended).** `pnpm dev`: the visibility pills / authority tabs / search facets look unchanged and keep their focus rings; the selected list rows (objects, vocab, search, fields) highlight identically and field rows now have a hover; the object-detail close buttons (wide pane + drawer) work; the login title and field-list type tag look right.
|
||||
|
||||
- [ ] **Step 9: Commit**
|
||||
```bash
|
||||
cd /Users/olsson/Laboratory/biggus-dickus
|
||||
git add web/src/shell/sidebar.tsx web/src/auth/login-page.tsx web/src/fields/field-list.tsx web/src/shell/theme-switch.tsx web/src/shell/user-menu.tsx web/src/shell/header-search.tsx web/src/objects/objects-page.tsx web/src/objects/object-detail-drawer.tsx
|
||||
git commit -m "refactor(web): kit consistency — focusRing, PageTitle, Badge, size-4, icon buttons (#66)"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Self-Review (completed)
|
||||
|
||||
**Spec coverage:** AC1 `useLang` + 6 sites (T1 S1, T2 S1); AC2 `segmentClass`/`rowStateClass` + adoption + field-list hover fix (T1 S2-S3, T2 S2-S3); AC3 Card deleted (T1 S4); AC4 one-offs — sidebar focusRing, login PageTitle, field-list Badge, size-4, icon buttons (T3 S1-S5); AC5 gate/check:size/codename (T3 S6-S7). ✓
|
||||
|
||||
**Placeholder scan:** every edit gives the exact before string + after code; helper bodies are complete; the test has concrete assertions. The "remove `i18n` if unused" instructions are concrete (driven by `noUnusedLocals`). No TBD. ✓
|
||||
|
||||
**Type/consistency:** `useLang()` (T1) returns `"sv" | "en"` consumed as `const lang` (T2 S1); `segmentClass(active, className?)` / `rowStateClass(active)` (T1) called with the exact args in T2 S2-S3; `Button size="icon-sm"`, `Badge variant="secondary"`, `PageTitle` all confirmed to exist. ✓
|
||||
|
||||
## Notes
|
||||
- No new dependency, no new i18n keys. `check:colors` stays green — `segmentClass`/`rowStateClass` and all edits use tokens (`bg-primary`, `border`, `ring-ring`, `bg-muted`). Card deletion only removes dead code.
|
||||
- `cn()` (tailwind-merge) makes class ordering irrelevant, so the helper outputs are visually identical to the prior inline strings (except field-list's intended added hover).
|
||||
- The `<SegmentedControl>` component and the form-spacing scale are deferred (out of scope).
|
||||
@@ -0,0 +1,122 @@
|
||||
# Design-Kit Consistency — Design
|
||||
|
||||
**Date:** 2026-06-08
|
||||
**Status:** Approved (brainstorming) — ready for implementation planning.
|
||||
**Issue:** #66 (dead Card, duplicated segmented-control + selected-row recipes, `useLang`/`focusRing` drift, misc kit one-offs).
|
||||
|
||||
## Context
|
||||
|
||||
A frontend deep audit found subtler design-system inconsistencies the `check:colors` guard doesn't catch
|
||||
(the app is already hex-free + token-based + dark-mode-clean). These are duplicated class recipes and
|
||||
non-adoption of the `ui/*` kit. All fixes are behavior-preserving; `check:colors`/`check:size`/the existing
|
||||
component tests are the guards. State re-verified against the current code (post #62/#64).
|
||||
|
||||
## Components
|
||||
|
||||
### New shared helpers
|
||||
|
||||
**`lib/use-lang.ts`** — `useLang(): "sv" | "en"`
|
||||
```ts
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
/** The instance's active UI language, narrowed to the two supported locales. */
|
||||
export function useLang(): "sv" | "en" {
|
||||
const { i18n } = useTranslation();
|
||||
return i18n.language.startsWith("sv") ? "sv" : "en";
|
||||
}
|
||||
```
|
||||
Replaces the inline `const lang = i18n.language.startsWith("sv") ? "sv" : "en";` in **6** components:
|
||||
`objects/object-detail.tsx`, `objects/field-input.tsx`, `vocab/vocabulary-terms.tsx`,
|
||||
`vocab/vocabulary-list.tsx`, `fields/field-list.tsx`, `authorities/authorities-page.tsx`. Each switches to
|
||||
`const lang = useLang();` and drops the now-unused `i18n` from its `useTranslation()` destructure where
|
||||
`i18n` is otherwise unused. (Left untouched: `shell/lang-switch.tsx` — derives from a different `locale`
|
||||
var; `i18n/index.ts` — the infra `languageChanged` handler.)
|
||||
|
||||
**`lib/class-recipes.ts`** — two shared class helpers
|
||||
```ts
|
||||
import { cn } from "@/lib/utils";
|
||||
import { focusRing } from "./focus-ring";
|
||||
|
||||
/** Segmented-control / filter-pill item. Unifies the active/inactive token recipe +
|
||||
* focus ring; callers pass their contextual padding/size via `className`. */
|
||||
export function segmentClass(active: boolean, className?: string): string {
|
||||
return cn("rounded-md", focusRing, active ? "bg-primary text-primary-foreground" : "border", className);
|
||||
}
|
||||
|
||||
/** Selected vs idle row background for master-detail / list rows. */
|
||||
export function rowStateClass(active: boolean): string {
|
||||
return active ? "bg-primary/10" : "hover:bg-muted";
|
||||
}
|
||||
```
|
||||
- **`segmentClass`** is adopted at the 3 segmented sites, each keeping its contextual padding:
|
||||
- `objects/objects-table.tsx:174` → `segmentClass(active, "px-2 py-1")`
|
||||
- `search/search-panel.tsx:76` → `segmentClass(active, "px-2 py-0.5")`
|
||||
- `authorities/authorities-page.tsx:41` (NavLink) → `segmentClass(isActive, "px-3 py-1 text-sm")`
|
||||
This DRYs the bug-prone recipe (the active/inactive token pair + `focusRing` — the part that drifted and
|
||||
caused the #62 missing-ring bug); contextual sizing is intentionally preserved per site.
|
||||
- **`rowStateClass`** is adopted at the 4 selected-row sites:
|
||||
- `objects/objects-table.tsx:252` → `rowStateClass(selected)`
|
||||
- `vocab/vocabulary-list.tsx:113` → `rowStateClass(isActive)`
|
||||
- `search/search-result-row.tsx:15` → `rowStateClass(isActive)`
|
||||
- `fields/field-list.tsx:86` → `rowStateClass(def.key === selectedKey)` — **fixes** this site, which
|
||||
currently uses `… ? "bg-primary/10" : ""` (dropping the `hover:bg-muted` idle hover the others have).
|
||||
|
||||
### One-off cleanups
|
||||
- **Delete `components/ui/card.tsx`** — zero importers (no app/test/story references; no `card.stories`).
|
||||
- **`shell/sidebar.tsx:46,88`** — replace the raw `focus-visible:ring-3 focus-visible:ring-ring/50`
|
||||
string (inside the existing `cn(...)`) with the imported `focusRing` constant (adds `outline-none`,
|
||||
matching every other call site).
|
||||
- **`auth/login-page.tsx:49`** — `<h1 className="text-2xl font-semibold">{app_name}</h1>` →
|
||||
`<PageTitle>{app_name}</PageTitle>` (`PageTitle` is `text-2xl font-semibold tracking-tight`, restoring
|
||||
the missing `tracking-tight`). Import `PageTitle` from `@/components/ui/page-title`.
|
||||
- **`fields/field-list.tsx:97`** — the hand-rolled type-tag `<span className="rounded-md bg-muted px-1.5
|
||||
py-0.5 text-xs text-muted-foreground">` → `<Badge variant="secondary">` (from `@/components/ui/badge`).
|
||||
- **Icon sizing** — `h-4 w-4` → `size-4` in the 3 **app-source** sites: `shell/theme-switch.tsx:39`,
|
||||
`shell/user-menu.tsx:27`, `shell/header-search.tsx:23`. (Leave `components/ui/select.tsx` — kit-internal.)
|
||||
- **Icon dismiss buttons** → kit `Button variant="ghost" size="icon-sm"`:
|
||||
- `objects/objects-page.tsx:54` (plain `<button onClick={closeDetail} aria-label={…}>`) → `<Button
|
||||
variant="ghost" size="icon-sm" onClick={closeDetail} aria-label={t("actions.closeDetail")}><X
|
||||
className="size-4" aria-hidden="true" /></Button>` (import `Button`).
|
||||
- `objects/object-detail-drawer.tsx:33` (Base UI `<DrawerClose>`) → keep `DrawerClose` for its
|
||||
close-on-click semantics, render it AS the kit Button via the render prop:
|
||||
`<DrawerClose aria-label={t("actions.closeDetail")} render={<Button variant="ghost" size="icon-sm" />}><X
|
||||
className="size-4" aria-hidden="true" /></DrawerClose>` (mirrors the `AlertDialogTrigger render={<Button/>}`
|
||||
pattern in `delete-confirm-dialog.tsx`; import `Button`).
|
||||
|
||||
## Error handling / edges
|
||||
- `segmentClass`/`rowStateClass` are pure string builders — no runtime concerns. `cn()` (tailwind-merge)
|
||||
resolves any padding/utility overlap predictably.
|
||||
- `<Badge variant="secondary">` shifts the type-tag from `bg-muted`/`text-muted-foreground` to the
|
||||
`secondary` token pair — a deliberate, minor visual adoption of the kit; still token-based (check:colors
|
||||
clean).
|
||||
- The drawer `DrawerClose render={<Button/>}` keeps Base UI's close behaviour (Base UI merges its props
|
||||
onto the rendered Button); the `aria-label` stays on `DrawerClose`.
|
||||
- `useLang` returns the same `"sv" | "en"` the inline code produced — no behaviour change.
|
||||
|
||||
## Testing
|
||||
- **`lib/class-recipes.test.ts`** (new): `segmentClass(true)` contains `bg-primary` + `text-primary-foreground`
|
||||
and the focus-ring utility; `segmentClass(false)` contains `border` (not `bg-primary`); both contain a
|
||||
passed `className`; `rowStateClass(true)` === `"bg-primary/10"`, `rowStateClass(false)` === `"hover:bg-muted"`.
|
||||
- **Behavior guard:** the existing component tests must stay green unchanged — `objects-table.test.tsx`,
|
||||
`authorities.test.tsx`, `vocabularies.test.tsx`, `field-list` / `search` tests, `login-page.test.tsx`,
|
||||
`breadcrumb`/sidebar, `object-detail`/drawer, `user-menu.test.tsx`. (The login `PageTitle` still renders an
|
||||
`<h1>`; the icon buttons keep their `aria-label`s; the drawer close still closes.)
|
||||
- **Gate:** `typecheck`/`lint`/`test`/`build`/`check:size`/`check:colors` green; no new dependency; no new
|
||||
i18n keys; no codename. `check:size` unchanged-or-smaller (Card deletion removes dead code).
|
||||
|
||||
## Acceptance criteria
|
||||
1. `useLang()` exists and replaces the inline lang derivation in the 6 listed components; `lang-switch` and
|
||||
`i18n/index.ts` are untouched.
|
||||
2. `segmentClass`/`rowStateClass` exist (unit-tested) and are adopted at the 3 segmented + 4 selected-row
|
||||
sites; `field-list`'s selected row gains the `hover:bg-muted` idle hover.
|
||||
3. `components/ui/card.tsx` is deleted (no remaining references).
|
||||
4. The one-offs are applied: sidebar uses `focusRing`; login uses `PageTitle`; field-list type-tag uses
|
||||
`Badge`; the 3 app-source icons use `size-4`; both icon dismiss buttons use `Button variant="ghost"
|
||||
size="icon-sm"`.
|
||||
5. All existing tests pass unchanged; `typecheck`/`lint`/`build`/`check:colors` green; `check:size`
|
||||
unchanged-or-smaller; no new dependency; no new i18n keys; no codename.
|
||||
|
||||
## Out of scope → follow-ups
|
||||
- A full `<SegmentedControl>`/`<ToggleGroup>` component (the button-vs-NavLink interaction split makes a
|
||||
class helper the better fit); the form `space-y-*` scale (too subjective — churn risk).
|
||||
- Standardizing icon sizing inside `components/ui/*` (kit-internal style, separate from app-source).
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,103 +0,0 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn(
|
||||
"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn(
|
||||
"flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
@@ -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"
|
||||
@@ -94,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"
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
import { expect, test } from "vitest";
|
||||
|
||||
import { rowStateClass, segmentClass } from "./class-recipes";
|
||||
|
||||
test("segmentClass active uses the primary tokens + focus ring", () => {
|
||||
const cls = segmentClass(true, "px-2 py-1");
|
||||
expect(cls).toContain("bg-primary");
|
||||
expect(cls).toContain("text-primary-foreground");
|
||||
expect(cls).toContain("focus-visible:ring-ring/50");
|
||||
expect(cls).toContain("px-2");
|
||||
});
|
||||
|
||||
test("segmentClass inactive uses border, not the primary fill", () => {
|
||||
const cls = segmentClass(false);
|
||||
expect(cls).toContain("border");
|
||||
expect(cls).not.toContain("bg-primary");
|
||||
});
|
||||
|
||||
test("rowStateClass toggles selected vs idle-hover", () => {
|
||||
expect(rowStateClass(true)).toBe("bg-primary/10");
|
||||
expect(rowStateClass(false)).toBe("hover:bg-muted");
|
||||
});
|
||||
@@ -0,0 +1,14 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
import { focusRing } from "./focus-ring";
|
||||
|
||||
/** Segmented-control / filter-pill item. Unifies the active/inactive token recipe +
|
||||
* focus ring; callers pass their contextual padding/size via `className`. */
|
||||
export function segmentClass(active: boolean, className?: string): string {
|
||||
return cn("rounded-md", focusRing, active ? "bg-primary text-primary-foreground" : "border", className);
|
||||
}
|
||||
|
||||
/** Selected vs idle row background for master-detail / list rows. */
|
||||
export function rowStateClass(active: boolean): string {
|
||||
return active ? "bg-primary/10" : "hover:bg-muted";
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
/** The instance's active UI language, narrowed to the two supported locales. */
|
||||
export function useLang(): "sv" | "en" {
|
||||
const { i18n } = useTranslation();
|
||||
return i18n.language.startsWith("sv") ? "sv" : "en";
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
|
||||
import type { components } from "../api/schema";
|
||||
import { useAuthorities, useTerms } from "../api/queries";
|
||||
import { useConfig } from "../config/config-context";
|
||||
import { useLang } from "../lib/use-lang";
|
||||
import { labelText } from "../lib/labels";
|
||||
import { OptionsCombobox } from "./options-combobox";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
@@ -27,9 +28,9 @@ export function FieldInput<TValues extends { fields: Record<string, unknown> }>(
|
||||
definition: FieldDefinitionView;
|
||||
form: FieldForm<TValues>;
|
||||
}) {
|
||||
const { t, i18n } = useTranslation();
|
||||
const { t } = useTranslation();
|
||||
const { default_language } = useConfig();
|
||||
const lang = i18n.language.startsWith("sv") ? "sv" : "en";
|
||||
const lang = useLang();
|
||||
const label = labelText(definition.labels, lang);
|
||||
const name = fieldPath<TValues>(definition.key);
|
||||
const placeholder = t("form.selectPlaceholder");
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
|
||||
|
||||
import type { components } from "../api/schema";
|
||||
import { useObject, useFieldDefinitions } from "../api/queries";
|
||||
import { useLang } from "../lib/use-lang";
|
||||
import { groupDefinitions } from "../lib/group-fields";
|
||||
import { formatDate } from "../lib/format-date";
|
||||
import { useDocumentTitle } from "../lib/use-document-title";
|
||||
@@ -49,14 +50,14 @@ export function ObjectDetail() {
|
||||
}
|
||||
|
||||
function ObjectDetailLoaded({ object }: { object: AdminObjectView }) {
|
||||
const { t, i18n } = useTranslation();
|
||||
const { t } = useTranslation();
|
||||
const { data: definitions } = useFieldDefinitions();
|
||||
|
||||
useDocumentTitle(object.object_number);
|
||||
useBreadcrumb([{ label: t("nav.objects"), to: "/objects" }, { label: object.object_number }]);
|
||||
|
||||
// Prefer the active locale's label, then English, then the raw key.
|
||||
const lang = i18n.language.startsWith("sv") ? "sv" : "en";
|
||||
const lang = useLang();
|
||||
const labelFor = (key: string) => {
|
||||
const labels = definitions?.find((d) => d.key === key)?.labels;
|
||||
const byLang = labels?.find((l) => l.lang === lang)?.label;
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -7,6 +7,7 @@ import type { components } from "../api/schema";
|
||||
import { useObjectsPage } from "../api/queries";
|
||||
import { useDebouncedValue } from "../lib/use-debounced-value";
|
||||
import { focusRing } from "../lib/focus-ring";
|
||||
import { segmentClass, rowStateClass } from "../lib/class-recipes";
|
||||
import { useConfig } from "../config/config-context";
|
||||
import { VisibilityBadge } from "./visibility-badge";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
@@ -171,7 +172,7 @@ export function ObjectsTable() {
|
||||
type="button"
|
||||
aria-pressed={active}
|
||||
onClick={() => setVisibility(value)}
|
||||
className={`${focusRing} rounded-md px-2 py-1 ${active ? "bg-primary text-primary-foreground" : "border"}`}
|
||||
className={segmentClass(active, "px-2 py-1")}
|
||||
>
|
||||
{value === "all" ? t("search.all") : t(`visibility.${value}`)}
|
||||
</button>
|
||||
@@ -248,9 +249,7 @@ export function ObjectsTable() {
|
||||
<tr
|
||||
key={object.id}
|
||||
onClick={() => navigate(`/objects/${object.id}?${params}`)}
|
||||
className={`cursor-pointer border-b text-sm ${
|
||||
selected ? "bg-primary/10" : "hover:bg-muted"
|
||||
}`}
|
||||
className={`cursor-pointer border-b text-sm ${rowStateClass(selected)}`}
|
||||
>
|
||||
<td className="px-3 py-2 text-muted-foreground">
|
||||
<Link
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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",
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -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>
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user