Init 2

app/(main)/communities/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useMemo } from "react"
+import { useState, useMemo, useEffect } from "react"
 import { PageHeader } from "@/components/page-header"
 import {
   Card, CardContent, CardHeader, CardTitle, CardDescription,
@@ -10,9 +10,12 @@ import { Input } from "@/components/ui/input"
 import {
   PlusIcon, SearchIcon, TagIcon, ServerIcon, FilterIcon,
   ChevronRightIcon, CopyIcon, CheckIcon, TrashIcon, PencilIcon,
+  LoaderCircleIcon,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { filters } from "@/lib/data"
+import { useDataSource } from "@/lib/data-source"
+import { useEvoBGP } from "@/lib/evobgp-context"
 
 // ─── types ────────────────────────────────────────────────────────────────────
 
@@ -122,19 +125,33 @@ const ACTION_COLOR: Record<Community["action"], string> = {
 // ─── page ─────────────────────────────────────────────────────────────────────
 
 export default function CommunitiesPage() {
+  const { mode } = useDataSource()
+  const { enabled, snapshot, loading, error } = useEvoBGP()
+  const useEvoCatalog = mode === "live" && enabled
+
   const [search, setSearch] = useState("")
   const [typeFilter, setTypeFilter] = useState<CommType | "all">("all")
   const [copied, setCopied] = useState<string | null>(null)
   const [selected, setSelected] = useState<Community | null>(null)
 
+  const listData = useMemo((): Community[] => {
+    if (!useEvoCatalog) return COMMUNITIES
+    if (loading && !snapshot) return []
+    return snapshot?.communities ?? []
+  }, [useEvoCatalog, loading, snapshot])
+
+  useEffect(() => {
+    setSelected(null)
+  }, [useEvoCatalog])
+
   const filtered = useMemo(() => {
     const q = search.toLowerCase()
-    return COMMUNITIES.filter(c => {
+    return listData.filter(c => {
       const matchQ = !q || c.value.toLowerCase().includes(q) || c.name.toLowerCase().includes(q) || c.description.toLowerCase().includes(q)
       const matchT = typeFilter === "all" || c.type === typeFilter
       return matchQ && matchT
     })
-  }, [search, typeFilter])
+  }, [search, typeFilter, listData])
 
   const handleCopy = (value: string) => {
     navigator.clipboard.writeText(value).catch(() => {})
@@ -157,14 +174,27 @@ export default function CommunitiesPage() {
 
       <div className="flex-1 overflow-y-auto p-6">
         <div className="flex flex-col gap-5">
+          {useEvoCatalog && (
+            <p className={cn(
+              "text-xs flex items-center gap-1.5 -mt-1",
+              error ? "text-destructive" : "text-muted-foreground",
+            )}>
+              {loading && <LoaderCircleIcon className="size-3.5 animate-spin shrink-0" />}
+              {error
+                ? `EvoBGP: ${error}`
+                : snapshot?.fetchedAt
+                  ? `Источник: EvoBGP, обновлено ${new Date(snapshot.fetchedAt).toLocaleString("ru-RU")}`
+                  : loading ? "Загрузка EvoBGP…" : "EvoBGP"}
+            </p>
+          )}
 
           {/* ── summary ── */}
           <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
             {[
-              { label: "Всего communities", value: String(COMMUNITIES.length) },
-              { label: "Активных",          value: String(COMMUNITIES.filter(c => c.enabled).length) },
-              { label: "Стандартных",       value: String(COMMUNITIES.filter(c => c.type === "standard").length) },
-              { label: "Использует фильтры",value: String(new Set(COMMUNITIES.flatMap(c => c.filterIds)).size) },
+              { label: "Всего communities", value: String(listData.length) },
+              { label: "Активных",          value: String(listData.filter(c => c.enabled).length) },
+              { label: "Стандартных",       value: String(listData.filter(c => c.type === "standard").length) },
+              { label: "Использует фильтры",value: String(new Set(listData.flatMap(c => c.filterIds)).size) },
             ].map(({ label, value }) => (
               <Card key={label}>
                 <CardContent className="pt-4 pb-3 px-4">