feat: persist view preferences and language to user settings (#1831)

Co-authored-by: ChangkeunJ <reiot92@gmail.com>

internal/site/src/components/routes/settings/general.tsx

@@ -63,7 +63,7 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 					<Label className="block" htmlFor="lang">
 						<Trans>Preferred Language</Trans>
 					</Label>
-					<Select value={i18n.locale} onValueChange={(lang: string) => dynamicActivate(lang)}>
+					<Select name="lang" value={i18n.locale} onValueChange={(lang: string) => dynamicActivate(lang)}>
 						<SelectTrigger id="lang">
 							<SelectValue />
 						</SelectTrigger>

internal/site/src/components/routes/settings/layout.tsx

@@ -14,7 +14,7 @@ import { lazy, useEffect } from "react"
 import { $router } from "@/components/router.tsx"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card.tsx"
 import { toast } from "@/components/ui/use-toast.ts"
-import { pb } from "@/lib/api"
+import { saveUserSettings } from "@/lib/api"
 import { $userSettings } from "@/lib/stores.ts"
 import type { UserSettings } from "@/types"
 import { Separator } from "../../ui/separator"
@@ -36,24 +36,13 @@ const HeartbeatSettings = lazy(heartbeatSettingsImport)
 
 export async function saveSettings(newSettings: Partial<UserSettings>) {
 	try {
-		// get fresh copy of settings
-		const req = await pb.collection("user_settings").getFirstListItem("", {
-			fields: "id,settings",
-		})
-		// update user settings
-		const updatedSettings = await pb.collection("user_settings").update(req.id, {
-			settings: {
-				...req.settings,
-				...newSettings,
-			},
-		})
-		$userSettings.set(updatedSettings.settings)
+		await saveUserSettings(newSettings)
 		toast({
 			title: t`Settings saved`,
 			description: t`Your user settings have been updated.`,
 		})
 	} catch (e) {
-		// console.error('update settings', e)
+		console.error("save settings", e)
 		toast({
 			title: t`Failed to save settings`,
 			description: t`Check logs for more details.`,

internal/site/src/components/routes/system/use-system-data.ts

@@ -1,9 +1,9 @@
 import { useStore } from "@nanostores/react"
 import { getPagePath } from "@nanostores/router"
 import { subscribeKeys } from "nanostores"
-import { useEffect, useMemo, useRef, useState } from "react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useContainerChartConfigs } from "@/components/charts/hooks"
-import { pb } from "@/lib/api"
+import { pb, queueUserSettings } from "@/lib/api"
 import { SystemStatus } from "@/lib/enums"
 import {
 	$allSystemsById,
@@ -15,7 +15,7 @@ import {
 	$systems,
 	$userSettings,
 } from "@/lib/stores"
-import { chartTimeData, listen, parseSemVer, useBrowserStorage } from "@/lib/utils"
+import { chartTimeData, listen, parseSemVer } from "@/lib/utils"
 import type {
 	ChartData,
 	ContainerStatsRecord,
@@ -35,8 +35,42 @@ export function useSystemData(id: string) {
 	const systems = useStore($systems)
 	const chartTime = useStore($chartTime)
 	const maxValues = useStore($maxValues)
-	const [grid, setGrid] = useBrowserStorage("grid", true)
-	const [displayMode, setDisplayMode] = useBrowserStorage<"default" | "tabs">("displayMode", "default")
+	const [grid, _setGrid] = useState<boolean>(
+		() => $userSettings.get().grid ?? JSON.parse(localStorage.getItem("besz-grid") ?? "null") ?? true
+	)
+	const [displayMode, _setDisplayMode] = useState<"default" | "tabs">(
+		() =>
+			$userSettings.get().displayMode ??
+			(JSON.parse(localStorage.getItem("besz-displayMode") || "null") as "default" | "tabs" | null) ??
+			"default"
+	)
+
+	const applied = useRef(new Set<string>())
+	useEffect(() => {
+		return subscribeKeys($userSettings, ["grid", "displayMode"], (vals) => {
+			if (!applied.current.has("grid") && vals.grid !== undefined) {
+				applied.current.add("grid")
+				_setGrid(vals.grid)
+			}
+			if (!applied.current.has("displayMode") && vals.displayMode !== undefined) {
+				applied.current.add("displayMode")
+				_setDisplayMode(vals.displayMode)
+			}
+		})
+	}, [])
+
+	const setGrid = useCallback((v: boolean) => {
+		_setGrid(v)
+		localStorage.setItem("besz-grid", JSON.stringify(v))
+		$userSettings.setKey("grid", v)
+		queueUserSettings({ grid: v })
+	}, [])
+	const setDisplayMode = useCallback((v: "default" | "tabs") => {
+		_setDisplayMode(v)
+		localStorage.setItem("besz-displayMode", JSON.stringify(v))
+		$userSettings.setKey("displayMode", v)
+		queueUserSettings({ displayMode: v })
+	}, [])
 	const [activeTab, setActiveTabRaw] = useState("core")
 	const [mountedTabs, setMountedTabs] = useState(() => new Set<string>(["core"]))
 	const tabsRef = useRef<string[]>(["core", "disk"])