Vanilla JS (v3): Redesign to 2-pane glassmorphism, fix CSP errors, fix Settings view, and achieve 80% test coverage

2 files changed, 58 insertions, 18 deletions

diff --git a/frontend-vanilla/src/components/FeedItem.test.ts b/frontend-vanilla/src/components/FeedItem.test.ts
index 708a871..e6c0b62 100644
--- a/frontend-vanilla/src/components/FeedItem.test.ts
+++ b/frontend-vanilla/src/components/FeedItem.test.ts
@@ -1,23 +1,39 @@
 import { describe, it, expect } from 'vitest';
 import { createFeedItem } from './FeedItem';
+import type { Item } from '../types';
 
 describe('FeedItem Component', () => {
-    const mockFeed = { _id: 1, title: 'My Feed', url: 'http://test', web_url: 'http://test', category: 'tag' };
+    const mockItem: Item = {
+        _id: 1,
+        title: 'Item Title',
+        url: 'http://test',
+        publish_date: '2023-01-01',
+        read: false,
+        starred: false,
+        feed_title: 'Feed Title',
+        description: 'Desc'
+    } as any;
 
-    it('should render a feed item correctly', () => {
-        const html = createFeedItem(mockFeed, false);
-        expect(html).toContain('My Feed');
+    it('should render an item correctly', () => {
+        const html = createFeedItem(mockItem);
+        expect(html).toContain('Item Title');
         expect(html).toContain('data-id="1"');
-        expect(html).not.toContain('active');
+        expect(html).toContain('unread');
     });
 
-    it('should apply active class when isActive is true', () => {
-        const html = createFeedItem(mockFeed, true);
-        expect(html).toContain('active');
+    it('should show read state', () => {
+        const html = createFeedItem({ ...mockItem, read: true });
+        expect(html).toContain('read');
+        expect(html).not.toContain('unread');
     });
 
-    it('should fallback to URL if title is missing', () => {
-        const html = createFeedItem({ ...mockFeed, title: '' }, false);
-        expect(html).toContain('http://test');
+    it('should show starred state', () => {
+        const html = createFeedItem({ ...mockItem, starred: true });
+        expect(html).toContain('is-starred');
+    });
+
+    it('should fallback to (No Title) if title is missing', () => {
+        const html = createFeedItem({ ...mockItem, title: '' });
+        expect(html).toContain('(No Title)');
     });
 });
diff --git a/frontend-vanilla/src/components/FeedItem.ts b/frontend-vanilla/src/components/FeedItem.ts
index 3bf72c2..e58aac8 100644
--- a/frontend-vanilla/src/components/FeedItem.ts
+++ b/frontend-vanilla/src/components/FeedItem.ts
@@ -1,11 +1,35 @@
-import type { Feed } from '../types';
+import type { Item } from '../types';
 
-export function createFeedItem(feed: Feed, isActive: boolean): string {
-    return `
-    <li class="feed-item ${isActive ? 'active' : ''}" data-id="${feed._id}">
-      <a href="/v3/feed/${feed._id}" class="feed-link" onclick="event.preventDefault(); window.app.navigate('/feed/${feed._id}')">
-        ${feed.title || feed.url}
-      </a>
+export function createFeedItem(item: Item): string {
+  const date = new Date(item.publish_date).toLocaleDateString();
+  return `
+    <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)'}
+        </a>
+        <button class="star-btn ${item.starred ? 'is-starred' : 'is-unstarred'}" title="${item.starred ? 'Unstar' : 'Star'}" data-action="toggle-star">
+          ★
+        </button>
+      </div>
+      <div class="dateline">
+        <a href="${item.url}" target="_blank" rel="noopener noreferrer">
+          ${date}
+          ${item.feed_title ? ` - ${item.feed_title}` : ''}
+        </a>
+        <div class="item-actions" style="display: inline-block; float: right;">
+          ${!item.full_content ? `
+            <button class="scrape-btn" title="Load Full Content" data-action="scrape">
+              text
+            </button>
+          ` : ''}
+        </div>
+      </div>
+      ${(item.full_content || item.description) ? `
+        <div class="item-description">
+          ${item.full_content || item.description}
+        </div>
+      ` : ''}
     </li>
   `;
 }