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

web/src/App.tsx

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

web/src/pages/Settings.tsx

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