From d7c1cc00abe7c8097625ee905a1285aa0794a598 Mon Sep 17 00:00:00 2001
From: Adam Mathes <adam@adammathes.com>
Date: Tue, 17 Feb 2026 19:47:48 -0800
Subject: Remove visual 'selected' state highlight from feed items

---
 frontend-vanilla/src/components/FeedItem.ts |  4 ++--
 frontend-vanilla/src/main.test.ts           |  8 +++++---
 frontend-vanilla/src/main.ts                | 14 ++------------
 frontend-vanilla/src/style.css              |  8 --------
 4 files changed, 9 insertions(+), 25 deletions(-)

(limited to 'frontend-vanilla')

diff --git a/frontend-vanilla/src/components/FeedItem.ts b/frontend-vanilla/src/components/FeedItem.ts
index 212e9dd..e58aac8 100644
--- a/frontend-vanilla/src/components/FeedItem.ts
+++ b/frontend-vanilla/src/components/FeedItem.ts
@@ -1,9 +1,9 @@
 import type { Item } from '../types';
 
-export function createFeedItem(item: Item, isSelected: boolean = false): string {
+export function createFeedItem(item: Item): string {
   const date = new Date(item.publish_date).toLocaleDateString();
   return `
-    <li class="feed-item ${item.read ? 'read' : 'unread'} ${isSelected ? 'selected' : ''}" data-id="${item._id}">
+    <li class="feed-item ${item.read ? 'read' : 'unread'}" data-id="${item._id}">
       <div class="item-header">
         <a href="${item.url}" target="_blank" rel="noopener noreferrer" class="item-title" data-action="open">
           ${item.title || '(No Title)'}
diff --git a/frontend-vanilla/src/main.test.ts b/frontend-vanilla/src/main.test.ts
index 7cad61a..2715b5c 100644
--- a/frontend-vanilla/src/main.test.ts
+++ b/frontend-vanilla/src/main.test.ts
@@ -410,16 +410,18 @@ describe('main application logic', () => {
         renderLayout();
         renderItems();
 
+        const scrollSpy = vi.spyOn(Element.prototype, 'scrollIntoView');
+
         // 1st press 'j' -> index 0
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'j' }));
-        expect(document.querySelector('.feed-item[data-id="101"]')?.classList.contains('selected')).toBe(true);
+        expect(scrollSpy).toHaveBeenCalled();
 
         // 2nd press 'j' -> index 1
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'j' }));
-        expect(document.querySelector('.feed-item[data-id="102"]')?.classList.contains('selected')).toBe(true);
+        expect(scrollSpy).toHaveBeenCalledTimes(2);
 
         // Press 'k' -> back to index 0
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k' }));
-        expect(document.querySelector('.feed-item[data-id="101"]')?.classList.contains('selected')).toBe(true);
+        expect(scrollSpy).toHaveBeenCalledTimes(3);
     });
 });
diff --git a/frontend-vanilla/src/main.ts b/frontend-vanilla/src/main.ts
index abe454a..d769990 100644
--- a/frontend-vanilla/src/main.ts
+++ b/frontend-vanilla/src/main.ts
@@ -231,11 +231,7 @@ export function attachLayoutListeners() {
       const id = parseInt(itemRow.getAttribute('data-id')!);
       activeItemId = id;
 
-      // Update visual selection
-      document.querySelectorAll('.feed-item').forEach(el => {
-        const itemId = parseInt(el.getAttribute('data-id') || '0');
-        el.classList.toggle('selected', itemId === activeItemId);
-      });
+      activeItemId = id;
 
       const item = store.items.find(i => i._id === id);
       if (item && !item.read) {
@@ -302,7 +298,7 @@ export function renderItems() {
 
   contentArea.innerHTML = `
     <ul class="item-list">
-      ${items.map((item: Item) => createFeedItem(item, item._id === activeItemId)).join('')}
+      ${items.map((item: Item) => createFeedItem(item)).join('')}
     </ul>
     ${store.hasMore ? '<div id="load-more-sentinel" class="loading-more">Loading more...</div>' : ''}
   `;
@@ -854,12 +850,6 @@ function navigateItems(direction: number) {
   if (nextIndex >= 0 && nextIndex < store.items.length) {
     activeItemId = store.items[nextIndex]._id;
 
-    // Update visual selection without full re-render for speed
-    document.querySelectorAll('.feed-item').forEach(el => {
-      const id = parseInt(el.getAttribute('data-id') || '0');
-      el.classList.toggle('selected', id === activeItemId);
-    });
-
     const el = document.querySelector(`.feed-item[data-id="${activeItemId}"]`);
     if (el) el.scrollIntoView({ block: 'start', behavior: 'instant' });
 
diff --git a/frontend-vanilla/src/style.css b/frontend-vanilla/src/style.css
index f58ae24..c765666 100644
--- a/frontend-vanilla/src/style.css
+++ b/frontend-vanilla/src/style.css
@@ -444,14 +444,6 @@ select:focus {
   transition: background-color 0.2s ease;
 }
 
-.feed-item.selected {
-  background-color: rgba(0, 123, 255, 0.05);
-  box-shadow: inset 4px 0 0 var(--accent-color);
-}
-
-.theme-dark .feed-item.selected {
-  background-color: rgba(33, 136, 255, 0.1);
-}
 
 .item-header {
   display: flex;
-- 
cgit v1.2.3