feat(web): add toast notifications for settings save status

This commit is contained in:
syntaxbullet
2026-01-08 22:47:31 +01:00
parent 9caa95a0d8
commit 8fe300c8a2
4 changed files with 14 additions and 0 deletions

View File

@@ -19,6 +19,7 @@
"react-dom": "^19", "react-dom": "^19",
"react-router-dom": "^7.12.0", "react-router-dom": "^7.12.0",
"recharts": "^3.6.0", "recharts": "^3.6.0",
"sonner": "^2.0.7",
"tailwind-merge": "^3.3.1", "tailwind-merge": "^3.3.1",
}, },
"devDependencies": { "devDependencies": {
@@ -241,6 +242,8 @@
"set-cookie-parser": ["set-cookie-parser@2.7.2", "", {}, "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw=="], "set-cookie-parser": ["set-cookie-parser@2.7.2", "", {}, "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw=="],
"sonner": ["sonner@2.0.7", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w=="],
"tailwind-merge": ["tailwind-merge@3.4.0", "", {}, "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g=="], "tailwind-merge": ["tailwind-merge@3.4.0", "", {}, "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g=="],
"tailwindcss": ["tailwindcss@4.1.18", "", {}, "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw=="], "tailwindcss": ["tailwindcss@4.1.18", "", {}, "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw=="],

View File

@@ -23,6 +23,7 @@
"react-dom": "^19", "react-dom": "^19",
"react-router-dom": "^7.12.0", "react-router-dom": "^7.12.0",
"recharts": "^3.6.0", "recharts": "^3.6.0",
"sonner": "^2.0.7",
"tailwind-merge": "^3.3.1" "tailwind-merge": "^3.3.1"
}, },
"devDependencies": { "devDependencies": {

View File

@@ -5,9 +5,12 @@ import { Activity } from "./pages/Activity";
import { Settings } from "./pages/Settings"; import { Settings } from "./pages/Settings";
import "./index.css"; import "./index.css";
import { Toaster } from "sonner";
export function App() { export function App() {
return ( return (
<BrowserRouter> <BrowserRouter>
<Toaster richColors position="top-right" theme="dark" />
<Routes> <Routes>
<Route path="/" element={<DashboardLayout />}> <Route path="/" element={<DashboardLayout />}>
<Route index element={<Dashboard />} /> <Route index element={<Dashboard />} />

View File

@@ -1,4 +1,5 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { toast } from "sonner";
import { Loader2, Save, RefreshCw, Smartphone, Coins, Trophy, Shield, Users, Terminal, MessageSquare } from "lucide-react"; import { Loader2, Save, RefreshCw, Smartphone, Coins, Trophy, Shield, Users, Terminal, MessageSquare } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
@@ -56,6 +57,7 @@ export function Settings() {
const handleSave = async () => { const handleSave = async () => {
setSaving(true); setSaving(true);
const toastId = toast.loading("Saving configuration...");
try { try {
const response = await fetch("/api/settings", { const response = await fetch("/api/settings", {
method: "POST", method: "POST",
@@ -66,8 +68,13 @@ export function Settings() {
if (!response.ok) throw new Error("Failed to save"); if (!response.ok) throw new Error("Failed to save");
// Reload to satisfy any server-side transformations // Reload to satisfy any server-side transformations
await fetchData(); await fetchData();
toast.success("Settings saved successfully", { id: toastId });
} catch (error) { } catch (error) {
console.error("Failed to save settings:", error); console.error("Failed to save settings:", error);
toast.error("Failed to save settings", {
id: toastId,
description: "Please check your input and try again."
});
} finally { } finally {
setSaving(false); setSaving(false);
} }