feat(discover): add SimpleDiscoverModal for enhanced feed discovery

Innei · Innei · commit 704c11d5c652 · 2025-06-17T01:31:12.000+08:00
resolves FOL-1537

- Introduced `SimpleDiscoverModal` component to facilitate searching and adding feeds via keywords or URLs.
- Implemented form validation using Zod and integrated with the API for feed discovery.
- Updated `SubscriptionList` to show the modal when adding feeds, improving user experience.
- Enhanced localization with new strings for the discover functionality.

These changes aim to streamline the process of discovering and adding feeds, providing users with a more intuitive interface.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/layer/renderer/src/modules/subscription-column/SimpleDiscoverModal.tsx b/apps/desktop/layer/renderer/src/modules/subscription-column/SimpleDiscoverModal.tsx
@@ -0,0 +1,246 @@
+import { Button } from "@follow/components/ui/button/index.js"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@follow/components/ui/form/index.jsx"
+import { Input } from "@follow/components/ui/input/index.js"
+import { SegmentGroup, SegmentItem } from "@follow/components/ui/segment/index.js"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useMutation } from "@tanstack/react-query"
+import { atom, useAtomValue, useStore } from "jotai"
+import type { ChangeEvent } from "react"
+import { useCallback, useState } from "react"
+import { useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import { Link } from "react-router"
+import { z } from "zod"
+
+import { useModalStack } from "~/components/ui/modal/stacked/hooks"
+import { apiClient } from "~/lib/api-fetch"
+
+import { DiscoverFeedCard } from "../discover/DiscoverFeedCard"
+import { FeedForm } from "../discover/FeedForm"
+
+const formSchema = z.object({
+  keyword: z.string().min(1),
+  type: z.enum(["search", "rss", "rsshub"]),
+})
+
+type DiscoverSearchData = Awaited<ReturnType<typeof apiClient.discover.$post>>["data"]
+
+const typeConfig = {
+  search: {
+    label: "discover.any_url_or_keyword",
+    placeholder: "Enter keywords or URL...",
+    prefix: [] as string[],
+    default: undefined,
+  },
+  rss: {
+    label: "discover.rss_url",
+    placeholder: "https://example.com/feed.xml",
+    prefix: ["https://", "https://"],
+    default: "https://",
+  },
+  rsshub: {
+    label: "discover.rss_hub_route",
+    placeholder: "rsshub://github/issue/follow/follow",
+    prefix: ["rsshub://"],
+    default: "rsshub://",
+  },
+} as const
+
+export function SimpleDiscoverModal({ dismiss }: { dismiss: () => void }) {
+  const { t } = useTranslation()
+  const { present } = useModalStack()
+  const jotaiStore = useStore()
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      keyword: "",
+      type: "search",
+    },
+  })
+
+  const watchedType = form.watch("type")
+  const currentConfig = typeConfig[watchedType]
+
+  const discoverSearchDataAtom = useState(() => atom<DiscoverSearchData>())[0]
+  const discoverSearchData = useAtomValue(discoverSearchDataAtom)
+
+  const mutation = useMutation({
+    mutationFn: async ({ keyword, type }: { keyword: string; type: string }) => {
+      // For RSS/RSSHub, show feed form modal
+      if (type === "rss" || type === "rsshub") {
+        present({
+          title: t("feed_form.add_feed"),
+          content: ({ dismiss: dismissFeedForm }) => (
+            <FeedForm
+              url={keyword}
+              onSuccess={() => {
+                dismissFeedForm()
+                dismiss()
+              }}
+            />
+          ),
+        })
+        return []
+      }
+
+      // For search, use discover API
+      const { data } = await apiClient.discover.$post({
+        json: {
+          keyword: keyword.trim(),
+          target: "feeds",
+        },
+      })
+
+      jotaiStore.set(discoverSearchDataAtom, data)
+      return data
+    },
+  })
+
+  const handleKeywordChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const trimmedKeyword = event.target.value.trimStart()
+      const { prefix } = currentConfig
+
+      if (!prefix || prefix.length === 0) {
+        form.setValue("keyword", trimmedKeyword, { shouldValidate: true })
+        return
+      }
+
+      const isValidPrefix = prefix.find((p) => trimmedKeyword.startsWith(p))
+      if (!isValidPrefix) {
+        form.setValue("keyword", prefix[0]!)
+        return
+      }
+
+      if (trimmedKeyword.startsWith(`${isValidPrefix}${isValidPrefix}`)) {
+        form.setValue("keyword", trimmedKeyword.slice(isValidPrefix.length))
+        return
+      }
+
+      form.setValue("keyword", trimmedKeyword)
+    },
+    [form, currentConfig],
+  )
+
+  const handleTypeChange = useCallback(
+    (value: string) => {
+      form.setValue("type", value as any)
+      const newConfig = typeConfig[value as keyof typeof typeConfig]
+      if (newConfig.default) {
+        form.setValue("keyword", newConfig.default)
+      } else {
+        form.setValue("keyword", "")
+      }
+    },
+    [form],
+  )
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    mutation.mutate(values)
+  }
+
+  return (
+    <div className="flex min-h-[400px] w-[600px] flex-col">
+      <div className="mb-6">
+        <p className="text-text-secondary text-sm">
+          {t("discover.find_feeds_description", "Find and add new feeds to your collection")}
+        </p>
+      </div>
+
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          {/* Type Selector */}
+          <FormField
+            control={form.control}
+            name="type"
+            render={({ field }) => (
+              <FormItem className="relative">
+                <FormControl>
+                  <SegmentGroup value={field.value} onValueChanged={handleTypeChange}>
+                    <SegmentItem value="search" label={t("words.search")} />
+                    <SegmentItem value="rss" label={t("words.rss")} />
+                    <SegmentItem value="rsshub" label={t("words.rsshub")} />
+                  </SegmentGroup>
+                </FormControl>
+                <div className="text-text-secondary absolute bottom-0 right-0 flex flex-col flex-wrap items-end gap-1 text-sm">
+                  <div>
+                    Or go to{" "}
+                    <Link className="text-accent underline" to="/discover" onClick={dismiss}>
+                      Discover
+                    </Link>
+                    <i className="i-mgc-arrow-right-up-cute-re" />
+                  </div>
+
+                  <p>to find more interesting contents.</p>
+                </div>
+              </FormItem>
+            )}
+          />
+
+          {/* Input Field */}
+          <FormField
+            control={form.control}
+            name="keyword"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t(currentConfig.label)}</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder={currentConfig.placeholder}
+                    {...field}
+                    onChange={handleKeywordChange}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {/* Action Buttons */}
+          <div className="flex items-center justify-end gap-3">
+            <Button type="button" variant="outline" onClick={dismiss}>
+              {t("words.cancel", { ns: "common" })}
+            </Button>
+            <Button type="submit" disabled={mutation.isPending}>
+              {mutation.isPending ? t("words.searching", "Searching...") : t("words.search")}
+            </Button>
+          </div>
+        </form>
+      </Form>
+
+      {/* Search Results */}
+      {discoverSearchData && discoverSearchData.length > 0 && (
+        <div className="mt-6 flex-1">
+          <div className="border-border mb-4 border-b pb-2">
+            <h3 className="text-text font-medium">
+              {t("discover.search_results", "Search Results")} ({discoverSearchData.length})
+            </h3>
+          </div>
+          <div className="max-h-[300px] space-y-3 overflow-y-auto">
+            {discoverSearchData.map((item, index) => (
+              <DiscoverFeedCard key={index} item={item} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Empty State */}
+      {mutation.isSuccess && discoverSearchData && discoverSearchData.length === 0 && (
+        <div className="mt-6 flex flex-1 items-center justify-center">
+          <div className="text-text-secondary text-center">
+            <i className="i-mgc-search-3-cute-re mb-2 text-2xl" />
+            <p>{t("discover.no_results", "No feeds found for your search.")}</p>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/apps/desktop/layer/renderer/src/modules/subscription-column/SubscriptionList.shared.tsx b/apps/desktop/layer/renderer/src/modules/subscription-column/SubscriptionList.shared.tsx
@@ -15,15 +15,17 @@ import * as HoverCard from "@radix-ui/react-hover-card"
 import { AnimatePresence, m } from "motion/react"
 import { memo, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
-import { Link } from "react-router"
+import { useLocation } from "react-router"
 import { useOnClickOutside } from "usehooks-ts"
 
+import { useModalStack } from "~/components/ui/modal/stacked/hooks"
 import { IconOpacityTransition } from "~/components/ux/transition/icon"
 import { FEED_COLLECTION_LIST } from "~/constants"
 import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
 import { useRouteFeedId } from "~/hooks/biz/useRouteParams"
 
 import { getFeedListSort, setFeedListSortBy, setFeedListSortOrder, useFeedListSort } from "./atom"
+import { SimpleDiscoverModal } from "./SimpleDiscoverModal"
 import { feedColumnStyles } from "./styles"
 import { UnreadNumber } from "./UnreadNumber"
 
@@ -180,20 +182,43 @@ const SortButton = () => {
 
 export const EmptyFeedList = memo(({ onClick }: { onClick?: (e: React.MouseEvent) => void }) => {
   const { t } = useTranslation()
+  const location = useLocation()
+  const isOnDiscoverPage = location.pathname === "/discover"
+  const { present } = useModalStack()
+
+  const handleClick = (e: React.MouseEvent) => {
+    stopPropagation(e)
+    onClick?.(e)
+
+    if (!isOnDiscoverPage) {
+      // Show simplified discover modal when already on discover page
+      present({
+        title: t("words.discover"),
+        content: ({ dismiss }) => <SimpleDiscoverModal dismiss={dismiss} />,
+        clickOutsideToDismiss: true,
+      })
+    }
+  }
 
   return (
-    <div className="flex h-full flex-1 items-center font-normal text-zinc-500">
-      <Link
-        to="/discover"
-        className="cursor-menu absolute inset-0 mt-[-3.75rem] flex h-full flex-1 flex-col items-center justify-center gap-2"
-        onClick={(e) => {
-          stopPropagation(e)
-          onClick?.(e)
-        }}
-      >
-        <i className="i-mgc-add-cute-re text-3xl" />
-        <span className="text-base">{t("sidebar.add_more_feeds")}</span>
-      </Link>
+    <div className="mt-12 flex flex-1 items-center font-normal text-zinc-500">
+      {isOnDiscoverPage ? (
+        <div
+          className="cursor-menu flex flex-1 flex-col items-center justify-center gap-2"
+          onClick={handleClick}
+        >
+          <i className="i-mgc-arrow-right-up-cute-re text-3xl" />
+          <span className="text-balance text-sm">{t("sidebar.already_on_discover_page")}</span>
+        </div>
+      ) : (
+        <div
+          className="cursor-menu flex flex-1 flex-col items-center justify-center gap-2"
+          onClick={handleClick}
+        >
+          <i className="i-mgc-add-cute-re text-3xl" />
+          <span className="text-base">{t("sidebar.add_more_feeds")}</span>
+        </div>
+      )}
     </div>
   )
 })
diff --git a/locales/app/en.json b/locales/app/en.json
@@ -347,6 +347,7 @@
   "share.title": "Share Entry",
   "shortcuts.guide.title": "Shortcuts Guideline",
   "sidebar.add_more_feeds": "Add more feeds",
+  "sidebar.already_on_discover_page": "You're already on the Discover page! Add the content you want to follow to the panel on the right.",
   "sidebar.category_remove_dialog.cancel": "Cancel",
   "sidebar.category_remove_dialog.continue": "Continue",
   "sidebar.category_remove_dialog.description": "This operation will delete your category, but the feeds it contains will be retained and grouped by website.",
