From e07fb589c57639b7f21ec0dba6c061cb4a3aee80 Mon Sep 17 00:00:00 2001
From: Kibi Kelburton <git@f0ck.it>
Date: Fri, 22 May 2026 18:12:37 +0200
Subject: [PATCH] better filter visualization

---
 public/s/css/f0ckm.css     | 95 ++++++++++++++++++++++++++++++++++++++
 public/s/js/f0ckm.js       | 81 ++++++++++++++++++++++++++++++++
 views/snippets/navbar.html | 17 ++++++-
 3 files changed, 192 insertions(+), 1 deletion(-)

diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css
index 24f08b1..1324d2e 100644
--- a/public/s/css/f0ckm.css
+++ b/public/s/css/f0ckm.css
@@ -14389,4 +14389,99 @@ body.scroller-active #gchat-reopen-bubble {
   color: #666;
   text-transform: uppercase;
   margin-bottom: 2px;
+}
+
+/* Filter badge style on navbar */
+.filter-badge {
+  position: absolute;
+  bottom: -6px;
+  font-size: 6px;
+  font-weight: 796;
+  padding: 2px 4px;
+  border-radius: 4px;
+  line-height: 1;
+  text-transform: uppercase;
+  color: #fff !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+  font-family: var(--font, monospace);
+  letter-spacing: 0.5px;
+  z-index: 10;
+  display: inline-flex;
+  align-items: center;
+}
+
+.filter-badge-sfw {
+  background: var(--badge-sfw, #68a728);
+}
+
+.filter-badge-nsfw {
+  background: var(--badge-nsfw, #E10DC3);
+}
+
+.filter-badge-nsfl {
+  background: var(--badge-nsfl, #660000);
+}
+
+.filter-badge-unt {
+  background: #ff9800;
+  /* Amber/Orange */
+}
+
+.filter-badge-all {
+  background: #555;
+  /* Slate grey */
+}
+
+/* Dynamic MIME dots styles */
+.filter-mime-dots {
+  display: inline-flex;
+  gap: 2px;
+  margin-left: 2px;
+  align-items: center;
+}
+
+.mime-dot {
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
+  animation: dot-fade-in 0.2s ease-out forwards;
+}
+
+@keyframes dot-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.mime-dot-video {
+  background-color: #00bcd4;
+  /* Cyan */
+  box-shadow: 0 0 3px #00bcd4;
+}
+
+.mime-dot-image {
+  background-color: #2ecc71;
+  /* Green */
+  box-shadow: 0 0 3px #2ecc71;
+}
+
+.mime-dot-audio {
+  background-color: #e84393;
+  /* Pink */
+  box-shadow: 0 0 3px #e84393;
+}
+
+.mime-dot-flash {
+  background-color: #f1c40f;
+  /* Yellow */
+  box-shadow: 0 0 3px #f1c40f;
 }
\ No newline at end of file
diff --git a/public/s/js/f0ckm.js b/public/s/js/f0ckm.js
index ea46cd7..a3000e8 100644
--- a/public/s/js/f0ckm.js
+++ b/public/s/js/f0ckm.js
@@ -274,8 +274,88 @@ window.cancelAnimFrame = (function () {
       });
     });
 
+    if (window.updateFilterBadge) window.updateFilterBadge();
   };
   window.updateMimeLabel = updateMimeLabel;
+
+  const updateFilterBadge = () => {
+    const badge = document.getElementById('nav-filter-badge');
+    if (!badge) return;
+
+    let activeMode = 0;
+    if (window.activeMode !== undefined) {
+      activeMode = window.activeMode;
+    } else {
+      const cookieMode = document.cookie.split('; ').find(row => row.startsWith('mode='));
+      if (cookieMode) {
+        activeMode = +cookieMode.split('=')[1];
+      } else if (window.f0ckSession && window.f0ckSession.mode !== undefined) {
+        activeMode = window.f0ckSession.mode;
+      }
+    }
+
+    let hasMimeFilter = false;
+    let mimeStr = '';
+    const cookieMime = document.cookie.split('; ').find(row => row.startsWith('mime='));
+    if (cookieMime) {
+      mimeStr = cookieMime.split('=')[1] || '';
+    }
+    const selectedMimes = mimeStr ? mimeStr.split(',').filter(m => ['video', 'audio', 'image', 'flash'].includes(m)) : [];
+    if (selectedMimes.length > 0) {
+      hasMimeFilter = true;
+    }
+
+    let badgeText = '';
+    let badgeClass = 'filter-badge';
+
+    switch (activeMode) {
+      case 0:
+        badgeText = 'SFW';
+        badgeClass += ' filter-badge-sfw';
+        break;
+      case 1:
+        badgeText = 'NSFW';
+        badgeClass += ' filter-badge-nsfw';
+        break;
+      case 4:
+        badgeText = 'NSFL';
+        badgeClass += ' filter-badge-nsfl';
+        break;
+      case 2:
+        badgeText = 'UNT';
+        badgeClass += ' filter-badge-unt';
+        break;
+      case 3:
+        badgeText = 'ALL';
+        badgeClass += ' filter-badge-all';
+        break;
+      default:
+        badgeText = 'SFW';
+        badgeClass += ' filter-badge-sfw';
+    }
+
+    badge.className = badgeClass;
+    badge.innerHTML = badgeText;
+
+    if (hasMimeFilter) {
+      const dotsContainer = document.createElement('span');
+      dotsContainer.className = 'filter-mime-dots';
+      selectedMimes.forEach(mime => {
+        const dot = document.createElement('span');
+        dot.className = `mime-dot mime-dot-${mime}`;
+        dot.title = mime.charAt(0).toUpperCase() + mime.slice(1);
+        dotsContainer.appendChild(dot);
+      });
+      badge.appendChild(dotsContainer);
+    }
+
+    badge.style.display = 'inline-flex';
+  };
+  window.updateFilterBadge = updateFilterBadge;
+
+  document.addEventListener('f0ck:modeChanged', () => {
+    updateFilterBadge();
+  });
   window.randomizeLogo = () => {
     const logoArr = window.f0ckBrandImages;
     if (!logoArr || !logoArr.length) return;
@@ -4548,6 +4628,7 @@ window.cancelAnimFrame = (function () {
   document.addEventListener('DOMContentLoaded', () => {
     initSearch();
     initExcludedTagsModal();
+    if (window.updateFilterBadge) window.updateFilterBadge();
   });
   // </search-overlay>
 
diff --git a/views/snippets/navbar.html b/views/snippets/navbar.html
index 350bd80..424757e 100644
--- a/views/snippets/navbar.html
+++ b/views/snippets/navbar.html
@@ -121,7 +121,22 @@
       <a href="/settings" title="Settings" class="desktop-only"><i class="fa-solid fa-gear"></i></a>
 
       <!-- Filter -->
-      <a href="#" id="nav-filter-btn" title="Filter"><i class="fa-solid fa-filter"></i></a>
+      <a href="#" id="nav-filter-btn" title="Filter" style="position: relative; display: inline-flex; align-items: center; justify-content: center;">
+        <i class="fa-solid fa-filter"></i>
+        @if(session.mode == 0)
+        <span id="nav-filter-badge" class="filter-badge filter-badge-sfw">SFW</span>
+        @elseif(session.mode == 1)
+        <span id="nav-filter-badge" class="filter-badge filter-badge-nsfw">NSFW</span>
+        @elseif(session.mode == 4)
+        <span id="nav-filter-badge" class="filter-badge filter-badge-nsfl">NSFL</span>
+        @elseif(session.mode == 2)
+        <span id="nav-filter-badge" class="filter-badge filter-badge-unt">UNT</span>
+        @elseif(session.mode == 3)
+        <span id="nav-filter-badge" class="filter-badge filter-badge-all">ALL</span>
+        @else
+        <span id="nav-filter-badge" class="filter-badge filter-badge-sfw">SFW</span>
+        @endif
+      </a>
 
       <!-- Logout -->
       <a href="/logout" title="Logout" class="desktop-only"><i class="fa-solid fa-right-from-bracket"></i></a>