1 files changed, 15 insertions, 85 deletions

diff --git a/frontend/src/components/FeedList.tsx b/frontend/src/components/FeedList.tsx
index db12b13..d1d7bf3 100644
--- a/frontend/src/components/FeedList.tsx
+++ b/frontend/src/components/FeedList.tsx
@@ -1,12 +1,6 @@
-import { faCheck, faCircle, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useMutation, useQuery } from "urql";
-import {
-	GetFeedsDocument,
-	MarkFeedReadDocument,
-	MarkFeedUnreadDocument,
-	UnsubscribeFeedDocument,
-} from "../graphql/generated/graphql";
+import { useQuery } from "urql";
+import { GetFeedsDocument } from "../graphql/generated/graphql";
+import { FeedItem } from "./FeedItem";
 
 interface Props {
 	onFeedUnsubscribed?: () => void;
@@ -17,89 +11,25 @@ export function FeedList({ onFeedUnsubscribed }: Props) {
 		query: GetFeedsDocument,
 	});
 
-	const [, markFeedRead] = useMutation(MarkFeedReadDocument);
-	const [, markFeedUnread] = useMutation(MarkFeedUnreadDocument);
-	const [, unsubscribeFeed] = useMutation(UnsubscribeFeedDocument);
-
-	const handleMarkAllRead = async (feedId: string) => {
-		await markFeedRead({ id: feedId });
-	};
-
-	const handleMarkAllUnread = async (feedId: string) => {
-		await markFeedUnread({ id: feedId });
-	};
-
-	const handleUnsubscribeFeed = async (feedId: string) => {
-		const confirmed = window.confirm(
-			"Are you sure you want to unsubscribe from this feed?",
-		);
-		if (confirmed) {
-			await unsubscribeFeed({ id: feedId });
-			onFeedUnsubscribed?.();
-		}
-	};
-
-	if (fetching) return <div className="p-4">Loading feeds...</div>;
-	if (error)
+	if (fetching) {
+		return <div className="p-4">Loading feeds...</div>;
+	}
+	if (error) {
 		return <div className="p-4 text-red-600">Error: {error.message}</div>;
+	}
 	if (!data?.feeds || data.feeds.length === 0) {
 		return <div className="p-4 text-gray-500">No feeds added yet.</div>;
 	}
 
 	return (
 		<div className="space-y-4 p-4">
-			{data.feeds.map((feed) => {
-				return (
-					<div
-						key={feed.id}
-						className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm"
-					>
-						<div className="flex items-start justify-between">
-							<div className="flex-1">
-								<h3 className="text-lg font-semibold text-gray-900">
-									{feed.title}
-								</h3>
-								<p className="mt-1 text-sm text-gray-500">
-									<a href={feed.url} target="_blank" rel="noreferrer">
-										{feed.url}
-									</a>
-								</p>
-								<div className="mt-2 flex items-center gap-4 text-sm">
-									<span className="text-gray-400">
-										Last fetched: {new Date(feed.fetchedAt).toLocaleString()}
-									</span>
-								</div>
-							</div>
-							<div className="flex items-center gap-2">
-								<button
-									type="button"
-									onClick={() => handleMarkAllRead(feed.id)}
-									className="rounded p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900"
-									title="Mark all as read"
-								>
-									<FontAwesomeIcon icon={faCheck} />
-								</button>
-								<button
-									type="button"
-									onClick={() => handleMarkAllUnread(feed.id)}
-									className="rounded p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900"
-									title="Mark all as unread"
-								>
-									<FontAwesomeIcon icon={faCircle} />
-								</button>
-								<button
-									type="button"
-									onClick={() => handleUnsubscribeFeed(feed.id)}
-									className="rounded p-2 text-red-600 hover:bg-red-50 hover:text-red-700"
-									title="Unsubscribe from feed"
-								>
-									<FontAwesomeIcon icon={faTrash} />
-								</button>
-							</div>
-						</div>
-					</div>
-				);
-			})}
+			{data.feeds.map((feed) => (
+				<FeedItem
+					key={feed.id}
+					feed={feed}
+					onFeedUnsubscribed={onFeedUnsubscribed}
+				/>
+			))}
 		</div>
 	);
 }