From d59a15d1113e454f7312d3227b9083e72c246c4c Mon Sep 17 00:00:00 2001
From: rajchales-monito <rajchales-monito@users.noreply.github.com>
Date: Thu, 30 Jul 2026 13:29:40 +0200
Subject: [PATCH] Style hide bots as toggle

---
 public/admin.css  | 41 ++++++++++++++++++++++++++++++++++++-----
 public/admin.html |  6 +++++-
 public/admin.js   |  7 +++----
 3 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/public/admin.css b/public/admin.css
index 51149cf..1650759 100644
--- a/public/admin.css
+++ b/public/admin.css
@@ -913,16 +913,47 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
 .visitor-panel header span { color: var(--muted); font-size: 12px; }
 .visitor-filter-toggle {
   height: 30px;
-  padding: 0 9px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
   border: 1px solid var(--line);
+  border-radius: 8px;
   background: #f8fbf9;
   color: var(--muted);
   font-size: 12px;
+  cursor: pointer;
+  user-select: none;
 }
-.visitor-filter-toggle.active {
-  background: #eaf6f1;
-  color: var(--brand);
-  border-color: #c7e8dc;
+.visitor-filter-toggle input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+.visitor-filter-toggle span {
+  position: relative;
+  width: 42px;
+  height: 24px;
+  border-radius: 999px;
+  background: #cbd6d0;
+  flex: 0 0 42px;
+}
+.visitor-filter-toggle span:before {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: white;
+  content: "";
+  transition: transform .16s ease;
+}
+.visitor-filter-toggle input:checked + span {
+  background: var(--brand);
+}
+.visitor-filter-toggle input:checked + span:before {
+  transform: translateX(18px);
 }
 .visitor-list {
   min-height: 0;
diff --git a/public/admin.html b/public/admin.html
index 4851305..e686ecd 100644
--- a/public/admin.html
+++ b/public/admin.html
@@ -96,7 +96,11 @@
         <aside class="visitor-panel">
           <header>
             <h2>Navstevnici</h2>
-            <button id="hideBotsToggle" class="visitor-filter-toggle" type="button">Skryt boty</button>
+            <label class="visitor-filter-toggle" title="Skryt boty">
+              <input id="hideBotsToggle" type="checkbox">
+              <span></span>
+              Boty
+            </label>
             <span id="visitorCount">0 online</span>
           </header>
           <div id="visitorList" class="visitor-list">
diff --git a/public/admin.js b/public/admin.js
index 80a8904..e1078ae 100644
--- a/public/admin.js
+++ b/public/admin.js
@@ -322,8 +322,8 @@ $("#conversationFilter").addEventListener("change", () => {
   renderConversations();
 });
 
-$("#hideBotsToggle").addEventListener("click", () => {
-  state.hideBots = !state.hideBots;
+$("#hideBotsToggle").addEventListener("change", (event) => {
+  state.hideBots = event.target.checked;
   localStorage.setItem("mf_admin_hide_bots", state.hideBots ? "1" : "0");
   renderVisitors();
 });
@@ -1068,8 +1068,7 @@ function conversationVisitorName(item) {
 function renderVisitors() {
   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";
+  $("#hideBotsToggle").checked = state.hideBots;
   $("#visitorCount").textContent = `${visitors.length} na webu${state.hideBots && botCount ? ` · ${botCount} bot` : ""}`;
   $("#visitorList").innerHTML = visitors.length ? visitors.map((visitor) => `
     <article class="visitor-card ${visitor.lastConversationId ? "clickable" : ""} ${visitor.lastConversationId === state.activeId ? "active" : ""} ${visitor.isBot ? "bot" : ""}" data-visitor-conversation="${escapeHtml(visitor.lastConversationId || "")}">