From 1bed4bbd9a0606f9d3edfbf0ccfd1499793f8712 Mon Sep 17 00:00:00 2001
From: Adam Mathes <adam@adammathes.com>
Date: Mon, 16 Feb 2026 08:59:56 -0800
Subject: Fix v3 theme contrast and sync with v2 colors, add v3 logo, and fix
 v2 test stability

- Sync v3 dark/light theme colors with v2 defaults
- Fix v3 settings input/select contrast in dark mode
- Add logo emoji to v3 sidebar
- Fix duplicate key warnings and side-effect issues in FeedItems.tsx (v2)
- Rebuild production assets
---
 frontend-vanilla/src/main.test.ts |  9 +++++++
 frontend-vanilla/src/main.ts      | 19 +++++++++-----
 frontend-vanilla/src/style.css    | 52 ++++++++++++++++++++++++++++++++++-----
 3 files changed, 68 insertions(+), 12 deletions(-)

(limited to 'frontend-vanilla/src')

diff --git a/frontend-vanilla/src/main.test.ts b/frontend-vanilla/src/main.test.ts
index c9d0e0c..3798f1b 100644
--- a/frontend-vanilla/src/main.test.ts
+++ b/frontend-vanilla/src/main.test.ts
@@ -65,10 +65,19 @@ describe('main application logic', () => {
     it('renderLayout should create sidebar and main content', () => {
         renderLayout();
         expect(document.getElementById('sidebar')).not.toBeNull();
+        expect(document.querySelector('.logo')).not.toBeNull();
         expect(document.getElementById('content-area')).not.toBeNull();
         expect(document.getElementById('sidebar-toggle-btn')).not.toBeNull();
     });
 
+    it('should navigate to home when clicking logo', () => {
+        renderLayout();
+        const logo = document.querySelector('.logo') as HTMLElement;
+        const navigateSpy = vi.spyOn(router, 'navigate');
+        logo.click();
+        expect(navigateSpy).toHaveBeenCalledWith('/', expect.any(Object));
+    });
+
     it('renderFeeds should populate feed list', () => {
         renderLayout();
         store.setFeeds([{ _id: 1, title: 'Test Feed', url: 'test', web_url: 'test', category: 'tag' }]);
diff --git a/frontend-vanilla/src/main.ts b/frontend-vanilla/src/main.ts
index c0adb92..f4493b8 100644
--- a/frontend-vanilla/src/main.ts
+++ b/frontend-vanilla/src/main.ts
@@ -30,6 +30,7 @@ export function renderLayout() {
       <button class="sidebar-toggle" id="sidebar-toggle-btn" title="Toggle Sidebar">🐱</button>
       <div class="sidebar-backdrop" id="sidebar-backdrop"></div>
       <aside class="sidebar" id="sidebar">
+        <h1 class="logo" data-nav="home">🐱</h1>
         <div class="sidebar-search">
           <input type="search" id="search-input" placeholder="Search..." value="${store.searchQuery}">
         </div>
@@ -105,7 +106,13 @@ export function attachLayoutListeners() {
   sidebar?.addEventListener('click', (e) => {
     const target = e.target as HTMLElement;
     const link = target.closest('a');
-    if (!link) return;
+    if (!link) {
+      if (target.classList.contains('logo')) {
+        e.preventDefault();
+        router.navigate('/', {});
+      }
+      return;
+    }
 
     const navType = link.getAttribute('data-nav');
     const currentQuery = Object.fromEntries(router.getCurrentRoute().query.entries());
@@ -321,15 +328,15 @@ export function renderSettings() {
         <h3>Manage Feeds</h3>
         <ul class="manage-feed-list" style="list-style: none; padding: 0;">
           ${store.feeds.map(feed => `
-            <li class="manage-feed-item" style="margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #eee; display: flex; flex-direction: column; gap: 0.5rem;">
+            <li class="manage-feed-item" style="margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 0.5rem;">
               <div class="feed-info">
                 <div class="feed-title" style="font-weight: bold;">${feed.title || feed.url}</div>
-                <div class="feed-url" style="font-size: 0.8em; color: #888; overflow: hidden; text-overflow: ellipsis;">${feed.url}</div>
+                <div class="feed-url" style="font-size: 0.8em; color: var(--text-color); opacity: 0.6; overflow: hidden; text-overflow: ellipsis;">${feed.url}</div>
               </div>
               <div class="feed-actions" style="display: flex; gap: 0.5rem;">
-                <input type="text" class="feed-tag-input" data-id="${feed._id}" value="${feed.category || ''}" placeholder="Tag" style="flex: 1; padding: 0.4rem;">
-                <button class="update-feed-tag-btn" data-id="${feed._id}" style="padding: 0.4rem 0.8rem;">Save</button>
-                <button class="delete-feed-btn" data-id="${feed._id}" style="padding: 0.4rem 0.8rem; color: red;">Delete</button>
+                <input type="text" class="feed-tag-input" data-id="${feed._id}" value="${feed.category || ''}" placeholder="Tag" style="flex: 1;">
+                <button class="update-feed-tag-btn" data-id="${feed._id}">Save</button>
+                <button class="delete-feed-btn" data-id="${feed._id}" style="color: var(--error-color, #ff4444);">Delete</button>
               </div>
             </li>
           `).join('')}
diff --git a/frontend-vanilla/src/style.css b/frontend-vanilla/src/style.css
index d5c1b2d..8d8e554 100644
--- a/frontend-vanilla/src/style.css
+++ b/frontend-vanilla/src/style.css
@@ -11,9 +11,9 @@
   /* Light Mode Defaults */
   --bg-color: #ffffff;
   --text-color: rgba(0, 0, 0, 0.87);
-  --sidebar-bg: #f5f5f5;
+  --sidebar-bg: #ccc;
   --link-color: #0000ee;
-  --border-color: #e5e5e5;
+  --border-color: #999;
   --accent-color: #007bff;
 
   color-scheme: light dark;
@@ -312,6 +312,38 @@ html {
   }
 }
 
+input[type="text"],
+input[type="url"],
+input[type="search"],
+select {
+  padding: 0.4rem 0.8rem;
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  background: var(--bg-color);
+  color: var(--text-color);
+  font-family: inherit;
+  font-size: 0.9rem;
+}
+
+input:focus,
+select:focus {
+  outline: none;
+  border-color: var(--accent-color);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
+}
+
+.logo {
+  font-size: 2.5rem;
+  margin: 0 0 1.5rem 0;
+  cursor: pointer;
+  text-align: center;
+  user-select: none;
+}
+
+.sidebar .logo {
+  margin-bottom: 1.5rem;
+}
+
 /* Feed Items Styles (from v2) */
 .item-list {
   list-style: none;
@@ -421,11 +453,12 @@ html {
 
 /* Themes */
 .theme-dark {
-  --bg-color: #000000;
+  --bg-color: #24292e;
   --text-color: #ffffff;
-  --sidebar-bg: #111111;
+  --sidebar-bg: #1b1f23;
   --link-color: rgb(90, 200, 250);
-  --border-color: #333;
+  --border-color: #444d56;
+  --accent-color: #2188ff;
 }
 
 .font-serif {
@@ -488,10 +521,17 @@ button.active {
 }
 
 .theme-dark button.active {
-  background-color: #224;
+  background-color: #282e34;
   border-color: var(--accent-color);
 }
 
+.theme-dark input,
+.theme-dark select {
+  background-color: #1b1f23;
+  color: #ffffff;
+  border-color: #444d56;
+}
+
 .add-feed-form {
   display: flex;
   gap: 0.5rem;
-- 
cgit v1.2.3