homeio

1"use client"
2
3import { useCallback, useEffect, useMemo, useRef, useState } from "react"
4import {
5  type AppearanceSettings,
6  ACCENT_COLORS,
7  AUTO_ACCENT_VALUE,
8  DEFAULT_APPEARANCE_SETTINGS,
9  type DesktopFontSize,
10  type DesktopIconSize,
11  type DesktopTheme,
12  sanitizeAppearanceSettings,
13  WALLPAPER_OPTIONS,
14} from "@/lib/desktop/appearance"
15import { extractWallpaperColor } from "@/lib/desktop/wallpaper-color"
16
17const fontSizeScaleMap: Record<DesktopFontSize, number> = {
18  compact: 14,
19  default: 16,
20  large: 18,
21  "extra-large": 20,
22}
23
24const iconSizeMap: Record<DesktopIconSize, "small" | "medium" | "large"> = {
25  small: "small",
26  medium: "medium",
27  large: "large",
28}
29
30function resolveTheme(theme: DesktopTheme) {
31  if (theme === "system") {
32    return "dark"
33  }
34  return theme
35}
36
37function applyAppearanceToDom(settings: AppearanceSettings) {
38  const root = document.documentElement
39  const resolvedTheme = resolveTheme(settings.theme)
40
41  root.dataset.desktopTheme = resolvedTheme
42  root.dataset.desktopAnimations = settings.animationsEnabled ? "on" : "off"
43  root.classList.toggle("dark", resolvedTheme === "dark")
44  root.style.colorScheme = resolvedTheme
45  root.style.fontSize = `${fontSizeScaleMap[settings.fontSize]}px`
46  root.style.setProperty("--radius", `${settings.radius}px`)
47  root.style.setProperty("--primary", settings.accentColor)
48  root.style.setProperty("--accent", settings.accentColor)
49  root.style.setProperty("--ring", settings.accentColor)
50  root.style.setProperty("--sidebar-primary", settings.accentColor)
51  root.style.setProperty("--chart-1", settings.accentColor)
52  root.style.setProperty("--system-tint-amount", "0%")
53  if (resolvedTheme === "dark") {
54    root.style.setProperty(
55      "--dock",
56      settings.glassStyle === "tinted"
57        ? "oklch(0.04 0.006 250 / 0.75)"
58        : "oklch(0.14 0.015 250 / 0.18)",
59    )
60  } else {
61    root.style.setProperty(
62      "--dock",
63      settings.glassStyle === "tinted"
64        ? "oklch(0.55 0.008 250 / 0.78)"
65        : "oklch(0.96 0.006 250 / 0.70)",
66    )
67  }
68}
69
70async function fetchAppearance(): Promise<AppearanceSettings> {
71  const res = await fetch("/api/v1/settings/appearance", { cache: "no-store" });
72  if (!res.ok) return DEFAULT_APPEARANCE_SETTINGS;
73  const json = await res.json() as { data: AppearanceSettings };
74  return sanitizeAppearanceSettings(json.data);
75}
76
77async function saveAppearance(appearance: AppearanceSettings): Promise<void> {
78  await fetch("/api/v1/settings/appearance", {
79    method: "PUT",
80    headers: { "Content-Type": "application/json" },
81    body: JSON.stringify(appearance),
82  });
83}
84
85export function useDesktopAppearance() {
86  const [appearance, setAppearance] = useState<AppearanceSettings>(DEFAULT_APPEARANCE_SETTINGS)
87  const [loaded, setLoaded] = useState(false)
88  const [wallpaperAccentColor, setWallpaperAccentColor] = useState<string | null>(null)
89  const extractingRef = useRef<string | null>(null)
90
91  useEffect(() => {
92    fetchAppearance().then((saved) => {
93      setAppearance(saved)
94      setLoaded(true)
95    });
96  }, [])
97
98  // Extract wallpaper color whenever wallpaper changes (or on first load if auto is active)
99  useEffect(() => {
100    const key = appearance.wallpaper
101    if (extractingRef.current === key) return
102    extractingRef.current = key
103    extractWallpaperColor(appearance.wallpaper).then(setWallpaperAccentColor)
104  }, [appearance.wallpaper])
105
106  useEffect(() => {
107    const resolved = appearance.accentColor === AUTO_ACCENT_VALUE
108      ? (wallpaperAccentColor ?? DEFAULT_APPEARANCE_SETTINGS.accentColor)
109      : appearance.accentColor
110    applyAppearanceToDom({ ...appearance, accentColor: resolved })
111  }, [appearance, wallpaperAccentColor])
112
113  useEffect(() => {
114    if (!loaded) return
115    saveAppearance(appearance);
116  }, [appearance, loaded])
117
118  useEffect(() => {
119    if (appearance.theme !== "system") return
120    const media = window.matchMedia("(prefers-color-scheme: dark)")
121    const handleThemeChange = () => {
122      applyAppearanceToDom(appearance)
123    }
124    media.addEventListener("change", handleThemeChange)
125    return () => media.removeEventListener("change", handleThemeChange)
126  }, [appearance])
127
128  const updateAppearance = useCallback((patch: Partial<AppearanceSettings>) => {
129    setAppearance((prev) => sanitizeAppearanceSettings({ ...prev, ...patch }))
130  }, [])
131
132  const appIconSize = useMemo(() => iconSizeMap[appearance.iconSize], [appearance.iconSize])
133
134  return {
135    appearance,
136    /** False until the saved appearance has replaced the defaults. */
137    isAppearanceLoaded: loaded,
138    updateAppearance,
139    wallpapers: WALLPAPER_OPTIONS,
140    accentColors: ACCENT_COLORS,
141    appIconSize,
142    wallpaperAccentColor,
143  }
144}
145