Add visitor bot visibility toggle

public/admin.css

@@ -369,13 +369,26 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
 .visitor-panel header {
   padding: 14px;
   border-bottom: 1px solid var(--line);
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
   gap: 10px;
   align-items: center;
 }
 .visitor-panel h2 { margin: 0; font-size: 18px; }
 .visitor-panel header span { color: var(--muted); font-size: 12px; }
+.visitor-filter-toggle {
+  height: 30px;
+  padding: 0 9px;
+  border: 1px solid var(--line);
+  background: #f8fbf9;
+  color: var(--muted);
+  font-size: 12px;
+}
+.visitor-filter-toggle.active {
+  background: #eaf6f1;
+  color: var(--brand);
+  border-color: #c7e8dc;
+}
 .visitor-list {
   min-height: 0;
   overflow: auto;
@@ -385,6 +398,7 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
   border-bottom: 1px solid var(--line);
   background: white;
 }
+.visitor-card.bot { opacity: .68; }
 .visitor-card.clickable { cursor: pointer; }
 .visitor-card.clickable:hover { background: #f8fbf9; }
 .visitor-card-head {

public/admin.html

@@ -77,6 +77,7 @@
         <aside class="visitor-panel">
           <header>
             <h2>Navstevnici</h2>
+            <button id="hideBotsToggle" class="visitor-filter-toggle" type="button">Skryt boty</button>
             <span id="visitorCount">0 online</span>
           </header>
           <div id="visitorList" class="visitor-list">

public/admin.js

@@ -7,6 +7,7 @@ const state = {
   active: null,
   events: null,
   statusFilter: "active",
+  hideBots: localStorage.getItem("mf_admin_hide_bots") !== "0",
   replyFiles: [],
   attentionTimer: null,
   attentionOn: false,
@@ -167,6 +168,12 @@ $("#conversationFilter").addEventListener("change", () => {
   renderConversations();
 });
 
+$("#hideBotsToggle").addEventListener("click", () => {
+  state.hideBots = !state.hideBots;
+  localStorage.setItem("mf_admin_hide_bots", state.hideBots ? "1" : "0");
+  renderVisitors();
+});
+
 $("#conversationList").addEventListener("click", async (event) => {
   const photoButton = event.target.closest("[data-photo-url]");
   const openButton = event.target.closest("[data-open]");
@@ -326,14 +333,18 @@ function renderConversations() {
 }
 
 function renderVisitors() {
-  $("#visitorCount").textContent = `${state.visitors.length} online`;
-  $("#visitorList").innerHTML = state.visitors.length ? state.visitors.map((visitor) => `
-    <article class="visitor-card ${visitor.lastConversationId ? "clickable" : ""}" data-visitor-conversation="${escapeHtml(visitor.lastConversationId || "")}">
+  const visitors = state.hideBots ? state.visitors.filter((visitor) => !visitor.isBot) : state.visitors;
+  const botCount = state.visitors.filter((visitor) => visitor.isBot).length;
+  $("#hideBotsToggle").classList.toggle("active", state.hideBots);
+  $("#hideBotsToggle").textContent = state.hideBots ? "Skryt boty" : "Boty videt";
+  $("#visitorCount").textContent = `${visitors.length} online${state.hideBots && botCount ? ` · ${botCount} bot` : ""}`;
+  $("#visitorList").innerHTML = visitors.length ? visitors.map((visitor) => `
+    <article class="visitor-card ${visitor.lastConversationId ? "clickable" : ""} ${visitor.isBot ? "bot" : ""}" data-visitor-conversation="${escapeHtml(visitor.lastConversationId || "")}">
       <div class="visitor-card-head">
         <span class="visitor-avatar">${escapeHtml(visitor.initials || "??")}</span>
         <div>
           <strong>${escapeHtml(visitor.label || "Navstevnik")}</strong>
-          <small>${escapeHtml(browserLabel(visitor.device))}</small>
+          <small>${escapeHtml(visitor.isBot ? `bot: ${visitor.botReason || "crawler"}` : browserLabel(visitor.device))}</small>
         </div>
         <span class="online-dot" title="Online"></span>
       </div>