diff options
Diffstat (limited to 'frontend-vanilla/src/components/FeedItem.ts')
| -rw-r--r-- | frontend-vanilla/src/components/FeedItem.ts | 38 |
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> `; } |