From b3fad00f808c0157ea0e2ef4f92fb069807c5409 Mon Sep 17 00:00:00 2001
From: Dmitriy Petrov <floplopru@gmail.com>
Date: Sat, 9 May 2026 08:38:37 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD?=
 =?UTF-8?q?=D0=BE=D1=81=D1=82=D1=8C=20=D1=81=D0=BE=D1=80=D1=82=D0=B8=D1=80?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=BA=D0=B8=20=D1=82=D1=80=D0=B0=D1=84=D0=B8=D0=BA?=
 =?UTF-8?q?=D0=B0=20=D0=BF=D0=BE=20=D1=87=D0=B0=D1=81=D1=82=D0=BE=D1=82?=
 =?UTF-8?q?=D0=B5=20=D0=B8=20=D0=B2=D1=80=D0=B5=D0=BC=D0=B5=D0=BD=D0=B8=20?=
 =?UTF-8?q?Refs:=20None?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/web/components/LogsPage.jsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/web/components/LogsPage.jsx b/src/web/components/LogsPage.jsx
index ec321c8..9f3ed8a 100644
--- a/src/web/components/LogsPage.jsx
+++ b/src/web/components/LogsPage.jsx
@@ -33,7 +33,7 @@ const CATEGORY_BADGE = {
   other:  { cls: '',        label: 'other' },
 };
 
-function groupTraffic(list) {
+function groupTraffic(list, sortBy = 'time') {
   const map = new Map();
   for (const e of list) {
     const key = `${e.category}|${e.host}|${e.port}|${e.matchedRule || ''}`;
@@ -47,7 +47,9 @@ function groupTraffic(list) {
       map.set(key, { ...e, _key: key, _lastTs: ts, count: 1, lastTs: e.ts });
     }
   }
-  return Array.from(map.values()).sort((a, b) => b._lastTs - a._lastTs);
+  const arr = Array.from(map.values());
+  if (sortBy === 'count') return arr.sort((a, b) => b.count - a.count || b._lastTs - a._lastTs);
+  return arr.sort((a, b) => b._lastTs - a._lastTs);
 }
 
 function TrafficTab() {
@@ -56,6 +58,7 @@ function TrafficTab() {
   const [filter, setFilter] = useState('all'); // all | direct | vpn | block
   const [search, setSearch] = useState('');
   const [grouped, setGrouped] = useState(true);
+  const [sortBy, setSortBy] = useState('count'); // time | count
   const [autoscroll, setAutoscroll] = useState(true);
   const containerRef = useRef(null);
   const pausedRef = useRef(false);
@@ -90,8 +93,8 @@ function TrafficTab() {
         e.matchedRule?.toLowerCase().includes(s),
       );
     }
-    return grouped ? groupTraffic(list) : list;
-  }, [traffic, filter, search, grouped]);
+    return grouped ? groupTraffic(list, sortBy) : list;
+  }, [traffic, filter, search, grouped, sortBy]);
 
   useEffect(() => {
     if (!autoscroll || !containerRef.current) return;
@@ -124,6 +127,12 @@ function TrafficTab() {
           <input type="checkbox" checked={grouped} onChange={(e) => setGrouped(e.target.checked)} />
           Группировать
         </label>
+        {grouped && (
+          <select className="select" value={sortBy} onChange={(e) => setSortBy(e.target.value)} style={{ width: 'auto' }}>
+            <option value="count">По частоте</option>
+            <option value="time">По времени</option>
+          </select>
+        )}
         <label className="checkbox">
           <input type="checkbox" checked={autoscroll} onChange={(e) => setAutoscroll(e.target.checked)} />
           Автоскролл