frontend-vanilla/src/components/FeedItem.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import type { Item } from '../types';

export function createFeedItem(item: Item, isSelected: boolean = false): string {
  const date = new Date(item.publish_date).toLocaleDateString();
  return `
    <li class="feed-item ${item.read ? 'read' : 'unread'} ${isSelected ? 'selected' : ''}" 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>
  `;
}