aboutsummaryrefslogtreecommitdiffhomepage
path: root/frontend/src/components/FeedList.tsx
diff options
context:
space:
mode:
authornsfisis <nsfisis@gmail.com>2025-07-13 02:07:34 +0900
committernsfisis <nsfisis@gmail.com>2025-07-13 02:07:34 +0900
commita43e3db41633e149736a2153dbc97979a723771e (patch)
treed14a5138700f2401ad62ce07ffd4c11ee8595cb2 /frontend/src/components/FeedList.tsx
parent463f0414fcedff732cfdc38d369c394b8a05be7a (diff)
downloadfeedaka-a43e3db41633e149736a2153dbc97979a723771e.tar.gz
feedaka-a43e3db41633e149736a2153dbc97979a723771e.tar.zst
feedaka-a43e3db41633e149736a2153dbc97979a723771e.zip
feat(frontend): remove bulk edit form
Diffstat (limited to 'frontend/src/components/FeedList.tsx')
-rw-r--r--frontend/src/components/FeedList.tsx81
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"