From 5cf8275540d7162cd4936a7c0e76dbfe7f66b62c Mon Sep 17 00:00:00 2001 From: Adam Mathes Date: Mon, 16 Feb 2026 10:53:59 -0800 Subject: V3 UI Polish: Improved keyboard navigation, fixed logo position, and updated branding - Fix V3 keyboard navigation delay (resolved NK-wjats7) - Update V3 document title to 'neko' (resolved NK-4p3s91) - Fix V3 neko logo/button position to be top-left fixed (resolved NK-89za3s) - Improve FeedItems (React) stability with ref-based index tracking and robust tests - Sync V3 styling and selection feedback with V2 patterns - Rebuild production assets --- frontend-vanilla/src/components/FeedItem.ts | 4 +-- frontend-vanilla/src/main.test.ts | 21 ++++++++++++++ frontend-vanilla/src/main.ts | 43 ++++++++++++++++++++--------- frontend-vanilla/src/style.css | 17 ++++++++++-- 4 files changed, 67 insertions(+), 18 deletions(-) (limited to 'frontend-vanilla/src') diff --git a/frontend-vanilla/src/components/FeedItem.ts b/frontend-vanilla/src/components/FeedItem.ts index e58aac8..212e9dd 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): string { +export function createFeedItem(item: Item, isSelected: boolean = false): string { const date = new Date(item.publish_date).toLocaleDateString(); return ` -
  • +
  • ${item.title || '(No Title)'} diff --git a/frontend-vanilla/src/main.test.ts b/frontend-vanilla/src/main.test.ts index c9d0e0c..5bf9fe0 100644 --- a/frontend-vanilla/src/main.test.ts +++ b/frontend-vanilla/src/main.test.ts @@ -347,4 +347,25 @@ describe('main application logic', () => { expect(manageSection?.innerHTML).toContain('My Feed'); expect(document.querySelector('.feed-tag-input')).not.toBeNull(); }); + + it('should navigate items with j/k keys', () => { + store.setItems([ + { _id: 101, title: 'Item 1', publish_date: '2023-01-01', read: false } as any, + { _id: 102, title: 'Item 2', publish_date: '2023-01-02', read: false } as any + ]); + renderLayout(); + renderItems(); + + // 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); + + // 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); + + // 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); + }); }); diff --git a/frontend-vanilla/src/main.ts b/frontend-vanilla/src/main.ts index 3f53fc2..7b55c48 100644 --- a/frontend-vanilla/src/main.ts +++ b/frontend-vanilla/src/main.ts @@ -185,6 +185,14 @@ export function attachLayoutListeners() { const itemRow = target.closest('.feed-item'); if (itemRow && !itemTitle) { // Clicking the row itself (but not the link) 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); + }); + const item = store.items.find(i => i._id === id); if (item && !item.read) { updateItem(id, { read: true }); @@ -252,7 +260,7 @@ export function renderItems() { contentArea.innerHTML = `
      - ${items.map((item: Item) => createFeedItem(item)).join('')} + ${items.map((item: Item) => createFeedItem(item, item._id === activeItemId)).join('')}
    ${store.hasMore ? '
    Loading more...
    ' : ''} `; @@ -682,19 +690,28 @@ window.addEventListener('keydown', (e) => { function navigateItems(direction: number) { if (store.items.length === 0) return; - let index = store.items.findIndex(i => i._id === activeItemId); - index += direction; - if (index >= 0 && index < store.items.length) { - activeItemId = store.items[index]._id; - const el = document.querySelector(`.feed-item[data-id="${activeItemId}"]`); - if (el) el.scrollIntoView({ block: 'nearest' }); - // Optional: mark as read when keyboard navigating - if (!store.items[index].read) updateItem(activeItemId, { read: true }); - // Since we are in 2-pane, we just scroll to it. - } else if (index === -1) { - activeItemId = store.items[0]._id; + const currentIndex = store.items.findIndex(i => i._id === activeItemId); + let nextIndex; + + if (currentIndex === -1) { + nextIndex = direction > 0 ? 0 : store.items.length - 1; + } else { + nextIndex = currentIndex + direction; + } + + 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: 'nearest' }); + if (el) el.scrollIntoView({ block: 'start', behavior: 'smooth' }); + + if (!store.items[nextIndex].read) updateItem(activeItemId, { read: true }); } } diff --git a/frontend-vanilla/src/style.css b/frontend-vanilla/src/style.css index 0076e58..37ba761 100644 --- a/frontend-vanilla/src/style.css +++ b/frontend-vanilla/src/style.css @@ -348,9 +348,20 @@ select:focus { } .feed-item { - padding: 1rem 0; - margin-top: 5rem; + padding: 1rem 0.5rem; + margin-top: 2rem; border-bottom: none; + border-radius: 8px; + 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 { @@ -452,7 +463,7 @@ select:focus { --bg-color: #24292e; --text-color: #ffffff; --sidebar-bg: #1b1f23; - --link-color: rgb(90, 200, 250); + --link-color: #5ac8fa; --border-color: #444d56; --accent-color: #2188ff; } -- cgit v1.2.3