homeio

1"use client";
2
3import {
4  InfoBanner,
5  SectionDivider,
6  Toggle,
7} from "@/modules/settings/components/panel/controls";
8import {
9  SETTINGS_PANEL_INSET,
10} from "@/modules/settings/components/panel/surface";
11import type { SettingsBackend } from "@/modules/settings/components/panel/types";
12import { RefreshCw } from "@/components/icons/platform-icons";
13import { cn } from "@/lib/utils";
14
15type UpdatesSectionProps = {
16  data: SettingsBackend["updates"];
17  capabilities: SettingsBackend["capabilities"]["updates"];
18  onCheckForUpdates: () => void;
19  onApplyUpdate: () => void;
20  autoCheckEnabled: boolean;
21  onToggleAutoCheck: (enabled: boolean) => void;
22};
23
24export function UpdatesSection({
25  data,
26  capabilities,
27  onCheckForUpdates,
28  onApplyUpdate,
29  autoCheckEnabled,
30  onToggleAutoCheck,
31}: UpdatesSectionProps) {
32  const hasUpdate = data.updateAvailable && !!data.latestVersion;
33  const lastCheckedLabel = data.checkedAt
34    ? new Date(data.checkedAt).toLocaleString()
35    : "Never";
36
37  return (
38    <div className="flex flex-col gap-1">
39      {data.warning && (
40        <InfoBanner text={data.warning} variant={data.unavailable ? "warning" : "info"} />
41      )}
42      {data.checkError && <InfoBanner text={data.checkError} variant="warning" />}
43      {data.applyError && <InfoBanner text={data.applyError} variant="warning" />}
44      {data.isRecoveryActive && (
45        <InfoBanner
46          text="Homeio is restarting to finish the update. This page will reconnect automatically."
47          variant="info"
48        />
49      )}
50
51      {/* ── Status card ── */}
52      <SectionDivider title="Homeio" />
53      <div className={cn(SETTINGS_PANEL_INSET, "overflow-hidden")}>
54        {/* Header row */}
55        <div className="flex items-center justify-between gap-3 px-4 py-3">
56          <div className="flex items-center gap-2.5">
57            <div className={cn(
58              "size-2 rounded-full",
59              hasUpdate ? "bg-status-amber" : "bg-status-green",
60            )} />
61            <span className="text-sm font-medium text-foreground">
62              {hasUpdate ? `v${data.latestVersion} available` : "Up to date"}
63            </span>
64          </div>
65          <div className="flex items-center gap-1.5">
66            <button
67              onClick={onCheckForUpdates}
68              disabled={capabilities.checkForUpdates.disabled || data.isChecking || data.isRecoveryActive}
69              className="inline-flex items-center gap-1.5 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"
70            >
71              <RefreshCw className={cn("size-3", data.isChecking && "animate-spin")} />
72              {data.isChecking ? "Checking…" : "Check"}
73            </button>
74            {hasUpdate && (
75              <button
76                onClick={onApplyUpdate}
77                disabled={capabilities.updateHomeio.disabled || data.isApplying || data.isRecoveryActive}
78                className="inline-flex items-center gap-1.5 rounded-lg bg-primary/15 px-3 py-1.5 text-xs font-medium text-primary transition-colors hover:bg-primary/25 disabled:cursor-not-allowed disabled:opacity-50"
79              >
80                {data.isApplying || data.isRecoveryActive ? "Updating…" : "Update"}
81              </button>
82            )}
83          </div>
84        </div>
85
86        {/* Version rows */}
87        <div className="divide-y divide-glass-border/50 border-t border-glass-border/50 px-4">
88          <div className="flex items-center justify-between py-2.5">
89            <span className="text-xs text-muted-foreground">Current version</span>
90            <span className="font-mono text-xs font-medium text-foreground">{data.currentVersion}</span>
91          </div>
92          <div className="flex items-center justify-between py-2.5">
93            <span className="text-xs text-muted-foreground">Latest version</span>
94            <span className="font-mono text-xs font-medium text-foreground">
95              {data.latestVersion ?? "—"}
96            </span>
97          </div>
98          <div className="flex items-center justify-between py-2.5">
99            <span className="text-xs text-muted-foreground">Last checked</span>
100            <span className="text-xs text-foreground">{lastCheckedLabel}</span>
101          </div>
102        </div>
103      </div>
104
105      {/* ── Preferences ── */}
106      <SectionDivider title="Preferences" />
107      <div className={cn(SETTINGS_PANEL_INSET, "px-4 py-1")}>
108        <Toggle
109          label="Auto-check for updates"
110          description="Check for new updates daily"
111          enabled={autoCheckEnabled}
112          onToggle={() => onToggleAutoCheck(!autoCheckEnabled)}
113          disabled={capabilities.autoCheck.disabled}
114          disabledReason={capabilities.autoCheck.disabledReason}
115        />
116      </div>
117    </div>
118  );
119}
120