f8cbf142b5
Initial commit. Spun up via the docs/STARTER.md recipe: cp from vibespace, reset git, rename package, set brand to "Arcadia Admin" with Shield icon in app/lib/identity.ts. Inherits the full Crema sibling-lib wiring including @crema/arcadia-client (typed HTTP + Phoenix Channels realtime against arcadia-core) and @crema/arcadia-auth-ui (login/signup/password-reset/2FA forms). The /login route already renders <LoginForm>; <ArcadiaProvider> in app/root.tsx reads VITE_ARCADIA_URL (default localhost:4000) and VITE_ARCADIA_TENANT (default "default"). CLAUDE.md and README rewritten to frame this as the admin app for arcadia-core. docs/STARTER.md removed — arcadia-admin is a leaf consumer, not a downstream starter. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
105 lines
3.1 KiB
TypeScript
105 lines
3.1 KiB
TypeScript
import { useEffect, useState } from "react"
|
|
import { Check, Type } from "lucide-react"
|
|
|
|
import { Button } from "~/components/ui/button"
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverDescription,
|
|
PopoverHeader,
|
|
PopoverTitle,
|
|
PopoverTrigger,
|
|
} from "~/components/ui/popover"
|
|
import { cn } from "~/lib/utils"
|
|
|
|
export const fontSizes = [
|
|
{ id: "sm", label: "Small", sample: "Aa" },
|
|
{ id: "md", label: "Medium", sample: "Aa" },
|
|
{ id: "lg", label: "Large", sample: "Aa" },
|
|
{ id: "xl", label: "Extra large", sample: "Aa" },
|
|
] as const
|
|
|
|
export type FontSizeId = (typeof fontSizes)[number]["id"]
|
|
|
|
const STORAGE_KEY = "crema-font-scale"
|
|
const DEFAULT_SIZE: FontSizeId = "md"
|
|
|
|
function isFontSizeId(value: string | null): value is FontSizeId {
|
|
return !!value && fontSizes.some((f) => f.id === value)
|
|
}
|
|
|
|
const SAMPLE_PX: Record<FontSizeId, number> = {
|
|
sm: 14,
|
|
md: 16,
|
|
lg: 18,
|
|
xl: 20,
|
|
}
|
|
|
|
export function FontSizePicker() {
|
|
const [current, setCurrent] = useState<FontSizeId>(DEFAULT_SIZE)
|
|
|
|
useEffect(() => {
|
|
const stored = localStorage.getItem(STORAGE_KEY)
|
|
const next = isFontSizeId(stored) ? stored : DEFAULT_SIZE
|
|
setCurrent(next)
|
|
document.documentElement.dataset.fontScale = next
|
|
}, [])
|
|
|
|
const select = (id: FontSizeId) => {
|
|
setCurrent(id)
|
|
document.documentElement.dataset.fontScale = id
|
|
localStorage.setItem(STORAGE_KEY, id)
|
|
}
|
|
|
|
return (
|
|
<Popover>
|
|
<PopoverTrigger
|
|
render={
|
|
<Button
|
|
data-action="appbar-font-size"
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
aria-label="Change font size"
|
|
>
|
|
<Type />
|
|
</Button>
|
|
}
|
|
/>
|
|
<PopoverContent align="end" className="w-56">
|
|
<PopoverHeader>
|
|
<PopoverTitle>Font size</PopoverTitle>
|
|
<PopoverDescription>Scales the entire UI.</PopoverDescription>
|
|
</PopoverHeader>
|
|
<div className="flex flex-col gap-1">
|
|
{fontSizes.map((f) => {
|
|
const active = current === f.id
|
|
return (
|
|
<button
|
|
key={f.id}
|
|
type="button"
|
|
onClick={() => select(f.id)}
|
|
aria-pressed={active}
|
|
className={cn(
|
|
"flex items-center justify-between gap-2 rounded-md px-2.5 py-1.5 text-left transition-colors duration-fast ease-standard hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:outline-none",
|
|
active && "bg-accent text-accent-foreground"
|
|
)}
|
|
>
|
|
<span className="flex items-baseline gap-2.5">
|
|
<span
|
|
className="font-heading leading-none"
|
|
style={{ fontSize: `${SAMPLE_PX[f.id]}px` }}
|
|
>
|
|
{f.sample}
|
|
</span>
|
|
<span className="text-sm">{f.label}</span>
|
|
</span>
|
|
{active && <Check className="size-4 text-primary" />}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|