From 98b39c57033899b354fdb812e29b0e947906343e Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Tue, 17 Feb 2026 21:52:32 +0700
Subject: [PATCH] feat(NetworkMapUnifi): add fullscreen toggle functionality
 and improve button layout for better user experience

---
 frontend/src/NetworkMapUnifi.jsx | 65 ++++++++++++++++++++++++--------
 1 file changed, 50 insertions(+), 15 deletions(-)

diff --git a/frontend/src/NetworkMapUnifi.jsx b/frontend/src/NetworkMapUnifi.jsx
index b76810a..cd0917e 100644
--- a/frontend/src/NetworkMapUnifi.jsx
+++ b/frontend/src/NetworkMapUnifi.jsx
@@ -1,5 +1,5 @@
 import { useMemo, useCallback, useState, useRef, useEffect } from 'react';
-import { IconRefresh } from '@tabler/icons-react';
+import { IconRefresh, IconMaximize, IconMinimize } from '@tabler/icons-react';
 
 const UNIFI_BG = '#0f172a';
 const UNIFI_CARD_BG = '#1e293b';
@@ -63,6 +63,7 @@ export default function NetworkMapUnifi({ servers = [], connections = [], pingMa
   const [size, setSize] = useState({ w: 800, h: 520 });
   const [positions, setPositions] = useState({});
   const [drag, setDrag] = useState(null);
+   const [isFullscreen, setIsFullscreen] = useState(false);
 
   useEffect(() => {
     const el = containerRef.current;
@@ -75,6 +76,16 @@ export default function NetworkMapUnifi({ servers = [], connections = [], pingMa
     return () => ro.disconnect();
   }, []);
 
+  // Трек полноэкранного режима
+  useEffect(() => {
+    const handler = () => {
+      const fs = Boolean(document.fullscreenElement);
+      setIsFullscreen(fs);
+    };
+    document.addEventListener('fullscreenchange', handler);
+    return () => document.removeEventListener('fullscreenchange', handler);
+  }, []);
+
   // Инициализация позиций: из localStorage или по кругу
   useEffect(() => {
     if (servers.length === 0) {
@@ -386,20 +397,44 @@ export default function NetworkMapUnifi({ servers = [], connections = [], pingMa
           zIndex: 10,
         }}
       >
-        <button
-          type="button"
-          className="btn btn-sm"
-          onClick={resetLayout}
-          style={{
-            background: 'rgba(30,41,59,0.95)',
-            color: UNIFI_TEXT_MUTED,
-            border: `1px solid ${UNIFI_CARD_BORDER}`,
-          }}
-          title="Вернуть узлы в круговую раскладку"
-        >
-          <IconRefresh size={14} className="me-1" />
-          Сбросить раскладку
-        </button>
+        <div className="btn-group btn-group-sm">
+          <button
+            type="button"
+            className="btn"
+            onClick={resetLayout}
+            style={{
+              background: 'rgba(30,41,59,0.95)',
+              color: UNIFI_TEXT_MUTED,
+              border: `1px solid ${UNIFI_CARD_BORDER}`,
+            }}
+            title="Вернуть узлы в исходную раскладку"
+          >
+            <IconRefresh size={14} className="me-1" />
+            Сбросить
+          </button>
+          <button
+            type="button"
+            className="btn"
+            onClick={() => {
+              const el = containerRef.current;
+              if (!el) return;
+              if (!document.fullscreenElement) {
+                el.requestFullscreen?.();
+              } else {
+                document.exitFullscreen?.();
+              }
+            }}
+            style={{
+              background: 'rgba(30,41,59,0.95)',
+              color: UNIFI_TEXT_MUTED,
+              border: `1px solid ${UNIFI_CARD_BORDER}`,
+              borderLeft: 'none',
+            }}
+            title={isFullscreen ? 'Выйти из полноэкранного режима' : 'Открыть карту на весь экран'}
+          >
+            {isFullscreen ? <IconMinimize size={14} /> : <IconMaximize size={14} />}
+          </button>
+        </div>
       </div>
     </div>
   );