feat(ui): 11-point UI overhaul — tabs, transfers, settings, uploads

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>

1 files changed, 31 insertions, 16 deletions

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;