simon/jacuzzi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Choose a channel by what it is, not by its name in a list

Browse Source 
A <select> of ninety channels tells the reader almost nothing: a wall of
bare names, nothing to say which site a name belongs to or what it
carries, and no way to look for one. The server has been sending far more
than the name all along -- a favicon, a description, tags, its own
groupings, and whether a channel still says "work in progress" -- so the
picker shows that.

It opens as a dialog in the site's own style: a search field, then the
server's groups as sections, each led by an "All <group>" row that browses
the whole group. Search matches the name, the id, the description, the
tags and the group, so "jav" finds Tokyo Motion (whose name never says it)
and "leaks" finds the OnlyFans mirrors. Arrows and Enter walk the list,
Escape closes it, and opening it with nothing typed scrolls to the channel
already being read. On a phone it fills the screen and leaves the field
unfocused -- the keyboard would cover the thing being chosen from.

Favicons load through attachThumbnail, so they get the same route race,
proxy fallback and retries as every other remote picture, with the
channel's initial behind them for the ones that never arrive.

The <select> was also where the command palette read its channel actions,
so the list lives in App.ui.channels now and the palette asks for it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QBDkEXP4htyXTCZUwMLphd
This commit is contained in:
Simon
2026-09-19 08:27:43 +00:00
parent b478c51551
commit a795442634
5 changed files with 834 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/index.html
View File

@@ -58,8 +58,17 @@
<select id="source-select"></select>
</div>
<div class="setting-item">
<label for="channel-select">Channel</label>
<select id="channel-select"></select>
<label for="channel-picker-btn">Channel</label>
<button id="channel-picker-btn" class="channel-trigger" type="button" aria-haspopup="dialog" aria-expanded="false">
<span class="channel-mark" id="channel-trigger-mark">
<img class="channel-favicon" id="channel-trigger-icon" alt="" decoding="async">
</span>
<span class="channel-trigger-text">
<span class="channel-trigger-name" id="channel-trigger-name">No channel</span>
<span class="channel-trigger-note" id="channel-trigger-note"></span>
</span>
<span class="channel-trigger-caret" aria-hidden="true"></span>
</button>
</div>
</div>
@@ -194,6 +203,19 @@
<button id="back-to-top" class="back-to-top" type="button" title="Back to top" aria-label="Back to top">↑</button>
<div id="channel-picker" class="channel-picker" aria-hidden="true">
<div class="channel-picker-box" role="dialog" aria-modal="true" aria-labelledby="channel-picker-title">
<div class="channel-picker-head">
<h3 id="channel-picker-title">Channel</h3>
<button id="channel-picker-close" class="close-btn" type="button" aria-label="Close">✕</button>
</div>
<input id="channel-search" class="channel-search" type="text" placeholder="Search channels…"
autocomplete="off" spellcheck="false" aria-controls="channel-picker-list">
<div id="channel-picker-list" class="channel-picker-list" role="listbox" aria-label="Channels"></div>
<div id="channel-picker-empty" class="channel-picker-empty">No channel matches that.</div>
</div>
</div>
<div id="command-palette" class="command-palette" aria-hidden="true">
<div class="cmdk-box" role="dialog" aria-modal="true" aria-label="Command palette">
<input id="cmdk-input" class="cmdk-input" type="text" placeholder="Type a command or search… (⌘K)" autocomplete="off" spellcheck="false">