feat: add rate limit warning banner (HTTP 429) to UI

client/src/App.jsx

@@ -90,15 +90,54 @@ export default function App() {
   const [editCategory, setEditCategory] = useState('');
   const [savingMetadata, setSavingMetadata] = useState(false);
   const [deletingStream, setDeletingStream] = useState(false);
+  const [rateLimitInfo, setRateLimitInfo] = useState(null);
 
   // Auto-refresh timer for live stream
   const pollIntervalRef = useRef(null);
   const raceIntervalRef = useRef(null);
+  const rateLimitTimerRef = useRef(null);
+
+  const safeFetch = async (url, options = {}) => {
+    const res = await safeFetch(url, options);
+    if (res.status === 429) {
+      try {
+        const data = await res.json();
+        setRateLimitInfo({ 
+          message: data.message || 'Превышен лимит запросов к серверу.', 
+          retryAfter: data.retryAfter || 60 
+        });
+      } catch (e) {
+        setRateLimitInfo({ message: 'Слишком много запросов к серверу.', retryAfter: 60 });
+      }
+      return res;
+    } else if (res.ok) {
+      setRateLimitInfo(null);
+    }
+    return res;
+  };
+
+  useEffect(() => {
+    if (rateLimitInfo && rateLimitInfo.retryAfter > 0) {
+      if (rateLimitTimerRef.current) clearInterval(rateLimitTimerRef.current);
+      rateLimitTimerRef.current = setInterval(() => {
+        setRateLimitInfo(prev => {
+          if (!prev || prev.retryAfter <= 1) {
+            clearInterval(rateLimitTimerRef.current);
+            return null;
+          }
+          return { ...prev, retryAfter: prev.retryAfter - 1 };
+        });
+      }, 1000);
+    } else if (!rateLimitInfo && rateLimitTimerRef.current) {
+      clearInterval(rateLimitTimerRef.current);
+    }
+    return () => clearInterval(rateLimitTimerRef.current);
+  }, [rateLimitInfo]);
 
   const fetchAdminStats = async () => {
     setLoadingAdminStats(true);
     try {
-      const res = await fetch(`${API_BASE}/api/admin/stats`, { credentials: 'include' });
+      const res = await safeFetch(`${API_BASE}/api/admin/stats`, { credentials: 'include' });
       if (res.status === 200) {
         const data = await res.json();
         if (data.success) {
@@ -144,7 +183,7 @@ export default function App() {
       const controller = new AbortController();
       const timeoutId = setTimeout(() => controller.abort(), 6000);
       
-      const res = await fetch(`${API_BASE}/api/health`, { signal: controller.signal });
+      const res = await safeFetch(`${API_BASE}/api/health`, { signal: controller.signal });
       clearTimeout(timeoutId);
       
       if (res.ok) {
@@ -254,7 +293,7 @@ export default function App() {
 
   const fetchAuthStatus = async () => {
     try {
-      const res = await fetch(`${API_BASE}/api/auth/status`, { credentials: 'include' });
+      const res = await safeFetch(`${API_BASE}/api/auth/status`, { credentials: 'include' });
       const data = await res.json();
       setTwitchConfigured(data.twitchConfigured !== false);
       if (data.loggedIn) {
@@ -269,7 +308,7 @@ export default function App() {
 
   const fetchStreams = async () => {
     try {
-      const res = await fetch(`${API_BASE}/api/streams`);
+      const res = await safeFetch(`${API_BASE}/api/streams`);
       const data = await res.json();
       setStreams(Array.isArray(data) ? data : []);
     } catch (e) {
@@ -290,13 +329,13 @@ export default function App() {
 
     try {
       // 1. Top Chatters
-      const chattersRes = await fetch(getUrl('/api/stats/chatters'));
+      const chattersRes = await safeFetch(getUrl('/api/stats/chatters'));
       const chattersData = await chattersRes.json();
       setChatters(Array.isArray(chattersData) ? chattersData : []);
 
       // 1.5. Overall stream stats summary (true totals)
       try {
-        const statsSummaryRes = await fetch(getUrl('/api/stats/summary'));
+        const statsSummaryRes = await safeFetch(getUrl('/api/stats/summary'));
         const statsSummaryData = await statsSummaryRes.json();
         if (statsSummaryData && !statsSummaryData.error) {
           setStatsSummary(statsSummaryData);
@@ -306,18 +345,18 @@ export default function App() {
       }
 
       // 2. Spoken voice words
-      const voiceRes = await fetch(getUrl('/api/stats/words', { type: 'voice', limit: 60 }));
+      const voiceRes = await safeFetch(getUrl('/api/stats/words', { type: 'voice', limit: 60 }));
       const voiceData = await voiceRes.json();
       setVoiceWords(Array.isArray(voiceData) ? voiceData : []);
 
       // 3. Written chat words by streamer
-      const chatWordsRes = await fetch(getUrl('/api/stats/words', { type: 'chat', limit: 60 }));
+      const chatWordsRes = await safeFetch(getUrl('/api/stats/words', { type: 'chat', limit: 60 }));
       const chatWordsData = await chatWordsRes.json();
       setChatWords(Array.isArray(chatWordsData) ? chatWordsData : []);
 
       // 4. Activity chart (only if stream is selected)
       if (selectedStreamId !== 'all') {
-        const activityRes = await fetch(getUrl('/api/stats/activity'));
+        const activityRes = await safeFetch(getUrl('/api/stats/activity'));
         const activityData = await activityRes.json();
         setActivityData(Array.isArray(activityData) ? activityData : []);
       } else {
@@ -326,15 +365,15 @@ export default function App() {
 
       // 5. Fetch moderator actions if authorized
       if (!twitchConfigured || (auth.loggedIn && (auth.user?.role === 'streamer' || auth.user?.role === 'moderator' || auth.user?.role === 'admin'))) {
-        const modRes = await fetch(getUrl('/api/stats/moderators', { limit: 100 }), { credentials: 'include' });
+        const modRes = await safeFetch(getUrl('/api/stats/moderators', { limit: 100 }), { credentials: 'include' });
         const modData = await modRes.json();
         setModActions(Array.isArray(modData) ? modData : []);
 
-        const summaryRes = await fetch(getUrl('/api/stats/moderators/summary'), { credentials: 'include' });
+        const summaryRes = await safeFetch(getUrl('/api/stats/moderators/summary'), { credentials: 'include' });
         const summaryData = await summaryRes.json();
         setModSummary(Array.isArray(summaryData) ? summaryData : []);
 
-        const profilesRes = await fetch(getUrl('/api/stats/moderators/profiles'), { credentials: 'include' });
+        const profilesRes = await safeFetch(getUrl('/api/stats/moderators/profiles'), { credentials: 'include' });
         const profilesData = await profilesRes.json();
         setModProfiles(Array.isArray(profilesData) ? profilesData : []);
         if (profilesData && profilesData.length > 0) {
@@ -374,7 +413,7 @@ export default function App() {
 
   const handleLogout = async () => {
     try {
-      await fetch(`${API_BASE}/api/auth/logout`, { credentials: 'include' });
+      await safeFetch(`${API_BASE}/api/auth/logout`, { credentials: 'include' });
       setAuth({ loggedIn: false, user: null });
       setModActions([]);
       setModSummary([]);
@@ -578,6 +617,40 @@ export default function App() {
       {/* Main Dashboard Panel */}
       <main className="dashboard-content">
 
+        {rateLimitInfo && (
+          <div className="rate-limit-banner" style={{
+            background: 'linear-gradient(90deg, rgba(255, 153, 0, 0.15) 0%, rgba(255, 102, 0, 0.15) 100%)',
+            backdropFilter: 'blur(8px)',
+            WebkitBackdropFilter: 'blur(8px)',
+            border: '1px solid rgba(255, 153, 0, 0.3)',
+            borderRadius: 'var(--radius-md)',
+            padding: '1rem',
+            margin: '0 0 1rem 0',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '1rem',
+            color: '#FF9900',
+            animation: 'fadeIn 0.3s ease-out'
+          }}>
+            <ShieldAlert size={24} style={{ animation: 'pulse 2s infinite' }} />
+            <div style={{ flex: 1 }}>
+              <h3 style={{ margin: 0, fontSize: '1rem', fontWeight: 600 }}>Внимание: Лимит запросов</h3>
+              <p style={{ margin: '0.2rem 0 0', fontSize: '0.85rem', color: 'rgba(255, 255, 255, 0.8)' }}>
+                {rateLimitInfo.message}
+              </p>
+            </div>
+            <div style={{
+              background: 'rgba(255, 153, 0, 0.2)',
+              padding: '0.5rem 1rem',
+              borderRadius: 'var(--radius-sm)',
+              fontWeight: 600,
+              fontVariantNumeric: 'tabular-nums'
+            }}>
+              Разблокировка через: {rateLimitInfo.retryAfter} сек.
+            </div>
+          </div>
+        )}
+
         {serverStatus !== 'online' ? (
           <div className="connection-overlay-container" style={{
             display: 'flex',