homeio

1"use client";
2
3import { Cpu, MemoryStick, MonitorSpeaker, Thermometer } from "@/components/icons/platform-icons";
4import {
5  InfoBanner,
6  SectionDivider,
7} from "@/modules/settings/components/panel/controls";
8import {
9  SETTINGS_BADGE_SURFACE,
10  SETTINGS_PANEL_INSET,
11} from "@/modules/settings/components/panel/surface";
12import type { SettingsBackend } from "@/modules/settings/components/panel/types";
13import { cn } from "@/lib/utils";
14
15type GeneralSectionProps = {
16  data: SettingsBackend["general"];
17  preferences: SettingsBackend["generalPreferences"] & {
18    hostname: string;
19    timezone: string;
20  };
21  capabilities: SettingsBackend["capabilities"]["general"];
22  languageValue: string;
23  languageOptions: string[];
24  onHostnameChange: (value: string) => void;
25  onTimezoneChange: (value: string) => void;
26  onLanguageChange: (value: string) => void;
27};
28
29function InfoRow({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
30  return (
31    <div className="flex items-center justify-between gap-4 py-2.5">
32      <span className="text-xs text-muted-foreground">{label}</span>
33      <span className={cn("truncate text-right text-xs font-medium text-foreground", mono && "font-mono")}>
34        {value}
35      </span>
36    </div>
37  );
38}
39
40function HardwareRow({
41  icon,
42  label,
43  value,
44  iconClass,
45}: {
46  icon: React.ReactNode;
47  label: string;
48  value: string;
49  iconClass?: string;
50}) {
51  return (
52    <div className="flex items-center gap-3 py-2.5">
53      <div className={cn("flex size-7 shrink-0 items-center justify-center rounded-lg border border-glass-border bg-background/55", iconClass)}>
54        {icon}
55      </div>
56      <div className="min-w-0 flex-1">
57        <div className="text-[10px] uppercase tracking-[0.14em] text-muted-foreground/60">{label}</div>
58        <div className="truncate text-xs font-medium text-foreground">{value}</div>
59      </div>
60    </div>
61  );
62}
63
64function PreferenceRow({
65  label,
66  description,
67  disabled,
68  children,
69}: {
70  label: string;
71  description?: string;
72  disabled?: boolean;
73  children: React.ReactNode;
74}) {
75  return (
76    <div className={cn(SETTINGS_PANEL_INSET, "flex items-center justify-between gap-4 px-4 py-3", disabled && "opacity-50")}>
77      <div className="min-w-0">
78        <div className="text-sm text-foreground">{label}</div>
79        {description && <div className="mt-0.5 text-[11px] text-muted-foreground/70">{description}</div>}
80      </div>
81      {children}
82    </div>
83  );
84}
85
86export function GeneralSection({
87  data,
88  preferences,
89  capabilities,
90  languageValue,
91  languageOptions,
92  onHostnameChange,
93  onTimezoneChange,
94  onLanguageChange,
95}: GeneralSectionProps) {
96  return (
97    <div className="flex flex-col gap-1">
98      {data.warning ? (
99        <InfoBanner text={data.warning} variant={data.unavailable ? "warning" : "info"} />
100      ) : null}
101
102      {/* ── System Info ── */}
103      <SectionDivider title="System Info" />
104      <div className={cn(SETTINGS_PANEL_INSET, "divide-y divide-glass-border/50 px-4")}>
105        <InfoRow label="Hostname" value={data.hostname} />
106        <InfoRow label="OS" value={data.platform} />
107        <InfoRow label="Kernel" value={data.kernel} mono />
108        <InfoRow label="Architecture" value={data.architecture} />
109        <InfoRow label="Uptime" value={data.uptime} />
110        <InfoRow label="Homeio Version" value={data.appVersion} />
111      </div>
112
113      {/* ── Hardware ── */}
114      <SectionDivider title="Hardware" />
115      <div className={cn(SETTINGS_PANEL_INSET, "divide-y divide-glass-border/50 px-4")}>
116        <HardwareRow
117          icon={<Cpu className="size-3.5 text-primary" />}
118          label="Processor"
119          value={data.cpuSummary}
120        />
121        <HardwareRow
122          icon={<MemoryStick className="size-3.5 text-primary" />}
123          label="Memory"
124          value={data.memorySummary}
125        />
126        <HardwareRow
127          icon={<Thermometer className="size-3.5 text-status-amber" />}
128          label="CPU Temperature"
129          value={data.temperatureSummary}
130        />
131        <HardwareRow
132          icon={<MonitorSpeaker className="size-3.5 text-primary" />}
133          label="User"
134          value={`${data.username} (${data.processUptime})`}
135        />
136      </div>
137
138      {/* ── Preferences ── */}
139      <SectionDivider title="Preferences" />
140      {preferences.error ? (
141        <InfoBanner text={preferences.error} variant="warning" />
142      ) : null}
143
144      <div className="flex flex-col gap-1.5">
145        <PreferenceRow
146          label="Hostname"
147          description="Applies immediately with hostnamectl."
148          disabled={capabilities.hostname.disabled}
149        >
150          <input
151            value={preferences.hostname}
152            onChange={(e) => onHostnameChange(e.target.value)}
153            disabled={capabilities.hostname.disabled}
154            className="h-8 w-44 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 disabled:cursor-not-allowed"
155          />
156        </PreferenceRow>
157
158        <PreferenceRow
159          label="Timezone"
160          description="Applies immediately with timedatectl."
161          disabled={capabilities.timezone.disabled}
162        >
163          <select
164            value={preferences.timezone}
165            onChange={(e) => onTimezoneChange(e.target.value)}
166            disabled={capabilities.timezone.disabled}
167            className="h-8 w-44 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"
168          >
169            {preferences.timezoneOptions.map((tz) => (
170              <option key={tz} value={tz}>{tz}</option>
171            ))}
172          </select>
173        </PreferenceRow>
174
175        <PreferenceRow
176          label="Language"
177          description="Saved locally for Homeio UI only."
178          disabled={capabilities.language.disabled}
179        >
180          <select
181            value={languageValue}
182            onChange={(e) => onLanguageChange(e.target.value)}
183            disabled={capabilities.language.disabled}
184            className="h-8 w-44 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"
185          >
186            {languageOptions.map((lang) => (
187              <option key={lang} value={lang}>{lang}</option>
188            ))}
189          </select>
190        </PreferenceRow>
191      </div>
192    </div>
193  );
194}
195