From cd5eb61e366cebd83c42807c5676743b339cc9fb Mon Sep 17 00:00:00 2001
From: daggerok <2445604+daggerok@users.noreply.github.com>
Date: Sun, 20 Sep 2026 03:57:48 +0000
Subject: [PATCH 1/9] Move desktop notes below video titles

Co-authored-by: arena-agent <297053741+arena-agent@users.noreply.github.com>
---
 index.html | 72 +++++++++++++++++++++++++++---------------------------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/index.html b/index.html
index 79907ec..8a0a0f8 100644
--- a/index.html
+++ b/index.html
@@ -1482,7 +1482,7 @@ <h3 className="font-bold text-emerald-500" style={{ fontSize: `${Math.round(16 *
                                             {renderTh({ label: 'Name', columnKey: 'name' })}
                                             {renderTh({ label: 'URL', columnKey: 'url', width: 'w-24' })}
                                             {renderTh({ label: 'Status', columnKey: 'status', width: 'w-36' })}
-                                            {renderTh({ label: 'Note', columnKey: 'note', width: 'w-64' })}
+                                            {renderTh({ label: 'Note', columnKey: 'note', width: 'w-24' })}
                                         </tr>
                                         </thead>
                                         <tbody className={`divide-y ${dark ? 'divide-slate-700/30' : 'divide-slate-100'}`}>
@@ -1498,8 +1498,26 @@ <h3 className="font-bold text-emerald-500" style={{ fontSize: `${Math.round(16 *
                                                             {v.type}
                                                         </span>
                                                     </td>
-                                                    <td className={`px-4 font-medium ${t1} max-w-sm xl:max-w-xl truncate`} style={{ paddingTop: tblCellPy, paddingBottom: tblCellPy }} title={v.name}>
-                                                        {v.name}
+                                                    {/* Keep the note with its video title; the Note column is only the edit trigger. */}
+                                                    <td className={`px-4 font-medium ${t1} max-w-sm xl:max-w-xl align-top`} style={{ paddingTop: tblCellPy, paddingBottom: tblCellPy }}>
+                                                        <div className="space-y-1">
+                                                            <div className="truncate" title={v.name}>{v.name}</div>
+                                                            {editNoteUrl === v.url ? (
+                                                                <textarea
+                                                                    rows={2}
+                                                                    autoFocus
+                                                                    value={editNoteText}
+                                                                    onChange={e => setEditNoteText(e.target.value)}
+                                                                    onBlur={() => saveNote(v.url, editNoteText)}
+                                                                    onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); saveNote(v.url, editNoteText); } if (e.key === 'Escape') { setEditNoteUrl(null); setEditNoteText(''); } }}
+                                                                    className={`w-full px-2 py-1 text-[11px] font-normal rounded border focus:outline-none focus:border-emerald-500 transition-colors resize-y ${inpFilter}`}
+                                                                    title="Edit note (Enter to save, Shift+Enter for a new line, Esc to cancel)"
+                                                                    placeholder="Write a note…"
+                                                                />
+                                                            ) : (v.note && v.note.trim()) ? (
+                                                                <p className={`text-[11px] font-normal leading-snug whitespace-pre-wrap break-words ${dark ? 'text-slate-400' : 'text-slate-500'}`}>{v.note}</p>
+                                                            ) : null}
+                                                        </div>
                                                     </td>
                                                     <td className="px-4 whitespace-nowrap text-right" style={{ paddingTop: tblCellPy, paddingBottom: tblCellPy }}>
                                                         <a href={v.url} target="_blank" rel="noreferrer" className="text-emerald-500 hover:text-emerald-400 font-bold transition-colors">
@@ -1515,40 +1533,22 @@ <h3 className="font-bold text-emerald-500" style={{ fontSize: `${Math.round(16 *
                                                             {statusMeta.label}
                                                         </button>
                                                     </td>
-                                                    {/* Note cell — same view/edit pattern as the mobile cards:
-                                                        simple pen icon button + fully visible note text. */}
+                                                    {/* The Note column only opens the editor shown below the video title. */}
                                                     <td className="px-4 align-top" style={{ paddingTop: tblCellPy, paddingBottom: tblCellPy }}>
-                                                        <div className="space-y-1">
-                                                            <button
-                                                                onClick={() => {
-                                                                    if (editNoteUrl === v.url) { setEditNoteUrl(null); setEditNoteText(''); }
-                                                                    else { setEditNoteUrl(v.url); setEditNoteText(v.note || ''); }
-                                                                }}
-                                                                title={v.note ? 'Edit note' : 'Add note'}
-                                                                data-tip={v.note ? 'Edit note' : 'Add note'}
-                                                                aria-label={v.note ? 'Edit note' : 'Add note'}
-                                                                className={`has-tip ${iconBtn} ${editNoteUrl === v.url || (v.note && v.note.trim())
-                                                                    ? (dark ? 'text-emerald-400 hover:bg-emerald-500/20' : 'text-emerald-700 hover:bg-emerald-100')
-                                                                    : (dark ? 'text-slate-400 hover:bg-slate-800' : 'text-slate-500 hover:bg-slate-100')}`}
-                                                            >
-                                                                {(v.note && v.note.trim()) ? '📝' : '✏️'}
-                                                            </button>
-                                                            {editNoteUrl === v.url ? (
-                                                                <textarea
-                                                                    rows={2}
-                                                                    autoFocus
-                                                                    value={editNoteText}
-                                                                    onChange={e => setEditNoteText(e.target.value)}
-                                                                    onBlur={() => saveNote(v.url, editNoteText)}
-                                                                    onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); saveNote(v.url, editNoteText); } if (e.key === 'Escape') { setEditNoteUrl(null); setEditNoteText(''); } }}
-                                                                    className={`w-full px-2 py-1 text-[11px] rounded border focus:outline-none focus:border-emerald-500 transition-colors resize-y ${inpFilter}`}
-                                                                    title="Edit note (Enter to save, Shift+Enter for a new line, Esc to cancel)"
-                                                                    placeholder="Write a note…"
-                                                                />
-                                                            ) : (v.note && v.note.trim()) ? (
-                                                                <p className={`text-[11px] leading-snug whitespace-pre-wrap break-words ${dark ? 'text-slate-400' : 'text-slate-500'}`}>{v.note}</p>
-                                                            ) : null}
-                                                        </div>
+                                                        <button
+                                                            onClick={() => {
+                                                                if (editNoteUrl === v.url) { setEditNoteUrl(null); setEditNoteText(''); }
+                                                                else { setEditNoteUrl(v.url); setEditNoteText(v.note || ''); }
+                                                            }}
+                                                            title={v.note ? 'Edit note' : 'Add note'}
+                                                            data-tip={v.note ? 'Edit note' : 'Add note'}
+                                                            aria-label={v.note ? 'Edit note' : 'Add note'}
+                                                            className={`has-tip ${iconBtn} ${editNoteUrl === v.url || (v.note && v.note.trim())
+                                                                ? (dark ? 'text-emerald-400 hover:bg-emerald-500/20' : 'text-emerald-700 hover:bg-emerald-100')
+                                                                : (dark ? 'text-slate-400 hover:bg-slate-800' : 'text-slate-500 hover:bg-slate-100')}`}
+                                                        >
+                                                            {(v.note && v.note.trim()) ? '📝' : '✏️'}
+                                                        </button>
                                                     </td>
                                                 </tr>
                                             );

From 93f64e36ffca77a498c0e6944adecfe574a0a035 Mon Sep 17 00:00:00 2001
From: daggerok <2445604+daggerok@users.noreply.github.com>
Date: Sun, 20 Sep 2026 03:59:12 +0000
Subject: [PATCH 2/9] Inline filter utilities in dashboard

Co-authored-by: arena-agent <297053741+arena-agent@users.noreply.github.com>
---
 filters.js            | 29 -----------------------------
 index.html            | 28 +++++++++++++++++++++++++++-
 tests/filters.test.js |  9 ++++++++-
 3 files changed, 35 insertions(+), 31 deletions(-)
 delete mode 100644 filters.js

diff --git a/filters.js b/filters.js
deleted file mode 100644
index f5a446d..0000000
--- a/filters.js
+++ /dev/null
@@ -1,29 +0,0 @@
-// Shared by every desktop and mobile column filter.
-// OR separates alternatives; * and & join literal phrases in occurrence order.
-function compileTextFilter(query) {
-    const alternatives = String(query ?? '').toLowerCase().split('|')
-        .map(alternative => alternative.split(/[*&]/).filter(term => term !== ''))
-        .filter(terms => terms.length > 0);
-
-    // Ignore empty operands while typing, rather than making an empty OR match all.
-    if (alternatives.length === 0) return () => true;
-
-    return value => {
-        const text = String(value ?? '').toLowerCase();
-        return alternatives.some(terms => {
-            let offset = 0;
-            return terms.every(term => {
-                const index = text.indexOf(term, offset);
-                if (index === -1) return false;
-                offset = index + term.length;
-                return true;
-            });
-        });
-    };
-}
-
-const FILTER_HELP = 'Case-insensitive literal phrases; spaces are literal. Use * or & for AND in order, | for OR. AND is evaluated before OR.';
-
-if (typeof module !== 'undefined' && module.exports) {
-    module.exports = { compileTextFilter };
-}
diff --git a/index.html b/index.html
index 8a0a0f8..44a52c8 100644
--- a/index.html
+++ b/index.html
@@ -102,7 +102,33 @@
 <body class="min-h-screen">
 <div id="root"></div>
 
-<script src="./filters.js"></script>
+<script id="filter-utils">
+    // Shared by every desktop and mobile column filter.
+    // OR separates alternatives; * and & join literal phrases in occurrence order.
+    function compileTextFilter(query) {
+        const alternatives = String(query ?? '').toLowerCase().split('|')
+            .map(alternative => alternative.split(/[*&]/).filter(term => term !== ''))
+            .filter(terms => terms.length > 0);
+
+        // Ignore empty operands while typing, rather than making an empty OR match all.
+        if (alternatives.length === 0) return () => true;
+
+        return value => {
+            const text = String(value ?? '').toLowerCase();
+            return alternatives.some(terms => {
+                let offset = 0;
+                return terms.every(term => {
+                    const index = text.indexOf(term, offset);
+                    if (index === -1) return false;
+                    offset = index + term.length;
+                    return true;
+                });
+            });
+        };
+    }
+
+    const FILTER_HELP = 'Case-insensitive literal phrases; spaces are literal. Use * or & for AND in order, | for OR. AND is evaluated before OR.';
+</script>
 <script type="text/babel" data-presets="react">
     const React = window.React || {};
     const { useState, useEffect, useMemo, useRef, useCallback } = React;
diff --git a/tests/filters.test.js b/tests/filters.test.js
index 3b80f91..4864e1b 100644
--- a/tests/filters.test.js
+++ b/tests/filters.test.js
@@ -1,6 +1,13 @@
+const { readFileSync } = require('node:fs');
+const path = require('node:path');
 const { test } = require('node:test');
 const assert = require('node:assert/strict');
-const { compileTextFilter } = require('../filters.js');
+const vm = require('node:vm');
+
+const html = readFileSync(path.join(__dirname, '..', 'index.html'), 'utf8');
+const filterScript = html.match(/<script id="filter-utils">([\s\S]*?)<\/script>/);
+assert.ok(filterScript, 'index.html must contain the inline filter utilities');
+const { compileTextFilter } = vm.runInNewContext(`${filterScript[1]}\n({ compileTextFilter });`);
 
 test('plain phrases preserve spaces and match case-insensitively', () => {
     const matches = compileTextFilter('2022 Mentorship');

From 22375a6bdf338394f02f25c2cf43ecfb4cb6a139 Mon Sep 17 00:00:00 2001
From: daggerok <2445604+daggerok@users.noreply.github.com>
Date: Sun, 20 Sep 2026 04:02:17 +0000
Subject: [PATCH 3/9] Use add-note icon for all note actions

Co-authored-by: arena-agent <297053741+arena-agent@users.noreply.github.com>
---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 44a52c8..f13da2c 100644
--- a/index.html
+++ b/index.html
@@ -1573,7 +1573,7 @@ <h3 className="font-bold text-emerald-500" style={{ fontSize: `${Math.round(16 *
                                                                 ? (dark ? 'text-emerald-400 hover:bg-emerald-500/20' : 'text-emerald-700 hover:bg-emerald-100')
                                                                 : (dark ? 'text-slate-400 hover:bg-slate-800' : 'text-slate-500 hover:bg-slate-100')}`}
                                                         >
-                                                            {(v.note && v.note.trim()) ? '📝' : '✏️'}
+                                                            ✏️
                                                         </button>
                                                     </td>
                                                 </tr>
@@ -1643,7 +1643,7 @@ <h3 className="font-bold text-emerald-500" style={{ fontSize: `${Math.round(16 *
                                                                 ? (dark ? 'text-emerald-400 hover:bg-emerald-500/20' : 'text-emerald-700 hover:bg-emerald-100')
                                                                 : (dark ? 'text-slate-400 hover:bg-slate-800' : 'text-slate-500 hover:bg-slate-100')}`}
                                                         >
-                                                            {(v.note && v.note.trim()) ? '📝' : '✏️'}
+                                                            ✏️
                                                         </button>
                                                     </div>
                                                 </div>

From a403f361882fb12ae44570d6c352ff37b366e864 Mon Sep 17 00:00:00 2001
From: daggerok <2445604+daggerok@users.noreply.github.com>
Date: Sun, 20 Sep 2026 04:04:24 +0000
Subject: [PATCH 4/9] Scale note text with video titles

Co-authored-by: arena-agent <297053741+arena-agent@users.noreply.github.com>
---
 index.html | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index f13da2c..1f1ebb1 100644
--- a/index.html
+++ b/index.html
@@ -1094,6 +1094,8 @@
         const scCls = dark ? 'dark-scroll' : 'light-scroll';
 
         const tblFs = `${Math.round(14 * scale)}px`;
+        // Keep note copy and editors at the same 11:14 proportion to video titles.
+        const noteFs = `${Math.round(11 * scale)}px`;
         const tblHFs = `${Math.round(11 * scale)}px`;
         const tblCellPy = `${Math.round(10 * scale)}px`;
         const tbBtn = 'w-full md:w-9 h-9 rounded-lg border-0 bg-transparent transition-all flex items-center justify-center disabled:opacity-40 text-base';
@@ -1536,12 +1538,18 @@ <h3 className="font-bold text-emerald-500" style={{ fontSize: `${Math.round(16 *
                                                                     onChange={e => setEditNoteText(e.target.value)}
                                                                     onBlur={() => saveNote(v.url, editNoteText)}
                                                                     onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); saveNote(v.url, editNoteText); } if (e.key === 'Escape') { setEditNoteUrl(null); setEditNoteText(''); } }}
-                                                                    className={`w-full px-2 py-1 text-[11px] font-normal rounded border focus:outline-none focus:border-emerald-500 transition-colors resize-y ${inpFilter}`}
+                                                                    className={`w-full px-2 py-1 font-normal rounded border focus:outline-none focus:border-emerald-500 transition-colors resize-y ${inpFilter}`}
+                                                                    style={{ fontSize: noteFs }}
                                                                     title="Edit note (Enter to save, Shift+Enter for a new line, Esc to cancel)"
                                                                     placeholder="Write a note…"
                                                                 />
                                                             ) : (v.note && v.note.trim()) ? (
-                                                                <p className={`text-[11px] font-normal leading-snug whitespace-pre-wrap break-words ${dark ? 'text-slate-400' : 'text-slate-500'}`}>{v.note}</p>
+                                                                <p
+                                                                    className={`font-normal leading-snug whitespace-pre-wrap break-words ${dark ? 'text-slate-400' : 'text-slate-500'}`}
+                                                                    style={{ fontSize: noteFs }}
+                                                                >
+                                                                    {v.note}
+                                                                </p>
                                                             ) : null}
                                                         </div>
                                                     </td>
@@ -1647,7 +1655,7 @@ <h3 className="font-bold text-emerald-500" style={{ fontSize: `${Math.round(16 *
                                                         </button>
                                                     </div>
                                                 </div>
-                                                <h4 className={`font-semibold text-sm leading-snug ${t1}`}>{v.name}</h4>
+                                                <h4 className={`font-semibold leading-snug ${t1}`} style={{ fontSize: tblFs }}>{v.name}</h4>
                                                 {editNoteUrl === v.url ? (
                                                     <textarea
                                                         rows={3}
@@ -1656,12 +1664,18 @@ <h4 className={`font-semibold text-sm leading-snug ${t1}`}>{v.name}</h4>
                                                         onChange={e => setEditNoteText(e.target.value)}
                                                         onBlur={() => saveNote(v.url, editNoteText)}
                                                         onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); saveNote(v.url, editNoteText); } if (e.key === 'Escape') { setEditNoteUrl(null); setEditNoteText(''); } }}
-                                                        className={`w-full px-2 py-1 text-[11px] rounded border focus:outline-none focus:border-emerald-500 transition-colors resize-y ${inpFilter}`}
+                                                        className={`w-full px-2 py-1 rounded border focus:outline-none focus:border-emerald-500 transition-colors resize-y ${inpFilter}`}
+                                                        style={{ fontSize: noteFs }}
                                                         title="Edit note (Enter to save, Shift+Enter for a new line, Esc to cancel)"
                                                         placeholder="Write a note…"
                                                     />
                                                 ) : (v.note && v.note.trim()) ? (
-                                                    <p className={`text-[10px] leading-snug whitespace-pre-wrap break-words ${dark ? 'text-slate-400' : 'text-slate-500'}`}>{v.note}</p>
+                                                    <p
+                                                        className={`leading-snug whitespace-pre-wrap break-words ${dark ? 'text-slate-400' : 'text-slate-500'}`}
+                                                        style={{ fontSize: noteFs }}
+                                                    >
+                                                        {v.note}
+                                                    </p>
                                                 ) : null}
                                             </div>
                                         );

From d6bc944055b7e01b4e12d507a4aad01cbc455cac Mon Sep 17 00:00:00 2001
From: daggerok <2445604+daggerok@users.noreply.github.com>
Date: Sun, 20 Sep 2026 04:08:10 +0000
Subject: [PATCH 5/9] Make note editing visually seamless

Co-authored-by: arena-agent <297053741+arena-agent@users.noreply.github.com>
---
 index.html | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 1f1ebb1..30ae7f8 100644
--- a/index.html
+++ b/index.html
@@ -168,6 +168,13 @@
     const sliderToScale = v => 0.7 + (v / 100) * 0.8;
     const DEFAULT_SCALE_SLIDER = 50;
 
+    // Keep the borderless inline note editor exactly as tall as its content.
+    const fitNoteEditorToContent = (textarea) => {
+        if (!textarea) return;
+        textarea.style.height = '0px';
+        textarea.style.height = `${textarea.scrollHeight}px`;
+    };
+
     // --- Google Sheets constants (adapted from google impl) ---
     const DEFAULT_SHEET_PREFIX = 'YT-';
     const VIDEO_HEADERS = ['datetime', 'type', 'name', 'url', 'status', 'note', 'created', 'updated'];
@@ -1088,6 +1095,7 @@
         const inp = dark ? 'bg-slate-800 border-slate-700 text-emerald-400' : 'bg-slate-50 border-slate-300 text-emerald-700';
         const inpFilter = dark ? 'bg-slate-900 border-slate-700 text-slate-200' : 'bg-white border-slate-300 text-slate-800';
         const mt = dark ? 'text-slate-400' : 'text-slate-500';
+        const noteText = dark ? 'text-slate-400' : 'text-slate-500';
         const t1 = dark ? 'text-slate-100' : 'text-slate-800';
         const sB = dark ? 'bg-slate-800' : 'bg-white';
         const hR = dark ? 'hover:bg-slate-700/20' : 'hover:bg-slate-50';
@@ -1532,20 +1540,22 @@ <h3 className="font-bold text-emerald-500" style={{ fontSize: `${Math.round(16 *
                                                             <div className="truncate" title={v.name}>{v.name}</div>
                                                             {editNoteUrl === v.url ? (
                                                                 <textarea
-                                                                    rows={2}
+                                                                    rows={1}
+                                                                    ref={element => fitNoteEditorToContent(element)}
                                                                     autoFocus
                                                                     value={editNoteText}
                                                                     onChange={e => setEditNoteText(e.target.value)}
+                                                                    onInput={e => fitNoteEditorToContent(e.currentTarget)}
                                                                     onBlur={() => saveNote(v.url, editNoteText)}
                                                                     onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); saveNote(v.url, editNoteText); } if (e.key === 'Escape') { setEditNoteUrl(null); setEditNoteText(''); } }}
-                                                                    className={`w-full px-2 py-1 font-normal rounded border focus:outline-none focus:border-emerald-500 transition-colors resize-y ${inpFilter}`}
+                                                                    className={`block w-full m-0 p-0 border-0 rounded-none bg-transparent shadow-none appearance-none font-normal leading-snug whitespace-pre-wrap break-words resize-none overflow-hidden focus:outline-none focus:ring-0 ${noteText}`}
                                                                     style={{ fontSize: noteFs }}
                                                                     title="Edit note (Enter to save, Shift+Enter for a new line, Esc to cancel)"
                                                                     placeholder="Write a note…"
                                                                 />
                                                             ) : (v.note && v.note.trim()) ? (
                                                                 <p
-                                                                    className={`font-normal leading-snug whitespace-pre-wrap break-words ${dark ? 'text-slate-400' : 'text-slate-500'}`}
+                                                                    className={`block w-full m-0 p-0 font-normal leading-snug whitespace-pre-wrap break-words ${noteText}`}
                                                                     style={{ fontSize: noteFs }}
                                                                 >
                                                                     {v.note}
@@ -1658,20 +1668,22 @@ <h3 className="font-bold text-emerald-500" style={{ fontSize: `${Math.round(16 *
                                                 <h4 className={`font-semibold leading-snug ${t1}`} style={{ fontSize: tblFs }}>{v.name}</h4>
                                                 {editNoteUrl === v.url ? (
                                                     <textarea
-                                                        rows={3}
+                                                        rows={1}
+                                                        ref={element => fitNoteEditorToContent(element)}
                                                         autoFocus
                                                         value={editNoteText}
                                                         onChange={e => setEditNoteText(e.target.value)}
+                                                        onInput={e => fitNoteEditorToContent(e.currentTarget)}
                                                         onBlur={() => saveNote(v.url, editNoteText)}
                                                         onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); saveNote(v.url, editNoteText); } if (e.key === 'Escape') { setEditNoteUrl(null); setEditNoteText(''); } }}
-                                                        className={`w-full px-2 py-1 rounded border focus:outline-none focus:border-emerald-500 transition-colors resize-y ${inpFilter}`}
+                                                        className={`block w-full m-0 p-0 border-0 rounded-none bg-transparent shadow-none appearance-none font-normal leading-snug whitespace-pre-wrap break-words resize-none overflow-hidden focus:outline-none focus:ring-0 ${noteText}`}
                                                         style={{ fontSize: noteFs }}
                                                         title="Edit note (Enter to save, Shift+Enter for a new line, Esc to cancel)"
                                                         placeholder="Write a note…"
                                                     />
                                                 ) : (v.note && v.note.trim()) ? (
                                                     <p
-                                                        className={`leading-snug whitespace-pre-wrap break-words ${dark ? 'text-slate-400' : 'text-slate-500'}`}
+                                                        className={`block w-full m-0 p-0 font-normal leading-snug whitespace-pre-wrap break-words ${noteText}`}
                                                         style={{ fontSize: noteFs }}
                                                     >
                                                         {v.note}

From 9b5e55c479c65274dfe31bf2db4e85daa46a894c Mon Sep 17 00:00:00 2001
From: daggerok <2445604+daggerok@users.noreply.github.com>
Date: Sun, 20 Sep 2026 04:11:27 +0000
Subject: [PATCH 6/9] Simplify inventory heading and stack compact dates

Co-authored-by: arena-agent <297053741+arena-agent@users.noreply.github.com>
---
 index.html | 33 ++++++++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 30ae7f8..c452276 100644
--- a/index.html
+++ b/index.html
@@ -1004,11 +1004,21 @@
             return { label: '⚪️ Unwatched', cls: dark ? 'text-slate-400 bg-slate-800 border-slate-700' : 'text-slate-500 bg-slate-100 border-slate-200' };
         };
 
+        const formatDateParts = (isoStr) => {
+            const value = new Date(isoStr);
+            return {
+                date: value.toLocaleDateString('en-US', {
+                    year: 'numeric', month: '2-digit', day: '2-digit'
+                }),
+                time: value.toLocaleTimeString('en-US', {
+                    hour: '2-digit', minute: '2-digit', hour12: false
+                })
+            };
+        };
+
         const formatDate = (isoStr) => {
-            return new Date(isoStr).toLocaleString('en-US', {
-                year: 'numeric', month: '2-digit', day: '2-digit',
-                hour: '2-digit', minute: '2-digit', hour12: false
-            });
+            const datetime = formatDateParts(isoStr);
+            return `${datetime.date}, ${datetime.time}`;
         };
 
         // --- GS config updater ---
@@ -1490,7 +1500,7 @@ <h3 className="font-bold text-emerald-500" style={{ fontSize: `${Math.round(15 *
                                 <div className={`px-4 py-3 bg-gradient-to-r ${dark ? 'from-slate-900/30 to-slate-900/10' : 'from-slate-50 to-slate-100/50'} flex items-center justify-between gap-4`}>
                                     <div>
                                         <h3 className="font-bold text-emerald-500" style={{ fontSize: `${Math.round(16 * scale)}px` }}>
-                                            📋 Channel Inventory ({processedVideos.length} / {videos.length})
+                                            {processedVideos.length} / {videos.length}
                                         </h3>
                                         {isGoogleReady && currentHandle && (
                                             <div className="text-[10px] mt-0.5 text-emerald-400 flex items-center gap-1">
@@ -1524,10 +1534,15 @@ <h3 className="font-bold text-emerald-500" style={{ fontSize: `${Math.round(16 *
                                         <tbody className={`divide-y ${dark ? 'divide-slate-700/30' : 'divide-slate-100'}`}>
                                         {processedVideos.map((v, i) => {
                                             const statusMeta = getStatusDisplay(v.status || 'unwatched');
+                                            const datetime = formatDateParts(v.datetime);
                                             return (
                                                 <tr key={i} className={`${hR} transition-colors group`}>
                                                     <td className={`px-4 font-mono ${mt} sticky left-0 z-10 ${sB} whitespace-nowrap`} style={{ paddingTop: tblCellPy, paddingBottom: tblCellPy }}>
-                                                        {formatDate(v.datetime)}
+                                                        <span className="hidden 2xl:inline">{datetime.date}, {datetime.time}</span>
+                                                        <span className="block 2xl:hidden leading-tight">
+                                                            <span className="block">{datetime.date}</span>
+                                                            <span className="block">{datetime.time}</span>
+                                                        </span>
                                                     </td>
                                                     <td className="px-4 whitespace-nowrap" style={{ paddingTop: tblCellPy, paddingBottom: tblCellPy }}>
                                                         <span className={`px-2 py-0.5 text-[11px] font-bold border rounded-md ${getBadgeStyle(v.type)}`}>
@@ -1614,6 +1629,7 @@ <h3 className="font-bold text-emerald-500" style={{ fontSize: `${Math.round(16 *
                                     </div>
                                     {processedVideos.map((v, i) => {
                                         const status = v.status || 'unwatched';
+                                        const datetime = formatDateParts(v.datetime);
                                         const statusIcon = status === 'watched' ? '🟢' : status === 'watching' ? '🟡' : '⚪️';
                                         const statusTip = status === 'watched' ? 'Watched — tap to mark unwatched' : status === 'watching' ? 'Watching — tap to mark watched' : 'Unwatched — tap to mark watching';
                                         const statusIconStyle = status === 'watched'
@@ -1626,7 +1642,10 @@ <h3 className="font-bold text-emerald-500" style={{ fontSize: `${Math.round(16 *
                                                 <div className="flex items-start justify-between gap-2">
                                                     <div className="min-w-0 flex-1 flex items-center gap-2">
                                                         <span className={`px-2 py-0.5 text-[10px] font-bold border rounded-md flex-shrink-0 ${getBadgeStyle(v.type)}`}>{v.type}</span>
-                                                        <span className="text-[11px] font-mono opacity-60 truncate">{formatDate(v.datetime)}</span>
+                                                        <span className="text-[11px] font-mono opacity-60 leading-tight flex-shrink-0">
+                                                            <span className="block">{datetime.date}</span>
+                                                            <span className="block">{datetime.time}</span>
+                                                        </span>
                                                     </div>
                                                     <div className="flex items-center gap-0.5 flex-shrink-0">
                                                         <button

From 91bd1bc92201c2f46fc7ec50023ea961c8d3c4f7 Mon Sep 17 00:00:00 2001
From: daggerok <2445604+daggerok@users.noreply.github.com>
Date: Sun, 20 Sep 2026 04:19:31 +0000
Subject: [PATCH 7/9] Add note save controls and consistent gutters

Co-authored-by: arena-agent <297053741+arena-agent@users.noreply.github.com>
---
 index.html | 129 ++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 92 insertions(+), 37 deletions(-)

diff --git a/index.html b/index.html
index c452276..3593627 100644
--- a/index.html
+++ b/index.html
@@ -393,6 +393,7 @@
         const [showDebug, setShowDebug] = useState(false);
         const [editNoteUrl, setEditNoteUrl] = useState(null);
         const [editNoteText, setEditNoteText] = useState('');
+        const cancelNoteBlurRef = useRef(false);
 
         // Persistent Filters & Sort
         const [sortConfig, setSortConfig] = useState(prefs.sortConfig || { key: 'datetime', direction: 'desc' });
@@ -907,6 +908,37 @@
             }
         };
 
+        const openNoteEditor = (video) => {
+            setEditNoteUrl(video.url);
+            setEditNoteText(video.note || '');
+        };
+
+        const cancelNoteEdit = () => {
+            // Ignore a blur caused by removing the focused editor during cancellation.
+            cancelNoteBlurRef.current = true;
+            setEditNoteUrl(null);
+            setEditNoteText('');
+            setTimeout(() => { cancelNoteBlurRef.current = false; }, 0);
+        };
+
+        const handleNoteEditorBlur = (url) => {
+            if (cancelNoteBlurRef.current) {
+                cancelNoteBlurRef.current = false;
+                return;
+            }
+            saveNote(url, editNoteText);
+        };
+
+        const handleNoteEditorKeyDown = (event, url) => {
+            if (event.key === 'Enter' && !event.shiftKey) {
+                event.preventDefault();
+                saveNote(url, editNoteText);
+            } else if (event.key === 'Escape') {
+                event.preventDefault();
+                cancelNoteEdit();
+            }
+        };
+
         // --- Status Toggle (enhanced with GS) ---
         const toggleStatus = (url) => {
             if (!currentChannelId || !videos || !currentHandle) return;
@@ -1106,6 +1138,7 @@
         const inpFilter = dark ? 'bg-slate-900 border-slate-700 text-slate-200' : 'bg-white border-slate-300 text-slate-800';
         const mt = dark ? 'text-slate-400' : 'text-slate-500';
         const noteText = dark ? 'text-slate-400' : 'text-slate-500';
+        const noteEditText = dark ? 'text-slate-300 placeholder:text-slate-500' : 'text-slate-700 placeholder:text-slate-400';
         const t1 = dark ? 'text-slate-100' : 'text-slate-800';
         const sB = dark ? 'bg-slate-800' : 'bg-white';
         const hR = dark ? 'hover:bg-slate-700/20' : 'hover:bg-slate-50';
@@ -1118,6 +1151,54 @@
         const tblCellPy = `${Math.round(10 * scale)}px`;
         const tbBtn = 'w-full md:w-9 h-9 rounded-lg border-0 bg-transparent transition-all flex items-center justify-center disabled:opacity-40 text-base';
         const iconBtn = 'w-7 h-7 rounded-md border-0 bg-transparent flex items-center justify-center text-xs transition-all active:scale-95 flex-shrink-0';
+        const noteDecisionBtn = 'w-7 h-7 rounded-md border-0 bg-transparent flex items-center justify-center text-base font-bold transition-all active:scale-95 flex-shrink-0';
+
+        const renderNoteActions = (video) => {
+            if (editNoteUrl === video.url) {
+                return (
+                    <div className="flex items-center gap-0.5">
+                        <button
+                            type="button"
+                            onPointerDown={event => event.preventDefault()}
+                            onClick={() => saveNote(video.url, editNoteText)}
+                            title="Save note (Enter)"
+                            data-tip="Save (Enter)"
+                            aria-label="Save note"
+                            className={`has-tip ${noteDecisionBtn} ${dark ? 'text-emerald-400 hover:bg-emerald-500/20' : 'text-emerald-700 hover:bg-emerald-100'}`}
+                        >
+                            ✓
+                        </button>
+                        <button
+                            type="button"
+                            onPointerDown={event => event.preventDefault()}
+                            onClick={cancelNoteEdit}
+                            title="Cancel note changes (Escape)"
+                            data-tip="Cancel (Esc)"
+                            aria-label="Cancel note changes"
+                            className={`has-tip ${noteDecisionBtn} ${dark ? 'text-red-400 hover:bg-red-500/20' : 'text-red-600 hover:bg-red-100'}`}
+                        >
+                            ✕
+                        </button>
+                    </div>
+                );
+            }
+
+            const hasNote = Boolean(video.note && video.note.trim());
+            return (
+                <button
+                    type="button"
+                    onClick={() => openNoteEditor(video)}
+                    title={hasNote ? 'Edit note' : 'Add note'}
+                    data-tip={hasNote ? 'Edit note' : 'Add note'}
+                    aria-label={hasNote ? 'Edit note' : 'Add note'}
+                    className={`has-tip ${iconBtn} ${hasNote
+                        ? (dark ? 'text-emerald-400 hover:bg-emerald-500/20' : 'text-emerald-700 hover:bg-emerald-100')
+                        : (dark ? 'text-slate-400 hover:bg-slate-800' : 'text-slate-500 hover:bg-slate-100')}`}
+                >
+                    ✏️
+                </button>
+            );
+        };
 
         // Render headers inline instead of as a component created during every App render.
         // Recreating a nested component remounts its input and makes the caret lose focus.
@@ -1301,7 +1382,7 @@
             <React.Fragment>
                 {/* Navbar */}
                 <div className={`sticky top-0 z-50 ${bg} backdrop-blur-md`}>
-                    <div className="px-4 xl:px-8">
+                    <div className="px-4">
                         <div className="flex flex-col md:flex-row md:items-center gap-2 py-3">
                             {/* Input first (full width on mobile) */}
                             <div className="w-full md:flex-1 min-w-0">
@@ -1427,7 +1508,7 @@
                 </div>
 
                 {/* Main Workspace Area */}
-                <div className="px-4 xl:px-8 py-1">
+                <div className="px-4 py-1">
                     {/* Settings Panel — EXACT same width + style as the inventory table, animated collapse */}
                     <div className={`settings-wrap ${showSettings ? 'open mb-2' : ''}`}>
                         <div className={`${card} border rounded-xl overflow-hidden shadow-lg text-sm`}>
@@ -1561,9 +1642,9 @@ <h3 className="font-bold text-emerald-500" style={{ fontSize: `${Math.round(16 *
                                                                     value={editNoteText}
                                                                     onChange={e => setEditNoteText(e.target.value)}
                                                                     onInput={e => fitNoteEditorToContent(e.currentTarget)}
-                                                                    onBlur={() => saveNote(v.url, editNoteText)}
-                                                                    onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); saveNote(v.url, editNoteText); } if (e.key === 'Escape') { setEditNoteUrl(null); setEditNoteText(''); } }}
-                                                                    className={`block w-full m-0 p-0 border-0 rounded-none bg-transparent shadow-none appearance-none font-normal leading-snug whitespace-pre-wrap break-words resize-none overflow-hidden focus:outline-none focus:ring-0 ${noteText}`}
+                                                                    onBlur={() => handleNoteEditorBlur(v.url)}
+                                                                    onKeyDown={event => handleNoteEditorKeyDown(event, v.url)}
+                                                                    className={`block w-full m-0 p-0 border-0 rounded-none bg-transparent shadow-none appearance-none font-normal leading-snug whitespace-pre-wrap break-words resize-none overflow-hidden focus:outline-none focus:ring-0 ${noteEditText}`}
                                                                     style={{ fontSize: noteFs }}
                                                                     title="Edit note (Enter to save, Shift+Enter for a new line, Esc to cancel)"
                                                                     placeholder="Write a note…"
@@ -1592,22 +1673,9 @@ <h3 className="font-bold text-emerald-500" style={{ fontSize: `${Math.round(16 *
                                                             {statusMeta.label}
                                                         </button>
                                                     </td>
-                                                    {/* The Note column only opens the editor shown below the video title. */}
+                                                    {/* The Note column shows edit, save, and cancel controls for the inline editor. */}
                                                     <td className="px-4 align-top" style={{ paddingTop: tblCellPy, paddingBottom: tblCellPy }}>
-                                                        <button
-                                                            onClick={() => {
-                                                                if (editNoteUrl === v.url) { setEditNoteUrl(null); setEditNoteText(''); }
-                                                                else { setEditNoteUrl(v.url); setEditNoteText(v.note || ''); }
-                                                            }}
-                                                            title={v.note ? 'Edit note' : 'Add note'}
-                                                            data-tip={v.note ? 'Edit note' : 'Add note'}
-                                                            aria-label={v.note ? 'Edit note' : 'Add note'}
-                                                            className={`has-tip ${iconBtn} ${editNoteUrl === v.url || (v.note && v.note.trim())
-                                                                ? (dark ? 'text-emerald-400 hover:bg-emerald-500/20' : 'text-emerald-700 hover:bg-emerald-100')
-                                                                : (dark ? 'text-slate-400 hover:bg-slate-800' : 'text-slate-500 hover:bg-slate-100')}`}
-                                                        >
-                                                            ✏️
-                                                        </button>
+                                                        {renderNoteActions(v)}
                                                     </td>
                                                 </tr>
                                             );
@@ -1668,20 +1736,7 @@ <h3 className="font-bold text-emerald-500" style={{ fontSize: `${Math.round(16 *
                                                         >
                                                             ▶
                                                         </a>
-                                                        <button
-                                                            onClick={() => {
-                                                                if (editNoteUrl === v.url) { setEditNoteUrl(null); setEditNoteText(''); }
-                                                                else { setEditNoteUrl(v.url); setEditNoteText(v.note || ''); }
-                                                            }}
-                                                            title={v.note ? 'Edit note' : 'Add note'}
-                                                            data-tip={v.note ? 'Edit note' : 'Add note'}
-                                                            aria-label={v.note ? 'Edit note' : 'Add note'}
-                                                            className={`has-tip ${iconBtn} ${editNoteUrl === v.url || (v.note && v.note.trim())
-                                                                ? (dark ? 'text-emerald-400 hover:bg-emerald-500/20' : 'text-emerald-700 hover:bg-emerald-100')
-                                                                : (dark ? 'text-slate-400 hover:bg-slate-800' : 'text-slate-500 hover:bg-slate-100')}`}
-                                                        >
-                                                            ✏️
-                                                        </button>
+                                                        {renderNoteActions(v)}
                                                     </div>
                                                 </div>
                                                 <h4 className={`font-semibold leading-snug ${t1}`} style={{ fontSize: tblFs }}>{v.name}</h4>
@@ -1693,9 +1748,9 @@ <h4 className={`font-semibold leading-snug ${t1}`} style={{ fontSize: tblFs }}>{
                                                         value={editNoteText}
                                                         onChange={e => setEditNoteText(e.target.value)}
                                                         onInput={e => fitNoteEditorToContent(e.currentTarget)}
-                                                        onBlur={() => saveNote(v.url, editNoteText)}
-                                                        onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); saveNote(v.url, editNoteText); } if (e.key === 'Escape') { setEditNoteUrl(null); setEditNoteText(''); } }}
-                                                        className={`block w-full m-0 p-0 border-0 rounded-none bg-transparent shadow-none appearance-none font-normal leading-snug whitespace-pre-wrap break-words resize-none overflow-hidden focus:outline-none focus:ring-0 ${noteText}`}
+                                                        onBlur={() => handleNoteEditorBlur(v.url)}
+                                                        onKeyDown={event => handleNoteEditorKeyDown(event, v.url)}
+                                                        className={`block w-full m-0 p-0 border-0 rounded-none bg-transparent shadow-none appearance-none font-normal leading-snug whitespace-pre-wrap break-words resize-none overflow-hidden focus:outline-none focus:ring-0 ${noteEditText}`}
                                                         style={{ fontSize: noteFs }}
                                                         title="Edit note (Enter to save, Shift+Enter for a new line, Esc to cancel)"
                                                         placeholder="Write a note…"

From 0b3a01ca8ed652b52646ccd51cba1d2b684cf113 Mon Sep 17 00:00:00 2001
From: daggerok <2445604+daggerok@users.noreply.github.com>
Date: Sun, 20 Sep 2026 04:20:38 +0000
Subject: [PATCH 8/9] Keep mobile card datetimes on one line

Co-authored-by: arena-agent <297053741+arena-agent@users.noreply.github.com>
---
 index.html | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 3593627..df8e6cb 100644
--- a/index.html
+++ b/index.html
@@ -1710,9 +1710,8 @@ <h3 className="font-bold text-emerald-500" style={{ fontSize: `${Math.round(16 *
                                                 <div className="flex items-start justify-between gap-2">
                                                     <div className="min-w-0 flex-1 flex items-center gap-2">
                                                         <span className={`px-2 py-0.5 text-[10px] font-bold border rounded-md flex-shrink-0 ${getBadgeStyle(v.type)}`}>{v.type}</span>
-                                                        <span className="text-[11px] font-mono opacity-60 leading-tight flex-shrink-0">
-                                                            <span className="block">{datetime.date}</span>
-                                                            <span className="block">{datetime.time}</span>
+                                                        <span className="text-[11px] font-mono opacity-60 whitespace-nowrap flex-shrink-0">
+                                                            {datetime.date} {datetime.time}
                                                         </span>
                                                     </div>
                                                     <div className="flex items-center gap-0.5 flex-shrink-0">

From 0937e0ef7b1592d178de2d371957c806c577bf18 Mon Sep 17 00:00:00 2001
From: daggerok <2445604+daggerok@users.noreply.github.com>
Date: Sun, 20 Sep 2026 04:25:38 +0000
Subject: [PATCH 9/9] Switch to cards before table columns clip

Co-authored-by: arena-agent <297053741+arena-agent@users.noreply.github.com>
---
 index.html | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index df8e6cb..c829a5b 100644
--- a/index.html
+++ b/index.html
@@ -35,6 +35,14 @@
         .light-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
         .light-scroll{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
 
+        /* Switch to cards before the desktop columns become cramped or disappear. */
+        .inventory-desktop{display:none}
+        .inventory-mobile{display:block}
+        @media (min-width:1440px){
+            .inventory-desktop{display:block}
+            .inventory-mobile{display:none}
+        }
+
         .console-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease-out,opacity .25s ease-out;opacity:0;overflow:hidden}
         .console-wrap.open{grid-template-rows:1fr;opacity:1}
         .console-inner{overflow:hidden;min-height:0}
@@ -1600,7 +1608,7 @@ <h3 className="font-bold text-emerald-500" style={{ fontSize: `${Math.round(16 *
                                 </div>
 
                                 {/* Desktop Table */}
-                                <div className={`hidden md:block overflow-x-auto ${scCls}`}>
+                                <div className={`inventory-desktop overflow-x-auto ${scCls}`}>
                                     <table className="w-full text-left border-collapse" style={{ fontSize: tblFs }}>
                                         <thead>
                                         <tr className={dark ? 'text-slate-400' : 'text-slate-500'}>
@@ -1690,7 +1698,7 @@ <h3 className="font-bold text-emerald-500" style={{ fontSize: `${Math.round(16 *
                                 </div>
 
                                 {/* Mobile Cards — compact icons instead of large action buttons */}
-                                <div className="block md:hidden p-3 space-y-2">
+                                <div className="inventory-mobile p-3 space-y-2">
                                     <div className="pb-1 flex gap-2">
                                         <input type="text" placeholder="Filter Name..." title={`Filter by Name. ${FILTER_HELP}`} value={filters.name} onChange={e => handleFilterChange('name', e.target.value)} className={`flex-1 min-w-0 px-3 py-2 text-xs rounded border ${inpFilter}`} />
                                         <input type="text" placeholder="Filter Status..." title={`Filter by Status. ${FILTER_HELP}`} value={filters.status} onChange={e => handleFilterChange('status', e.target.value)} className={`w-28 px-3 py-2 text-xs rounded border ${inpFilter}`} />