shoutrrr alerts / settings page

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

@@ -9,25 +9,63 @@ import {
 } from '@/components/ui/select'
 import { chartTimeData } from '@/lib/utils'
 import { Separator } from '@/components/ui/separator'
-import { SaveIcon } from 'lucide-react'
+import { LoaderCircleIcon, SaveIcon } from 'lucide-react'
+import { UserSettings } from '@/types'
+import { saveSettings } from './layout'
+import { useState } from 'react'
+
+export default function SettingsProfilePage({ userSettings }: { userSettings: UserSettings }) {
+	const [isLoading, setIsLoading] = useState(false)
+
+	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+		e.preventDefault()
+		setIsLoading(true)
+		const formData = new FormData(e.target as HTMLFormElement)
+		const data = Object.fromEntries(formData) as Partial<UserSettings>
+		await saveSettings(data)
+		setIsLoading(false)
+	}
 
-export default function SettingsProfilePage() {
 	return (
 		<div>
-			{/* <div>
-				<h3 className="text-lg font-medium mb-1">General</h3>
-				<p className="text-sm text-muted-foreground">Set your preferred language and timezone.</p>
+			<div>
+				<h3 className="text-xl font-medium mb-2">General</h3>
+				<p className="text-sm text-muted-foreground">
+					Set your preferred language and chart display options.
+				</p>
 			</div>
-			<Separator className="mt-6 mb-5" /> */}
-			<div className="space-y-5">
+			<Separator className="my-4" />
+			<form onSubmit={handleSubmit} className="space-y-5">
+				<div className="space-y-2">
+					<div className="mb-4">
+						<h3 className="mb-1 text-lg font-medium">Language</h3>
+						<p className="text-sm text-muted-foreground">
+							Additional language support coming soon.
+						</p>
+					</div>
+					<Label className="block" htmlFor="lang">
+						Preferred language
+					</Label>
+					<Select defaultValue="en">
+						<SelectTrigger id="lang">
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value="en">English</SelectItem>
+						</SelectContent>
+					</Select>
+				</div>
+				<Separator />
 				<div className="space-y-2">
 					<div className="mb-4">
 						<h3 className="mb-1 text-lg font-medium">Chart options</h3>
 						<p className="text-sm text-muted-foreground">Adjust display options for charts.</p>
 					</div>
-					<Label className="block">Default time period</Label>
-					<Select defaultValue="1h">
-						<SelectTrigger>
+					<Label className="block" htmlFor="chartTime">
+						Default time period
+					</Label>
+					<Select name="chartTime" defaultValue={userSettings.chartTime}>
+						<SelectTrigger id="chartTime">
 							<SelectValue />
 						</SelectTrigger>
 						<SelectContent>
@@ -43,11 +81,19 @@ export default function SettingsProfilePage() {
 					</p>
 				</div>
 				<Separator />
-				<Button type="submit" className="flex items-center gap-1.5">
-					<SaveIcon className="h-4 w-4" />
+				<Button
+					type="submit"
+					className="flex items-center gap-1.5 disabled:opacity-100"
+					disabled={isLoading}
+				>
+					{isLoading ? (
+						<LoaderCircleIcon className="h-4 w-4 animate-spin" />
+					) : (
+						<SaveIcon className="h-4 w-4" />
+					)}
 					Save settings
 				</Button>
-			</div>
+			</form>
 		</div>
 	)
 }

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

@@ -6,6 +6,9 @@ import { useStore } from '@nanostores/react'
 import { $router } from '@/components/router.tsx'
 import { redirectPage } from '@nanostores/router'
 import { BellIcon, SettingsIcon } from 'lucide-react'
+import { $userSettings, pb } from '@/lib/stores.ts'
+import { toast } from '@/components/ui/use-toast.ts'
+import { UserSettings } from '@/types.js'
 
 const General = lazy(() => import('./general.tsx'))
 const Notifications = lazy(() => import('./notifications.tsx'))
@@ -23,6 +26,37 @@ const sidebarNavItems = [
 	},
 ]
 
+export async function saveSettings(newSettings: Partial<UserSettings>) {
+	// console.log('Updating settings:', newSettings)
+	try {
+		// get fresh copy of settings
+		const req = await pb.collection('user_settings').getFirstListItem('', {
+			fields: 'id,settings',
+		})
+		// make new user settings
+		const mergedSettings = {
+			...req.settings,
+			...newSettings,
+		}
+		// update user settings
+		const updatedSettings = await pb.collection('user_settings').update(req.id, {
+			settings: mergedSettings,
+		})
+		$userSettings.set(updatedSettings.settings)
+		toast({
+			title: 'Settings saved',
+			description: 'Your notification settings have been updated.',
+		})
+	} catch (e) {
+		console.log('update settings', e)
+		toast({
+			title: 'Failed to save settings',
+			description: 'Please check logs for more details.',
+			variant: 'destructive',
+		})
+	}
+}
+
 export default function SettingsLayout() {
 	const page = useStore($router)
 
@@ -59,13 +93,13 @@ export default function SettingsLayout() {
 }
 
 function SettingsContent({ name }: { name: string }) {
+	const userSettings = useStore($userSettings)
+
 	switch (name) {
 		case 'general':
-			return <General />
-		// case 'display':
-		// 	return <Display />
+			return <General userSettings={userSettings} />
 		case 'notifications':
-			return <Notifications />
+			return <Notifications userSettings={userSettings} />
 	}
 	return ''
 }

beszel/site/src/components/routes/settings/notifications.tsx

@@ -4,13 +4,13 @@ import { Label } from '@/components/ui/label'
 import { pb } from '@/lib/stores'
 import { Separator } from '@/components/ui/separator'
 import { Card } from '@/components/ui/card'
-import { LoaderCircleIcon, PlusIcon, SaveIcon, Trash2Icon } from 'lucide-react'
+import { BellIcon, LoaderCircleIcon, PlusIcon, SaveIcon, Trash2Icon } from 'lucide-react'
 import { useState } from 'react'
 import { toast } from '@/components/ui/use-toast'
-
-interface UserSettings {
-	webhooks: string[]
-}
+import { InputTags } from '@/components/ui/input-tags'
+import { UserSettings } from '@/types'
+import { saveSettings } from './layout'
+import * as v from 'valibot'
 
 interface ShoutrrrUrlCardProps {
 	url: string
@@ -18,13 +18,15 @@ interface ShoutrrrUrlCardProps {
 	onRemove: () => void
 }
 
-const userSettings: UserSettings = {
-	webhooks: ['generic://webhook.site/xxx'],
-}
+const NotificationSchema = v.object({
+	emails: v.array(v.pipe(v.string(), v.email())),
+	webhooks: v.array(v.pipe(v.string(), v.url())),
+})
 
-const SettingsNotificationsPage = () => {
-	const [email, setEmail] = useState(pb.authStore.model?.email || '')
+const SettingsNotificationsPage = ({ userSettings }: { userSettings: UserSettings }) => {
 	const [webhooks, setWebhooks] = useState(userSettings.webhooks ?? [])
+	const [emails, setEmails] = useState<string[]>(userSettings.emails ?? [])
+	const [isLoading, setIsLoading] = useState(false)
 
 	const addWebhook = () => setWebhooks([...webhooks, ''])
 	const removeWebhook = (index: number) => setWebhooks(webhooks.filter((_, i) => i !== index))
@@ -35,22 +37,35 @@ const SettingsNotificationsPage = () => {
 		setWebhooks(newWebhooks)
 	}
 
-	const saveSettings = async () => {
-		// TODO: Implement actual saving logic
-		console.log('Saving settings:', { email, webhooks })
-		toast({
-			title: 'Settings saved',
-			description: 'Your notification settings have been updated.',
-		})
+	async function updateSettings() {
+		setIsLoading(true)
+		try {
+			const parsedData = v.parse(NotificationSchema, { emails, webhooks })
+			console.log('parsedData', parsedData)
+			await saveSettings(parsedData)
+		} catch (e: any) {
+			toast({
+				title: 'Failed to save settings',
+				description: e.message,
+				variant: 'destructive',
+			})
+		}
+		setIsLoading(false)
 	}
 
 	return (
 		<div>
-			{/* <div>
-				<h3 className="text-xl font-medium mb-1">Notifications</h3>
-				<p className="text-sm text-muted-foreground">Configure how you receive notifications.</p>
+			<div>
+				<h3 className="text-xl font-medium mb-2">Notifications</h3>
+				<p className="text-sm text-muted-foreground">
+					Configure how you receive alert notifications.
+				</p>
+				<p className="text-sm text-muted-foreground mt-1.5">
+					Looking for where to create system alerts? Click the bell icons{' '}
+					<BellIcon className="inline h-4 w-4" /> in the dashboard table.
+				</p>
 			</div>
-			<Separator className="my-6" /> */}
+			<Separator className="my-4" />
 			<div className="space-y-5">
 				<div className="space-y-2">
 					<div className="mb-4">
@@ -60,13 +75,14 @@ const SettingsNotificationsPage = () => {
 						</p>
 					</div>
 					<Label className="block">To email(s)</Label>
-					<Input
-						placeholder="name@example.com"
-						value={email}
-						onChange={(e) => setEmail(e.target.value)}
+					<InputTags
+						value={emails}
+						onChange={setEmails}
+						placeholder="Enter email address..."
+						className="w-full"
 					/>
 					<p className="text-[0.8rem] text-muted-foreground">
-						Separate multiple emails with commas.
+						Save address using enter key or comma.
 					</p>
 				</div>
 				<Separator />
@@ -109,8 +125,17 @@ const SettingsNotificationsPage = () => {
 					</Button>
 				</div>
 				<Separator />
-				<Button type="button" className="flex items-center gap-1.5" onClick={saveSettings}>
-					<SaveIcon className="h-4 w-4" />
+				<Button
+					type="button"
+					className="flex items-center gap-1.5 disabled:opacity-100"
+					onClick={updateSettings}
+					disabled={isLoading}
+				>
+					{isLoading ? (
+						<LoaderCircleIcon className="h-4 w-4 animate-spin" />
+					) : (
+						<SaveIcon className="h-4 w-4" />
+					)}
 					Save settings
 				</Button>
 			</div>

beszel/site/src/components/routes/system.tsx

@@ -1,4 +1,4 @@
-import { $systems, pb, $chartTime, $containerFilter } from '@/lib/stores'
+import { $systems, pb, $chartTime, $containerFilter, $userSettings } from '@/lib/stores'
 import { ContainerStatsRecord, SystemRecord, SystemStatsRecord } from '@/types'
 import { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../ui/card'
@@ -62,7 +62,7 @@ export default function SystemDetail({ name }: { name: string }) {
 		document.title = `${name} / Beszel`
 		return () => {
 			resetCharts()
-			$chartTime.set('1h')
+			$chartTime.set($userSettings.get().chartTime)
 			$containerFilter.set('')
 			setHasDocker(false)
 		}