From 90c3c6a01f46c9b29c5d92702d7383f32e8951d7 Mon Sep 17 00:00:00 2001
From: Christophe Besson <cbesson@gmail.com>
Date: Wed, 19 Aug 2026 16:36:29 +0200
Subject: feat(ui): 11-point UI overhaul — tabs, transfers, settings, uploads
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hub/UI:
- Icon-only group tabs (chat, files, settings) with per-group default tab
- Transfer widget: filename becomes a clickable link to open completed downloads
- Pulse animation on transfer icon (pale→dark green) while active
- Download button feedback in FilePreview (spinner, auto-reset)
- Group mute toggle persists across navigation
- Login page autofocus, chat refocus after send
- Theme toggle closes menu, status badge and duplicate connecting removed
- Create-folder restricted to operators, download-path note removed
- User preferences API (CRUD) with Alembic migration
- Profile: email display/edit via PATCH /v1/users/me
- Settings: "Defaults" section for default tab selector
- All 10 locale files updated

Node:
- upload_dir in node.toml: separate filesystem path for uploads
- Root.direct flag: uploads land at root path, no subdirectory
- CLI --upload-dir flag on `group add`
- Admin UI accepts upload_dir

Client (Electron):
- shell.openPath bridge for opening completed downloads
- platform.js passes open callback from native save

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../meshbay-hub/src/meshbay_hub/static/style.css   | 47 ++++++++++++++--------
 1 file changed, 31 insertions(+), 16 deletions(-)

(limited to 'packages/meshbay-hub/src/meshbay_hub/static/style.css')

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index 238f33a..9ff5923 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -442,17 +442,6 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 .group-header h2 { margin-bottom: 0; }
 
-.status-badge {
-  display: inline-block;
-  padding: 3px 10px;
-  border-radius: 12px;
-  font-size: 0.75em;
-  font-weight: 500;
-}
-.status-ok   { background: #16a34a20; color: var(--success); }
-.status-err  { background: var(--error-bg); color: var(--error); }
-.status-busy { background: var(--bg-raised); color: var(--text-secondary); }
-
 /* ── Group tabs ──────────────────────────────────────────────────────────── */
 
 .group-tabs {
@@ -467,19 +456,35 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   border: none;
   border-bottom: 2px solid transparent;
   margin-bottom: -2px;
-  padding: 8px 20px;
+  padding: 10px 18px;
   color: var(--text-secondary);
-  font-size: 0.9em;
-  font-weight: 500;
   cursor: pointer;
   border-radius: 0;
   transition: color 0.12s, border-color 0.12s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .group-tab:hover { color: var(--text); background: none; }
 .group-tab.active {
   color: var(--accent);
   border-bottom-color: var(--accent);
 }
+.tab-icon { width: 22px; height: 22px; }
+
+.group-mute-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-dim);
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
+.group-mute-btn:hover { color: var(--text); }
+.group-mute-btn .icon { width: 20px; height: 20px; }
 
 /* ── Chat panel ──────────────────────────────────────────────────────────── */
 
@@ -998,7 +1003,7 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   color: var(--text);
   font-size: 0.9em;
   cursor: pointer;
-  min-width: 120px;
+  min-width: 180px;
 }
 .settings-select:focus { outline: none; border-color: var(--border-focus); }
 
@@ -1054,6 +1059,7 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   flex-shrink: 0;
 }
 .video-close:hover { background: rgba(255, 255, 255, 0.25); }
+.video-close.dl-active { background: rgba(34, 197, 94, 0.25); pointer-events: none; }
 
 .video-container {
   width: 100%;
@@ -1457,7 +1463,11 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 /* Green while transfers are running: the count in the badge says how many, but
    the colour is what is readable without looking at it. Back to the ordinary
    nav colour the moment the last one finishes. */
-.transfer-btn.active .icon { color: var(--success); }
+@keyframes pulse-green {
+  0%, 100% { color: #86efac; }
+  50% { color: #15803d; }
+}
+.transfer-btn.active .icon { animation: pulse-green 2s ease-in-out infinite; }
 
 .transfer-wrap { position: relative; display: flex; align-items: center; }
 .transfer-btn {
@@ -1504,6 +1514,11 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+a.transfer-name {
+  color: var(--link);
+  text-decoration: underline;
+  cursor: pointer;
+}
 .transfer-cancel {
   background: none;
   border: none;
-- 
cgit v1.2.3