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)
 		}

beszel/site/src/components/table-alerts.tsx

@@ -54,10 +54,7 @@ export default function AlertsButton({ system }: { system: SystemRecord }) {
 						{isAdmin() && (
 							<span>
 								Please{' '}
-								<a
-									href="/_/#/settings/mail"
-									className="font-medium text-primary opacity-80 hover:opacity-100 duration-100"
-								>
+								<a href="/_/#/settings/mail" className="link">
 									configure an SMTP server
 								</a>{' '}
 								to ensure alerts are delivered.{' '}

beszel/site/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

beszel/site/src/components/ui/input-tags.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { XIcon } from 'lucide-react'
+import { type InputProps } from './input'
+import { cn } from '@/lib/utils'
+
+type InputTagsProps = Omit<InputProps, 'value' | 'onChange'> & {
+	value: string[]
+	onChange: React.Dispatch<React.SetStateAction<string[]>>
+}
+
+const InputTags = React.forwardRef<HTMLInputElement, InputTagsProps>(
+	({ className, value, onChange, ...props }, ref) => {
+		const [pendingDataPoint, setPendingDataPoint] = React.useState('')
+
+		React.useEffect(() => {
+			if (pendingDataPoint.includes(',')) {
+				const newDataPoints = new Set([
+					...value,
+					...pendingDataPoint.split(',').map((chunk) => chunk.trim()),
+				])
+				onChange(Array.from(newDataPoints))
+				setPendingDataPoint('')
+			}
+		}, [pendingDataPoint, onChange, value])
+
+		const addPendingDataPoint = () => {
+			if (pendingDataPoint) {
+				const newDataPoints = new Set([...value, pendingDataPoint])
+				onChange(Array.from(newDataPoints))
+				setPendingDataPoint('')
+			}
+		}
+
+		return (
+			<div
+				className={cn(
+					'bg-background min-h-10 flex w-full flex-wrap gap-2 rounded-md border border-input px-3 py-2 text-sm  placeholder:text-muted-foreground has-[:focus-visible]:outline-none ring-offset-background has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+					className
+				)}
+			>
+				{value.map((item) => (
+					<Badge key={item}>
+						{item}
+						<Button
+							variant="ghost"
+							size="icon"
+							className="ml-2 h-3 w-3"
+							onClick={() => {
+								onChange(value.filter((i) => i !== item))
+							}}
+						>
+							<XIcon className="w-3" />
+						</Button>
+					</Badge>
+				))}
+				<input
+					className="flex-1 outline-none bg-background placeholder:text-muted-foreground"
+					value={pendingDataPoint}
+					onChange={(e) => setPendingDataPoint(e.target.value)}
+					onKeyDown={(e) => {
+						if (e.key === 'Enter' || e.key === ',') {
+							e.preventDefault()
+							addPendingDataPoint()
+						} else if (e.key === 'Backspace' && pendingDataPoint.length === 0 && value.length > 0) {
+							e.preventDefault()
+							onChange(value.slice(0, -1))
+						}
+					}}
+					{...props}
+					ref={ref}
+				/>
+			</div>
+		)
+	}
+)
+
+InputTags.displayName = 'InputTags'
+
+export { InputTags }

beszel/site/src/components/ui/table.tsx

@@ -44,7 +44,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
 		<tr
 			ref={ref}
 			className={cn(
-				'border-b transition-colors hover:bg-muted/40 dark:hover:bg-muted/30 data-[state=selected]:bg-muted',
+				'border-b hover:bg-muted/40 dark:hover:bg-muted/30 data-[state=selected]:bg-muted',
 				className
 			)}
 			{...props}

beszel/site/src/lib/stores.ts

@@ -1,6 +1,6 @@
 import PocketBase from 'pocketbase'
-import { atom, WritableAtom } from 'nanostores'
-import { AlertRecord, ChartTimes, SystemRecord } from '@/types'
+import { atom, map, WritableAtom } from 'nanostores'
+import { AlertRecord, ChartTimes, SystemRecord, UserSettings } from '@/types'
 
 /** PocketBase JS Client */
 export const pb = new PocketBase('/')
@@ -23,6 +23,17 @@ export const $hubVersion = atom('')
 /** Chart time period */
 export const $chartTime = atom('1h') as WritableAtom<ChartTimes>
 
+/** User settings */
+export const $userSettings = map<UserSettings>({
+	chartTime: '1h',
+	emails: [pb.authStore.model?.email || ''],
+})
+// update local storage on change
+$userSettings.subscribe((value) => {
+	// console.log('user settings changed', value)
+	$chartTime.set(value.chartTime)
+})
+
 /** Container chart filter */
 export const $containerFilter = atom('')
 

beszel/site/src/lib/utils.ts

@@ -1,7 +1,7 @@
 import { toast } from '@/components/ui/use-toast'
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
-import { $alerts, $copyContent, $systems, pb } from './stores'
+import { $alerts, $copyContent, $systems, $userSettings, pb } from './stores'
 import { AlertRecord, ChartTimeData, ChartTimes, SystemRecord } from '@/types'
 import { RecordModel, RecordSubscription } from 'pocketbase'
 import { WritableAtom } from 'nanostores'
@@ -270,3 +270,22 @@ export const useLocalStorage = (key: string, defaultValue: any) => {
 
 	return [value, setValue]
 }
+
+export async function updateUserSettings() {
+	try {
+		const req = await pb.collection('user_settings').getFirstListItem('', { fields: 'settings' })
+		$userSettings.set(req.settings)
+		return
+	} catch (e) {
+		console.log('get settings', e)
+	}
+	// create user settings if error fetching existing
+	try {
+		const createdSettings = await pb
+			.collection('user_settings')
+			.create({ user: pb.authStore.model!.id })
+		$userSettings.set(createdSettings.settings)
+	} catch (e) {
+		console.log('create settings', e)
+	}
+}

beszel/site/src/main.tsx

@@ -14,6 +14,7 @@ import {
 import { ModeToggle } from './components/mode-toggle.tsx'
 import {
 	cn,
+	updateUserSettings,
 	isAdmin,
 	isReadOnlyUser,
 	updateAlerts,
@@ -68,9 +69,10 @@ const App = () => {
 			$publicKey.set(data.key)
 			$hubVersion.set(data.v)
 		})
-		// get servers / alerts
+		// get servers / alerts / settings
 		updateSystemList()
 		updateAlerts()
+		updateUserSettings()
 	}, [])
 
 	// update favicon
@@ -101,7 +103,7 @@ const App = () => {
 		return <Home />
 	} else if (page.route === 'server') {
 		return <SystemDetail name={page.params.name} />
-	} else if (page.path.startsWith('/settings')) {
+	} else if (page.route === 'settings') {
 		return (
 			<Suspense>
 				<Settings />

beszel/site/src/types.d.ts

@@ -118,3 +118,10 @@ export interface ChartTimeData {
 		getOffset: (endTime: Date) => Date
 	}
 }
+
+export type UserSettings = {
+	// lang?: string
+	chartTime: ChartTimes
+	emails?: string[]
+	webhooks?: string[]
+}