homeio

1"use client";
2
3import { useDesktopPreferences } from "@/hooks/useDesktopPreferences";
4import {
5  useActiveSettingsSection,
6  useBackupSettingsController,
7  useGeneralSettingsController,
8  useNotificationSettingsController,
9  useSecuritySettingsController,
10  useUpdatesAutoCheckEffect,
11} from "@/modules/settings/components/panel/controllers";
12import {
13  buildSettingsSectionDefinitions,
14  SETTINGS_SECTIONS,
15} from "@/modules/settings/components/panel/registry";
16import {
17  SETTINGS_BADGE_SURFACE,
18  SETTINGS_PANEL_SHELL,
19} from "@/modules/settings/components/panel/surface";
20import type { SettingsPanelProps, SettingsSectionId } from "@/modules/settings/components/panel/types";
21import { useSettingsBackend } from "@/modules/settings/hooks/useSettingsBackend";
22import { cn } from "@/lib/utils";
23
24const SIDEBAR_GROUPS: { label: string; ids: SettingsSectionId[] }[] = [
25  { label: "System",         ids: ["general", "appearance", "updates"] },
26  { label: "Infrastructure", ids: ["network", "storage", "docker"] },
27  { label: "Integrations",  ids: ["integrations"] },
28  { label: "Automation",     ids: ["scheduled-tasks", "backup"] },
29  { label: "Access",         ids: ["users", "security", "notifications"] },
30  { label: "Danger Zone",    ids: ["power", "advanced"] },
31];
32
33export function SettingsPanel({
34  appearance,
35  wallpaperOptions,
36  accentOptions,
37  onAppearanceChange,
38  wallpaperAccentColor,
39  selectedSection,
40  onOpenDiskManager,
41}: SettingsPanelProps) {
42  const settingsBackend = useSettingsBackend();
43  const desktopPreferences = useDesktopPreferences();
44  const { activeSection, setActiveSection } = useActiveSettingsSection(
45    selectedSection,
46    SETTINGS_SECTIONS.map((section) => section.id),
47  );
48
49  const generalController = useGeneralSettingsController(
50    settingsBackend.generalPreferences,
51    settingsBackend.actions.saveGeneralPreferences,
52  );
53  const securityController = useSecuritySettingsController(
54    settingsBackend.security,
55    settingsBackend.actions.saveSecuritySettings,
56  );
57  const backupController = useBackupSettingsController(
58    settingsBackend.backup.settings,
59    settingsBackend.actions.saveBackupSettings,
60  );
61  const notificationController =
62    useNotificationSettingsController(desktopPreferences);
63
64  useUpdatesAutoCheckEffect({
65    activeSection,
66    isHydrated: desktopPreferences.isHydrated,
67    autoCheckEnabled: desktopPreferences.preferences.autoCheckUpdates,
68    onCheckForUpdates: settingsBackend.actions.checkForUpdates,
69  });
70
71  const sectionDefinitions = buildSettingsSectionDefinitions({
72    appearance,
73    wallpaperOptions,
74    accentOptions,
75    onAppearanceChange,
76    wallpaperAccentColor,
77    desktopPreferences,
78    settingsBackend,
79    generalController,
80    securityController,
81    notificationController,
82    backupController,
83    onOpenDiskManager,
84  });
85  const activeDefinition =
86    sectionDefinitions.find((section) => section.id === activeSection) ??
87    sectionDefinitions[0];
88
89  return (
90    <div className="flex h-full">
91      <aside className={cn("m-2 flex w-52 shrink-0 flex-col", SETTINGS_PANEL_SHELL)}>
92        <div className="flex-1 overflow-y-auto px-2 py-3">
93          {SIDEBAR_GROUPS.map((group) => {
94            const sections = sectionDefinitions.filter((s) => group.ids.includes(s.id as SettingsSectionId));
95            if (sections.length === 0) return null;
96            return (
97              <div key={group.label} className="mb-3">
98                <div className={cn(
99                  "mb-1 px-3 text-[10px] font-semibold uppercase tracking-[0.16em]",
100                  group.label === "Danger Zone" ? "text-status-red/60" : "text-muted-foreground/50",
101                )}>
102                  {group.label}
103                </div>
104                <div className="flex flex-col gap-0.5">
105                  {sections.map((section) => {
106                    const isActive = activeSection === section.id;
107                    return (
108                      <button
109                        key={section.id}
110                        onClick={() => setActiveSection(section.id)}
111                        className={cn(
112                          "flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-colors",
113                          isActive
114                            ? "bg-primary/15 text-foreground"
115                            : "text-muted-foreground hover:bg-background/50 hover:text-foreground",
116                        )}
117                      >
118                        <section.icon
119                          className={cn("size-4 shrink-0", isActive ? "text-primary" : "text-muted-foreground/60")}
120                        />
121                        <span className="flex-1 truncate text-left text-[13px] font-medium">
122                          {section.label}
123                        </span>
124                        {section.badge && (
125                          <span className={cn(SETTINGS_BADGE_SURFACE, "flex size-5 items-center justify-center text-xs font-bold text-primary")}>
126                            {section.badge}
127                          </span>
128                        )}
129                      </button>
130                    );
131                  })}
132                </div>
133              </div>
134            );
135          })}
136        </div>
137
138        <div className="shrink-0 border-t border-glass-border/60 px-4 py-3">
139          <div className="flex items-center gap-2">
140            <div className="size-1.5 rounded-full bg-status-green" />
141            <span className="text-xs font-medium text-muted-foreground">
142              {settingsBackend.general.hostname}
143            </span>
144          </div>
145          <span className="mt-0.5 block text-[11px] text-muted-foreground/60">
146            {settingsBackend.general.appVersion} · {settingsBackend.general.platform}
147          </span>
148        </div>
149      </aside>
150
151      <main className="flex-1 overflow-y-auto">
152        <div className="max-w-2xl p-5">
153          <div className="flex items-center justify-between mb-4">
154            <h2 className="text-base font-semibold text-foreground">
155              {activeDefinition.label}
156            </h2>
157            {!activeDefinition.liveApply && activeDefinition.save ? (
158              <button
159                className="px-3 py-1.5 text-xs font-medium rounded-lg bg-primary text-primary-foreground transition-colors cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 enabled:hover:bg-primary/90"
160                disabled={!activeDefinition.save.canSave}
161                title={activeDefinition.save.title}
162                onClick={() => {
163                  void activeDefinition.save?.onSave?.();
164                }}
165              >
166                {activeDefinition.save.pending
167                  ? (activeDefinition.save.label ?? "Saving...")
168                  : (activeDefinition.save.label ?? "Save Changes")}
169              </button>
170            ) : null}
171          </div>
172          {activeDefinition.render()}
173        </div>
174      </main>
175    </div>
176  );
177}
178