ui improvements

frontend/src/pages/Dashboard.tsx

@@ -1,5 +1,14 @@
 import { useMemo } from "react";
-import { Box, Divider, Grid, Stack, Typography } from "@mui/material";
+import {
+	Box,
+	Card,
+	CardContent,
+	Divider,
+	Grid,
+	LinearProgress,
+	Stack,
+	Typography,
+} from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import { useCounts, useLibraries, useActivity } from "../hooks/useDashboard";
 import { useMonitoringMetrics, useDiskSpace } from "../hooks/useMonitoring";
@@ -37,6 +46,135 @@ function summarize(values: number[]) {
 	};
 }
 
+function DiskSpaceCard({
+	used,
+	available,
+	size,
+	usedPct,
+}: {
+	used: number;
+	available: number;
+	size: number;
+	usedPct: string;
+}) {
+	const pct = Math.max(0, Math.min(100, Number.parseFloat(usedPct) || 0));
+	const barColor = pct < 70 ? "success" : pct < 90 ? "warning" : "error";
+	return (
+		<Card variant="outlined" sx={{ height: "100%" }}>
+			<CardContent sx={{ p: { xs: 1.5, sm: 2 } }}>
+				<Stack spacing={1.5}>
+					<Box>
+						<Typography
+							variant="caption"
+							color="text.secondary"
+							sx={{ textTransform: "uppercase" }}
+						>
+							Disk space
+						</Typography>
+						<Typography
+							variant="h5"
+							sx={{
+								fontWeight: 700,
+								fontSize: { xs: "1.05rem", sm: "1.5rem" },
+							}}
+						>
+							{usedPct} used
+						</Typography>
+					</Box>
+
+					<Box sx={{ width: "100%" }}>
+						<LinearProgress
+							variant="determinate"
+							value={pct}
+							color={barColor}
+							sx={{
+								height: 12,
+								borderRadius: 999,
+								bgcolor: "action.hover",
+								"& .MuiLinearProgress-bar": {
+									borderRadius: 999,
+								},
+							}}
+						/>
+					</Box>
+
+					<Grid container spacing={1.5} sx={{ alignItems: "stretch" }}>
+						<Grid size={{ xs: 12, sm: 4 }}>
+							<Box
+								sx={{
+									p: 1.5,
+									borderRadius: 2,
+									bgcolor: "action.hover",
+									height: "100%",
+									display: "flex",
+									flexDirection: "column",
+									alignItems: "center",
+									justifyContent: "center",
+									textAlign: "center",
+									gap: 0.25,
+								}}
+							>
+								<Typography variant="caption" color="text.secondary">
+									Used
+								</Typography>
+								<Typography variant="body2" sx={{ fontWeight: 600 }}>
+									{formatBytes(used)}
+								</Typography>
+							</Box>
+						</Grid>
+						<Grid size={{ xs: 12, sm: 4 }}>
+							<Box
+								sx={{
+									p: 1.5,
+									borderRadius: 2,
+									bgcolor: "action.hover",
+									height: "100%",
+									display: "flex",
+									flexDirection: "column",
+									alignItems: "center",
+									justifyContent: "center",
+									textAlign: "center",
+									gap: 0.25,
+								}}
+							>
+								<Typography variant="caption" color="text.secondary">
+									Free
+								</Typography>
+								<Typography variant="body2" sx={{ fontWeight: 600 }}>
+									{formatBytes(available)}
+								</Typography>
+							</Box>
+						</Grid>
+						<Grid size={{ xs: 12, sm: 4 }}>
+							<Box
+								sx={{
+									p: 1.5,
+									borderRadius: 2,
+									bgcolor: "action.hover",
+									height: "100%",
+									display: "flex",
+									flexDirection: "column",
+									alignItems: "center",
+									justifyContent: "center",
+									textAlign: "center",
+									gap: 0.25,
+								}}
+							>
+								<Typography variant="caption" color="text.secondary">
+									Total
+								</Typography>
+								<Typography variant="body2" sx={{ fontWeight: 600 }}>
+									{formatBytes(size)}
+								</Typography>
+							</Box>
+						</Grid>
+					</Grid>
+				</Stack>
+			</CardContent>
+		</Card>
+	);
+}
+
 export function Dashboard() {
 	const navigate = useNavigate();
 	const { data: counts } = useCounts();
@@ -100,7 +238,7 @@ export function Dashboard() {
 				<Typography variant="h5" sx={{ mb: 1.5 }}>
 					Monitoring Overview
 				</Typography>
-				<Grid container spacing={1.5}>
+				<Grid container spacing={2} sx={{ alignItems: "stretch" }}>
 					<Grid size={{ xs: 6, md: 3, lg: 12 / 7 }}>
 						<MetricCard
 							label="CPU (10m avg)"
@@ -180,23 +318,14 @@ export function Dashboard() {
 					</Grid>
 				</Grid>
 				{disk && (
-					<Grid container spacing={1.5} sx={{ mt: 0.5 }}>
-						<Grid size={{ xs: 6, md: 3 }}>
-							<MetricCard label="Disk used" value={formatBytes(disk.used)} />
-						</Grid>
-						<Grid size={{ xs: 6, md: 3 }}>
-							<MetricCard
-								label="Disk available"
-								value={formatBytes(disk.available)}
-							/>
-						</Grid>
-						<Grid size={{ xs: 6, md: 3 }}>
-							<MetricCard label="Disk total" value={formatBytes(disk.size)} />
-						</Grid>
-						<Grid size={{ xs: 6, md: 3 }}>
-							<MetricCard label="Used %" value={disk.used_pct} />
-						</Grid>
-					</Grid>
+					<Box sx={{ mt: 0.5 }}>
+						<DiskSpaceCard
+							used={disk.used}
+							available={disk.available}
+							size={disk.size}
+							usedPct={disk.used_pct}
+						/>
+					</Box>
 				)}
 			</Box>
 
@@ -207,7 +336,7 @@ export function Dashboard() {
 					Library Stats
 				</Typography>
 				{counts && (
-					<Grid container spacing={1.5} sx={{ mb: 2 }}>
+					<Grid container spacing={2} sx={{ mb: 2, alignItems: "stretch" }}>
 						<Grid size={{ xs: 6, md: 3 }}>
 							<MetricCard
 								label="Total"