From bd41ad813cf3df9fff01d8d47e8a0b3ea40ddfc3 Mon Sep 17 00:00:00 2001
From: henrygd <hank@henrygd.me>
Date: Fri, 14 Nov 2025 13:54:23 -0500
Subject: [PATCH] change alert history pagination to use local storage instead
 of saving to user settings

---
 .../settings/alerts-history-data-table.tsx    | 21 +++++++------------
 internal/site/src/lib/stores.ts               |  1 -
 internal/site/src/types.d.ts                  |  1 -
 3 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/internal/site/src/components/routes/settings/alerts-history-data-table.tsx b/internal/site/src/components/routes/settings/alerts-history-data-table.tsx
index 24619ae5..84758ba2 100644
--- a/internal/site/src/components/routes/settings/alerts-history-data-table.tsx
+++ b/internal/site/src/components/routes/settings/alerts-history-data-table.tsx
@@ -41,11 +41,8 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@
 import { useToast } from "@/components/ui/use-toast"
 import { alertInfo } from "@/lib/alerts"
 import { pb } from "@/lib/api"
-import { $userSettings } from "@/lib/stores"
-import { cn, formatDuration, formatShortDate } from "@/lib/utils"
+import { cn, formatDuration, formatShortDate, useBrowserStorage } from "@/lib/utils"
 import type { AlertsHistoryRecord } from "@/types"
-import { saveSettings } from "./layout"
-import { useStore } from "@nanostores/react"
 import { alertsHistoryColumns } from "../../alerts-history-columns"
 
 const SectionIntro = memo(() => {
@@ -70,13 +67,12 @@ export default function AlertsHistoryDataTable() {
 	const [globalFilter, setGlobalFilter] = useState("")
 	const { toast } = useToast()
 	const [deleteOpen, setDeleteDialogOpen] = useState(false)
-	const userSettings = useStore($userSettings)
 	
-	// Initialize pagination with user preference
-	const [pagination, setPagination] = useState<PaginationState>(() => ({
+	// Store pagination preference in local storage
+	const [pagination, setPagination] = useBrowserStorage<PaginationState>("ah-pagination", {
 		pageIndex: 0,
-		pageSize: userSettings.alertHistoryPageSize || 10,
-	}))
+		pageSize: 10,
+	})
 
 	useEffect(() => {
 		let unsubscribe: (() => void) | undefined
@@ -331,13 +327,10 @@ export default function AlertsHistoryDataTable() {
 						<Select
 							value={`${table.getState().pagination.pageSize}`}
 							onValueChange={(value) => {
-								const newPageSize = Number(value);
-								table.setPageSize(newPageSize);
-								// Save the preference to user settings and backend
-								saveSettings({ alertHistoryPageSize: newPageSize });
+								table.setPageSize(Number(value));
 							}}
 						>
-							<SelectTrigger className="w-[4.8em]" id="rows-per-page">
+							<SelectTrigger className="w-18" id="rows-per-page">
 								<SelectValue placeholder={table.getState().pagination.pageSize} />
 							</SelectTrigger>
 							<SelectContent side="top">
diff --git a/internal/site/src/lib/stores.ts b/internal/site/src/lib/stores.ts
index 47b1a6be..9cc564b4 100644
--- a/internal/site/src/lib/stores.ts
+++ b/internal/site/src/lib/stores.ts
@@ -48,7 +48,6 @@ export const $userSettings = map<UserSettings>({
 	emails: [pb.authStore.record?.email || ""],
 	unitNet: Unit.Bytes,
 	unitTemp: Unit.Celsius,
-	alertHistoryPageSize: 10,
 })
 // update chart time on change
 listenKeys($userSettings, ["chartTime"], ({ chartTime }) => $chartTime.set(chartTime))
diff --git a/internal/site/src/types.d.ts b/internal/site/src/types.d.ts
index 2101e5e7..3454ee49 100644
--- a/internal/site/src/types.d.ts
+++ b/internal/site/src/types.d.ts
@@ -281,7 +281,6 @@ export interface UserSettings {
 	colorWarn?: number
 	colorCrit?: number
 	hourFormat?: HourFormat
-	alertHistoryPageSize?: number
 	layoutWidth?: number
 }