From 5c641903c90be51668a81a278e65a9a3d41130ae Mon Sep 17 00:00:00 2001
From: "Gan, Jimmy" <jimmy.gan@adidas.com>
Date: Sat, 27 Jun 2026 01:40:06 +0800
Subject: [PATCH] fix: clickable channel badge filters by channel; fix cat
 dropdown value; clean up saveNote

---
 frontend/src/routes/YoutubeDashboard.svelte | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/routes/YoutubeDashboard.svelte b/frontend/src/routes/YoutubeDashboard.svelte
index 59c8a66..fc1cacc 100644
--- a/frontend/src/routes/YoutubeDashboard.svelte
+++ b/frontend/src/routes/YoutubeDashboard.svelte
@@ -217,10 +217,9 @@
   function saveNote() {
     const vid = selectedVideo?.video_id;
     if (!vid) return;
-    const existing = notes[vid] || '';
-    if (existing && !existing.startsWith('[')) {
-      notes[vid] = `[${new Date().toLocaleString()}] ${existing}`;
-    }
+    const text = notes[vid] || '';
+    const stamped = text && !text.startsWith('[') ? `[${new Date().toLocaleString()}] ${text}` : text;
+    notes = {...notes, [vid]: stamped};
     localStorage.setItem('t-yt-notes', JSON.stringify(notes));
     activeNote = null;
   }
@@ -283,7 +282,7 @@
             {#if catList.length}
               <option disabled>── Categories ──</option>
               {#each catList as cat}
-                <option value={cat}>📁 {cat}</option>
+                <option value={'📁 ' + cat}>📁 {cat}</option>
               {/each}
               <option disabled>── Channels ──</option>
             {/if}
@@ -359,7 +358,10 @@
           <div class="flex items-start space-x-4">
             <img src={selectedVideo.thumbnail_url} alt="" class="w-40 h-24 rounded-lg object-cover flex-shrink-0" style="background:var(--bg-tertiary)" />
             <div class="min-w-0 space-y-2">
-              <span class="text-[10px] px-2 py-0.5 font-bold rounded-full" style="color:var(--accent);background:var(--bg-tertiary)">{selectedVideo.channel_name}</span>
+              <span class="text-[10px] px-2 py-0.5 font-bold rounded-full cursor-pointer hover:opacity-80 transition" 
+                style="color:var(--accent);background:var(--bg-tertiary)"
+                onclick={() => { channelFilter = selectedVideo.channel_name; }}
+                title="Filter by this channel">{selectedVideo.channel_name}</span>
               <h1 class="text-lg font-bold leading-snug" style="color:var(--text-primary)">{selectedVideo.title}</h1>
               <div class="flex space-x-2">
                 <button onclick={() => updateStatus(selectedVideo.video_id, 'read')} class="text-[10px] px-2.5 py-1 text-white font-bold rounded transition" style="background:var(--accent)">Read (r)</button>