Jakob WennbergandClaude Opus 5
3d02a74147
Raw palette: SalaryCalendar was the only file in the salary cluster still on bg-red-100 / text-amber-800 style classes, with zero dark: variants, so every absence pill rendered paper-white on a near-black page. All 30 are now alpha-over-token on the semantic scale, which needs no dark: variant (the approach badge.tsx already takes). Eight absence types share four tones, so fill carries a second axis: filled vs outlined separates the types whose Lucide icon is identical (Heart is parental, pregnancy and care_relative; Activity is study and other_leave). Primitives: - select and dropdown-menu now scale from their trigger via the Radix transform-origin variables instead of from their own middle. Dialog stays centred: modals are not anchored to a trigger. - toast used fade-out-80, the one animate-* class with no @utility in globals.css, so --tw-exit-opacity fell back to 1 and the toast slid away at full opacity. Enter and exit now also share one path per breakpoint (top on mobile where the viewport is a full-width bar, right on desktop where it is a corner card) using max-sm:/sm: rather than stacking both, which would have produced a diagonal. - slide-over exited on ease-in, which delays the moment the user has already decided to leave; it enters on the drawer curve and now leaves on it too. - progress animated transition-all where only transform changes. - One app-wide TooltipProvider in the root layout. skipDelayDuration is provider-scoped, so a provider per instance meant the grace window could never fire and every account number in a huvudbok re-paid the full 200ms. Also: nine hand-rolled animate-pulse placeholders in three different greys to the Skeleton primitive, 25 CardTitle text-lg to the locked text-base, two always-on chips to muted text (a chip on every row is not an exception), the three extensions titles onto the display face, the help filter chips onto pill geometry, and the dead border-border/60 on the /import row. Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
108 lines
3.5 KiB
TypeScript
108 lines
3.5 KiB
TypeScript
import type { Metadata, Viewport } from "next";
|
|
import { Geist, Geist_Mono } from "next/font/google";
|
|
import { Hedvig_Letters_Serif } from "next/font/google";
|
|
import Script from "next/script";
|
|
import { NextIntlClientProvider } from "next-intl";
|
|
import { getLocale, getMessages } from "next-intl/server";
|
|
import { SpeedInsights } from "@vercel/speed-insights/next";
|
|
import { Toaster } from "@/components/ui/toaster";
|
|
import { TooltipProvider } from "@/components/ui/tooltip-provider";
|
|
import { DeployReloadPrompt } from "@/components/system/DeployReloadPrompt";
|
|
import { ThemeProvider } from "@/components/theme-provider";
|
|
import { SWRProvider } from "@/components/providers/SWRProvider";
|
|
import { ScrollbarReveal } from "@/components/ScrollbarReveal";
|
|
import { ensureInitialized } from "@/lib/init";
|
|
import { getBranding } from "@/lib/branding/service";
|
|
import { APP_TIME_ZONE } from "@/i18n/config";
|
|
import "./globals.css";
|
|
|
|
// Load extensions before metadata/viewport functions read the branding service.
|
|
// Without this, an extension that calls registerBrandingService() at its module
|
|
// load time would not have run yet when the first request hits this layout.
|
|
ensureInitialized();
|
|
|
|
const geistSans = Geist({
|
|
variable: "--font-geist-sans",
|
|
subsets: ["latin"],
|
|
});
|
|
|
|
const geistMono = Geist_Mono({
|
|
variable: "--font-geist-mono",
|
|
subsets: ["latin"],
|
|
});
|
|
|
|
const hedvigSerif = Hedvig_Letters_Serif({
|
|
variable: "--font-hedvig-serif",
|
|
subsets: ["latin"],
|
|
display: "swap",
|
|
// Hedvig Letters Serif on Google Fonts only ships 400; the brand wordmark
|
|
// requests 700, which browsers synthesize from this file. Keep the load
|
|
// single-file to stay within the existing display-font budget.
|
|
weight: "400",
|
|
});
|
|
|
|
export function generateMetadata(): Metadata {
|
|
const b = getBranding();
|
|
return {
|
|
title: b.appName,
|
|
description: b.appDescription,
|
|
manifest: "/manifest.webmanifest",
|
|
appleWebApp: {
|
|
capable: true,
|
|
statusBarStyle: "default",
|
|
title: b.appName,
|
|
},
|
|
};
|
|
}
|
|
|
|
export function generateViewport(): Viewport {
|
|
return {
|
|
themeColor: getBranding().themeColor,
|
|
width: "device-width",
|
|
initialScale: 1,
|
|
viewportFit: "cover",
|
|
};
|
|
}
|
|
|
|
export default async function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode;
|
|
}>) {
|
|
const branding = getBranding();
|
|
const locale = await getLocale();
|
|
const messages = await getMessages();
|
|
return (
|
|
<html lang={locale} suppressHydrationWarning className={`${geistSans.variable} ${geistMono.variable} ${hedvigSerif.variable}`}>
|
|
<head>
|
|
<link rel="apple-touch-icon" href={branding.appleTouchIconPath} />
|
|
</head>
|
|
<body
|
|
className="antialiased"
|
|
>
|
|
{/* timeZone is passed explicitly: client components must format in the
|
|
same zone the server rendered with, or timestamps shift on hydration. */}
|
|
<NextIntlClientProvider locale={locale} messages={messages} timeZone={APP_TIME_ZONE}>
|
|
<ThemeProvider
|
|
attribute="class"
|
|
defaultTheme="light"
|
|
enableSystem
|
|
disableTransitionOnChange
|
|
>
|
|
<SWRProvider>
|
|
<TooltipProvider>
|
|
{children}
|
|
<Toaster />
|
|
<DeployReloadPrompt />
|
|
<ScrollbarReveal />
|
|
</TooltipProvider>
|
|
</SWRProvider>
|
|
</ThemeProvider>
|
|
</NextIntlClientProvider>
|
|
<SpeedInsights />
|
|
<Script src="/sw-register.js" strategy="afterInteractive" />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|