initial commit of v5

src/components/layout/breakpoint-indicator.tsx

@@ -0,0 +1,38 @@
+import { cn } from "@/utils/style";
+
+type BreakpointIndicatorProps = {
+	position?: "top-right" | "bottom-right" | "top-left" | "bottom-left";
+};
+
+export function BreakpointIndicator({ position = "bottom-right" }: BreakpointIndicatorProps) {
+	const isTop = position.includes("top");
+	const isRight = position.includes("right");
+	const isLeft = position.includes("left");
+	const isBottom = position.includes("bottom");
+
+	const top = isTop ? "top-0" : "bottom-0";
+	const right = isRight ? "right-0" : "left-0";
+	const left = isLeft ? "left-0" : "right-0";
+	const bottom = isBottom ? "bottom-0" : "top-0";
+
+	return (
+		<div
+			className={cn(
+				"fixed z-50 flex size-10 items-center justify-center bg-blue-900 p-2 font-bold font-mono text-white text-xs opacity-80 transition-opacity hover:opacity-40 print:hidden",
+				top,
+				right,
+				left,
+				bottom,
+			)}
+		>
+			<span className="inline sm:hidden">XS</span>
+			<span className="hidden sm:inline md:hidden">SM</span>
+			<span className="hidden md:inline lg:hidden">MD</span>
+			<span className="hidden lg:inline xl:hidden">LG</span>
+			<span className="hidden xl:inline 2xl:hidden">XL</span>
+			<span className="3xl:hidden hidden 2xl:inline">2XL</span>
+			<span className="3xl:inline 4xl:hidden hidden">3XL</span>
+			<span className="4xl:inline hidden">4XL</span>
+		</div>
+	);
+}

src/components/layout/error-screen.tsx

@@ -0,0 +1,27 @@
+import { Trans } from "@lingui/react/macro";
+import { ArrowClockwiseIcon, WarningIcon } from "@phosphor-icons/react";
+import type { ErrorComponentProps } from "@tanstack/react-router";
+import { Button } from "@/components/animate-ui/components/buttons/button";
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
+import { BrandIcon } from "../ui/brand-icon";
+
+export function ErrorScreen({ error, reset }: ErrorComponentProps) {
+	return (
+		<div className="mx-auto flex h-svh max-w-md flex-col items-center justify-center gap-y-4">
+			<BrandIcon variant="logo" className="size-12" />
+
+			<Alert>
+				<WarningIcon />
+				<AlertTitle>
+					<Trans>An error occurred while loading the page.</Trans>
+				</AlertTitle>
+				<AlertDescription>{error.message}</AlertDescription>
+			</Alert>
+
+			<Button onClick={reset}>
+				<ArrowClockwiseIcon />
+				<Trans>Refresh</Trans>
+			</Button>
+		</div>
+	);
+}

src/components/layout/loading-screen.tsx

@@ -0,0 +1,13 @@
+import { Trans } from "@lingui/react/macro";
+import { Spinner } from "@/components/ui/spinner";
+
+export function LoadingScreen() {
+	return (
+		<div className="fixed inset-0 z-50 flex h-svh w-svw items-center justify-center gap-x-3 bg-background">
+			<Spinner className="size-6" />
+			<p className="text-muted-foreground">
+				<Trans>Loading...</Trans>
+			</p>
+		</div>
+	);
+}

src/components/layout/not-found-screen.tsx

@@ -0,0 +1,29 @@
+import { Trans } from "@lingui/react/macro";
+import { ArrowLeftIcon, WarningIcon } from "@phosphor-icons/react";
+import { Link, type NotFoundRouteProps } from "@tanstack/react-router";
+import { Button } from "@/components/animate-ui/components/buttons/button";
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
+import { BrandIcon } from "../ui/brand-icon";
+
+export function NotFoundScreen({ routeId }: NotFoundRouteProps) {
+	return (
+		<div className="mx-auto flex h-svh max-w-md flex-col items-center justify-center gap-y-4">
+			<BrandIcon variant="logo" className="size-12" />
+
+			<Alert>
+				<WarningIcon />
+				<AlertTitle>
+					<Trans>An error occurred while loading the page.</Trans>
+				</AlertTitle>
+				<AlertDescription>{routeId}</AlertDescription>
+			</Alert>
+
+			<Button asChild>
+				<Link to="..">
+					<ArrowLeftIcon />
+					<Trans>Go Back</Trans>
+				</Link>
+			</Button>
+		</div>
+	);
+}