feat: Move alerts below stats, reveal on hover

Alerts now appear below the quick stats badges and are collapsed by
default, showing just a subtle "N alerts" indicator that expands
on mouseover.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

client/src/pages/home/components/AlertCards.tsx

@@ -1,6 +1,7 @@
-import { ExclamationCircleOutlined, PrinterOutlined, DashboardOutlined } from "@ant-design/icons";
+import { ExclamationCircleOutlined, PrinterOutlined, DashboardOutlined, WarningOutlined } from "@ant-design/icons";
 import { useList, useTranslate } from "@refinedev/core";
-import { Badge, Card, Col, Row, theme } from "antd";
+import { Badge, Card, Col, Row, theme, Typography } from "antd";
+import { useState } from "react";
 import { Link } from "react-router";
 import { ISpool } from "../../spools/model";
 import { IPrintJob } from "../../spools/model";
@@ -39,9 +40,14 @@ function AlertCard({ icon, label, count, to, color, loading }: AlertCardProps) {
   );
 }
 
-export function AlertCards() {
+interface AlertCardsProps {
+  reveal?: boolean;
+}
+
+export function AlertCards({ reveal }: AlertCardsProps) {
   const t = useTranslate();
   const { token } = useToken();
+  const [hovered, setHovered] = useState(false);
 
   // Low stock spools
   const { result: lowStockResult, query: lowStockQuery } = useList<ISpool>({
@@ -105,6 +111,40 @@ export function AlertCards() {
 
   if (visibleAlerts.length === 0) return null;
 
+  const totalAlertCount = visibleAlerts.reduce((sum, a) => sum + a.count, 0);
+
+  if (reveal) {
+    return (
+      <div
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        style={{ marginTop: 8 }}
+      >
+        <Typography.Text
+          type="secondary"
+          style={{ fontSize: 12, cursor: "pointer", display: "flex", alignItems: "center", gap: 4 }}
+        >
+          <WarningOutlined />
+          {totalAlertCount} {totalAlertCount === 1 ? "alert" : "alerts"}
+        </Typography.Text>
+        <div
+          style={{
+            maxHeight: hovered ? 200 : 0,
+            overflow: "hidden",
+            transition: "max-height 0.2s ease",
+            marginTop: hovered ? 8 : 0,
+          }}
+        >
+          <Row gutter={[8, 8]}>
+            {visibleAlerts.map((alert, i) => (
+              <AlertCard key={i} {...alert} />
+            ))}
+          </Row>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <Row gutter={[12, 12]} style={{ marginBottom: 16 }}>
       {visibleAlerts.map((alert, i) => (

client/src/pages/home/index.tsx

@@ -133,8 +133,8 @@ export const Home: React.FC<IResourceComponentsProps> = () => {
               </Button>
             </Col>
           </Row>
-          <AlertCards />
           <QuickStats compact />
+          <AlertCards reveal />
         </Col>
       </Row>