feat(cast): photos on the TV, and a television chosen once for the session

A cast button in Videos' toolbar, at the top of Photos, in an album's bar and
in the lightbox, in a group and in Search alike. A television chosen there is
kept for the session: a film opened plays on it with the player as its remote
from the start, and a photo opened in the lightbox is shown on it, scaled to
1920x1080, upright, as JPEG. The lightbox gains a slideshow.

The relay serves one photo at /image behind the stream's token, on the desktop
and on Android; the shell, not the page, decides that the receiver loads it as
a picture.

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

1 files changed, 15 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 e1e152e..9be414f 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -2043,7 +2043,21 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   cursor: text; outline: none;
 }
 .cast-url-input:focus { border-color: rgba(59, 130, 246, 0.6); }
-.cast-wrapper { display: inline-block; }
+.cast-wrapper { display: inline-block; position: relative; }
+.video-close:disabled { opacity: 0.4; cursor: default; }
+.video-close.cast-btn.casting { background: rgba(59, 130, 246, 0.35); }
+.video-close.cast-btn.casting:hover { background: rgba(59, 130, 246, 0.5); }
+.cast-picker-item.cast-menu-current { color: #94a3b8; cursor: default; }
+.cast-picker-item.cast-menu-current:hover { background: none; }
+
+/* The cast button in a page's toolbar (cast-session.js): the same panel as
+   any other menu there, hung under the button rather than at a point. */
+.cast-btn.casting { color: var(--accent); border-color: var(--accent); }
+.ctx-menu.cast-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 150; }
+.ctx-menu-item.cast-menu-current { color: var(--text-dim); cursor: default; }
+.ctx-menu-item.cast-menu-current:hover { background: none; }
+.ctx-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; }
+.photo-album-actions { display: flex; align-items: center; gap: 4px; }
 .cast-picker {
   position: absolute; top: calc(100% + 4px); right: 0; z-index: 100;
   background: rgba(28, 28, 32, 0.97); border: 1px solid rgba(255, 255, 255, 0.14);