From c50a8f472ca864ab3849c34a231cf76389772aa1 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Sun, 29 Mar 2026 15:07:46 +0300
Subject: [PATCH] fix: make folder status visible with dot + text label

Status dot was 8x8px with no text, nearly invisible in the table.
Now renders as a colored dot with an adjacent text label
(Available / Unavailable).
---
 media_server/static/css/styles.css | 18 +++++++++++++++---
 media_server/static/js/browser.js  |  4 ++--
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/media_server/static/css/styles.css b/media_server/static/css/styles.css
index 7ad7668..62186ed 100644
--- a/media_server/static/css/styles.css
+++ b/media_server/static/css/styles.css
@@ -192,19 +192,31 @@ h1 {
 }
 
 .status-dot {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    transition: color 0.3s;
+}
+
+.status-dot::before {
+    content: '';
+    display: inline-block;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--error);
+    flex-shrink: 0;
     transition: background 0.3s;
 }
 
-.status-dot.connected,
-.status-dot.status-online {
+.status-dot.connected::before,
+.status-dot.status-online::before {
     background: var(--accent);
 }
 
-.status-dot.status-offline {
+.status-dot.status-offline::before {
     background: var(--error);
 }
 
diff --git a/media_server/static/js/browser.js b/media_server/static/js/browser.js
index 8eb4f19..5a26d67 100644
--- a/media_server/static/js/browser.js
+++ b/media_server/static/js/browser.js
@@ -906,8 +906,8 @@ export function loadFoldersTable() {
     tbody.innerHTML = entries.map(([id, folder]) => {
         const available = folder.available !== false;
         const statusIcon = available
-            ? '<span class="status-dot status-online" title="' + t('browser.folder_available') + '"></span>'
-            : '<span class="status-dot status-offline" title="' + t('browser.folder_unavailable') + '"></span>';
+            ? '<span class="status-dot status-online">' + t('browser.folder_available') + '</span>'
+            : '<span class="status-dot status-offline">' + t('browser.folder_unavailable') + '</span>';
         const enabledBadge = folder.enabled
             ? ''
             : ' <span class="folder-disabled-badge">' + t('browser.folder_disabled') + '</span>';