Vanilla JS (v3): Implement 3-pane layout, item fetching, reading, and testing

2 files changed, 34 insertions, 0 deletions

diff --git a/frontend-vanilla/src/components/FeedItem.test.ts b/frontend-vanilla/src/components/FeedItem.test.ts
new file mode 100644
index 0000000..708a871
--- /dev/null
+++ b/frontend-vanilla/src/components/FeedItem.test.ts
@@ -0,0 +1,23 @@
+import { describe, it, expect } from 'vitest';
+import { createFeedItem } from './FeedItem';
+
+describe('FeedItem Component', () => {
+    const mockFeed = { _id: 1, title: 'My Feed', url: 'http://test', web_url: 'http://test', category: 'tag' };
+
+    it('should render a feed item correctly', () => {
+        const html = createFeedItem(mockFeed, false);
+        expect(html).toContain('My Feed');
+        expect(html).toContain('data-id="1"');
+        expect(html).not.toContain('active');
+    });
+
+    it('should apply active class when isActive is true', () => {
+        const html = createFeedItem(mockFeed, true);
+        expect(html).toContain('active');
+    });
+
+    it('should fallback to URL if title is missing', () => {
+        const html = createFeedItem({ ...mockFeed, title: '' }, false);
+        expect(html).toContain('http://test');
+    });
+});
diff --git a/frontend-vanilla/src/components/FeedItem.ts b/frontend-vanilla/src/components/FeedItem.ts
new file mode 100644
index 0000000..3bf72c2
--- /dev/null
+++ b/frontend-vanilla/src/components/FeedItem.ts
@@ -0,0 +1,11 @@
+import type { Feed } 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>
+    </li>
+  `;
+}