Initial commit MKD fixes

components/ConnectionIndicator.tsx

@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from 'react';
+import { Wifi, WifiOff } from 'lucide-react';
+import { connectionService, type ConnectionStatus } from '../services/connectionService';
+
+export const ConnectionIndicator: React.FC = () => {
+  const [status, setStatus] = useState<ConnectionStatus>(connectionService.getStatus());
+  const [apiBaseUrl] = useState<string>(import.meta.env.VITE_API_BASE_URL || '');
+  const [showIndicator, setShowIndicator] = useState(false);
+
+  useEffect(() => {
+    const unsubscribe = connectionService.subscribe((newStatus) => {
+      setStatus(newStatus);
+    });
+
+    // Не показываем индикатор сразу при загрузке, даём время на проверку подключения
+    const timer = setTimeout(() => {
+      setShowIndicator(true);
+    }, 2000); // 2 секунды задержка
+
+    return () => {
+      unsubscribe();
+      clearTimeout(timer);
+    };
+  }, []);
+
+  // Если API не настроен, не показываем индикатор (используется только localStorage)
+  if (!apiBaseUrl) {
+    return null;
+  }
+
+  // Не показываем индикатор сразу при загрузке
+  if (!showIndicator) {
+    return null;
+  }
+
+  // На ПК показываем индикатор только если есть проблема с подключением
+  // На мобильных показываем всегда для информативности
+  const isDesktop = typeof window !== 'undefined' && window.innerWidth >= 768;
+  if (isDesktop && status === 'connected') {
+    return null;
+  }
+
+  const getStatusColor = () => {
+    switch (status) {
+      case 'connected':
+        return 'text-emerald-500';
+      case 'connecting':
+        return 'text-amber-500';
+      case 'disconnected':
+        return 'text-red-500';
+      default:
+        return 'text-slate-400';
+    }
+  };
+
+  const getStatusBg = () => {
+    switch (status) {
+      case 'connected':
+        return 'bg-emerald-50';
+      case 'connecting':
+        return 'bg-amber-50';
+      case 'disconnected':
+        return 'bg-red-50';
+      default:
+        return 'bg-slate-50';
+    }
+  };
+
+  const getStatusText = () => {
+    switch (status) {
+      case 'connected':
+        return 'Подключено';
+      case 'connecting':
+        return 'Подключение...';
+      case 'disconnected':
+        return 'Нет подключения';
+      default:
+        return 'Неизвестно';
+    }
+  };
+
+  return (
+    <div className={`flex items-center gap-2 px-3 py-1.5 rounded-lg border ${getStatusBg()} ${status === 'disconnected' ? 'border-red-200' : status === 'connecting' ? 'border-amber-200' : 'border-emerald-200'} transition-all ${status === 'disconnected' ? 'shadow-sm shadow-red-500/10' : ''}`}>
+      {status === 'disconnected' ? (
+        <WifiOff className={`w-4 h-4 ${getStatusColor()}`} />
+      ) : (
+        <Wifi className={`w-4 h-4 ${getStatusColor()} ${status === 'connecting' ? 'animate-pulse' : ''}`} />
+      )}
+      <span className={`text-xs font-bold ${getStatusColor()} hidden sm:inline`}>
+        {getStatusText()}
+      </span>
+    </div>
+  );
+};