\n );\n }\n\n // Calculate unread counts\n const unreadCounts: Record = {};\n feeds.forEach(feed => {\n const cache = feedCache[feed.id];\n if (cache) {\n const unread = cache.items.filter(id => !readArticles.has(id)).length;\n unreadCounts[feed.id] = unread;\n } else {\n unreadCounts[feed.id] = null; // Unknown\n }\n });\n\n return (\n

\n handlePageScroll('up')}\n className=\"nav-btn\"\n >\n Page Up\n \n handlePageScroll('down')}\n className=\"nav-btn\"\n >\n Page Down\n \n

\n\n

\n {view === 'feeds' && (\n setView('add-feed')}\n />\n )}\n \n {view === 'add-feed' && (\n setView('feeds')}\n />\n )}\n \n {view === 'list' && feedData && (\n {\n setSelectedItem(item);\n setView('article');\n window.scrollTo(0, 0);\n }}\n onBack={() => {\n setFeedData(null);\n setCurrentFeedId(null);\n setView('feeds');\n window.scrollTo(0, 0);\n }}\n onReload={() => currentFeedId && fetchFeed(currentFeedId)}\n />\n )}\n\n {view === 'article' && selectedItem && (\n markAsRead(selectedItem)}\n onMarkUnread={() => markAsUnread(selectedItem)}\n onBack={() => {\n setSelectedItem(null);\n setView('list');\n window.scrollTo(0, 0);\n }}\n />\n )}\n

\n\n {thisProjectURL && view === 'feeds' && (\n \n )}\n

\n );\n}\n\nfunction FeedSelection({ feeds, unreadCounts, onSelect, onAdd }: { feeds: FeedInfo[], unreadCounts: Record, onSelect: (id: string) => void, onAdd: () => void }) {\n return (\n

My Feeds

Select a source to start reading.

\n \n

\n {feeds.map(feed => {\n const count = unreadCounts[feed.id];\n return (\n

onSelect(feed.id)}\n style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}\n >\n

{feed.name}

{feed.url}

\n {count !== null ? count : '-'}\n

\n );\n })}\n

\n );\n}\n\nfunction AddFeedForm({ onSubmit, onCancel }: { onSubmit: (url: string) => Promise, onCancel: () => void }) {\n const [url, setUrl] = useState(\"\");\n const [error, setError] = useState(null);\n const [submitting, setSubmitting] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setError(null);\n setSubmitting(true);\n try {\n await onSubmit(url);\n } catch (err: any) {\n setError(err.message || \"Failed to add feed\");\n setSubmitting(false);\n }\n };\n\n return (\n

Add New Feed

Enter the URL of an RSS or Atom feed.

\n \n

\n Feed URL\n setUrl(e.target.value)}\n placeholder=\"https://example.com/feed.xml\"\n required\n style={{\n width: '100%',\n padding: '1rem',\n fontSize: '1.1rem',\n border: '2px solid black',\n borderRadius: '0',\n boxSizing: 'border-box'\n }}\n />\n

\n \n {error && (\n

\n Error: {error}\n

\n )}\n\n

\n \n {submitting ? \"Verifying...\" : \"Add Feed\"}\n \n \n Cancel\n \n

\n );\n}\n\nfunction FeedList({ feed, readArticles, onSelect, onBack, onReload }: { feed: Feed, readArticles: Set, onSelect: (item: FeedItem) => void, onBack: () => void, onReload: () => void }) {\n const getItemId = (item: FeedItem) => item.link || item.title || \"\";\n \n const getPreviewText = (item: FeedItem) => {\n const rawText = item.summary || item.contentSnippet || item.content || \"\";\n return rawText.replace(/<[^>]*>?/gm, '');\n };\n\n return (\n

\n \n\n

{feed.title}

{feed.description}

\n \n Reload Feed\n \n

\n\n

\n {feed.items.map((item, index) => {\n const preview = getPreviewText(item);\n const isRead = readArticles.has(getItemId(item));\n return (\n

onSelect(item)}\n style={{ opacity: isRead ? 0.6 : 1 }}\n >\n

{item.title}

\n {new Date(item.isoDate || item.pubDate || '').toLocaleDateString()}\n

\n {preview && (\n

\n {preview}\n

\n )}\n

\n );\n })}\n

\n );\n}\n\nfunction ArticleView({ item, isRead, onMarkRead, onMarkUnread, onBack }: { item: FeedItem, isRead: boolean, onMarkRead: () => void, onMarkUnread: () => void, onBack: () => void }) {\n const bottomRef = useRef(null);\n\n // Mark as read when scrolling to bottom\n useEffect(() => {\n if (isRead) return;\n \n const observer = new IntersectionObserver(\n (entries) => {\n if (entries[0].isIntersecting) {\n onMarkRead();\n }\n },\n { threshold: 0.1 }\n );\n\n if (bottomRef.current) {\n observer.observe(bottomRef.current);\n }\n\n return () => observer.disconnect();\n }, [isRead, onMarkRead]);\n\n return (\n

\n \n\n

{item.title}

\n \n

\n {new Date(item.isoDate || item.pubDate || '').toLocaleString()}\n {item.link && (\n Open Original Link\n )}\n

\n\n

\n \n

\n\n \n \n {/* Sentinel for scroll tracking */}\n

\n\n

\n \n

\n \n ← Back to List\n \n

\n );\n}","deleted","label",[181,182,163],"frontend","components","permalink","https://www.val.town/x/keheliya/reactHonoExample/code/frontend/components/App.tsx","extension","actionData","errors"]