diff options
Diffstat (limited to 'frontend/src/components/FeedList.tsx')
| -rw-r--r-- | frontend/src/components/FeedList.tsx | 81 |
1 files changed, 18 insertions, 63 deletions
diff --git a/frontend/src/components/FeedList.tsx b/frontend/src/components/FeedList.tsx index e5b6751..db12b13 100644 --- a/frontend/src/components/FeedList.tsx +++ b/frontend/src/components/FeedList.tsx @@ -1,8 +1,4 @@ -import { - faCheckDouble, - faCircle, - faTrash, -} from "@fortawesome/free-solid-svg-icons"; +import { faCheck, faCircle, faTrash } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useMutation, useQuery } from "urql"; import { @@ -14,15 +10,9 @@ import { interface Props { onFeedUnsubscribed?: () => void; - selectedFeeds?: Set<string>; - onSelectFeed?: (feedId: string, selected: boolean) => void; } -export function FeedList({ - onFeedUnsubscribed, - selectedFeeds, - onSelectFeed, -}: Props) { +export function FeedList({ onFeedUnsubscribed }: Props) { const [{ data, fetching, error }] = useQuery({ query: GetFeedsDocument, }); @@ -59,62 +49,27 @@ export function FeedList({ return ( <div className="space-y-4 p-4"> {data.feeds.map((feed) => { - const unreadCount = feed.articles.filter((a) => !a.isRead).length; - const totalCount = feed.articles.length; - - const isSelected = selectedFeeds?.has(feed.id) ?? false; - return ( <div key={feed.id} - className={`rounded-lg border p-4 shadow-sm ${ - isSelected - ? "border-blue-300 bg-blue-50" - : "border-gray-200 bg-white" - }`} + className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm" > <div className="flex items-start justify-between"> - {selectedFeeds && onSelectFeed && ( - <div className="flex items-start gap-3"> - <input - type="checkbox" - checked={isSelected} - onChange={(e) => onSelectFeed(feed.id, e.target.checked)} - className="mt-1 rounded border-gray-300 text-blue-600 focus:ring-blue-500" - /> - <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">{feed.url}</p> - <div className="mt-2 flex items-center gap-4 text-sm"> - <span className="text-gray-600"> - {unreadCount} unread / {totalCount} total - </span> - <span className="text-gray-400"> - Last fetched:{" "} - {new Date(feed.fetchedAt).toLocaleString()} - </span> - </div> - </div> + <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> - )} - {(!selectedFeeds || !onSelectFeed) && ( - <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">{feed.url}</p> - <div className="mt-2 flex items-center gap-4 text-sm"> - <span className="text-gray-600"> - {unreadCount} unread / {totalCount} total - </span> - <span className="text-gray-400"> - Last fetched: {new Date(feed.fetchedAt).toLocaleString()} - </span> - </div> - </div> - )} + </div> <div className="flex items-center gap-2"> <button type="button" @@ -122,7 +77,7 @@ export function FeedList({ className="rounded p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900" title="Mark all as read" > - <FontAwesomeIcon icon={faCheckDouble} /> + <FontAwesomeIcon icon={faCheck} /> </button> <button type="button" |