homeio

1"use client";
2
3import { InfoBanner, SectionDivider } from "@/modules/settings/components/panel/controls";
4import { SETTINGS_PANEL_INSET } from "@/modules/settings/components/panel/surface";
5import type { SettingsBackend } from "@/modules/settings/components/panel/types";
6import { cn } from "@/lib/utils";
7
8type DockerSectionProps = {
9  data: SettingsBackend["docker"];
10  capabilities: SettingsBackend["capabilities"]["docker"];
11  onPruneImages: () => Promise<void>;
12  onPruneVolumes: () => Promise<void>;
13};
14
15function StatCard({ label, value, valueClass }: { label: string; value: number | string; valueClass?: string }) {
16  return (
17    <div className={cn(SETTINGS_PANEL_INSET, "flex flex-col items-center justify-center gap-1 py-3")}>
18      <span className={cn("text-2xl font-bold tabular-nums", valueClass ?? "text-foreground")}>{value}</span>
19      <span className="text-[11px] text-muted-foreground">{label}</span>
20    </div>
21  );
22}
23
24function InfoRow({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
25  return (
26    <div className="flex items-center justify-between gap-4 py-2.5">
27      <span className="text-xs text-muted-foreground">{label}</span>
28      <span className={cn("text-xs font-medium text-foreground", mono && "font-mono")}>{value}</span>
29    </div>
30  );
31}
32
33function MaintenanceRow({
34  label,
35  description,
36  pending,
37  disabled,
38  disabledReason,
39  onClick,
40}: {
41  label: string;
42  description: string;
43  pending: boolean;
44  disabled: boolean;
45  disabledReason?: string;
46  onClick: () => void;
47}) {
48  return (
49    <div className={cn(SETTINGS_PANEL_INSET, "flex items-center justify-between gap-4 px-4 py-3")}>
50      <div className="min-w-0">
51        <div className="text-sm text-foreground">{label}</div>
52        <div className="mt-0.5 text-[11px] text-muted-foreground/70">{description}</div>
53      </div>
54      <button
55        onClick={onClick}
56        disabled={disabled || pending}
57        title={disabledReason}
58        className="shrink-0 rounded-lg border border-glass-border bg-background/55 px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
59      >
60        {pending ? "Running…" : "Run"}
61      </button>
62    </div>
63  );
64}
65
66export function DockerSection({ data, capabilities, onPruneImages, onPruneVolumes }: DockerSectionProps) {
67  return (
68    <div className="flex flex-col gap-1">
69      {data.warning && (
70        <InfoBanner text={data.warning} variant={data.unavailable ? "warning" : "info"} />
71      )}
72
73      {/* ── Engine Status ── */}
74      <SectionDivider title="Engine" />
75      <div className="grid grid-cols-3 gap-2">
76        <StatCard label="Containers" value={data.total} />
77        <StatCard label="Running" value={data.running} valueClass="text-status-green" />
78        <StatCard label="Images" value={data.images} />
79      </div>
80
81      <div className={cn(SETTINGS_PANEL_INSET, "mt-1.5 divide-y divide-glass-border/50 px-4")}>
82        <InfoRow label="Docker version" value={data.engineVersion} mono />
83        <InfoRow label="Compose version" value={data.composeVersion} mono />
84        <InfoRow label="Storage driver" value={data.storageDriver} />
85        <InfoRow label="Cgroup driver" value={data.cgroupDriver} />
86      </div>
87
88      {/* ── Maintenance ── */}
89      <SectionDivider title="Maintenance" />
90      {data.pruneImages.error && <InfoBanner text={data.pruneImages.error} variant="warning" />}
91      {data.pruneVolumes.error && <InfoBanner text={data.pruneVolumes.error} variant="warning" />}
92
93      <div className="flex flex-col gap-1.5">
94        <MaintenanceRow
95          label="Prune unused images"
96          description="Removes dangling and unreferenced images"
97          pending={data.pruneImages.isPending}
98          disabled={capabilities.pruneImages.disabled}
99          disabledReason={capabilities.pruneImages.disabledReason}
100          onClick={() => void onPruneImages()}
101        />
102        <MaintenanceRow
103          label="Prune unused volumes"
104          description="Removes volumes not attached to any container"
105          pending={data.pruneVolumes.isPending}
106          disabled={capabilities.pruneVolumes.disabled}
107          disabledReason={capabilities.pruneVolumes.disabledReason}
108          onClick={() => void onPruneVolumes()}
109        />
110      </div>
111    </div>
112  );
113}
114