release: 4.6.36 events viewer rows class-based + data-type pills

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "twitch-vod-manager",
-  "version": "4.6.35",
+  "version": "4.6.36",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "twitch-vod-manager",
-      "version": "4.6.35",
+      "version": "4.6.36",
       "license": "MIT",
       "dependencies": {
         "axios": "^1.6.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "twitch-vod-manager",
-  "version": "4.6.35",
+  "version": "4.6.36",
   "description": "Twitch VOD Manager - Download Twitch VODs easily",
   "main": "dist/main.js",
   "author": "xRangerDE",

src/renderer.ts

@@ -320,33 +320,24 @@ function renderEventsList(events: EventLogEntry[]): void {
 
     for (const ev of events) {
         const row = document.createElement('div');
-        row.style.padding = '8px 10px';
+        row.className = 'event-viewer-row';
-        row.style.borderBottom = '1px solid var(--border-soft)';
-        row.style.fontSize = '12px';
 
         const time = document.createElement('span');
-        time.style.color = 'var(--text-secondary)';
+        time.className = 'event-viewer-time';
-        time.style.marginRight = '8px';
         time.textContent = formatEventTime(ev.t);
         row.appendChild(time);
 
         const tag = document.createElement('span');
-        tag.style.fontWeight = '600';
+        tag.className = 'event-viewer-tag';
-        tag.style.marginRight = '8px';
+        // Per-type tag colour comes from CSS via a data-type attribute
-        const tagColors: Record<string, string> = {
+        // selector — keeps the type->colour mapping with the rest of the
-            recording_start: '#00c853',
+        // visual styling instead of inline in the renderer.
-            recording_end: '#9146ff',
+        if (ev.type) tag.dataset.type = ev.type;
-            recording_resume: '#2196f3',
-            title_change: '#ffab00',
-            game_change: '#ff4444'
-        };
-        tag.style.color = tagColors[ev.type || ''] || 'var(--accent)';
         tag.textContent = ev.type || 'event';
         row.appendChild(tag);
 
         const detail = document.createElement('div');
-        detail.style.marginTop = '4px';
+        detail.className = 'event-viewer-detail';
-        detail.style.color = 'var(--text)';
 
         if (ev.type === 'recording_start') {
             detail.textContent = `${UI_TEXT.queue.eventStartedAs}: "${ev.title || '-'}" — ${ev.game || '-'}`;

src/styles.css

@@ -2904,6 +2904,78 @@ input[type="number"]::-webkit-outer-spin-button {
     padding-left: 10px;
 }
 
+/* ============================================
+   EVENTS VIEWER — timeline rows
+   ============================================
+   Per-event-type colours live here via [data-type] attribute
+   selectors so the renderer just stamps the type and the CSS
+   handles the palette. Add a new event type by extending this
+   block, not the renderer. */
+.event-viewer-row {
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--border-soft);
+    font-size: 12px;
+}
+
+.event-viewer-row:last-child {
+    border-bottom: none;
+}
+
+.event-viewer-time {
+    color: var(--text-secondary);
+    margin-right: 8px;
+    font-family: 'Consolas', 'Segoe UI Mono', monospace;
+}
+
+.event-viewer-tag {
+    font-weight: 600;
+    margin-right: 8px;
+    color: var(--accent);
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    font-size: 11px;
+    padding: 2px 7px;
+    border-radius: 3px;
+    background: rgba(145, 70, 255, 0.10);
+    border: 1px solid rgba(145, 70, 255, 0.25);
+}
+
+.event-viewer-tag[data-type="recording_start"] {
+    color: #00c853;
+    background: rgba(0, 200, 83, 0.10);
+    border-color: rgba(0, 200, 83, 0.30);
+}
+
+.event-viewer-tag[data-type="recording_end"] {
+    color: #9146ff;
+    background: rgba(145, 70, 255, 0.10);
+    border-color: rgba(145, 70, 255, 0.30);
+}
+
+.event-viewer-tag[data-type="recording_resume"] {
+    color: #2196f3;
+    background: rgba(33, 150, 243, 0.10);
+    border-color: rgba(33, 150, 243, 0.30);
+}
+
+.event-viewer-tag[data-type="title_change"] {
+    color: #ffab00;
+    background: rgba(255, 171, 0, 0.10);
+    border-color: rgba(255, 171, 0, 0.30);
+}
+
+.event-viewer-tag[data-type="game_change"] {
+    color: #ff4444;
+    background: rgba(255, 68, 68, 0.10);
+    border-color: rgba(255, 68, 68, 0.30);
+}
+
+.event-viewer-detail {
+    margin-top: 4px;
+    color: var(--text);
+    line-height: 1.5;
+}
+
 /* ============================================
    STREAMER PROFILE HEADER
    ============================================