Fix: Enable/Disable notifications directly

- Make the status switch functional to toggle notifications directly from the notification channel list.

application/src/components/settings/notification-settings/NotificationChannelList.tsx

@@ -1,6 +1,7 @@
 
 import { AlertConfiguration } from "@/services/alertConfigService";
 import { Bell, Edit, Trash2 } from "lucide-react";
+import { useState } from "react";
 import { 
   Table, 
   TableBody, 
@@ -33,29 +34,40 @@ export const NotificationChannelList = ({
   onEdit,
   onDelete
 }: NotificationChannelListProps) => {
+  const [optimisticStates, setOptimisticStates] = useState<Record<string, boolean>>({});
+
   const toggleEnabled = async (config: CombinedChannel) => {
     if (!config.id) return;
     
-    if (config.isWebhook) {
+    const currentEnabled = typeof config.enabled === 'string'
-      // Handle webhook toggle
+      ? config.enabled === "true" || config.enabled === "on"
-      try {
+      : !!config.enabled;
-        const newEnabled = config.enabled ? "off" : "on";
+    
+    // Apply optimistic update immediately
+    setOptimisticStates(prev => ({
+      ...prev,
+      [config.id!]: !currentEnabled
+    }));
+    
+    try {
+      if (config.isWebhook) {
+        // Handle webhook toggle
+        const newEnabled = currentEnabled ? "off" : "on";
         await pb.collection('webhook').update(config.id, {
           enabled: newEnabled
         });
-        // Trigger refresh by calling onEdit with empty config
+      } else {
-        onEdit({} as AlertConfiguration);
+        // Handle alert config toggle
-      } catch (error) {
+        await alertConfigService.updateAlertConfiguration(config.id, {
-        console.error("Error updating webhook:", error);
+          enabled: !currentEnabled
+        });
       }
-    } else {
+  
-      // Handle alert config toggle
+    } catch (error) {
-      await alertConfigService.updateAlertConfiguration(config.id, {
+      setOptimisticStates(prev => ({
-        enabled: !config.enabled
+        ...prev,
-      });
+        [config.id!]: currentEnabled
-      
+      }));
-      // The parent component will refresh the list
-      onEdit(config as AlertConfiguration);
     }
   };
 
@@ -130,12 +142,14 @@ export const NotificationChannelList = ({
               <TableCell className="max-w-xs truncate text-sm text-muted-foreground">
                 {getChannelDetails(channel)}
               </TableCell>
-              <TableCell>
+               <TableCell>
                 <Switch 
                   checked={
-                    typeof channel.enabled === 'string'
+                    channel.id && optimisticStates.hasOwnProperty(channel.id)
-                      ? channel.enabled === "true" || channel.enabled === "on"
+                      ? optimisticStates[channel.id]
-                      : !!channel.enabled
+                      : typeof channel.enabled === 'string'
+                        ? channel.enabled === "true" || channel.enabled === "on"
+                        : !!channel.enabled
                   }
                   onCheckedChange={() => toggleEnabled(channel)}
                 />
@@ -149,7 +163,7 @@ export const NotificationChannelList = ({
                     variant="outline" 
                     size="sm" 
                     onClick={() => onEdit(channel as AlertConfiguration)}
-                    disabled={channel.isWebhook} // Disable edit for webhooks for now
+                    disabled={channel.isWebhook} 
                   >
                     <Edit className="h-4 w-4" />
                   </Button>