From 71f292d84346dcfd2104ee9c14cb36ec279c58f4 Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Tue, 24 Feb 2026 07:27:35 +0100
Subject: [PATCH] feat(ui): Mark-all-read confirmation dialog and compact
 channel list

Add confirm() dialog before marking all messages as read, showing
list of unread channels with counts. Remove channel key/ID from
Manage Channels modal to save vertical space on mobile.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/static/js/app.js | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/app/static/js/app.js b/app/static/js/app.js
index a64e3eb..f769078 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -1932,19 +1932,31 @@ async function markChannelAsRead(channelIdx, timestamp) {
  * Mark all channels as read (bell icon click)
  */
 async function markAllChannelsRead() {
-    // Collect latest timestamps - use current time for channels with unread
-    const now = Math.floor(Date.now() / 1000);
-    const timestamps = {};
-
+    // Build list of channels with unread messages
+    const unreadChannels = [];
     for (const [idx, count] of Object.entries(unreadCounts)) {
         if (count > 0) {
-            timestamps[idx] = now;
-            lastSeenTimestamps[parseInt(idx)] = now;
-            unreadCounts[idx] = 0;
+            const channel = availableChannels.find(ch => ch.index === parseInt(idx));
+            const name = channel ? channel.name : `Channel ${idx}`;
+            unreadChannels.push({ idx, count, name });
         }
     }
 
-    if (Object.keys(timestamps).length === 0) return;
+    if (unreadChannels.length === 0) return;
+
+    // Show confirmation dialog with list of unread channels
+    const channelList = unreadChannels.map(ch => `  - ${ch.name} (${ch.count})`).join('\n');
+    if (!confirm(`Mark all messages as read?\n\nUnread channels:\n${channelList}`)) return;
+
+    // Collect latest timestamps
+    const now = Math.floor(Date.now() / 1000);
+    const timestamps = {};
+
+    for (const { idx } of unreadChannels) {
+        timestamps[idx] = now;
+        lastSeenTimestamps[parseInt(idx)] = now;
+        unreadCounts[idx] = 0;
+    }
 
     // Update UI immediately
     updateUnreadBadges();
@@ -2327,8 +2339,6 @@ function displayChannelsList(channels) {
         item.innerHTML = `
             <div>
                 <strong>${escapeHtml(channel.name)}</strong>
-                <br>
-                <small class="text-muted font-monospace">${channel.key}</small>
             </div>
             <div class="btn-group btn-group-sm">
                 <button class="btn ${isMuted ? 'btn-secondary' : 'btn-outline-secondary'}"