Developer
109e74db41
Web UI rework. Shared-components slice (drift prevention): - Migrate SectionCard, SelectionRailCard, TabbedCard, MetricCard, DiskSpaceCard, HoverEditButton, DialogFooter, ConfirmDialog, LibraryOverview, NowPlaying, SessionActivityPanel off @mui - HoverEditButton: MUI IconButton + EditOutlined -> Button + lucide Pencil - Status mapping uses the success Badge variant (chart-2) for healthy - Exported APIs preserved so consuming pages still compile (no page edits) - 11 behavioral Vitest component tests added Gate: build + lint + test green.
79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Progress } from "@/components/ui/progress";
|
|
|
|
interface Props {
|
|
used: number;
|
|
available: number;
|
|
size: number;
|
|
usedPct: string;
|
|
}
|
|
|
|
function formatBytes(bytes: number): string {
|
|
if (!bytes || bytes === 0) return "0 B";
|
|
const units = ["B", "KB", "MB", "GB", "TB"];
|
|
let value = bytes;
|
|
let unitIdx = 0;
|
|
while (value >= 1000 && unitIdx < units.length - 1) {
|
|
value /= 1000;
|
|
unitIdx++;
|
|
}
|
|
return `${value.toFixed(1)} ${units[unitIdx]}`;
|
|
}
|
|
|
|
/**
|
|
* Progress-bar class (full static strings so Tailwind's scanner emits them).
|
|
* `chart-2`=success, `chart-3`=warning, `destructive`=error, per design §2.3.
|
|
*/
|
|
function progressBarClass(pct: number): string {
|
|
if (pct < 70) {
|
|
return "h-3 [&_[data-slot=progress-indicator]]:bg-chart-2";
|
|
}
|
|
if (pct < 90) {
|
|
return "h-3 [&_[data-slot=progress-indicator]]:bg-chart-3";
|
|
}
|
|
return "h-3 [&_[data-slot=progress-indicator]]:bg-destructive";
|
|
}
|
|
|
|
/**
|
|
* Dashboard card that summarizes the configured media disk.
|
|
*
|
|
* Keeps the progress bar inside the card so the capacity signal, raw byte
|
|
* values, and free-space breakdown stay visually grouped. The used / free /
|
|
* total / percent breakdown is preserved verbatim from the MUI version.
|
|
*/
|
|
export function DiskSpaceCard({ used, available, size, usedPct }: Props) {
|
|
const pct = Math.max(0, Math.min(100, Number.parseFloat(usedPct) || 0));
|
|
const cells = [
|
|
{ label: "Used", value: formatBytes(used) },
|
|
{ label: "Free", value: formatBytes(available) },
|
|
{ label: "Total", value: formatBytes(size) },
|
|
];
|
|
|
|
return (
|
|
<Card className="h-full">
|
|
<CardContent className="flex flex-col gap-4">
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-sm uppercase tracking-wide text-muted-foreground">
|
|
Disk space
|
|
</span>
|
|
<span className="text-lg font-semibold">{usedPct} used</span>
|
|
</div>
|
|
<Progress value={pct} className={progressBarClass(pct)} />
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
|
{cells.map((cell) => (
|
|
<div
|
|
key={cell.label}
|
|
className="flex h-full flex-col items-center justify-center gap-1 rounded-lg bg-muted/50 p-3 text-center"
|
|
>
|
|
<span className="text-xs text-muted-foreground">
|
|
{cell.label}
|
|
</span>
|
|
<span className="text-sm font-semibold">{cell.value}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|