homeio

1"use client";
2
3import { useState } from "react";
4import { toast } from "sonner";
5import { cn } from "@/lib/utils";
6import { PANEL_INSET } from "@/lib/ui/surface-tokens";
7import {
8  useDisks,
9  useDiskFormat,
10  useDiskMount,
11  useDiskUnmount,
12  useDiskCreatePartition,
13  useDiskDeletePartition,
14  useDiskWipe,
15} from "@/modules/system/hooks/useDisks";
16import type { DiskDevice, DiskFilesystem, DiskPartition } from "@/lib/shared/contracts/disks";
17import { DISK_FILESYSTEMS } from "@/lib/shared/contracts/disks";
18import {
19  RefreshCw    as ArrowSyncRegular,
20  HardDrive    as HardDriveRegular,
21  AlertTriangle as WarningRegular,
22  X            as DismissRegular,
23  Check        as CheckmarkRegular,
24  Download     as ArrowDownloadRegular,
25  Upload       as ArrowUploadRegular,
26  Trash2       as DeleteRegular,
27  Plus         as AddRegular,
28} from "@/components/icons/platform-icons";
29
30// ─── helpers ──────────────────────────────────────────────────────────────────
31
32function formatBytes(bytes: number | null): string {
33  if (bytes === null) return "—";
34  if (bytes >= 1e12) return `${(bytes / 1e12).toFixed(1)} TB`;
35  if (bytes >= 1e9) return `${(bytes / 1e9).toFixed(1)} GB`;
36  if (bytes >= 1e6) return `${(bytes / 1e6).toFixed(0)} MB`;
37  return `${(bytes / 1e3).toFixed(0)} KB`;
38}
39
40const FS_COLOR: Record<string, string> = {
41  ext4: "bg-primary/70",
42  ext3: "bg-primary/50",
43  btrfs: "bg-violet-500/70",
44  xfs: "bg-emerald-500/70",
45  ntfs: "bg-orange-400/70",
46  vfat: "bg-sky-400/70",
47  exfat: "bg-sky-500/60",
48  swap: "bg-status-red/60",
49};
50
51function fsColor(fstype: string | null): string {
52  return fstype ? (FS_COLOR[fstype.toLowerCase()] ?? "bg-muted-foreground/30") : "bg-muted-foreground/20";
53}
54
55const MEDIA_BADGE: Record<string, { label: string; color: string }> = {
56  nvme:      { label: "NVMe",      color: "text-violet-400" },
57  ssd:       { label: "SSD",       color: "text-sky-400" },
58  hdd:       { label: "HDD",       color: "text-amber-400" },
59  removable: { label: "USB",       color: "text-emerald-400" },
60  unknown:   { label: "Disk",      color: "text-muted-foreground/60" },
61};
62
63// ─── sub-components ───────────────────────────────────────────────────────────
64
65function DiskCard({ disk, selected, onClick }: { disk: DiskDevice; selected: boolean; onClick: () => void }) {
66  const badge = MEDIA_BADGE[disk.mediaType] ?? MEDIA_BADGE.unknown!;
67  return (
68    <button
69      onClick={onClick}
70      className={cn(
71        "flex w-full flex-col gap-1 rounded-xl border px-3 py-2.5 text-left transition-colors",
72        selected
73          ? "border-primary/40 bg-primary/10 text-foreground"
74          : "border-glass-border bg-background/40 text-muted-foreground hover:bg-background/60 hover:text-foreground",
75      )}
76    >
77      <div className="flex items-center gap-2">
78        <HardDriveRegular className={cn("size-3.5 shrink-0", selected ? "text-primary" : badge.color)} />
79        <span className="truncate text-[13px] font-medium">{disk.device}</span>
80      </div>
81      {disk.model && (
82        <p className="truncate pl-5 text-[11px] text-muted-foreground/70">{disk.model}</p>
83      )}
84      <div className="flex items-center gap-2 pl-5">
85        <span className={cn("text-[11px] font-medium", badge.color)}>{badge.label}</span>
86        <span className="text-[11px] text-muted-foreground/60">{formatBytes(disk.sizeBytes)}</span>
87        <span className="text-[11px] text-muted-foreground/40">{disk.partitions.length}p</span>
88      </div>
89    </button>
90  );
91}
92
93function PartitionBar({ partitions, totalBytes }: { partitions: DiskPartition[]; totalBytes: number | null }) {
94  if (!totalBytes || totalBytes === 0) return null;
95
96  const sized = partitions.filter((p) => p.sizeBytes !== null && p.sizeBytes > 0);
97  const usedBytes = sized.reduce((s, p) => s + (p.sizeBytes ?? 0), 0);
98  const freeBytes = Math.max(0, totalBytes - usedBytes);
99  const freePct = (freeBytes / totalBytes) * 100;
100
101  return (
102    <div className="flex h-6 w-full overflow-hidden rounded-lg border border-glass-border/60">
103      {sized.map((p) => {
104        const pct = ((p.sizeBytes ?? 0) / totalBytes) * 100;
105        return (
106          <div
107            key={p.name}
108            title={`${p.device} — ${p.fstype ?? "unformatted"} — ${formatBytes(p.sizeBytes)}`}
109            className={cn("h-full transition-all", fsColor(p.fstype))}
110            style={{ width: `${pct}%` }}
111          />
112        );
113      })}
114      {freePct > 0.5 && (
115        <div
116          className="h-full flex-1 bg-background/50"
117          title={`Unallocated — ${formatBytes(freeBytes)}`}
118        />
119      )}
120    </div>
121  );
122}
123
124// ─── confirm banner ───────────────────────────────────────────────────────────
125
126type ConfirmState =
127  | { type: "format"; device: string; filesystem: DiskFilesystem; label: string }
128  | { type: "delete"; device: string }
129  | { type: "wipe"; disk: string };
130
131function ConfirmBanner({
132  state,
133  onConfirm,
134  onCancel,
135  isPending,
136}: {
137  state: ConfirmState;
138  onConfirm: () => void;
139  onCancel: () => void;
140  isPending: boolean;
141}) {
142  const messages: Record<ConfirmState["type"], string> = {
143    format: `Format ${state.type === "format" ? state.device : ""} as ${state.type === "format" ? state.filesystem : ""}? All data will be lost.`,
144    delete: `Delete partition ${state.type === "delete" ? state.device : ""}? This cannot be undone.`,
145    wipe: `Wipe all data and partitions from ${state.type === "wipe" ? state.disk : ""}? This is irreversible.`,
146  };
147
148  return (
149    <div className="flex items-center gap-3 rounded-xl border border-status-red/30 bg-status-red/10 px-4 py-2.5">
150      <WarningRegular className="size-4 shrink-0 text-status-red" />
151      <p className="flex-1 text-[12px] text-foreground">{messages[state.type]}</p>
152      <div className="flex items-center gap-1.5">
153        <button
154          onClick={onCancel}
155          disabled={isPending}
156          className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[12px] text-muted-foreground transition-colors hover:bg-background/60 hover:text-foreground"
157        >
158          <DismissRegular className="size-3.5" />
159          Cancel
160        </button>
161        <button
162          onClick={onConfirm}
163          disabled={isPending}
164          className="flex items-center gap-1.5 rounded-lg bg-status-red/20 px-3 py-1.5 text-[12px] font-medium text-status-red transition-colors hover:bg-status-red/30 disabled:opacity-50"
165        >
166          <CheckmarkRegular className="size-3.5" />
167          {isPending ? "Working…" : "Confirm"}
168        </button>
169      </div>
170    </div>
171  );
172}
173
174// ─── mount form ───────────────────────────────────────────────────────────────
175
176function MountForm({
177  device,
178  onMount,
179  onCancel,
180  isPending,
181}: {
182  device: string;
183  onMount: (mountPoint: string, addToFstab: boolean) => void;
184  onCancel: () => void;
185  isPending: boolean;
186}) {
187  const safeName = device.replace(/[^a-zA-Z0-9]/g, "_").replace(/^_+/, "");
188  const [mountPoint, setMountPoint] = useState(`/mnt/${safeName}`);
189  const [addToFstab, setAddToFstab] = useState(false);
190
191  return (
192    <div className={cn(PANEL_INSET, "flex flex-col gap-3 p-3")}>
193      <p className="text-[12px] font-medium text-foreground">Mount {device}</p>
194      <div className="flex flex-col gap-1.5">
195        <label className="text-[11px] text-muted-foreground">Mount point</label>
196        <input
197          value={mountPoint}
198          onChange={(e) => setMountPoint(e.target.value)}
199          className="rounded-lg border border-glass-border bg-background/55 px-3 py-1.5 text-[12px] text-foreground outline-none focus:border-primary/40"
200          placeholder="/mnt/data"
201        />
202      </div>
203      <label className="flex items-center gap-2 text-[12px] text-muted-foreground">
204        <input
205          type="checkbox"
206          checked={addToFstab}
207          onChange={(e) => setAddToFstab(e.target.checked)}
208          className="rounded"
209        />
210        Auto-mount at boot (add to /etc/fstab)
211      </label>
212      <div className="flex items-center justify-end gap-1.5">
213        <button
214          onClick={onCancel}
215          className="rounded-lg px-3 py-1.5 text-[12px] text-muted-foreground transition-colors hover:bg-background/60 hover:text-foreground"
216        >
217          Cancel
218        </button>
219        <button
220          onClick={() => onMount(mountPoint, addToFstab)}
221          disabled={isPending || !mountPoint.startsWith("/")}
222          className="rounded-lg bg-primary/20 px-3 py-1.5 text-[12px] font-medium text-primary transition-colors hover:bg-primary/30 disabled:opacity-50"
223        >
224          {isPending ? "Mounting…" : "Mount"}
225        </button>
226      </div>
227    </div>
228  );
229}
230
231// ─── format form ──────────────────────────────────────────────────────────────
232
233function FormatForm({
234  device,
235  onFormat,
236  onCancel,
237}: {
238  device: string;
239  onFormat: (filesystem: DiskFilesystem, label: string) => void;
240  onCancel: () => void;
241}) {
242  const [filesystem, setFilesystem] = useState<DiskFilesystem>("ext4");
243  const [label, setLabel] = useState("");
244
245  return (
246    <div className={cn(PANEL_INSET, "flex flex-col gap-3 p-3")}>
247      <p className="text-[12px] font-medium text-foreground">Format {device}</p>
248      <div className="flex gap-3">
249        <div className="flex flex-1 flex-col gap-1.5">
250          <label className="text-[11px] text-muted-foreground">Filesystem</label>
251          <select
252            value={filesystem}
253            onChange={(e) => setFilesystem(e.target.value as DiskFilesystem)}
254            className="rounded-lg border border-glass-border bg-background/55 px-3 py-1.5 text-[12px] text-foreground outline-none focus:border-primary/40"
255          >
256            {DISK_FILESYSTEMS.map((fs) => (
257              <option key={fs} value={fs}>{fs}</option>
258            ))}
259          </select>
260        </div>
261        <div className="flex flex-1 flex-col gap-1.5">
262          <label className="text-[11px] text-muted-foreground">Label (optional)</label>
263          <input
264            value={label}
265            onChange={(e) => setLabel(e.target.value)}
266            placeholder="data"
267            className="rounded-lg border border-glass-border bg-background/55 px-3 py-1.5 text-[12px] text-foreground outline-none focus:border-primary/40"
268          />
269        </div>
270      </div>
271      <div className="flex items-center justify-end gap-1.5">
272        <button
273          onClick={onCancel}
274          className="rounded-lg px-3 py-1.5 text-[12px] text-muted-foreground transition-colors hover:bg-background/60 hover:text-foreground"
275        >
276          Cancel
277        </button>
278        <button
279          onClick={() => onFormat(filesystem, label)}
280          className="rounded-lg bg-status-amber/20 px-3 py-1.5 text-[12px] font-medium text-status-amber transition-colors hover:bg-status-amber/30"
281        >
282          Continue →
283        </button>
284      </div>
285    </div>
286  );
287}
288
289// ─── create partition form ────────────────────────────────────────────────────
290
291function CreatePartitionForm({
292  disk,
293  onCreate,
294  onCancel,
295  isPending,
296}: {
297  disk: string;
298  onCreate: (start: string, end: string) => void;
299  onCancel: () => void;
300  isPending: boolean;
301}) {
302  const [start, setStart] = useState("1MiB");
303  const [end, setEnd] = useState("100%");
304
305  return (
306    <div className={cn(PANEL_INSET, "flex flex-col gap-3 p-3")}>
307      <p className="text-[12px] font-medium text-foreground">New partition on {disk}</p>
308      <div className="flex gap-3">
309        {[
310          { label: "Start", value: start, setter: setStart, placeholder: "1MiB or 0%" },
311          { label: "End", value: end, setter: setEnd, placeholder: "100% or 50GiB" },
312        ].map(({ label, value, setter, placeholder }) => (
313          <div key={label} className="flex flex-1 flex-col gap-1.5">
314            <label className="text-[11px] text-muted-foreground">{label}</label>
315            <input
316              value={value}
317              onChange={(e) => setter(e.target.value)}
318              placeholder={placeholder}
319              className="rounded-lg border border-glass-border bg-background/55 px-3 py-1.5 text-[12px] font-mono text-foreground outline-none focus:border-primary/40"
320            />
321          </div>
322        ))}
323      </div>
324      <p className="text-[11px] text-muted-foreground/60">
325        Use % for proportional (e.g. 0%, 100%) or size units (1MiB, 50GiB).
326      </p>
327      <div className="flex items-center justify-end gap-1.5">
328        <button
329          onClick={onCancel}
330          className="rounded-lg px-3 py-1.5 text-[12px] text-muted-foreground transition-colors hover:bg-background/60 hover:text-foreground"
331        >
332          Cancel
333        </button>
334        <button
335          onClick={() => onCreate(start, end)}
336          disabled={isPending}
337          className="rounded-lg bg-primary/20 px-3 py-1.5 text-[12px] font-medium text-primary transition-colors hover:bg-primary/30 disabled:opacity-50"
338        >
339          {isPending ? "Creating…" : "Create"}
340        </button>
341      </div>
342    </div>
343  );
344}
345
346// ─── partition row ────────────────────────────────────────────────────────────
347
348function PartitionRow({
349  partition,
350  onFormat,
351  onMount,
352  onUnmount,
353  onDelete,
354}: {
355  partition: DiskPartition;
356  onFormat: () => void;
357  onMount: () => void;
358  onUnmount: () => void;
359  onDelete: () => void;
360}) {
361  const isMounted = Boolean(partition.mountpoint);
362
363  return (
364    <div className="grid grid-cols-[1.4fr_0.9fr_0.8fr_1.2fr_auto] items-center gap-3 px-4 py-2.5 text-xs transition-colors hover:bg-background/30">
365      <div className="flex items-center gap-2 min-w-0">
366        <div className={cn("size-2 shrink-0 rounded-sm", fsColor(partition.fstype))} />
367        <span className="font-mono font-medium text-foreground truncate">{partition.device}</span>
368      </div>
369      <span className="text-muted-foreground/80">{partition.fstype ?? <span className="text-muted-foreground/40">—</span>}</span>
370      <span className="font-mono text-muted-foreground/80">{formatBytes(partition.sizeBytes)}</span>
371      <span className={cn("font-mono truncate", isMounted ? "text-status-green" : "text-muted-foreground/40")}>
372        {partition.mountpoint ?? "—"}
373      </span>
374      <div className="flex items-center gap-1">
375        <button
376          onClick={onFormat}
377          title="Format"
378          className="rounded-md p-1 text-muted-foreground/50 transition-colors hover:bg-background/60 hover:text-status-amber"
379        >
380          <ArrowSyncRegular className="size-3.5" />
381        </button>
382        {isMounted ? (
383          <button
384            onClick={onUnmount}
385            title="Unmount"
386            className="rounded-md p-1 text-muted-foreground/50 transition-colors hover:bg-background/60 hover:text-foreground"
387          >
388            <ArrowUploadRegular className="size-3.5" />
389          </button>
390        ) : (
391          <button
392            onClick={onMount}
393            title="Mount"
394            className="rounded-md p-1 text-muted-foreground/50 transition-colors hover:bg-background/60 hover:text-primary"
395          >
396            <ArrowDownloadRegular className="size-3.5" />
397          </button>
398        )}
399        <button
400          onClick={onDelete}
401          title="Delete partition"
402          className="rounded-md p-1 text-muted-foreground/50 transition-colors hover:bg-background/60 hover:text-status-red"
403        >
404          <DeleteRegular className="size-3.5" />
405        </button>
406      </div>
407    </div>
408  );
409}
410
411// ─── disk detail panel ────────────────────────────────────────────────────────
412
413type ActiveForm =
414  | { type: "format"; device: string }
415  | { type: "mount"; device: string }
416  | { type: "create-partition" }
417  | null;
418
419function DiskDetail({ disk }: { disk: DiskDevice }) {
420  const [activeForm, setActiveForm] = useState<ActiveForm>(null);
421  const [confirmState, setConfirmState] = useState<ConfirmState | null>(null);
422  const [pendingFormat, setPendingFormat] = useState<{ filesystem: DiskFilesystem; label: string } | null>(null);
423
424  const formatMutation = useDiskFormat();
425  const mountMutation = useDiskMount();
426  const unmountMutation = useDiskUnmount();
427  const createPartitionMutation = useDiskCreatePartition();
428  const deletePartitionMutation = useDiskDeletePartition();
429  const wipeMutation = useDiskWipe();
430
431  const anyPending =
432    formatMutation.isPending ||
433    mountMutation.isPending ||
434    unmountMutation.isPending ||
435    createPartitionMutation.isPending ||
436    deletePartitionMutation.isPending ||
437    wipeMutation.isPending;
438
439  async function handleConfirm() {
440    if (!confirmState) return;
441    try {
442      if (confirmState.type === "format") {
443        await formatMutation.mutateAsync({
444          device: confirmState.device,
445          filesystem: confirmState.filesystem,
446          label: confirmState.label || undefined,
447        });
448        toast.success(`Formatted ${confirmState.device} as ${confirmState.filesystem}`);
449      } else if (confirmState.type === "delete") {
450        await deletePartitionMutation.mutateAsync({ device: confirmState.device });
451        toast.success(`Deleted partition ${confirmState.device}`);
452      } else if (confirmState.type === "wipe") {
453        await wipeMutation.mutateAsync({ disk: confirmState.disk });
454        toast.success(`Wiped disk ${confirmState.disk}`);
455      }
456    } catch (e) {
457      toast.error(e instanceof Error ? e.message : "Action failed");
458    } finally {
459      setConfirmState(null);
460      setPendingFormat(null);
461      setActiveForm(null);
462    }
463  }
464
465  function handleFormatSubmit(filesystem: DiskFilesystem, label: string) {
466    if (activeForm?.type !== "format") return;
467    setPendingFormat({ filesystem, label });
468    setConfirmState({ type: "format", device: activeForm.device, filesystem, label });
469    setActiveForm(null);
470  }
471
472  async function handleMount(mountPoint: string, addToFstab: boolean) {
473    if (activeForm?.type !== "mount") return;
474    try {
475      await mountMutation.mutateAsync({ device: activeForm.device, mountPoint, addToFstab });
476      toast.success(`Mounted ${activeForm.device} at ${mountPoint}`);
477      setActiveForm(null);
478    } catch (e) {
479      toast.error(e instanceof Error ? e.message : "Mount failed");
480    }
481  }
482
483  async function handleUnmount(device: string) {
484    try {
485      await unmountMutation.mutateAsync({ device });
486      toast.success(`Unmounted ${device}`);
487    } catch (e) {
488      toast.error(e instanceof Error ? e.message : "Unmount failed");
489    }
490  }
491
492  async function handleCreatePartition(start: string, end: string) {
493    try {
494      await createPartitionMutation.mutateAsync({ disk: disk.device, start, end });
495      toast.success("Partition created");
496      setActiveForm(null);
497    } catch (e) {
498      toast.error(e instanceof Error ? e.message : "Create failed");
499    }
500  }
501
502  return (
503    <div className="flex flex-1 flex-col gap-3 overflow-y-auto p-3">
504      {/* Disk header */}
505      <div className={cn(PANEL_INSET, "flex items-center gap-3 px-4 py-3")}>
506        <div className="flex size-9 shrink-0 items-center justify-center rounded-xl border border-glass-border bg-background/55">
507          <HardDriveRegular className="size-4 text-primary" />
508        </div>
509        <div className="min-w-0 flex-1">
510          <p className="truncate text-sm font-semibold text-foreground">
511            {disk.model ?? disk.device}
512          </p>
513          <p className="font-mono text-[11px] text-muted-foreground/70">
514            {disk.device} · {formatBytes(disk.sizeBytes)} · {MEDIA_BADGE[disk.mediaType]?.label ?? "Disk"}
515          </p>
516        </div>
517        {disk.serial && (
518          <span className="font-mono text-[11px] text-muted-foreground/50">{disk.serial}</span>
519        )}
520      </div>
521
522      {/* Partition bar */}
523      {disk.partitions.length > 0 && (
524        <PartitionBar partitions={disk.partitions} totalBytes={disk.sizeBytes} />
525      )}
526
527      {/* Partition table */}
528      <div className={cn(PANEL_INSET, "overflow-hidden")}>
529        <div className="grid grid-cols-[1.4fr_0.9fr_0.8fr_1.2fr_auto] gap-3 border-b border-glass-border/50 px-4 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground/50">
530          <span>Partition</span>
531          <span>Filesystem</span>
532          <span>Size</span>
533          <span>Mount Point</span>
534          <span />
535        </div>
536
537        {disk.partitions.length === 0 ? (
538          <p className="px-4 py-6 text-center text-sm text-muted-foreground/60">
539            No partitions found
540          </p>
541        ) : (
542          <div className="divide-y divide-glass-border/40">
543            {disk.partitions.map((partition) => (
544              <PartitionRow
545                key={partition.name}
546                partition={partition}
547                onFormat={() => setActiveForm({ type: "format", device: partition.device })}
548                onMount={() => setActiveForm({ type: "mount", device: partition.device })}
549                onUnmount={() => handleUnmount(partition.device)}
550                onDelete={() => setConfirmState({ type: "delete", device: partition.device })}
551              />
552            ))}
553          </div>
554        )}
555      </div>
556
557      {/* Inline forms */}
558      {activeForm?.type === "format" && (
559        <FormatForm
560          device={activeForm.device}
561          onFormat={handleFormatSubmit}
562          onCancel={() => setActiveForm(null)}
563        />
564      )}
565
566      {activeForm?.type === "mount" && (
567        <MountForm
568          device={activeForm.device}
569          onMount={handleMount}
570          onCancel={() => setActiveForm(null)}
571          isPending={mountMutation.isPending}
572        />
573      )}
574
575      {activeForm?.type === "create-partition" && (
576        <CreatePartitionForm
577          disk={disk.device}
578          onCreate={handleCreatePartition}
579          onCancel={() => setActiveForm(null)}
580          isPending={createPartitionMutation.isPending}
581        />
582      )}
583
584      {/* Confirm banner */}
585      {confirmState && (
586        <ConfirmBanner
587          state={confirmState}
588          onConfirm={handleConfirm}
589          onCancel={() => { setConfirmState(null); setPendingFormat(null); }}
590          isPending={anyPending}
591        />
592      )}
593
594      {/* Disk-level actions */}
595      <div className="flex items-center justify-between">
596        <button
597          onClick={() => setActiveForm({ type: "create-partition" })}
598          disabled={anyPending}
599          className="flex items-center gap-1.5 rounded-xl border border-glass-border bg-background/40 px-3 py-2 text-[12px] text-muted-foreground transition-colors hover:bg-background/70 hover:text-foreground disabled:opacity-40"
600        >
601          <AddRegular className="size-3.5" />
602          Create Partition
603        </button>
604        <button
605          onClick={() => setConfirmState({ type: "wipe", disk: disk.device })}
606          disabled={anyPending}
607          className="flex items-center gap-1.5 rounded-xl border border-status-red/25 bg-status-red/8 px-3 py-2 text-[12px] text-status-red transition-colors hover:bg-status-red/15 disabled:opacity-40"
608        >
609          <WarningRegular className="size-3.5" />
610          Wipe Disk
611        </button>
612      </div>
613    </div>
614  );
615}
616
617// ─── DiskManager (root) ───────────────────────────────────────────────────────
618
619export function DiskManager() {
620  const { data, isLoading, refetch, isRefetching } = useDisks();
621  const [selectedDisk, setSelectedDisk] = useState<string | null>(null);
622
623  const disks = data?.disks ?? [];
624  const active = disks.find((d) => d.name === selectedDisk) ?? disks[0] ?? null;
625
626  return (
627    <div className="flex h-full flex-col">
628      {/* Header */}
629      <div className="flex shrink-0 items-center justify-between border-b border-glass-border/60 px-4 py-2.5">
630        <span className="text-[13px] font-medium text-foreground">
631          {isLoading ? "Loading…" : `${disks.length} disk${disks.length !== 1 ? "s" : ""} detected`}
632        </span>
633        <button
634          onClick={() => refetch()}
635          disabled={isRefetching}
636          className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[12px] text-muted-foreground transition-colors hover:bg-background/60 hover:text-foreground disabled:opacity-50"
637        >
638          <ArrowSyncRegular className={cn("size-3.5", isRefetching && "animate-spin")} />
639          Refresh
640        </button>
641      </div>
642
643      {data?.readOnly ? (
644        <p className="shrink-0 border-b border-glass-border/60 px-4 py-2 text-[11px] text-muted-foreground">
645          Homeio runs in Docker, so disks are shown read-only: formatting, partitioning, mounting and
646          wiping need the script install on the host.
647        </p>
648      ) : null}
649
650      {/* Body */}
651      <div className="flex flex-1 overflow-hidden">
652        {/* Disk list sidebar */}
653        <div className="flex w-52 shrink-0 flex-col gap-1.5 overflow-y-auto border-r border-glass-border/60 p-2">
654          {isLoading ? (
655            <p className="px-3 py-4 text-center text-xs text-muted-foreground/60">Detecting disks…</p>
656          ) : disks.length === 0 ? (
657            <p className="px-3 py-4 text-center text-xs text-muted-foreground/60">
658              {data?.unavailableReason ?? "No disks found"}
659            </p>
660          ) : (
661            disks.map((disk) => (
662              <DiskCard
663                key={disk.name}
664                disk={disk}
665                selected={disk.name === (active?.name ?? "")}
666                onClick={() => setSelectedDisk(disk.name)}
667              />
668            ))
669          )}
670        </div>
671
672        {/* Detail panel */}
673        {active ? (
674          // disabled on a fieldset disables every button inside it.
675          <fieldset disabled={data?.readOnly} className="m-0 flex min-w-0 flex-1 border-0 p-0">
676            <DiskDetail key={active.name} disk={active} />
677          </fieldset>
678        ) : (
679          <div className="flex flex-1 items-center justify-center">
680            <div className="flex flex-col items-center gap-2 text-center">
681              <HardDriveRegular className="size-10 text-muted-foreground/20" />
682              <p className="text-sm text-muted-foreground/60">Select a disk</p>
683            </div>
684          </div>
685        )}
686      </div>
687    </div>
688  );
689}
690