feat(hub): cross-group search with reuse of existing views

Search page fetches indexes from all groups, then renders consolidated
entries through the existing FilesPanel, VideoApp, and MusicApp
components — no reimplemented views. Groups appear as top-level
directories in the file browser; video/music entries use a synthetic
root with per-entry transport refs for thumbnails and metadata across
groups. Music player lifted to app.js with getConnection(groupId) for
cross-group playback. Connection pool (max 3, LRU eviction) manages
lazy WebRTC connections. All 10 locales updated with search keys.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

1 files changed, 105 insertions, 1 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index 6f31047..fbd1e70 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -79,7 +79,98 @@ body {
 a { color: var(--accent); text-decoration: none; }
 a:hover { text-decoration: underline; }
 
-.search-synced { font-size: 0.72em; color: var(--text-dim); margin-top: 3px; }
+/* ── Cross-group search page ──────────────────────────────────────────────── */
+
+.search-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-raised);
+  margin-bottom: 12px;
+}
+.search-bar .icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-dim); }
+.search-bar input {
+  border: none; outline: none; background: transparent;
+  flex: 1; font-size: 0.95em; color: var(--text);
+  min-width: 0;
+}
+.search-bar input::placeholder { color: var(--text-dim); }
+.search-bar:focus-within { border-color: var(--border-focus); }
+.search-bar-clear {
+  background: none; border: none; padding: 2px; cursor: pointer;
+  color: var(--text-dim); display: flex; align-items: center;
+}
+.search-bar-clear:hover { color: var(--text); }
+.search-bar-clear .icon { width: 14px; height: 14px; }
+
+.search-progress {
+  display: flex; align-items: center; gap: 8px;
+  font-size: 0.85em; color: var(--text-dim); margin-bottom: 12px;
+}
+.search-progress-bar {
+  flex: 1; height: 4px; background: var(--border);
+  border-radius: 2px; overflow: hidden;
+}
+.search-progress-fill {
+  height: 100%; background: var(--accent);
+  transition: width 0.3s;
+}
+.search-unreachable {
+  font-size: 0.8em; color: var(--text-dim); margin-bottom: 8px;
+}
+
+.view-toggle {
+  display: flex; gap: 0; flex-shrink: 0; margin-left: auto;
+}
+.view-toggle button {
+  padding: 6px 12px; border: 1px solid var(--border);
+  background: transparent; color: var(--text-dim);
+  cursor: pointer; border-radius: 0; display: flex;
+  align-items: center; gap: 4px; font-size: 0.85em;
+}
+.view-toggle button:first-child { border-radius: 6px 0 0 6px; }
+.view-toggle button:last-child { border-radius: 0 6px 6px 0; }
+.view-toggle button + button { margin-left: -1px; }
+.view-toggle button.active {
+  background: var(--accent-bg, rgba(59, 130, 246, 0.1));
+  color: var(--accent); border-color: var(--accent);
+  z-index: 1;
+}
+.view-toggle .icon { width: 16px; height: 16px; }
+
+.search-media-list {
+  display: flex; flex-direction: column; gap: 2px;
+}
+.search-media-row {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 10px; border-radius: 6px; cursor: pointer;
+}
+.search-media-row:hover { background: var(--bg-raised); }
+.search-media-icon {
+  flex-shrink: 0; width: 32px; height: 32px;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--bg-raised); border-radius: 4px; color: var(--text-dim);
+}
+.search-media-icon .icon { width: 18px; height: 18px; }
+.search-media-info { flex: 1; min-width: 0; }
+.search-media-title {
+  font-weight: 500; white-space: nowrap;
+  overflow: hidden; text-overflow: ellipsis;
+}
+.search-media-meta {
+  font-size: 0.8em; color: var(--text-dim);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.search-media-section {
+  font-size: 0.75em; color: var(--text-dim);
+  text-transform: uppercase; letter-spacing: 0.05em;
+  padding: 12px 10px 4px;
+}
+.search-media-row .badge { flex-shrink: 0; font-size: 0.78em; }
+.search-media-show { opacity: 0.85; }
 
 /* ── Icons ────────────────────────────────────────────────────────────────── */
 
@@ -2770,6 +2861,19 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.video-card-group,
+.music-card-group {
+  font-size: 0.72em;
+  color: var(--accent);
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.search-group-badge {
+  margin-left: auto;
+  flex-shrink: 0;
+}
 
 /* Detail modal — sits inside the existing .video-overlay */