\n {/* Feed tabs */}\n

\n {FEEDS.map((feed) => (\n setActiveFeed(feed.key)}\n style={{\n flex: 1,\n padding: \"0.6rem 0.5rem\",\n background: activeFeed === feed.key ? \"var(--bg-card)\" : \"transparent\",\n color: activeFeed === feed.key ? \"var(--hn-orange)\" : \"var(--text-muted)\",\n border: \"none\",\n borderBottom: activeFeed === feed.key ? \"2px solid var(--hn-orange)\" : \"2px solid transparent\",\n cursor: \"pointer\",\n fontSize: \"0.8rem\",\n fontWeight: activeFeed === feed.key ? 600 : 400,\n transition: \"all 0.15s\",\n }}\n >\n {feed.emoji} {feed.label}\n \n ))}\n

\n\n {/* Story list */}\n {isLoading ? (\n

\n Loading {activeFeed} stories...\n

\n ) : currentStories.length === 0 ? (\n

\n No stories found.\n

\n ) : (\n

\n {currentStories.map((story: any, i: number) => {\n const isWatched = watchedItemIds.has(story.id);\n const isWatching = watchingId === story.id;\n\n return (\n \n \n {i + 1}.\n \n\n

\n \n {story.title}\n \n {story.url && (\n \n ({getDomain(story.url)})\n \n )}\n

\n {story.score != null && <>{story.score} pts · }\n {story.by} · {timeAgo(story.time)}\n {story.descendants != null && (\n <>\n {\" · \"}\n \n {story.descendants} comments\n \n \n )}\n

\n\n {\n setWatchingId(story.id);\n await onWatchItem(story.id);\n setWatchingId(null);\n }}\n >\n {isWatched ? \"✓ Watching\" : isWatching ? \"...\" : \"👁 Watch\"}\n \n

\n );\n })}\n

\n )}\n \n );\n}\n","deleted","label",[180,181,162],"frontend","components","permalink","https://www.val.town/x/paulkinlan/hn-watcher/code/frontend/components/StoryFeed.tsx","extension","actionData","errors"]