From a7954426349a533c8a8b89f287c21b6859330d71 Mon Sep 17 00:00:00 2001
From: Simon <simon.huenecke@gmail.com>
Date: Sat, 19 Sep 2026 08:27:43 +0000
Subject: [PATCH] Choose a channel by what it is, not by its name in a list

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
---
 frontend/css/style.css  | 251 ++++++++++++++++++++++++
 frontend/index.html     |  26 ++-
 frontend/js/enhance.js  |  18 +-
 frontend/js/ui.js       | 423 ++++++++++++++++++++++++++++++++--------
 tests/smoke_channels.py | 199 +++++++++++++++++++
 5 files changed, 834 insertions(+), 83 deletions(-)
 create mode 100644 tests/smoke_channels.py

diff --git a/frontend/css/style.css b/frontend/css/style.css
index 29c0649..0191870 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -2704,6 +2704,257 @@ body.theme-light .video-card img:not(.is-loaded) {
     flex-shrink: 0;
 }
 
+/* --- Channel picker ---------------------------------------------------- */
+/* The trigger in the menu drawer: what's being read now, favicon and all. */
+.channel-trigger {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    padding: 10px 12px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    color: var(--text-primary);
+    font-family: var(--font-body);
+    font-size: 14px;
+    text-align: left;
+    cursor: pointer;
+    transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.channel-trigger:hover,
+.channel-trigger:focus-visible {
+    border-color: var(--border-hover);
+    outline: none;
+}
+
+.channel-trigger-text {
+    flex: 1;
+    min-width: 0;
+}
+
+.channel-trigger-name,
+.channel-trigger-note {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.channel-trigger-note {
+    font-size: 12px;
+    color: var(--text-secondary);
+    text-transform: none;
+    letter-spacing: 0;
+}
+
+.channel-trigger-caret {
+    flex-shrink: 0;
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 6px solid var(--text-secondary);
+}
+
+/* A favicon, with the channel's initial behind it for the ones that never
+   arrive -- a row is never a name beside an empty square. */
+.channel-mark {
+    position: relative;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+    background: rgba(201, 165, 103, 0.14);
+    border: 1px solid var(--border);
+    overflow: hidden;
+}
+
+.channel-mark::before {
+    content: attr(data-letter);
+    font-family: var(--font-display);
+    font-size: 14px;
+    line-height: 1;
+    color: var(--accent);
+}
+
+.channel-favicon {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    padding: 3px;
+    background: inherit;
+}
+
+.channel-picker {
+    position: fixed;
+    inset: 0;
+    z-index: 4200;
+    display: none;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 8vh 12px 12px 12px;
+    background: rgba(10, 8, 4, 0.55);
+    backdrop-filter: blur(6px);
+}
+
+.channel-picker.open { display: flex; }
+
+.channel-picker-box {
+    display: flex;
+    flex-direction: column;
+    width: min(560px, 100%);
+    max-height: min(74vh, 700px);
+    /* Solid, not the usual translucent panel: the section headings stick over
+       the rows as they scroll, and a see-through heading is unreadable. */
+    background: var(--bg-primary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: 0 30px 70px var(--shadow);
+    overflow: hidden;
+    animation: card-rise 0.2s ease both;
+}
+
+.channel-picker-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 16px 18px 10px 18px;
+}
+
+.channel-picker-head h3 {
+    font-family: var(--font-display);
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.channel-search {
+    margin: 0 18px 12px 18px;
+    padding: 11px 14px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    color: var(--text-primary);
+    font-family: var(--font-body);
+    font-size: 14px;
+}
+
+.channel-search::placeholder { color: var(--text-secondary); }
+.channel-search:focus { outline: none; border-color: var(--border-hover); }
+
+.channel-picker-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 10px 10px 10px;
+    overscroll-behavior: contain;
+}
+
+.channel-section {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    padding: 10px 8px 6px 8px;
+    background: var(--bg-primary);
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+}
+
+.channel-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid transparent;
+    border-radius: 10px;
+    background: transparent;
+    color: var(--text-primary);
+    font-family: var(--font-body);
+    text-align: left;
+    cursor: pointer;
+}
+
+.channel-row.is-active { background: var(--bg-tertiary); }
+
+.channel-row.is-current {
+    border-color: var(--border-hover);
+    background: rgba(201, 165, 103, 0.10);
+}
+
+.channel-row-text {
+    flex: 1;
+    min-width: 0;
+}
+
+.channel-row-name {
+    display: block;
+    font-size: 14px;
+}
+
+.channel-row-note {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    margin-top: 2px;
+    font-size: 12px;
+    line-height: 1.4;
+    color: var(--text-secondary);
+}
+
+.channel-row-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    margin-top: 6px;
+}
+
+.channel-tag {
+    padding: 2px 7px;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    font-size: 10px;
+    letter-spacing: 0.04em;
+    color: var(--text-secondary);
+}
+
+.channel-row-flag {
+    flex-shrink: 0;
+    align-self: center;
+    font-size: 10px;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--accent);
+}
+
+.channel-picker-empty {
+    padding: 8px 20px 20px 20px;
+    color: var(--text-secondary);
+    font-size: 13px;
+}
+
+@media (max-width: 720px) {
+    .channel-picker { padding: 0; }
+
+    .channel-picker-box {
+        width: 100%;
+        max-height: 100%;
+        height: 100%;
+        border: none;
+        border-radius: 0;
+    }
+}
+
 /* --- Reels HUD polish: serif title + brass scrubber + mute pulse ------- */
 .feed-title { font-family: var(--font-display); }
 
diff --git a/frontend/index.html b/frontend/index.html
index ac2e67f..fbfbc4c 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -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">
diff --git a/frontend/js/enhance.js b/frontend/js/enhance.js
index a7efb8d..06a0148 100644
--- a/frontend/js/enhance.js
+++ b/frontend/js/enhance.js
@@ -196,11 +196,19 @@ App.enhance = App.enhance || {};
                     out.push({ label: opt.textContent, hint: 'Source', run: () => { sourceSelect.value = opt.value; fireChange(sourceSelect); } });
                 });
             }
-            const channelSelect = document.getElementById('channel-select');
-            if (channelSelect) {
-                Array.from(channelSelect.options).forEach((opt) => {
-                    if (opt.value === channelSelect.value) return;
-                    out.push({ label: opt.textContent, hint: 'Channel', run: () => { channelSelect.value = opt.value; fireChange(channelSelect); } });
+            // The channel list is the picker's (App.ui.channels), not a
+            // <select>'s -- same entries, drawn as palette rows.
+            if (App.ui && App.ui.channels) {
+                const current = App.storage && App.storage.getSession ?
+                    App.storage.getSession() : null;
+                const currentId = (current && current.channel) ? current.channel.id : '';
+                App.ui.channels.entries().forEach((entry) => {
+                    if (entry.id === currentId) return;
+                    out.push({
+                        label: entry.label,
+                        hint: entry.group || 'Channel',
+                        run: () => App.ui.channels.choose(entry.id)
+                    });
                 });
             }
             return out;
diff --git a/frontend/js/ui.js b/frontend/js/ui.js
index a123283..deebe9c 100644
--- a/frontend/js/ui.js
+++ b/frontend/js/ui.js
@@ -229,12 +229,356 @@ App.ui = App.ui || {};
         }
     };
 
+    // ---------------------------------------------------------------------
+    // Channel picker
+    //
+    // 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 sends far more than the
+    // name -- a favicon, a description, tags, whether the channel still says
+    // "work in progress" -- so the picker shows that, and lets the reader type.
+    //
+    // The <select> was also where the command palette read its channel actions
+    // from, so the list lives here now and the palette asks for it.
+    // ---------------------------------------------------------------------
+    App.ui.channels = (function() {
+        // Sections in display order: a group, then whatever the server didn't
+        // put in one. Rebuilt whenever the menu renders, which is whenever the
+        // server, its status, or the selection changes.
+        let sections = [];
+        let matched = [];      // the rows the current search leaves on screen
+        let activeIndex = 0;
+        let bound = false;
+
+        const el = (id) => document.getElementById(id);
+
+        const activeServerData = function() {
+            const session = App.storage.getSession();
+            if (!session) return null;
+            const entry = App.storage.getServerEntries()
+                .find((candidate) => candidate.url === session.server);
+            return (entry && entry.data) || null;
+        };
+
+        // Everything about a channel worth searching, in one string: a reader
+        // typing "jav", "leaks" or the site's own name should all land.
+        const haystack = function(parts) {
+            return parts.filter(Boolean).join(' ').toLowerCase();
+        };
+
+        const channelRow = function(channel, groupTitle) {
+            const tags = Array.isArray(channel.tags) ? channel.tags : [];
+            return {
+                id: channel.id,
+                name: channel.name || channel.id,
+                note: channel.description || '',
+                favicon: channel.favicon || '',
+                tags: tags.slice(0, 3),
+                // "work in progress" is the server's own word for a channel
+                // that may not answer; worth saying before it's picked.
+                flag: channel.status && channel.status !== 'active' ? channel.status :
+                    (channel.premium ? 'premium' : ''),
+                group: groupTitle || '',
+                search: haystack([channel.name, channel.id, channel.description,
+                    tags.join(' '), groupTitle])
+            };
+        };
+
+        const build = function() {
+            const data = activeServerData();
+            const channels = (data && Array.isArray(data.channels)) ? data.channels : [];
+            const groups = (data && Array.isArray(data.channelGroups)) ? data.channelGroups : [];
+            const byId = new Map(channels.map((channel) => [channel.id, channel]));
+            const grouped = new Set();
+            sections = [];
+
+            groups.forEach((group) => {
+                const ids = (Array.isArray(group.channelIds) ? group.channelIds : [])
+                    .filter((id) => byId.has(id));
+                if (!ids.length) return;
+                ids.forEach((id) => grouped.add(id));
+                const title = group.title || group.id;
+                sections.push({
+                    title: title,
+                    rows: [{
+                        id: `group:${group.id}`,
+                        name: `All ${title}`,
+                        // Every group row would otherwise be an "A" for "All".
+                        mark: title,
+                        note: `Every channel in ${title}, interleaved.`,
+                        favicon: '',
+                        tags: [],
+                        flag: ids.length === 1 ? '1 channel' : `${ids.length} channels`,
+                        group: title,
+                        search: haystack(['all', title, group.id])
+                    }].concat(ids.map((id) => channelRow(byId.get(id), title)))
+                });
+            });
+
+            const ungrouped = channels
+                .filter((channel) => !grouped.has(channel.id))
+                .sort((a, b) => (a.name || a.id || '').toLowerCase()
+                    .localeCompare((b.name || b.id || '').toLowerCase()));
+            if (ungrouped.length) {
+                sections.push({
+                    title: sections.length ? 'Everything else' : 'Channels',
+                    rows: ungrouped.map((channel) => channelRow(channel, ''))
+                });
+            }
+        };
+
+        // The letter behind a favicon that hasn't arrived (or never will), so a
+        // row is never a name next to an empty square.
+        const markFor = function(row) {
+            const mark = document.createElement('span');
+            mark.className = 'channel-mark';
+            mark.dataset.letter = (row.mark || row.name || '?').trim().charAt(0).toUpperCase();
+            if (row.favicon) {
+                const img = document.createElement('img');
+                img.className = 'channel-favicon';
+                img.alt = '';
+                img.loading = 'lazy';
+                img.decoding = 'async';
+                mark.appendChild(img);
+                // The same route race, proxy fallback and retries every other
+                // remote picture in the app goes through.
+                App.videos.attachThumbnail(img, row.favicon);
+            }
+            return mark;
+        };
+
+        const rowButton = function(row, currentId) {
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'channel-row' + (row.id === currentId ? ' is-current' : '');
+            button.setAttribute('role', 'option');
+            button.setAttribute('aria-selected', row.id === currentId ? 'true' : 'false');
+            button.dataset.channelId = row.id;
+            button.appendChild(markFor(row));
+
+            const text = document.createElement('span');
+            text.className = 'channel-row-text';
+            const name = document.createElement('span');
+            name.className = 'channel-row-name';
+            name.textContent = row.name;
+            text.appendChild(name);
+            if (row.note) {
+                const note = document.createElement('span');
+                note.className = 'channel-row-note';
+                note.textContent = row.note;
+                text.appendChild(note);
+            }
+            if (row.tags.length) {
+                const tags = document.createElement('span');
+                tags.className = 'channel-row-tags';
+                row.tags.forEach((tag) => {
+                    const chip = document.createElement('span');
+                    chip.className = 'channel-tag';
+                    chip.textContent = tag;
+                    tags.appendChild(chip);
+                });
+                text.appendChild(tags);
+            }
+            button.appendChild(text);
+
+            if (row.flag) {
+                const flag = document.createElement('span');
+                flag.className = 'channel-row-flag';
+                flag.textContent = row.flag;
+                button.appendChild(flag);
+            }
+            return button;
+        };
+
+        const render = function() {
+            const list = el('channel-picker-list');
+            const empty = el('channel-picker-empty');
+            const search = el('channel-search');
+            if (!list) return;
+            const query = (search ? search.value : '').trim().toLowerCase();
+            const session = App.storage.getSession();
+            const currentId = (session && session.channel) ? session.channel.id : '';
+
+            list.innerHTML = '';
+            matched = [];
+            sections.forEach((section) => {
+                const rows = query
+                    ? section.rows.filter((row) => row.search.includes(query))
+                    : section.rows;
+                if (!rows.length) return;
+                const heading = document.createElement('div');
+                heading.className = 'channel-section';
+                heading.textContent = section.title;
+                list.appendChild(heading);
+                rows.forEach((row) => {
+                    const button = rowButton(row, currentId);
+                    const index = matched.length;
+                    button.addEventListener('click', () => App.ui.channels.choose(row.id));
+                    button.addEventListener('pointermove', () => setActive(index));
+                    list.appendChild(button);
+                    matched.push(button);
+                });
+            });
+            if (empty) empty.hidden = matched.length > 0;
+            // A shorter list under an unchanged scroll position hides its own
+            // first hits, so every search starts back at the top.
+            if (query) list.scrollTop = 0;
+            // A search starts on its first hit; an unsearched list starts on the
+            // channel already being read, which is also what gets scrolled to.
+            const current = matched.findIndex((button) => button.classList.contains('is-current'));
+            setActive(query || current < 0 ? 0 : current, !query);
+        };
+
+        const setActive = function(index, scroll) {
+            if (!matched.length) { activeIndex = 0; return; }
+            activeIndex = Math.max(0, Math.min(index, matched.length - 1));
+            matched.forEach((button, i) => button.classList.toggle('is-active', i === activeIndex));
+            if (scroll && matched[activeIndex]) {
+                matched[activeIndex].scrollIntoView({ block: 'center' });
+            }
+        };
+
+        const step = function(delta) {
+            setActive(activeIndex + delta);
+            const button = matched[activeIndex];
+            if (button) button.scrollIntoView({ block: 'nearest' });
+        };
+
+        const open = function() {
+            const picker = el('channel-picker');
+            const search = el('channel-search');
+            const trigger = el('channel-picker-btn');
+            if (!picker) return;
+            build();
+            if (search) search.value = '';
+            // Shown before it is filled: scrolling the current channel into
+            // view can't work while the list is still display:none.
+            picker.classList.add('open');
+            picker.setAttribute('aria-hidden', 'false');
+            render();
+            if (trigger) trigger.setAttribute('aria-expanded', 'true');
+            // Typing is the point of the thing -- but not on a phone, where
+            // focusing the field throws up the keyboard over the list.
+            if (search && window.matchMedia('(min-width: 720px)').matches) {
+                requestAnimationFrame(() => search.focus());
+            }
+        };
+
+        const close = function() {
+            const picker = el('channel-picker');
+            const trigger = el('channel-picker-btn');
+            if (picker) {
+                picker.classList.remove('open');
+                picker.setAttribute('aria-hidden', 'true');
+            }
+            if (trigger) trigger.setAttribute('aria-expanded', 'false');
+        };
+
+        const bind = function() {
+            if (bound) return;
+            const picker = el('channel-picker');
+            const trigger = el('channel-picker-btn');
+            const search = el('channel-search');
+            const closeBtn = el('channel-picker-close');
+            if (!picker || !trigger) return;
+            bound = true;
+
+            trigger.addEventListener('click', open);
+            if (closeBtn) closeBtn.addEventListener('click', close);
+            picker.addEventListener('click', (event) => { if (event.target === picker) close(); });
+            if (search) {
+                search.addEventListener('input', render);
+                search.addEventListener('keydown', (event) => {
+                    if (event.key === 'ArrowDown') { event.preventDefault(); step(1); }
+                    else if (event.key === 'ArrowUp') { event.preventDefault(); step(-1); }
+                    else if (event.key === 'Enter') {
+                        event.preventDefault();
+                        const button = matched[activeIndex];
+                        if (button) button.click();
+                    } else if (event.key === 'Escape') { event.preventDefault(); close(); }
+                });
+            }
+            document.addEventListener('keydown', (event) => {
+                if (event.key === 'Escape' && picker.classList.contains('open')) close();
+            });
+        };
+
+        // The trigger says what is being read now, with the same favicon the
+        // list shows, so the menu answers the question without being opened.
+        const renderTrigger = function() {
+            const session = App.storage.getSession();
+            const channel = session && session.channel;
+            const name = el('channel-trigger-name');
+            const note = el('channel-trigger-note');
+            const mark = el('channel-trigger-mark');
+            const icon = el('channel-trigger-icon');
+            if (!name || !mark || !icon) return;
+            name.textContent = channel ? (channel.name || channel.id) : 'No channel';
+            mark.dataset.letter = (channel ? (channel.name || channel.id || '?') : '?')
+                .trim().charAt(0).toUpperCase();
+            if (note) {
+                note.textContent = channel
+                    ? (channel.isGroup ? 'Whole group' : (channel.description || ''))
+                    : 'This source has no channels.';
+            }
+            App.videos.detachThumbnail(icon);
+            icon.removeAttribute('src');
+            icon.hidden = !(channel && channel.favicon);
+            if (channel && channel.favicon) App.videos.attachThumbnail(icon, channel.favicon);
+        };
+
+        return {
+            // Called by renderMenu: the picker follows whatever the menu is
+            // showing, and nothing else has to know it exists.
+            render: function() {
+                bind();
+                build();
+                renderTrigger();
+                if (el('channel-picker') && el('channel-picker').classList.contains('open')) {
+                    render();
+                }
+            },
+            open: open,
+            close: close,
+            // The flat list the command palette offers alongside its own
+            // actions -- id and label only; it draws its own rows.
+            entries: function() {
+                if (!sections.length) build();
+                const out = [];
+                sections.forEach((section) => section.rows.forEach((row) => {
+                    out.push({ id: row.id, label: row.name, group: section.title });
+                }));
+                return out;
+            },
+            choose: function(id) {
+                const session = App.storage.getSession();
+                const data = activeServerData();
+                const nextChannel = data ? App.session.resolveChannelById(data, id) : null;
+                if (!session || !nextChannel) return;
+                const serverPrefs = App.storage.getPreferences()[session.server] || {};
+                const savedOptions = serverPrefs.optionsByChannel ?
+                    serverPrefs.optionsByChannel[nextChannel.id] : null;
+                const nextSession = {
+                    server: session.server,
+                    channel: nextChannel,
+                    options: savedOptions ?
+                        App.session.hydrateOptions(nextChannel, savedOptions) :
+                        App.session.buildDefaultOptions(nextChannel)
+                };
+                App.storage.setSession(nextSession);
+                App.session.savePreference(nextSession);
+                close();
+                App.ui.renderMenu();
+                App.videos.resetAndReload();
+            }
+        };
+    })();
+
     // Settings + menu rendering.
     App.ui.renderMenu = function() {
         const session = App.storage.getSession();
         const serverEntries = App.storage.getServerEntries();
         const sourceSelect = document.getElementById('source-select');
-        const channelSelect = document.getElementById('channel-select');
         const filtersContainer = document.getElementById('filters-container');
         const sourcesList = document.getElementById('sources-list');
         const addSourceBtn = document.getElementById('add-source-btn');
@@ -242,7 +586,7 @@ App.ui = App.ui || {};
         const reloadChannelBtn = document.getElementById('reload-channel-btn');
         const favoritesToggle = document.getElementById('favorites-toggle');
 
-        if (!sourceSelect || !channelSelect || !filtersContainer) return;
+        if (!sourceSelect || !filtersContainer) return;
 
         sourceSelect.innerHTML = "";
         serverEntries.forEach((entry) => {
@@ -281,80 +625,7 @@ App.ui = App.ui || {};
             App.videos.resetAndReload();
         };
 
-        const activeServer = serverEntries.find((entry) => entry.url === (session && session.server));
-        const activeServerData = activeServer && activeServer.data ? activeServer.data : null;
-        const availableChannels = activeServerData && activeServerData.channels ?
-            [...activeServerData.channels] :
-            [];
-        availableChannels.sort((a, b) => {
-            const nameA = (a.name || a.id || '').toLowerCase();
-            const nameB = (b.name || b.id || '').toLowerCase();
-            return nameA.localeCompare(nameB);
-        });
-
-        const channelGroups = activeServerData && Array.isArray(activeServerData.channelGroups) ?
-            activeServerData.channelGroups :
-            [];
-
-        channelSelect.innerHTML = "";
-        const groupedChannelIds = new Set();
-        channelGroups.forEach((group) => {
-            const channelIds = Array.isArray(group.channelIds) ?
-                group.channelIds.filter((id) => availableChannels.some((channel) => channel.id === id)) :
-                [];
-            if (channelIds.length === 0) return;
-            channelIds.forEach((id) => groupedChannelIds.add(id));
-
-            const optgroup = document.createElement('optgroup');
-            optgroup.label = group.title || group.id;
-
-            const groupOption = document.createElement('option');
-            groupOption.value = `group:${group.id}`;
-            groupOption.textContent = `All ${group.title || group.id}`;
-            optgroup.appendChild(groupOption);
-
-            channelIds.forEach((id) => {
-                const channel = availableChannels.find((ch) => ch.id === id);
-                const option = document.createElement('option');
-                option.value = channel.id;
-                option.textContent = channel.name || channel.id;
-                optgroup.appendChild(option);
-            });
-
-            channelSelect.appendChild(optgroup);
-        });
-
-        availableChannels
-            .filter((channel) => !groupedChannelIds.has(channel.id))
-            .forEach((channel) => {
-                const option = document.createElement('option');
-                option.value = channel.id;
-                option.textContent = channel.name || channel.id;
-                channelSelect.appendChild(option);
-            });
-
-        if (session && session.channel) {
-            channelSelect.value = session.channel.id;
-        }
-
-        channelSelect.onchange = () => {
-            const selectedId = channelSelect.value;
-            const nextChannel = activeServerData ? App.session.resolveChannelById(activeServerData, selectedId) : null;
-            const prefs = App.storage.getPreferences();
-            const serverPrefs = prefs[session.server] || {};
-            const savedOptions = nextChannel && serverPrefs.optionsByChannel ?
-                serverPrefs.optionsByChannel[nextChannel.id] :
-                null;
-            const nextSession = {
-                server: session.server,
-                channel: nextChannel,
-                options: nextChannel ? (savedOptions ? App.session.hydrateOptions(nextChannel, savedOptions) : App.session.buildDefaultOptions(nextChannel)) : {}
-            };
-            App.storage.setSession(nextSession);
-            App.session.savePreference(nextSession);
-            App.ui.renderMenu();
-            App.videos.resetAndReload();
-        };
+        App.ui.channels.render();
 
         App.ui.renderFilters(filtersContainer, session);
 
diff --git a/tests/smoke_channels.py b/tests/smoke_channels.py
new file mode 100644
index 0000000..59eedf9
--- /dev/null
+++ b/tests/smoke_channels.py
@@ -0,0 +1,199 @@
+#!/usr/bin/env python3
+"""Channel picker smoke tests.
+
+Run against a locally running backend:
+
+    backend/main.py &
+    .venv/bin/python tests/smoke_channels.py
+
+The picker replaced a <select>, so what's checked here is what the <select>
+couldn't do -- show what a channel *is* (favicon, description, tags, group) and
+let it be searched -- plus the two things it could: switching the channel, and
+feeding the command palette its list.
+"""
+import sys
+from playwright.sync_api import sync_playwright
+
+BASE = "http://127.0.0.1:5000/"
+SERVER = "https://hottub.spacemoehre.de"
+CHANNEL = "xvideos"
+
+SEED = """([server, channel]) => {
+    localStorage.setItem('config', JSON.stringify({ servers: [{ [server]: {} }] }));
+    localStorage.setItem('preferences', JSON.stringify({ [server]: { channelId: channel } }));
+    localStorage.removeItem('session');
+    localStorage.setItem('favorites', JSON.stringify([]));
+}"""
+
+ROWS = """() => {
+    const list = document.getElementById('channel-picker-list');
+    const rows = Array.from(list.querySelectorAll('.channel-row'));
+    return {
+        sections: Array.from(list.querySelectorAll('.channel-section')).map((s) => s.textContent),
+        count: rows.length,
+        withNote: rows.filter((r) => !!r.querySelector('.channel-row-note')).length,
+        withTags: rows.filter((r) => !!r.querySelector('.channel-tag')).length,
+        withIconEl: rows.filter((r) => !!r.querySelector('img.channel-favicon')).length,
+        iconsLoaded: rows.filter((r) => {
+            const img = r.querySelector('img.channel-favicon');
+            return img && img.naturalWidth > 0;
+        }).length,
+        current: rows.filter((r) => r.classList.contains('is-current'))
+                     .map((r) => r.dataset.channelId),
+        groupRows: rows.filter((r) => r.dataset.channelId.startsWith('group:')).length,
+        emptyHidden: document.getElementById('channel-picker-empty').hidden,
+    };
+}"""
+
+
+class Checks:
+    def __init__(self):
+        self.failed = 0
+
+    def ok(self, label, condition, detail=""):
+        mark = "PASS" if condition else "FAIL"
+        if not condition:
+            self.failed += 1
+        print(f"  [{mark}] {label}" + (f" -- {detail}" if detail and not condition else ""))
+
+
+def boot(page):
+    page.goto(BASE, wait_until="domcontentloaded")
+    page.evaluate(SEED, [SERVER, CHANNEL])
+    page.goto(BASE, wait_until="load")
+    try:
+        page.wait_for_selector(".video-card", timeout=90000)
+    except Exception:
+        page.goto(BASE, wait_until="load")
+        page.wait_for_selector(".video-card", timeout=90000)
+    page.wait_for_timeout(2500)
+
+
+def main():
+    c = Checks()
+    with sync_playwright() as p:
+        browser = p.chromium.launch(args=[
+            "--no-sandbox", "--disable-dev-shm-usage", "--disable-gpu",
+        ])
+        page = browser.new_page(viewport={"width": 1400, "height": 1000})
+        crashes = []
+        page.on("pageerror", lambda e: crashes.append(str(e)))
+        boot(page)
+
+        print("\nthe menu says which channel is being read")
+        page.evaluate("() => App.ui.toggleDrawer('menu')")
+        page.wait_for_timeout(2500)
+        trigger = page.evaluate("""() => ({
+            name: document.getElementById('channel-trigger-name').textContent,
+            note: document.getElementById('channel-trigger-note').textContent,
+            iconLoaded: document.getElementById('channel-trigger-icon').naturalWidth > 0,
+        })""")
+        c.ok("the trigger names the current channel", trigger["name"] == "XVideos", str(trigger))
+        c.ok("and says something about it", len(trigger["note"]) > 10, str(trigger))
+        c.ok("and shows its favicon", trigger["iconLoaded"], str(trigger))
+
+        print("\nopening it lists the channels with what the server knows")
+        page.click("#channel-picker-btn")
+        page.wait_for_timeout(3000)
+        rows = page.evaluate(ROWS)
+        c.ok("every channel is listed", rows["count"] > 50, str(rows["count"]))
+        c.ok("grouped under the server's own headings", len(rows["sections"]) > 1,
+             str(rows["sections"][:4]))
+        c.ok("each group can be browsed whole", rows["groupRows"] > 1, str(rows["groupRows"]))
+        c.ok("rows carry a description", rows["withNote"] > rows["count"] // 2, str(rows))
+        c.ok("rows carry tags", rows["withTags"] > rows["count"] // 2, str(rows))
+        c.ok("rows carry a favicon", rows["withIconEl"] > rows["count"] // 2, str(rows))
+        c.ok("and the favicons actually load", rows["iconsLoaded"] > 10,
+             f"{rows['iconsLoaded']} of {rows['withIconEl']} loaded")
+        c.ok("the current channel is marked", rows["current"] == [CHANNEL], str(rows["current"]))
+
+        print("\nsearching narrows it")
+        page.fill("#channel-search", "hentai")
+        page.wait_for_timeout(600)
+        found = page.evaluate(ROWS)
+        c.ok("fewer rows than before", 0 < found["count"] < rows["count"], str(found["count"]))
+        # A row can match on its own text or on the group it sits under -- the
+        # heading is as much a fact about the channel as its description.
+        c.ok("every row left standing matches what was typed",
+             page.evaluate("""() => {
+                 let heading = '';
+                 return Array.from(document.getElementById('channel-picker-list').children)
+                     .every((node) => {
+                         if (node.classList.contains('channel-section')) {
+                             heading = node.textContent.toLowerCase();
+                             return true;
+                         }
+                         const text = (node.textContent + ' ' + node.dataset.channelId + ' ' + heading);
+                         return text.toLowerCase().includes('hentai');
+                     });
+             }"""))
+        # Description and tags are searched too, not just the name.
+        page.fill("#channel-search", "leaks")
+        page.wait_for_timeout(600)
+        by_tag = page.evaluate(ROWS)
+        c.ok("a tag finds channels whose name doesn't say it", by_tag["count"] > 0,
+             str(by_tag["count"]))
+
+        page.fill("#channel-search", "zzzznothing")
+        page.wait_for_timeout(600)
+        nothing = page.evaluate(ROWS)
+        c.ok("a search with no hits says so",
+             nothing["count"] == 0 and not nothing["emptyHidden"], str(nothing))
+
+        print("\npicking one switches the feed")
+        page.fill("#channel-search", "eporner")
+        page.wait_for_timeout(600)
+        page.click(".channel-row")
+        page.wait_for_timeout(1500)
+        c.ok("the picker closes",
+             page.evaluate("() => !document.getElementById('channel-picker').classList.contains('open')"))
+        session = page.evaluate("() => App.storage.getSession().channel.id")
+        c.ok("the session moved to it", session == "eporner", session)
+        c.ok("the trigger followed",
+             page.evaluate("() => document.getElementById('channel-trigger-name').textContent") == "EPorner")
+        page.wait_for_selector(".video-card", timeout=90000)
+        c.ok("and the grid reloaded",
+             page.evaluate("() => App.state.loadedVideos.length > 0"))
+
+        print("\nthe keyboard works too")
+        page.click("#channel-picker-btn")
+        page.wait_for_timeout(1200)
+        page.fill("#channel-search", "beeg")
+        page.wait_for_timeout(500)
+        page.press("#channel-search", "ArrowDown")
+        page.press("#channel-search", "ArrowUp")
+        page.press("#channel-search", "Enter")
+        page.wait_for_timeout(1500)
+        c.ok("Enter picks the highlighted row",
+             page.evaluate("() => App.storage.getSession().channel.id") == "beeg",
+             page.evaluate("() => App.storage.getSession().channel.id"))
+
+        page.click("#channel-picker-btn")
+        page.wait_for_timeout(800)
+        page.press("#channel-search", "Escape")
+        page.wait_for_timeout(300)
+        c.ok("Escape closes it without changing anything",
+             page.evaluate("""() => !document.getElementById('channel-picker').classList.contains('open')
+                 && App.storage.getSession().channel.id === 'beeg'"""))
+
+        print("\nthe command palette still offers the channels")
+        entries = page.evaluate("() => App.ui.channels.entries().length")
+        c.ok("the picker hands out its list", entries > 50, str(entries))
+        page.evaluate("() => App.enhance.openPalette()")
+        page.wait_for_timeout(400)
+        page.fill("#cmdk-input", "Redtube")
+        page.wait_for_timeout(400)
+        page.press("#cmdk-input", "Enter")
+        page.wait_for_timeout(1500)
+        c.ok("and choosing one from there switches the channel",
+             page.evaluate("() => App.storage.getSession().channel.id") == "redtube",
+             page.evaluate("() => App.storage.getSession().channel.id"))
+
+        c.ok("nothing threw along the way", not crashes, str(crashes[:2]))
+        browser.close()
+
+    print(f"\n{'OK' if not c.failed else 'FAILED'}: {c.failed} check(s) failed")
+    return 1 if c.failed else 0
+
+
+sys.exit(main())