6df4f86920
* Fix mobile league settings: prevent sports scroll and remove completion checkmarks - Add overflow-hidden to sport label text span so flex truncation is properly contained - Add min-w-0 to SettingsSection header inner flex item to prevent title/description overflow - Remove completion check marks from mobile grid nav buttons (league settings has no completion concept) - Remove "X of Y set" counter from mobile nav header - Remove isComplete field from SettingsGridSection type and all data https://claude.ai/code/session_01T7iTb9YZLuWJFtKV753tdB * Fix race window in user creation and restore FlagSvg safety fallback auth.server.ts: switch generateId to application-generated UUIDs so the ID is known before the insert, then move flagConfig assignment from create.after (a separate UPDATE) to create.before so it lands in the initial INSERT with no race window. FlagSvg.tsx: validate the config with parseFlagConfig before rendering; corrupt or missing data falls back to a neutral gray triband flag rather than silently rendering blank SVG shapes. https://claude.ai/code/session_01T7iTb9YZLuWJFtKV753tdB --------- Co-authored-by: Claude <noreply@anthropic.com>
64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import type { ComponentType, ReactNode } from "react";
|
|
import type { LucideProps } from "lucide-react";
|
|
import { GradientIcon } from "~/components/ui/GradientIcon";
|
|
import { cn } from "~/lib/utils";
|
|
|
|
type StatusTone = "default" | "success" | "warning" | "locked";
|
|
|
|
export function SettingsStatusPill({
|
|
children,
|
|
tone = "default",
|
|
}: {
|
|
children: ReactNode;
|
|
tone?: StatusTone;
|
|
}) {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold",
|
|
tone === "success" && "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
|
|
tone === "warning" && "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
|
|
tone === "locked" && "border-muted-foreground/20 bg-muted text-muted-foreground",
|
|
tone === "default" && "border-border bg-background text-muted-foreground"
|
|
)}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function SettingsSection({
|
|
id,
|
|
icon,
|
|
title,
|
|
description,
|
|
status,
|
|
children,
|
|
className,
|
|
}: {
|
|
id: string;
|
|
icon: ComponentType<LucideProps>;
|
|
title: string;
|
|
description: string;
|
|
status?: ReactNode;
|
|
children: ReactNode;
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<section id={id} className={cn("scroll-mt-24 space-y-8", className)}>
|
|
<div className="space-y-3">
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
|
<div className="flex items-start gap-3">
|
|
<GradientIcon icon={icon} className="mt-1 h-6 w-6 shrink-0" />
|
|
<div className="min-w-0">
|
|
<h2 className="text-2xl font-bold tracking-tight sm:text-3xl">{title}</h2>
|
|
<p className="mt-2 max-w-2xl text-sm text-muted-foreground">{description}</p>
|
|
</div>
|
|
</div>
|
|
{status && <div className="sm:pt-1">{status}</div>}
|
|
</div>
|
|
</div>
|
|
<div className="space-y-5">{children}</div>
|
|
</section>
|
|
);
|
|
}
|