Add server statistics display in App component with online count and active players

src/App.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import Layout from './components/Layout'
 import { useStats } from './contexts/StatsContext'
+import { useServers } from './contexts/ServerContext'
 import './App.css'
 
 // Loading Skeleton Component
@@ -37,6 +38,21 @@ const LoadingSkeleton = ({ width = '60px', height = '40px', className = '' }: {
 function App() {
   const { t } = useTranslation()
   const { stats, recentChats, topPlayers, loading } = useStats()
+  const { servers } = useServers()
+
+  // Calculate server statistics
+  const onlineServers = servers.filter(s => s.status === 'online')
+  const totalPlayers = onlineServers.reduce((sum, s) => sum + (s.a2sData ? (s.a2sData.playerCount - s.a2sData.botCount) : 0), 0)
+  const totalSlots = onlineServers.reduce((sum, s) => sum + (s.a2sData?.maxPlayers || 0), 0)
+  
+  // Get most popular server (highest player count)
+  const mostPopularServer = onlineServers.length > 0 
+    ? onlineServers.reduce((prev, current) => {
+        const prevPlayers = (prev.a2sData?.playerCount || 0) - (prev.a2sData?.botCount || 0)
+        const currentPlayers = (current.a2sData?.playerCount || 0) - (current.a2sData?.botCount || 0)
+        return currentPlayers > prevPlayers ? current : prev
+      })
+    : null
 
   // Format playtime from seconds to hours and minutes
   const formatPlayTime = (seconds: number) => {
@@ -217,9 +233,56 @@ function App() {
             <div className="sidebar-card">
               <h3>{t('activity.serverInfo')}</h3>
               <div className="quick-stats">
-                <div>{t('activity.serverStatus')}</div>
-                <div>{t('activity.currentMap')}</div>
-                <div>{t('activity.nextRestart')}</div>
+                <div style={{ 
+                  display: 'flex', 
+                  justifyContent: 'space-between', 
+                  alignItems: 'center',
+                  padding: '0.5rem 0',
+                  borderBottom: '1px solid var(--border-color)'
+                }}>
+                  <span style={{ color: 'var(--text-secondary)' }}>{t('activity.serverStatus')}</span>
+                  <span style={{ 
+                    color: onlineServers.length > 0 ? '#10b981' : '#ef4444',
+                    fontWeight: 'bold'
+                  }}>
+                    {onlineServers.length}/{servers.length} Online
+                  </span>
+                </div>
+                <div style={{ 
+                  display: 'flex', 
+                  justifyContent: 'space-between', 
+                  alignItems: 'center',
+                  padding: '0.5rem 0',
+                  borderBottom: '1px solid var(--border-color)'
+                }}>
+                  <span style={{ color: 'var(--text-secondary)' }}>Active Players</span>
+                  <span style={{ 
+                    color: 'var(--accent-primary)',
+                    fontWeight: 'bold'
+                  }}>
+                    {totalPlayers}/{totalSlots}
+                  </span>
+                </div>
+                <div style={{ 
+                  display: 'flex', 
+                  justifyContent: 'space-between', 
+                  alignItems: 'center',
+                  padding: '0.5rem 0'
+                }}>
+                  <span style={{ color: 'var(--text-secondary)' }}>Most Popular</span>
+                  <span style={{ 
+                    color: 'var(--text-primary)',
+                    fontWeight: 'bold',
+                    fontSize: '0.9rem',
+                    maxWidth: '60%',
+                    textAlign: 'right',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap'
+                  }}>
+                    {mostPopularServer ? mostPopularServer.name : 'N/A'}
+                  </span>
+                </div>
               </div>
             </div>
           </div>