feat: enhance TagEntriesModal with feed selection options
- Added a segment control to allow users to toggle between viewing entries from the current feed or all feeds. - Integrated translation support for the new segment labels in English, Japanese, Simplified Chinese, and Traditional Chinese. - Updated the useEntryTagsQuery hook to enable fetching based on the selected feed scope. Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
parent
df82ac45c9
commit
8afbb47caa
|
|
@ -1,10 +1,12 @@
|
|||
import { Button } from "@follow/components/ui/button/index.js"
|
||||
import { ScrollArea } from "@follow/components/ui/scroll-area/ScrollArea.js"
|
||||
import { SegmentGroup, SegmentItem } from "@follow/components/ui/segment/index.js"
|
||||
import { FeedViewType } from "@follow/constants"
|
||||
import type { EntryTagSummary } from "@follow/database/schemas/types"
|
||||
import { useEntryTagsQuery } from "@follow/store/entry/hooks"
|
||||
import { cn } from "@follow/utils"
|
||||
import { useMemo } from "react"
|
||||
import { useMemo, useState } from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import { titleCase } from "title-case"
|
||||
|
||||
import { useModalStack } from "~/components/ui/modal/stacked/hooks"
|
||||
|
|
@ -31,8 +33,12 @@ const chipClassName: Record<NonNullable<EntryTagsProps["size"]>, string> = {
|
|||
type TagItem = { label: string; kind: TagKind }
|
||||
|
||||
const TagEntriesModal = ({ tag, feedId }: { tag: TagItem; feedId?: string | null }) => {
|
||||
const { t } = useTranslation()
|
||||
const [scope, setScope] = useState<"current" | "all">("current")
|
||||
const currentFeedId = scope === "current" ? feedId : undefined
|
||||
|
||||
const { data, isLoading, isFetching, refetch } = useEntryTagsQuery({
|
||||
feedId,
|
||||
feedId: currentFeedId,
|
||||
tag:
|
||||
tag.kind === "category"
|
||||
? { kind: "schemaOrgCategory", value: tag.label }
|
||||
|
|
@ -44,8 +50,16 @@ const TagEntriesModal = ({ tag, feedId }: { tag: TagItem; feedId?: string | null
|
|||
return (
|
||||
<div className="-mx-4 -mb-4 w-[min(720px,calc(100vw-2rem))] space-y-4">
|
||||
<div className="flex items-center justify-between gap-2 px-4">
|
||||
<div className="min-w-0 text-sm text-text-secondary">
|
||||
Entries tagged with {normalizeLabel(tag.label)}
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<div className="min-w-0 text-sm text-text-secondary">
|
||||
Entries tagged with {normalizeLabel(tag.label)}
|
||||
</div>
|
||||
{feedId && (
|
||||
<SegmentGroup value={scope} onValueChanged={(v) => setScope(v as "current" | "all")}>
|
||||
<SegmentItem value="current" label={t("entry_tags.current_feed")} />
|
||||
<SegmentItem value="all" label={t("entry_tags.all_feeds")} />
|
||||
</SegmentGroup>
|
||||
)}
|
||||
</div>
|
||||
<Button size="sm" variant="ghost" onClick={() => refetch()} disabled={isFetching}>
|
||||
<i
|
||||
|
|
|
|||
|
|
@ -202,6 +202,8 @@
|
|||
"entry_list_header.show_unread_only": "Show unread Only",
|
||||
"entry_list_header.timeline_summary": "Summarize timeline",
|
||||
"entry_list_header.unread": "unread",
|
||||
"entry_tags.all_feeds": "All Feeds",
|
||||
"entry_tags.current_feed": "Current Feed",
|
||||
"feed.actions.follow": "Follow",
|
||||
"feed.actions.followed": "Followed",
|
||||
"feed.followsAndFeeds": "{{subscriptionCount}} {{subscriptionNoun}} and {{feedsCount}} {{feedsNoun}} on {{appName}}",
|
||||
|
|
|
|||
|
|
@ -201,6 +201,8 @@
|
|||
"entry_list_header.show_unread_only": "未読のみ表示",
|
||||
"entry_list_header.timeline_summary": "タイムラインを要約",
|
||||
"entry_list_header.unread": "未読",
|
||||
"entry_tags.all_feeds": "すべてのフィード",
|
||||
"entry_tags.current_feed": "現在のフィード",
|
||||
"feed.actions.follow": "フォロー",
|
||||
"feed.actions.followed": "フォロー済み",
|
||||
"feed.followsAndFeeds": "{{subscriptionCount}} {{subscriptionNoun}} と {{feedsCount}} {{feedsNoun}} on {{appName}}",
|
||||
|
|
|
|||
|
|
@ -201,6 +201,8 @@
|
|||
"entry_list_header.show_unread_only": "仅显示未读",
|
||||
"entry_list_header.timeline_summary": "总结时间线",
|
||||
"entry_list_header.unread": "未读",
|
||||
"entry_tags.all_feeds": "全部订阅源",
|
||||
"entry_tags.current_feed": "当前订阅源",
|
||||
"feed.actions.follow": "订阅",
|
||||
"feed.actions.followed": "已订阅",
|
||||
"feed.followsAndFeeds": "在 {{appName}} 上有 {{subscriptionCount}} 个{{subscriptionNoun}}和 {{feedsCount}} 个{{feedsNoun}}",
|
||||
|
|
|
|||
|
|
@ -199,6 +199,8 @@
|
|||
"entry_list_header.show_unread_only": "僅顯示未讀",
|
||||
"entry_list_header.timeline_summary": "摘要時間線",
|
||||
"entry_list_header.unread": "未讀",
|
||||
"entry_tags.all_feeds": "全部訂閱源",
|
||||
"entry_tags.current_feed": "當前訂閱源",
|
||||
"feed.actions.follow": "跟隨",
|
||||
"feed.actions.followed": "已跟隨",
|
||||
"feed.followsAndFeeds": "在 {{appName}} 上有 {{subscriptionCount}} 個 {{subscriptionNoun}} 和 {{feedsCount}} 個 {{feedsNoun}}",
|
||||
|
|
|
|||
|
|
@ -235,7 +235,7 @@ export const useEntryTagsQuery = ({
|
|||
|
||||
return useQuery({
|
||||
queryKey: ["entry-tags", feedId, tag?.kind, tag?.value, match, withContent],
|
||||
enabled: !!feedId && !!tag?.value,
|
||||
enabled: !!tag?.value,
|
||||
queryFn: () =>
|
||||
entrySyncServices.fetchEntriesByTags({
|
||||
feedId: feedId ?? undefined,
|
||||
|
|
|
|||
Loading…
Reference in New Issue