feat: multi-channel support in admin dashboard UI

- Dashboard now fetches and displays all configured channels
- Each channel shows its own header, live status, and videos
- Channels are separated by visual dividers
- Backward compatible with single-channel config
- Version bump to 1.2.0

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

lib/controllers/dashboard.js

@@ -1,24 +1,37 @@
 import { YouTubeClient } from "../youtube-client.js";
 
+/**
+ * Get all channels from config (supports both single and multi-channel modes)
+ * @param {object} config - YouTube configuration
+ * @returns {Array<{id?: string, handle?: string, name?: string}>}
+ */
+function getAllChannels(config) {
+  const { channelId, channelHandle, channels } = config;
+
+  // Multi-channel mode
+  if (channels && Array.isArray(channels) && channels.length > 0) {
+    return channels.map((ch) => ({
+      id: ch.id,
+      handle: ch.handle,
+      name: ch.name,
+    }));
+  }
+
+  // Single channel mode (backward compatible)
+  if (channelId || channelHandle) {
+    return [{ id: channelId, handle: channelHandle }];
+  }
+
+  return [];
+}
+
 /**
  * Get primary channel from config (for backward compatibility)
  * Multi-channel mode uses first channel for dashboard
  */
 function getPrimaryChannel(config) {
-  const { channelId, channelHandle, channels } = config;
-
-  // Multi-channel mode: use first channel
-  if (channels && Array.isArray(channels) && channels.length > 0) {
-    const first = channels[0];
-    return { id: first.id, handle: first.handle };
-  }
-
-  // Single channel mode (backward compatible)
-  if (channelId || channelHandle) {
-    return { id: channelId, handle: channelHandle };
-  }
-
-  return null;
+  const channels = getAllChannels(config);
+  return channels.length > 0 ? channels[0] : null;
 }
 
 /**
@@ -49,38 +62,53 @@ export const dashboardController = {
         });
       }
 
-      const primaryChannel = getPrimaryChannel(youtubeConfig);
+      const allChannels = getAllChannels(youtubeConfig);
 
-      if (!primaryChannel) {
+      if (allChannels.length === 0) {
         return response.render("youtube", {
           title: response.locals.__("youtube.title"),
           error: { message: response.locals.__("youtube.error.noChannel") },
         });
       }
 
-      const client = new YouTubeClient({
-        apiKey,
-        channelId: primaryChannel.id,
-        channelHandle: primaryChannel.handle,
-        cacheTtl,
-      });
+      // Fetch data for all configured channels
+      const channelsData = [];
 
-      let channel = null;
-      let videos = [];
-      let liveStatus = null;
-
-      try {
-        [channel, videos, liveStatus] = await Promise.all([
-          client.getChannelInfo(),
-          client.getLatestVideos(limits?.videos || 6),
-          client.getLiveStatusEfficient(),
-        ]);
-      } catch (apiError) {
-        console.error("[YouTube] API error:", apiError.message);
-        return response.render("youtube", {
-          title: response.locals.__("youtube.title"),
-          error: { message: response.locals.__("youtube.error.connection") },
+      for (const channelConfig of allChannels) {
+        const client = new YouTubeClient({
+          apiKey,
+          channelId: channelConfig.id,
+          channelHandle: channelConfig.handle,
+          cacheTtl,
         });
+
+        try {
+          const [channel, videos, liveStatus] = await Promise.all([
+            client.getChannelInfo(),
+            client.getLatestVideos(limits?.videos || 6),
+            client.getLiveStatusEfficient(),
+          ]);
+
+          channelsData.push({
+            name: channelConfig.name || channel.title,
+            channel,
+            videos: videos.slice(0, limits?.videos || 6),
+            liveStatus,
+            isLive: liveStatus?.isLive || false,
+            isUpcoming: liveStatus?.isUpcoming || false,
+          });
+        } catch (apiError) {
+          console.error(
+            `[YouTube] API error for channel ${channelConfig.name || channelConfig.id || channelConfig.handle}:`,
+            apiError.message,
+          );
+          // Continue with other channels even if one fails
+          channelsData.push({
+            name:
+              channelConfig.name || channelConfig.id || channelConfig.handle,
+            error: apiError.message,
+          });
+        }
       }
 
       // Determine public frontend URL
@@ -88,13 +116,20 @@ export const dashboardController = {
         ? youtubeEndpoint.replace(/api$/, "")
         : "/youtube";
 
+      // For backward compatibility, also expose first channel's data at top level
+      const primaryData = channelsData[0] || {};
+
       response.render("youtube", {
         title: response.locals.__("youtube.title"),
-        channel,
-        videos: videos.slice(0, limits?.videos || 6),
-        liveStatus,
-        isLive: liveStatus?.isLive || false,
-        isUpcoming: liveStatus?.isUpcoming || false,
+        // Multi-channel data
+        channelsData,
+        isMultiChannel: allChannels.length > 1,
+        // Backward compatible single-channel data (first channel)
+        channel: primaryData.channel,
+        videos: primaryData.videos,
+        liveStatus: primaryData.liveStatus,
+        isLive: primaryData.isLive || false,
+        isUpcoming: primaryData.isUpcoming || false,
         publicUrl,
         mountPath: request.baseUrl,
       });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-endpoint-youtube",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "YouTube channel endpoint for Indiekit. Display latest videos and live status from any YouTube channel.",
   "keywords": [
     "indiekit",

views/youtube.njk

@@ -178,7 +178,117 @@
 
   {% if error %}
     {{ prose({ text: error.message }) }}
+  {% elif isMultiChannel and channelsData %}
+    {# Multi-channel mode: show all channels #}
+    {% for chData in channelsData %}
+    <div class="yt-channel-section" style="{% if not loop.first %}margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-border, #e5e5e5);{% endif %}">
+      {# Channel Header #}
+      {% if chData.error %}
+      <div class="yt-channel" style="border: 1px solid #ff6b6b;">
+        <div class="yt-channel__info">
+          <h2 class="yt-channel__name">{{ chData.name }}</h2>
+          <p style="color: #ff6b6b; margin: 0;">Error: {{ chData.error }}</p>
+        </div>
+      </div>
+      {% elif chData.channel %}
+      <div class="yt-channel">
+        {% if chData.channel.thumbnail %}
+        <img src="{{ chData.channel.thumbnail }}" alt="" class="yt-channel__avatar">
+        {% endif %}
+        <div class="yt-channel__info">
+          <h2 class="yt-channel__name">{{ chData.channel.title }}</h2>
+          <div class="yt-channel__stats">
+            <span>{{ chData.channel.subscriberCount }} {{ __("youtube.subscribers") }}</span>
+            <span>{{ chData.channel.videoCount }} videos</span>
+          </div>
+        </div>
+        {% if chData.isLive %}
+        <span class="yt-live-badge yt-live-badge--live">
+          <span class="yt-live-dot"></span>
+          {{ __("youtube.live") }}
+        </span>
+        {% elif chData.isUpcoming %}
+        <span class="yt-live-badge yt-live-badge--upcoming">
+          {{ __("youtube.upcoming") }}
+        </span>
+        {% else %}
+        <span class="yt-live-badge yt-live-badge--offline">
+          {{ __("youtube.offline") }}
+        </span>
+        {% endif %}
+      </div>
+
+      {# Live Stream (if live) #}
+      {% if chData.liveStatus and (chData.liveStatus.isLive or chData.liveStatus.isUpcoming) %}
+      <section class="yt-section">
+        <h3>{% if chData.liveStatus.isLive %}{{ __("youtube.live") }}{% else %}{{ __("youtube.upcoming") }}{% endif %}</h3>
+        <div class="yt-live-stream">
+          {% if chData.liveStatus.thumbnail %}
+          <img src="{{ chData.liveStatus.thumbnail }}" alt="" class="yt-live-stream__thumb">
+          {% endif %}
+          <div class="yt-live-stream__info">
+            <h4 class="yt-live-stream__title">
+              <a href="https://www.youtube.com/watch?v={{ chData.liveStatus.videoId }}" target="_blank" rel="noopener">
+                {{ chData.liveStatus.title }}
+              </a>
+            </h4>
+            {{ button({
+              href: "https://www.youtube.com/watch?v=" + chData.liveStatus.videoId,
+              text: __("youtube.watchNow"),
+              target: "_blank"
+            }) }}
+          </div>
+        </div>
+      </section>
+      {% endif %}
+
+      {# Latest Videos #}
+      <section class="yt-section">
+        <h3>{{ __("youtube.videos") }}</h3>
+        {% if chData.videos and chData.videos.length > 0 %}
+        <ul class="yt-video-grid">
+          {% for video in chData.videos %}
+          <li class="yt-video">
+            <div class="yt-video__thumb-wrapper">
+              <a href="{{ video.url }}" target="_blank" rel="noopener">
+                <img src="{{ video.thumbnail }}" alt="" class="yt-video__thumb" loading="lazy">
+              </a>
+              {% if video.durationFormatted and not video.isLive %}
+              <span class="yt-video__duration">{{ video.durationFormatted }}</span>
+              {% elif video.isLive %}
+              <span class="yt-video__duration" style="background:#ff0000">LIVE</span>
+              {% endif %}
+            </div>
+            <div class="yt-video__info">
+              <h4 class="yt-video__title">
+                <a href="{{ video.url }}" target="_blank" rel="noopener">{{ video.title }}</a>
+              </h4>
+              <div class="yt-video__meta">
+                {{ video.viewCount }} {{ __("youtube.views") }}
+              </div>
+            </div>
+          </li>
+          {% endfor %}
+        </ul>
+        {% else %}
+        {{ prose({ text: __("youtube.noVideos") }) }}
+        {% endif %}
+      </section>
+
+      {# Link to YouTube channel #}
+      <div class="yt-public-link" style="margin-top: 1rem;">
+        <p>{{ __("youtube.widget.description") }}</p>
+        {{ button({
+          href: "https://www.youtube.com/channel/" + chData.channel.id,
+          text: __("youtube.widget.view"),
+          target: "_blank"
+        }) }}
+      </div>
+      {% endif %}
+    </div>
+    {% endfor %}
   {% else %}
+    {# Single channel mode (backward compatible) #}
     {# Channel Header #}
     {% if channel %}
     <div class="yt-channel">