homeio

1"use client";
2
3import { useUpdateReminder } from "@/modules/system/hooks/useUpdateReminder";
4
5const DOCKER_UPDATE_COMMAND = "docker compose pull && docker compose up -d";
6
7type UpdateReminderBarProps = {
8  currentVersion: string | null;
9  latestVersion: string;
10  canSelfUpdate: boolean;
11  isApplying: boolean;
12  error: string | null;
13  onLater: () => void;
14  onDetails: () => void;
15  onUpdate: () => void;
16};
17
18/** Floating bar above the dock, in the same style as the uninstall confirmation. */
19export function UpdateReminderBar({
20  currentVersion,
21  latestVersion,
22  canSelfUpdate,
23  isApplying,
24  error,
25  onLater,
26  onDetails,
27  onUpdate,
28}: UpdateReminderBarProps) {
29  return (
30    <div
31      role="status"
32      aria-live="polite"
33      aria-label="Homeio update available"
34      className="fixed bottom-[5.75rem] left-1/2 z-[140] w-[min(92vw,34rem)] -translate-x-1/2 animate-in fade-in slide-in-from-bottom-2 duration-200"
35    >
36      <div className="overflow-hidden rounded-[var(--system-radius-control)] border border-glass-border/50 bg-popover/90 shadow-[0_8px_32px_rgba(0,0,0,0.28)] backdrop-blur-2xl">
37        {/* On a phone the buttons wrap under the text instead of squeezing it. */}
38        <div className="flex flex-wrap items-center gap-x-4 gap-y-2 px-4 py-3">
39          <div className="flex min-w-0 flex-1 basis-48 items-center gap-3">
40            <span className="size-1.5 shrink-0 rounded-full bg-primary shadow-[0_0_10px_hsl(var(--primary)/0.55)]" />
41            <div className="min-w-0">
42              <p className="truncate text-sm text-foreground/80">
43                Homeio <span className="font-medium text-foreground">{latestVersion}</span> is available
44              </p>
45              {currentVersion ? (
46                <p className="truncate text-xs text-muted-foreground/70">You have {currentVersion}</p>
47              ) : null}
48            </div>
49          </div>
50
51          <div className="ml-auto flex shrink-0 items-center gap-2">
52            <button
53              type="button"
54              onClick={onLater}
55              disabled={isApplying}
56              className="h-8 rounded-[var(--system-radius-control)] border border-glass-border/60 bg-white/5 px-3 text-xs font-medium text-foreground/70 transition-colors hover:bg-white/8 hover:text-foreground disabled:opacity-50"
57            >
58              Later
59            </button>
60            <button
61              type="button"
62              onClick={onDetails}
63              disabled={isApplying}
64              className="h-8 rounded-[var(--system-radius-control)] border border-glass-border/60 bg-white/5 px-3 text-xs font-medium text-foreground/70 transition-colors hover:bg-white/8 hover:text-foreground disabled:opacity-50"
65            >
66              Details
67            </button>
68            {canSelfUpdate ? (
69              <button
70                type="button"
71                onClick={onUpdate}
72                disabled={isApplying}
73                className="h-8 rounded-[var(--system-radius-control)] border border-primary/25 bg-primary/15 px-3 text-xs font-medium text-primary transition-colors hover:bg-primary/25 disabled:opacity-50"
74              >
75                {isApplying ? "Starting…" : "Update now"}
76              </button>
77            ) : null}
78          </div>
79        </div>
80
81        {!canSelfUpdate ? (
82          <div className="border-t border-glass-border/40 px-4 py-2 text-xs text-muted-foreground/80">
83            Running in Docker: update from the folder with your compose file with{" "}
84            <code className="rounded bg-black/30 px-1.5 py-0.5 font-mono text-[11px] text-foreground/85">
85              {DOCKER_UPDATE_COMMAND}
86            </code>
87          </div>
88        ) : null}
89
90        {error ? (
91          <div className="border-t border-glass-border/40 px-4 py-2">
92            <div className="inline-flex items-center gap-2 rounded-full border border-status-red/18 bg-black/26 px-3 py-1.5 backdrop-blur-xl">
93              <span className="size-1.5 shrink-0 rounded-full bg-status-red shadow-[0_0_10px_rgba(239,68,68,0.45)]" />
94              <p className="text-xs tracking-[0.01em] text-status-red/92">{error}</p>
95            </div>
96          </div>
97        ) : null}
98      </div>
99    </div>
100  );
101}
102
103type UpdateReminderProps = {
104  /** False while the desktop is locked or in demo mode. */
105  enabled: boolean;
106  onOpenDetails: () => void;
107};
108
109export function UpdateReminder({ enabled, onOpenDetails }: UpdateReminderProps) {
110  const reminder = useUpdateReminder({ enabled });
111
112  if (!reminder.visible || !reminder.latestVersion) return null;
113
114  return (
115    <UpdateReminderBar
116      currentVersion={reminder.currentVersion}
117      latestVersion={reminder.latestVersion}
118      canSelfUpdate={reminder.canSelfUpdate}
119      isApplying={reminder.isApplying}
120      error={reminder.error}
121      onLater={reminder.later}
122      onDetails={() => {
123        // Settings → Updates has its own Update button; the bar would only cover it.
124        reminder.later();
125        onOpenDetails();
126      }}
127      onUpdate={() => void reminder.update()}
128    />
129  );
130}
131