feat: integrate sonner for toast notifications and enhance UI feedback

Added the sonner library for toast notifications across various components, improving user feedback for actions such as saving settings, syncing rules, and handling errors. Updated the layout to include a Toaster component for consistent notification display. Refactored alert messages in the backups, gre, and filters pages to utilize the new notification system, enhancing overall user experience.

app/(main)/bgp/page.tsx

@@ -5,12 +5,13 @@ import { PageHeader } from "@/components/page-header"
 import { Card, CardContent } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { cn } from "@/lib/utils"
 import {
   RefreshCwIcon, DownloadIcon, SearchIcon,
   ActivityIcon, BarChart3Icon, ChevronRightIcon, ChevronDownIcon,
   ArrowDownIcon, ClipboardCopyIcon, ServerIcon,
-  XIcon,
+  XIcon, AlertCircleIcon,
 } from "lucide-react"
 import { useDataSource } from "@/lib/data-source"
 
@@ -929,10 +930,10 @@ export default function BgpPage() {
             </div>
           )}
           {isLive && liveError && (
-            <div className="flex items-center gap-2 rounded-md border border-amber-500/30 bg-amber-500/8 px-3 py-2">
-              <span className="size-1.5 rounded-full bg-amber-500 shrink-0" />
-              <p className="text-xs text-amber-600 dark:text-amber-400">Ошибка загрузки: {liveError}</p>
-            </div>
+            <Alert variant="warning" className="py-2">
+              <AlertCircleIcon />
+              <AlertDescription className="text-xs">Ошибка загрузки: {liveError}</AlertDescription>
+            </Alert>
           )}
           {isLive && !loading && liveSessions.length === 0 && !liveError && fetchedAt && (
             <div className="rounded-md border border-border bg-muted/30 px-4 py-6 text-center text-sm text-muted-foreground">
@@ -964,13 +965,15 @@ export default function BgpPage() {
 
           {/* alert: not-established sessions */}
           {notEstab > 0 && (
-            <div className="flex items-center gap-2.5 rounded-lg border border-amber-500/30 bg-amber-500/8 px-4 py-2.5">
-              <span className="size-2 rounded-full bg-amber-500 shrink-0" />
-              <p className="text-sm text-amber-600 dark:text-amber-400">
-                <span className="font-semibold">{notEstab} сессии</span> не в состоянии Established —
-                проверьте {sessions.filter(s => s.state !== "Established").map(s => s.peerIp).join(", ")}
-              </p>
-            </div>
+            <Alert variant="warning">
+              <AlertCircleIcon />
+              <AlertTitle>
+                <span className="font-semibold">{notEstab} сессии</span> не в состоянии Established
+              </AlertTitle>
+              <AlertDescription>
+                Проверьте {sessions.filter(s => s.state !== "Established").map(s => s.peerIp).join(", ")}
+              </AlertDescription>
+            </Alert>
           )}
 
           {/* tab content */}