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

1 files changed, 31 insertions, 7 deletions

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>
   `;
 }