Add Toggle Switch and Info Tooltip to DataUsageTable and Enhance Styling on Connections Page (#1691)

* feat(connections)!: responsive table + sort controls

- 2/3 column mobile layout
- inline cell labels
- sort dropdown with toggle
- text justification

* fix: reorder class names for consistent styling in Header, Connections, and Rules

* chore: update package manager version to [email protected]

* fix: adjust sort label styling for improved visibility

* feat: synchronize DataUsageTable with TrafficWidget and auto-reset on service restart

- Implement global background effect for continuous data usage monitoring
- Add automatic service restart detection via total traffic monitoring
- Sync data clearing behavior with TrafficWidget on service restart
- Use baseline tracking to persist data across browser sessions
- Implement per-connection incremental calculation for accuracy
- Add automatic cleanup of inactive connection tracking data
- Persist data usage statistics to localStorage with migration support
- Add console logging for debugging service restart events
- Fix import statements in DataUsageTable component

This ensures DataUsageTable data stays synchronized with TrafficWidget
totals and automatically resets when the backend service restarts,
providing consistent behavior across the application.

Fixes memory leaks by cleaning up stale connection tracking data.
Improves data accuracy through baseline + incremental approach.

* feat: add toggle for data usage table visibility and enhance UI with info tooltip

* fix: update initial visibility state of DataUsageTable and enhance styling in Connections page

---------

Signed-off-by: Anggun Caksono <[email protected]>

Author: alrescha79-cmd

src/components/DataUsageTable.tsx

@@ -3,7 +3,7 @@ import { endpoint } from '~/signals'
 export const LogoText = () => (
   <div class="text-md flex items-center gap-1 font-bold whitespace-nowrap uppercase sm:text-xl">
     <A
-      class="bg-gradient-to-br from-primary to-secondary bg-clip-text text-transparent"
+      class="bg-linear-to-br from-primary to-secondary bg-clip-text text-transparent"
       href={endpoint() ? '/' : '/setup'}
     >
       metacube

src/components/LogoText.tsx

@@ -140,4 +140,7 @@ export default {
   sortBy: 'Sort by:',
   ipShort: 'IP',
   na: 'N/A',
+  show: 'Show',
+  dataUsageInfo:
+    'Data usage monitoring is performed on the client-side (browser). When the browser is closed, monitoring will likely not run.',
 }

src/i18n/en.ts

@@ -142,4 +142,7 @@ export default {
   sortBy: 'Сортировать по:',
   ipShort: 'IP',
   na: 'Н/Д',
+  show: 'Показать',
+  dataUsageInfo:
+    'Мониторинг использования данных выполняется на стороне клиента (браузер). Когда браузер закрыт, мониторинг, скорее всего, не будет работать.',
 } satisfies Dict

src/i18n/ru.ts

@@ -142,4 +142,7 @@ export default {
   sortBy: '排序：',
   ipShort: 'IP',
   na: '无',
+  show: '显示',
+  dataUsageInfo:
+    '数据用量监控在客户端（浏览器）执行。当浏览器关闭时，监控可能不会运行。',
 } satisfies Dict

src/i18n/zh.ts

@@ -627,15 +627,18 @@ export default () => {
               data={table.getRowModel().rows}
               as="tbody"
               item={(props) => (
-                <tr {...props} class="flex flex-wrap md:table-row" />
+                <tr
+                  {...props}
+                  class="border-base-400 even:bg-base-400 flex flex-wrap border-t border-b-2 odd:bg-base-100 md:table-row md:border-t-0"
+                />
               )}
             >
               {(row) => (
                 <For each={row.getVisibleCells()}>
                   {(cell) => {
                     return (
                       <td
-                        class="w-1/2 min-w-[50%] py-2 text-justify align-top wrap-break-word nth-[2n]:text-right sm:w-1/3 sm:min-w-[33.333%] sm:nth-[2n]:text-justify sm:nth-[3n]:text-right md:inline-block md:w-44 md:min-w-44 md:text-start lg:w-48 lg:min-w-48"
+                        class="w-1/2 min-w-[50%] py-4 text-justify align-top wrap-break-word nth-[2n]:text-right sm:w-1/3 sm:min-w-[33.333%] sm:nth-[2n]:text-justify sm:nth-[3n]:text-right md:inline-block md:w-44 md:min-w-44 md:py-3 md:text-start md:nth-[2n]:text-start md:nth-[3n]:text-start lg:w-68 lg:min-w-48"
                         onContextMenu={(e) => {
                           e.preventDefault()
 

src/pages/Connections.tsx

@@ -33,7 +33,9 @@ export const [latestConnectionMsg, setLatestConnectionMsg] =
 let lastUploadTotal = 0
 let lastDownloadTotal = 0
 
-// Global effect to monitor data usage - runs always, independent of page
+// Global effect to monitor data usage - runs always in background, independent of page
+// This effect continuously tracks connection data and updates data usage statistics
+// It also detects service restarts by monitoring if total values decrease
 createEffect(() => {
   const msg = latestConnectionMsg()
   const rawConns = msg?.connections
@@ -42,13 +44,15 @@ createEffect(() => {
   const currentUploadTotal = msg?.uploadTotal || 0
   const currentDownloadTotal = msg?.downloadTotal || 0
 
-  // If totals decreased, service was restarted - reset tracking
+  // If totals decreased, service was restarted - reset all tracking
+  // This ensures data usage stats are cleared on service restart, same as TrafficWidget behavior
   if (
     currentUploadTotal < lastUploadTotal ||
     currentDownloadTotal < lastDownloadTotal
   ) {
-    // Service restarted, clear connection tracking data
+    // Service restarted, clear connection tracking data and data usage
     resetConnectionTracking()
+    clearDataUsage()
   }
 
   lastUploadTotal = currentUploadTotal
@@ -63,7 +67,7 @@ createEffect(() => {
     const prevConns = allConnections()
     const activeConns = restructRawMsgToConnection(rawConns, prevConns)
 
-    // Update data usage tracking
+    // Update data usage tracking - accumulates data per source IP
     updateDataUsage(activeConns)
 
     // Cleanup inactive connection tracking data periodically
@@ -233,23 +237,69 @@ export const [dataUsageMap, setDataUsageMap] = makePersisted(
   },
 )
 
+// Store baseline totals from backend to calculate incremental changes across browser sessions
+export const [baselineTotals, setBaselineTotals] = makePersisted(
+  createSignal<{ upload: number; download: number }>({
+    upload: 0,
+    download: 0,
+  }),
+  {
+    name: 'dataUsageBaseline',
+    storage: localStorage,
+  },
+)
+
 // Track last known data for each connection to calculate incremental changes
 const connectionLastData = new Map<
   string,
   { upload: number; download: number }
 >()
 
+// Track if session has been initialized
+let hasInitializedSession = false
+
 // Reset connection tracking data when service restarts
 export const resetConnectionTracking = () => {
   connectionLastData.clear()
-  console.log('[Data Usage] Connection tracking reset due to service restart')
+  setBaselineTotals({ upload: 0, download: 0 })
+  hasInitializedSession = false
+  console.log(
+    '[Data Usage] Connection tracking reset due to service restart. Data usage map will be cleared.',
+  )
 }
 
+// Update data usage statistics by tracking incremental changes per connection
+// This function is called continuously in the background to accumulate data usage per IP
+// The accumulated totals are persisted in localStorage and synced with TrafficWidget behavior
 export const updateDataUsage = (connections: Connection[]) => {
-  const updates: Record<string, DataUsageEntry> = { ...dataUsageMap() }
+  const msg = latestConnectionMsg()
+  const currentGlobalUpload = msg?.uploadTotal || 0
+  const currentGlobalDownload = msg?.downloadTotal || 0
+
+  // Initialize session baseline on first run
+  if (!hasInitializedSession) {
+    const baseline = baselineTotals()
+    hasInitializedSession = true
+    console.log(
+      '[Data Usage] Session initialized. Baseline:',
+      baseline,
+      'Current global:',
+      { upload: currentGlobalUpload, download: currentGlobalDownload },
+    )
+  }
 
-  // Group connections by source IP and sum their current data
-  const ipDataMap = new Map<string, { upload: number; download: number }>()
+  const updates: Record<string, DataUsageEntry> = { ...dataUsageMap() }
+  const now = Date.now()
+
+  // Group connections by source IP and use their current cumulative data
+  const ipDataMap = new Map<
+    string,
+    {
+      upload: number
+      download: number
+      connectionIds: Set<string>
+    }
+  >()
 
   connections.forEach((conn) => {
     const sourceIP = conn.metadata.sourceIP
@@ -259,78 +309,114 @@ export const updateDataUsage = (connections: Connection[]) => {
     const currentUpload = conn.upload || 0
     const currentDownload = conn.download || 0
 
+    // Track connection IDs per IP
+    if (!ipDataMap.has(sourceIP)) {
+      ipDataMap.set(sourceIP, {
+        upload: 0,
+        download: 0,
+        connectionIds: new Set(),
+      })
+    }
+
+    const ipData = ipDataMap.get(sourceIP)!
+    ipData.connectionIds.add(conn.id)
+
     // Get last known data for this connection
     const lastData = connectionLastData.get(conn.id)
 
-    // Calculate incremental change
-    let uploadDelta = 0
-    let downloadDelta = 0
-
     if (lastData) {
-      uploadDelta = currentUpload - lastData.upload
-      downloadDelta = currentDownload - lastData.download
+      // Calculate incremental change from last known state
+      // Only count positive deltas to avoid negative values on connection resets
+      const uploadDelta = Math.max(0, currentUpload - lastData.upload)
+      const downloadDelta = Math.max(0, currentDownload - lastData.download)
+
+      ipData.upload += uploadDelta
+      ipData.download += downloadDelta
     } else {
-      // First time seeing this connection, use full amount
-      uploadDelta = currentUpload
-      downloadDelta = currentDownload
+      // First time seeing this connection, add its current cumulative data
+      ipData.upload += currentUpload
+      ipData.download += currentDownload
     }
 
-    // Update last known data
+    // Update last known data for this connection
     connectionLastData.set(conn.id, {
       upload: currentUpload,
       download: currentDownload,
     })
+  })
 
-    // Accumulate data per IP
-    if (!ipDataMap.has(sourceIP)) {
-      ipDataMap.set(sourceIP, {
-        upload: 0,
-        download: 0,
-      })
-    }
+  // Update baseline totals based on current global totals
+  // This ensures data persists across browser sessions
+  const totalTracked = Object.values(updates).reduce(
+    (acc, entry) => ({
+      upload: acc.upload + entry.upload,
+      download: acc.download + entry.download,
+    }),
+    { upload: 0, download: 0 },
+  )
 
-    const ipData = ipDataMap.get(sourceIP)!
+  // Add new data from this update cycle
+  ipDataMap.forEach((data) => {
+    totalTracked.upload += data.upload
+    totalTracked.download += data.download
+  })
 
-    ipData.upload += uploadDelta
-    ipData.download += downloadDelta
+  // Update baseline to reflect all data we've tracked so far
+  setBaselineTotals({
+    upload: totalTracked.upload,
+    download: totalTracked.download,
   })
 
   // Update data usage map with accumulated changes
   ipDataMap.forEach((data, sourceIP) => {
     const existing = updates[sourceIP]
-    const now = Date.now()
 
     if (existing) {
-      updates[sourceIP] = {
-        ...existing,
-        upload: existing.upload + data.upload,
-        download: existing.download + data.download,
-        total:
-          existing.upload + data.upload + existing.download + data.download,
-        firstSeen: existing.firstSeen || now, // Ensure firstSeen exists
-        lastSeen: now,
+      // Only update if there's actual new data
+      if (data.upload > 0 || data.download > 0) {
+        updates[sourceIP] = {
+          ...existing,
+          upload: existing.upload + data.upload,
+          download: existing.download + data.download,
+          total:
+            existing.upload + data.upload + (existing.download + data.download),
+          firstSeen: existing.firstSeen || now,
+          lastSeen: now,
+        }
+      } else {
+        // Just update lastSeen to show it's still active
+        updates[sourceIP] = {
+          ...existing,
+          lastSeen: now,
+        }
       }
     } else {
-      updates[sourceIP] = {
-        sourceIP,
-        macAddress: '',
-        upload: data.upload,
-        download: data.download,
-        total: data.upload + data.download,
-        firstSeen: now,
-        lastSeen: now,
+      // New IP entry
+      if (data.upload > 0 || data.download > 0) {
+        updates[sourceIP] = {
+          sourceIP,
+          macAddress: '',
+          upload: data.upload,
+          download: data.download,
+          total: data.upload + data.download,
+          firstSeen: now,
+          lastSeen: now,
+        }
       }
     }
   })
 
   setDataUsageMap(updates)
 }
 
+// Clear all data usage statistics and reset connection tracking
+// This is called on manual clear or automatic service restart detection
 export const clearDataUsage = () => {
   setDataUsageMap({})
   connectionLastData.clear()
 }
 
+// Remove a specific IP entry from data usage tracking
 export const removeDataUsageEntry = (sourceIP: string) => {
   setDataUsageMap((prev) => {
     const updates = { ...prev }
@@ -341,6 +427,8 @@ export const removeDataUsageEntry = (sourceIP: string) => {
   })
 }
 
+// Cleanup tracking data for connections that no longer exist
+// This prevents memory leaks from accumulating stale connection data
 export const cleanupInactiveConnections = (activeConns?: Connection[]) => {
   const activeConnectionIds = activeConns
     ? new Set(activeConns.map((conn) => conn.id))