homeio

1"use client";
2
3import {
4  AlertTriangle,
5  Check,
6  ChevronRight,
7  Copy,
8  Download,
9  Eye,
10  EyeOff,
11  Info,
12} from "@/components/icons/platform-icons";
13import { SETTINGS_BADGE_SURFACE } from "@/modules/settings/components/panel/surface";
14import type { ControlAvailability } from "@/modules/settings/components/panel/types";
15import {
16  createContext,
17  useContext,
18  useState,
19  type ChangeEvent,
20  type ReactNode,
21} from "react";
22
23const ControlAvailabilityContext = createContext<ControlAvailability>({
24  disabled: false,
25});
26
27export function ControlAvailabilityProvider({
28  value,
29  children,
30}: {
31  value: ControlAvailability;
32  children: ReactNode;
33}) {
34  return (
35    <ControlAvailabilityContext.Provider value={value}>
36      {children}
37    </ControlAvailabilityContext.Provider>
38  );
39}
40
41export function useControlAvailability(
42  overrideDisabled?: boolean,
43  overrideReason?: string,
44) {
45  const context = useContext(ControlAvailabilityContext);
46  const disabled =
47    overrideDisabled !== undefined
48      ? overrideDisabled
49      : Boolean(context.disabled);
50
51  const disabledReason =
52    overrideReason !== undefined
53      ? overrideReason
54      : disabled
55        ? context.disabledReason
56        : undefined;
57
58  return {
59    disabled,
60    disabledReason,
61  };
62}
63
64export function ControlDisabledHint({ text }: { text?: string }) {
65  if (!text) return null;
66  return <span className="text-xs text-status-amber">{text}</span>;
67}
68
69export function Toggle({
70  enabled,
71  onToggle,
72  label,
73  description,
74  disabled,
75  disabledReason,
76}: {
77  enabled: boolean;
78  onToggle: () => void;
79  label: string;
80  description?: string;
81  disabled?: boolean;
82  disabledReason?: string;
83}) {
84  const availability = useControlAvailability(disabled, disabledReason);
85
86  return (
87    <div className="flex items-center justify-between py-3">
88      <div className="flex flex-col gap-0.5">
89        <span className="text-sm text-foreground">{label}</span>
90        {description ? (
91          <span className="text-xs text-muted-foreground">{description}</span>
92        ) : null}
93        <ControlDisabledHint text={availability.disabledReason} />
94      </div>
95      <button
96        type="button"
97        role="switch"
98        aria-checked={enabled}
99        aria-label={`Toggle ${label}`}
100        onClick={availability.disabled ? undefined : onToggle}
101        disabled={availability.disabled}
102        className={`relative inline-flex h-5 w-10 shrink-0 items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 ${
103          availability.disabled
104            ? "cursor-not-allowed opacity-50"
105            : "cursor-pointer"
106        } ${enabled ? "bg-primary" : "bg-muted-foreground/30"}`}
107      >
108        <span
109          className={`pointer-events-none block size-5 rounded-full bg-white shadow-sm transition-transform ${
110            enabled ? "translate-x-5" : "translate-x-0"
111          }`}
112        />
113      </button>
114    </div>
115  );
116}
117
118export function SettingsInput({
119  label,
120  value,
121  placeholder,
122  type = "text",
123  onChange,
124  readOnly,
125  copyable,
126  description,
127  disabled,
128  disabledReason,
129}: {
130  label: string;
131  value: string;
132  placeholder?: string;
133  type?: string;
134  onChange?: (value: string) => void;
135  readOnly?: boolean;
136  copyable?: boolean;
137  description?: string;
138  disabled?: boolean;
139  disabledReason?: string;
140}) {
141  const [showPassword, setShowPassword] = useState(false);
142  const [copied, setCopied] = useState(false);
143  const isPassword = type === "password";
144  const availability = useControlAvailability(disabled, disabledReason);
145  const isReadOnly = readOnly || availability.disabled || !onChange;
146
147  return (
148    <div className="flex flex-col gap-1.5 py-2">
149      <label className="text-xs font-medium text-muted-foreground">
150        {label}
151      </label>
152      {description ? (
153        <span className="text-xs text-muted-foreground/70">{description}</span>
154      ) : null}
155      <ControlDisabledHint text={availability.disabledReason} />
156      <div className="flex items-center gap-2">
157        <div className="relative flex-1">
158          <input
159            type={isPassword && !showPassword ? "password" : "text"}
160            value={value}
161            placeholder={placeholder}
162            readOnly={isReadOnly}
163            disabled={availability.disabled}
164            onChange={(event) => {
165              if (!onChange || isReadOnly || availability.disabled) return;
166              onChange(event.target.value);
167            }}
168            className="h-8 w-full rounded-lg border border-glass-border bg-background/55 px-3 text-xs text-foreground placeholder:text-muted-foreground/60 transition-all focus:border-primary/40 focus:outline-none read-only:opacity-60 disabled:cursor-not-allowed disabled:opacity-50"
169          />
170          {isPassword ? (
171            <button
172              onClick={() => setShowPassword(!showPassword)}
173              className={`absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground ${
174                availability.disabled
175                  ? "cursor-not-allowed opacity-50"
176                  : "cursor-pointer hover:text-foreground"
177              }`}
178              disabled={availability.disabled}
179            >
180              {showPassword ? (
181                <EyeOff className="size-3.5" />
182              ) : (
183                <Eye className="size-3.5" />
184              )}
185            </button>
186          ) : null}
187        </div>
188        {copyable ? (
189          <button
190            onClick={() => {
191              navigator.clipboard.writeText(value);
192              setCopied(true);
193              setTimeout(() => setCopied(false), 2000);
194            }}
195            className={`p-1.5 rounded-lg text-muted-foreground transition-colors ${
196              availability.disabled
197                ? "cursor-not-allowed opacity-50"
198                : "cursor-pointer hover:bg-secondary/50 hover:text-foreground"
199            }`}
200            disabled={availability.disabled}
201          >
202            {copied ? (
203              <Check className="size-3.5 text-status-green" />
204            ) : (
205              <Copy className="size-3.5" />
206            )}
207          </button>
208        ) : null}
209      </div>
210    </div>
211  );
212}
213
214export function SettingsSelect({
215  label,
216  value,
217  options,
218  description,
219  onChange,
220  disabled,
221  disabledReason,
222}: {
223  label: string;
224  value: string;
225  options: readonly string[];
226  description?: string;
227  onChange?: (value: string) => void;
228  disabled?: boolean;
229  disabledReason?: string;
230}) {
231  const availability = useControlAvailability(disabled, disabledReason);
232
233  return (
234    <div className="flex flex-col gap-1.5 py-2">
235      <label className="text-xs font-medium text-muted-foreground">
236        {label}
237      </label>
238      {description ? (
239        <span className="text-xs text-muted-foreground/70">{description}</span>
240      ) : null}
241      <ControlDisabledHint text={availability.disabledReason} />
242      <select
243        {...(onChange
244          ? {
245              value,
246              onChange: (event: ChangeEvent<HTMLSelectElement>) =>
247                onChange(event.target.value),
248            }
249          : { value })}
250        disabled={availability.disabled}
251        className="h-8 cursor-pointer appearance-none rounded-lg border border-glass-border bg-background/55 px-3 text-xs text-foreground transition-all focus:border-primary/40 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
252      >
253        {options.map((option) => (
254          <option key={option} value={option}>
255            {option}
256          </option>
257        ))}
258      </select>
259    </div>
260  );
261}
262
263export function SectionDivider({ title }: { title: string }) {
264  return (
265    <div className="flex items-center gap-3 pt-5 pb-2">
266      <span className="text-xs font-semibold text-muted-foreground uppercase tracking-widest">
267        {title}
268      </span>
269      <div className="flex-1 h-px bg-glass-border" />
270    </div>
271  );
272}
273
274export function InfoBanner({
275  text,
276  variant = "info",
277}: {
278  text: string;
279  variant?: "info" | "warning";
280}) {
281  return (
282    <div
283      className={`flex items-start gap-2.5 rounded-xl p-3 text-xs ${
284        variant === "warning"
285          ? "bg-status-amber/10 border border-status-amber/20 text-status-amber"
286          : "bg-primary/8 border border-primary/15 text-primary"
287      }`}
288    >
289      {variant === "warning" ? (
290        <AlertTriangle className="size-4 shrink-0 mt-0.5" />
291      ) : (
292        <Info className="size-4 shrink-0 mt-0.5" />
293      )}
294      <span className="leading-relaxed">{text}</span>
295    </div>
296  );
297}
298
299export function StorageBar({
300  label,
301  detail,
302  pct,
303  color,
304}: {
305  label: string;
306  detail: string;
307  pct: number;
308  color: string;
309}) {
310  const safePct = Number.isFinite(pct) ? Math.max(0, Math.min(pct, 100)) : 0;
311
312  return (
313    <div className="py-2">
314      <div className="flex items-center justify-between mb-1.5">
315        <span className="text-xs text-foreground">{label}</span>
316        <span className="text-xs text-muted-foreground">{detail}</span>
317      </div>
318      <div className="h-2 overflow-hidden rounded-[var(--radius)] bg-background/65">
319        <div
320          className="h-full rounded-[var(--radius)] transition-all"
321          style={{ width: `${safePct}%`, backgroundColor: color }}
322        />
323      </div>
324    </div>
325  );
326}
327
328export function formatStorageSize(bytes: number | null | undefined) {
329  if (
330    bytes === null ||
331    bytes === undefined ||
332    !Number.isFinite(bytes) ||
333    bytes < 0
334  ) {
335    return "--";
336  }
337
338  if (bytes < 1024 ** 2) {
339    return `${Math.round(bytes / 1024)} KB`;
340  }
341
342  if (bytes < 1024 ** 3) {
343    return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
344  }
345
346  if (bytes < 1024 ** 4) {
347    return `${(bytes / 1024 ** 3).toFixed(1)} GB`;
348  }
349
350  return `${(bytes / 1024 ** 4).toFixed(1)} TB`;
351}
352
353export function UserRow({
354  name,
355  role,
356  email,
357  lastActive,
358  avatarColor,
359}: {
360  name: string;
361  role: string;
362  email: string;
363  lastActive: string;
364  avatarColor: string;
365}) {
366  return (
367    <div className="flex items-center gap-3 py-2.5 group">
368      <div
369        className="size-8 rounded-[var(--radius)] flex items-center justify-center text-xs font-bold text-foreground shrink-0"
370        style={{ backgroundColor: avatarColor }}
371      >
372        {name.charAt(0).toUpperCase()}
373      </div>
374      <div className="flex-1 min-w-0">
375        <div className="flex items-center gap-2">
376          <span className="text-sm text-foreground">{name}</span>
377          <span
378            className={`${SETTINGS_BADGE_SURFACE} px-1.5 py-0.5 text-xs font-medium ${
379              role === "Admin"
380                ? "bg-primary/15 text-primary"
381                : role === "Editor"
382                  ? "bg-status-amber/15 text-status-amber"
383                  : "bg-secondary text-muted-foreground"
384            }`}
385          >
386            {role}
387          </span>
388        </div>
389        <span className="text-xs text-muted-foreground">{email}</span>
390      </div>
391      <span className="text-xs text-muted-foreground hidden sm:block">
392        {lastActive}
393      </span>
394      <button className="opacity-0 group-hover:opacity-100 p-1 rounded-lg hover:bg-secondary/50 transition-all text-muted-foreground cursor-pointer">
395        <ChevronRight className="size-3.5" />
396      </button>
397    </div>
398  );
399}
400
401export function BackupRow({
402  date,
403  size,
404  type,
405  status,
406  actionLabel,
407  onAction,
408  actionDisabled,
409}: {
410  date: string;
411  size: string;
412  type: string;
413  status: "completed" | "failed" | "in-progress";
414  actionLabel?: string;
415  onAction?: () => void;
416  actionDisabled?: boolean;
417}) {
418  return (
419    <div className="flex items-center gap-3 py-2.5">
420      <div
421        className={`size-2 rounded-[var(--radius)] shrink-0 ${
422          status === "completed"
423            ? "bg-status-green"
424            : status === "in-progress"
425              ? "bg-status-amber animate-pulse"
426              : "bg-status-red"
427        }`}
428      />
429      <div className="flex-1 min-w-0">
430        <span className="text-sm text-foreground">{type}</span>
431        <div className="text-xs text-muted-foreground">
432          {date} - {size}
433        </div>
434      </div>
435      {actionLabel && onAction ? (
436        <button
437          onClick={onAction}
438          className="cursor-pointer rounded-lg bg-background/55 px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors disabled:cursor-not-allowed disabled:opacity-50 enabled:hover:bg-background/75 enabled:hover:text-foreground"
439          disabled={actionDisabled}
440        >
441          {actionLabel}
442        </button>
443      ) : (
444        <button className="cursor-pointer rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-background/75 hover:text-foreground">
445          <Download className="size-3.5" />
446        </button>
447      )}
448    </div>
449  );
450}
451