Nick.RosenloecherandClaude Opus 5.5
d8238855fc
- globals.css: Hell, Dunkel und Druck mit den Spec-Werten aus 4.2, Fokusring = --primary-ink, Verlaufs-Token entfernt. - Codemod scripts/codemod-t5-colors.mjs: text-primary/-warning auf -ink, Vordergrund nur auf voller Fläche, Auswahlrahmen dunkel; --check-Modus und Spec halten src sauber. - Kontrast-Wächter misst die echte globals.css (VALUES_SWITCHED), alle 21 Zeilen aus 4.4 in allen vier Sätzen; keine dark:-Klassen mehr in src. - Dunkel ist ohne Entwickler-Schalter wählbar, Standard bleibt Hell. - Review-Nacharbeit: Auswahl-Umrisse und aktueller Schritt in Vordergrund, deaktivierte Felder bg-muted, Avatar ohne Blend, Honig-Check-Rahmen über --input. Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { cn } from "@/lib/utils";
|
|
import type { AuthUser } from "@/lib/auth/auth-context";
|
|
import { MoreSheet } from "./more-sheet";
|
|
import { bottomNavItems, isNavActive } from "./nav-config";
|
|
|
|
export function BottomNav({ user }: { user: Pick<AuthUser, "permissions"> }) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
// Height and padding include the iOS home-indicator inset, so the labels
|
|
// stay tappable above it; --bottom-nav-height is shared with the content
|
|
// padding, StickySubmit and the quick-add button.
|
|
<nav
|
|
aria-label="Hauptnavigation"
|
|
className="fixed inset-x-0 bottom-0 z-30 flex h-(--bottom-nav-height) border-t bg-background pb-(--safe-area-bottom) sm:hidden"
|
|
>
|
|
{bottomNavItems().map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = isNavActive(pathname, item.href);
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
aria-current={isActive ? "page" : undefined}
|
|
className={cn(
|
|
"flex flex-1 flex-col items-center justify-center gap-1 text-xs",
|
|
isActive ? "text-primary-ink" : "text-muted-foreground",
|
|
)}
|
|
>
|
|
<Icon className="size-5" aria-hidden="true" />
|
|
{item.shortLabel ?? item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
<MoreSheet user={user} />
|
|
</nav>
|
|
);
|
|
}
|