shoutrrr alerts / settings page

beszel/internal/alerts/alerts.go

@@ -7,7 +7,6 @@ import (
 	"log"
 	"net/mail"
 	"net/url"
-	"os"
 
 	"github.com/containrrr/shoutrrr"
 	"github.com/labstack/echo/v5"
@@ -18,16 +17,21 @@ import (
 	"github.com/pocketbase/pocketbase/tools/mailer"
 )
 
+type AlertManager struct {
+	app *pocketbase.PocketBase
+}
+
 type AlertData struct {
-	User     *models.Record
+	UserID   string
 	Title    string
 	Message  string
 	Link     string
 	LinkText string
 }
 
-type AlertManager struct {
+type UserAlertSettings struct {
-	app *pocketbase.PocketBase
+	Emails   []string `json:"emails"`
+	Webhooks []string `json:"webhooks"`
 }
 
 func NewAlertManager(app *pocketbase.PocketBase) *AlertManager {
@@ -107,7 +111,7 @@ func (am *AlertManager) handleSlidingValueAlert(newRecord *models.Record, alertR
 	}
 	if user := alertRecord.ExpandedOne("user"); user != nil {
 		am.sendAlert(AlertData{
-			User:     user,
+			UserID:   user.GetId(),
 			Title:    subject,
 			Message:  body,
 			Link:     am.app.Settings().Meta.AppUrl + "/system/" + url.QueryEscape(systemName),
@@ -146,7 +150,7 @@ func (am *AlertManager) handleStatusAlerts(newStatus string, oldRecord *models.R
 	// send alert
 	systemName := oldRecord.GetString("name")
 	am.sendAlert(AlertData{
-		User:     user,
+		UserID:   user.GetId(),
 		Title:    fmt.Sprintf("Connection to %s is %s %v", systemName, alertStatus, emoji),
 		Message:  fmt.Sprintf("Connection to %s is %s", systemName, alertStatus),
 		Link:     am.app.Settings().Meta.AppUrl + "/system/" + url.QueryEscape(systemName),
@@ -156,18 +160,42 @@ func (am *AlertManager) handleStatusAlerts(newStatus string, oldRecord *models.R
 }
 
 func (am *AlertManager) sendAlert(data AlertData) {
-	shoutrrrUrl := os.Getenv("SHOUTRRR_URL")
+	// get user settings
-	if shoutrrrUrl != "" {
+	record, err := am.app.Dao().FindFirstRecordByFilter(
-		err := am.SendShoutrrrAlert(shoutrrrUrl, data.Title, data.Message, data.Link, data.LinkText)
+		"user_settings", "user={:user}",
-		if err == nil {
+		dbx.Params{"user": data.UserID},
-			log.Println("Sent shoutrrr alert")
+	)
-			return
+	if err != nil {
-		}
+		log.Println("Failed to get user settings", "err", err.Error())
-		log.Println("Failed to send alert via shoutrrr, falling back to email notification. ", "err", err.Error())
+		return
+	}
+	// unmarshal user settings
+	userAlertSettings := UserAlertSettings{
+		Emails:   []string{},
+		Webhooks: []string{},
+	}
+	if err := record.UnmarshalJSONField("settings", &userAlertSettings); err != nil {
+		log.Println("Failed to unmarshal user settings", "err", err.Error())
+	}
+	// send alerts via webhooks
+	for _, webhook := range userAlertSettings.Webhooks {
+		err := am.SendShoutrrrAlert(webhook, data.Title, data.Message, data.Link, data.LinkText)
+		if err != nil {
+			am.app.Logger().Error("Failed to send shoutrrr alert", "err", err.Error())
+		}
+	}
+	// send alerts via email
+	if len(userAlertSettings.Emails) == 0 {
+		log.Println("No email addresses found")
+		return
+	}
+	addresses := []mail.Address{}
+	for _, email := range userAlertSettings.Emails {
+		addresses = append(addresses, mail.Address{Address: email})
+		log.Println("Sending alert via email to", email)
 	}
-	// todo: email enable / disable and testing
 	message := mailer.Message{
-		To:      []mail.Address{{Address: data.User.GetString("email")}},
+		To:      addresses,
 		Subject: data.Title,
 		Text:    data.Message + fmt.Sprintf("\n\n%s", data.Link),
 		From: mail.Address{

beszel/internal/entities/user/user.go

@@ -0,0 +1,8 @@
+package user
+
+type UserSettings struct {
+	// Language             string   `json:"lang"`
+	ChartTime            string   `json:"chartTime"`
+	NotificationEmails   []string `json:"emails"`
+	NotificationWebhooks []string `json:"webhooks"`
+}

beszel/internal/hub/hub.go

@@ -4,6 +4,7 @@ import (
 	"beszel"
 	"beszel/internal/alerts"
 	"beszel/internal/entities/system"
+	"beszel/internal/entities/user"
 	"beszel/internal/records"
 	"beszel/site"
 	"context"
@@ -167,6 +168,36 @@ func (h *Hub) Run() {
 		go h.updateSystem(e.Model.(*models.Record))
 		return nil
 	})
+	// default user settings
+	h.app.OnModelBeforeCreate("user_settings").Add(func(e *core.ModelEvent) error {
+		record := e.Model.(*models.Record)
+		// intialize settings with defaults
+		settings := user.UserSettings{
+			// Language:             "en",
+			ChartTime:            "1h",
+			NotificationEmails:   []string{},
+			NotificationWebhooks: []string{},
+		}
+		record.UnmarshalJSONField("settings", &settings)
+		if len(settings.NotificationEmails) == 0 {
+			// get user email from auth record
+			if errs := h.app.Dao().ExpandRecord(record, []string{"user"}, nil); len(errs) == 0 {
+				// app.Logger().Error("failed to expand user relation", "errs", errs)
+				if user := record.ExpandedOne("user"); user != nil {
+					settings.NotificationEmails = []string{user.GetString("email")}
+				} else {
+					log.Println("Failed to get user email from auth record")
+				}
+			} else {
+				log.Println("failed to expand user relation", "errs", errs)
+			}
+		}
+		// if len(settings.NotificationWebhooks) == 0 {
+		// 	settings.NotificationWebhooks = []string{""}
+		// }
+		record.Set("settings", settings)
+		return nil
+	})
 
 	// do things after a systems record is updated
 	h.app.OnModelAfterUpdate("systems").Add(func(e *core.ModelEvent) error {

beszel/migrations/1726183779_collections_snapshot.go

@@ -15,7 +15,7 @@ func init() {
 			{
 				"id": "2hz5ncl8tizk5nx",
 				"created": "2024-07-07 16:08:20.979Z",
-				"updated": "2024-07-28 17:00:47.996Z",
+				"updated": "2024-07-28 17:14:24.492Z",
 				"name": "systems",
 				"type": "base",
 				"system": false,
@@ -120,7 +120,7 @@ func init() {
 			{
 				"id": "ej9oowivz8b2mht",
 				"created": "2024-07-07 16:09:09.179Z",
-				"updated": "2024-07-22 20:13:31.324Z",
+				"updated": "2024-07-28 17:14:24.492Z",
 				"name": "system_stats",
 				"type": "base",
 				"system": false,
@@ -186,7 +186,7 @@ func init() {
 			{
 				"id": "juohu4jipgc13v7",
 				"created": "2024-07-07 16:09:57.976Z",
-				"updated": "2024-07-22 20:13:31.324Z",
+				"updated": "2024-07-28 17:14:24.492Z",
 				"name": "container_stats",
 				"type": "base",
 				"system": false,
@@ -250,7 +250,7 @@ func init() {
 			{
 				"id": "_pb_users_auth_",
 				"created": "2024-07-14 16:25:18.226Z",
-				"updated": "2024-07-28 17:02:08.311Z",
+				"updated": "2024-09-12 23:19:36.280Z",
 				"name": "users",
 				"type": "auth",
 				"system": false,
@@ -316,7 +316,7 @@ func init() {
 			{
 				"id": "elngm8x1l60zi2v",
 				"created": "2024-07-15 01:16:04.044Z",
-				"updated": "2024-07-22 20:13:31.324Z",
+				"updated": "2024-07-28 17:14:24.492Z",
 				"name": "alerts",
 				"type": "base",
 				"system": false,
@@ -403,6 +403,53 @@ func init() {
 				"updateRule": "@request.auth.id != \"\" && user.id = @request.auth.id",
 				"deleteRule": "@request.auth.id != \"\" && user.id = @request.auth.id",
 				"options": {}
+			},
+			{
+				"id": "4afacsdnlu8q8r2",
+				"created": "2024-09-12 17:42:55.324Z",
+				"updated": "2024-09-12 21:19:59.114Z",
+				"name": "user_settings",
+				"type": "base",
+				"system": false,
+				"schema": [
+					{
+						"system": false,
+						"id": "d5vztyxa",
+						"name": "user",
+						"type": "relation",
+						"required": true,
+						"presentable": false,
+						"unique": false,
+						"options": {
+							"collectionId": "_pb_users_auth_",
+							"cascadeDelete": false,
+							"minSelect": null,
+							"maxSelect": 1,
+							"displayFields": null
+						}
+					},
+					{
+						"system": false,
+						"id": "xcx4qgqq",
+						"name": "settings",
+						"type": "json",
+						"required": false,
+						"presentable": false,
+						"unique": false,
+						"options": {
+							"maxSize": 2000000
+						}
+					}
+				],
+				"indexes": [
+					"CREATE UNIQUE INDEX ` + "`" + `idx_30Lwgf2` + "`" + ` ON ` + "`" + `user_settings` + "`" + ` (` + "`" + `user` + "`" + `)"
+				],
+				"listRule": "@request.auth.id != \"\" && user.id = @request.auth.id",
+				"viewRule": null,
+				"createRule": "@request.auth.id != \"\" && user.id = @request.auth.id",
+				"updateRule": "@request.auth.id != \"\" && user.id = @request.auth.id",
+				"deleteRule": null,
+				"options": {}
 			}
 		]`
 

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>
+			<div>
-				<h3 className="text-lg font-medium mb-1">General</h3>
+				<h3 className="text-xl font-medium mb-2">General</h3>
-				<p className="text-sm text-muted-foreground">Set your preferred language and timezone.</p>
+				<p className="text-sm text-muted-foreground">
+					Set your preferred language and chart display options.
+				</p>
 			</div>
-			<Separator className="mt-6 mb-5" /> */}
+			<Separator className="my-4" />
-			<div className="space-y-5">
+			<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>
+					<Label className="block" htmlFor="chartTime">
-					<Select defaultValue="1h">
+						Default time period
-						<SelectTrigger>
+					</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">
+				<Button
-					<SaveIcon className="h-4 w-4" />
+					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 />
+			return <General userSettings={userSettings} />
-		// case 'display':
-		// 	return <Display />
 		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'
-
+import { InputTags } from '@/components/ui/input-tags'
-interface UserSettings {
+import { UserSettings } from '@/types'
-	webhooks: string[]
+import { saveSettings } from './layout'
-}
+import * as v from 'valibot'
 
 interface ShoutrrrUrlCardProps {
 	url: string
@@ -18,13 +18,15 @@ interface ShoutrrrUrlCardProps {
 	onRemove: () => void
 }
 
-const userSettings: UserSettings = {
+const NotificationSchema = v.object({
-	webhooks: ['generic://webhook.site/xxx'],
+	emails: v.array(v.pipe(v.string(), v.email())),
-}
+	webhooks: v.array(v.pipe(v.string(), v.url())),
+})
 
-const SettingsNotificationsPage = () => {
+const SettingsNotificationsPage = ({ userSettings }: { userSettings: UserSettings }) => {
-	const [email, setEmail] = useState(pb.authStore.model?.email || '')
 	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 () => {
+	async function updateSettings() {
-		// TODO: Implement actual saving logic
+		setIsLoading(true)
-		console.log('Saving settings:', { email, webhooks })
+		try {
-		toast({
+			const parsedData = v.parse(NotificationSchema, { emails, webhooks })
-			title: 'Settings saved',
+			console.log('parsedData', parsedData)
-			description: 'Your notification settings have been updated.',
+			await saveSettings(parsedData)
-		})
+		} catch (e: any) {
+			toast({
+				title: 'Failed to save settings',
+				description: e.message,
+				variant: 'destructive',
+			})
+		}
+		setIsLoading(false)
 	}
 
 	return (
 		<div>
-			{/* <div>
+			<div>
-				<h3 className="text-xl font-medium mb-1">Notifications</h3>
+				<h3 className="text-xl font-medium mb-2">Notifications</h3>
-				<p className="text-sm text-muted-foreground">Configure how you receive notifications.</p>
+				<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
+					<InputTags
-						placeholder="name@example.com"
+						value={emails}
-						value={email}
+						onChange={setEmails}
-						onChange={(e) => setEmail(e.target.value)}
+						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}>
+				<Button
-					<SaveIcon className="h-4 w-4" />
+					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
+								<a href="/_/#/settings/mail" className="link">
-									href="/_/#/settings/mail"
-									className="font-medium text-primary opacity-80 hover:opacity-100 duration-100"
-								>
 									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 { atom, map, WritableAtom } from 'nanostores'
-import { AlertRecord, ChartTimes, SystemRecord } from '@/types'
+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[]
+}