Add alerts component

Author: alufers

.gitignore

@@ -1,3 +1,4 @@
 at2.yaml
 data.db
+data.db-journal
 temp-at

at2-web/src/app.tsx

@@ -23,6 +23,7 @@ import { ModeToggle } from "./components/ModeToggle";
 import { LanguageToggle } from "./components/LanguageToggle";
 import { Button } from "./components/ui/button";
 import { User as UserIcon } from "lucide-react";
+import { Alerts } from "./components/Alerts";
 
 export function App() {
   return (
@@ -178,6 +179,7 @@ const AppContent: FC = () => {
             <UserControls />
           </div>
         </header>
+        <Alerts />
         <main className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 px-4 pb-10">
           {rooms.length === 0 && (
             <div className="col-span-full text-center py-10 text-neutral-600">

at2-web/src/components/Alerts.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
+import { Info, TriangleAlert } from "lucide-react";
+
+interface FlashAlert {
+    type: "warning" | "info" | "error";
+    title: string;
+    body: string;
+    isCode?: boolean;
+}
+
+export function Alerts() {
+    const [alerts, setAlerts] = useState<FlashAlert[]>([]);
+
+    useEffect(() => {
+        const cookies = document.cookie.split(";");
+        const flashAlertCookie = cookies.find((cookie) =>
+            cookie.trim().startsWith("at2_flash_alert=")
+        );
+
+        if (flashAlertCookie) {
+            try {
+                const encodedValue = flashAlertCookie.split("=")[1];
+                const decodedValue = decodeURIComponent(encodedValue);
+                const alertData: FlashAlert = JSON.parse(decodedValue);
+                setAlerts((prev) => [...prev, alertData]);
+
+                // Clear the cookie
+                document.cookie =
+                    "at2_flash_alert=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+            } catch (error) {
+                console.error("Failed to parse flash alert cookie:", error);
+            }
+        }
+    }, []);
+
+    if (alerts.length === 0) return null;
+
+    return (
+        <div className="flex flex-col gap-2 px-4 pb-4">
+            {alerts.map((alert, index) => {
+                let variant: "default" | "destructive" = "default";
+                let Icon = Info;
+
+                if (alert.type === "error") {
+                    variant = "destructive";
+                    Icon = TriangleAlert;
+                } else if (alert.type === "warning") {
+                    Icon = TriangleAlert;
+                }
+
+                return (
+                    <Alert key={index} variant={variant}>
+                        <Icon className="h-4 w-4" />
+                        <AlertTitle>{alert.title}</AlertTitle>
+                        <AlertDescription>
+                            {alert.isCode ? (
+                                <pre className="font-mono text-xs mt-2 p-2 bg-muted rounded overflow-auto">
+                                    {alert.body}
+                                </pre>
+                            ) : (
+                                alert.body
+                            )}
+                        </AlertDescription>
+                    </Alert>
+                );
+            })}
+        </div>
+    );
+}

at2-web/src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }