feat: implement OPML import functionality with feed selection modal

- Added the DiscoverImport component to handle OPML file uploads and parsing.
- Introduced OpmlSelectionModal for users to select feeds to import, including quota management and search functionality.
- Enhanced error handling and user feedback during the import process.
- Updated translations for new features and improved user experience.

Signed-off-by: Innei <[email protected]>

Author: Innei

apps/desktop/layer/renderer/src/modules/discover/DiscoverImport.tsx

@@ -5,7 +5,6 @@ import {
   AccordionTrigger,
 } from "@follow/components/ui/accordion/index.js"
 import { Button } from "@follow/components/ui/button/index.js"
-import { Card, CardContent, CardHeader } from "@follow/components/ui/card/index.jsx"
 import {
   Form,
   FormControl,
@@ -14,27 +13,34 @@ import {
   FormMessage,
 } from "@follow/components/ui/form/index.jsx"
 import { Input } from "@follow/components/ui/input/index.js"
-import { cn } from "@follow/utils/utils"
+import type { BizRespose } from "@follow/models"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useMutation } from "@tanstack/react-query"
-import { Fragment } from "react/jsx-runtime"
+import { Fragment } from "react"
 import { useForm } from "react-hook-form"
 import { Trans, useTranslation } from "react-i18next"
 import { z } from "zod"
 
 import { DropZone } from "~/components/ui/drop-zone"
 import { Media } from "~/components/ui/media"
+import { useModalStack } from "~/components/ui/modal/stacked/hooks"
 import { apiFetch } from "~/lib/api-fetch"
 import { toastFetchError } from "~/lib/error-parser"
-import { Queries } from "~/queries"
 
-import { FollowSummary } from "../feed/feed-summary"
+import { OpmlSelectionModal } from "./OpmlSelectionModal"
+import type { ParsedOpmlData } from "./types"
 
-type FeedResponseList = {
-  id: string
-  url: string
-  title: string | null
-}[]
+const parseOpmlFile = async (file: File): Promise<ParsedOpmlData> => {
+  const formData = new FormData()
+  formData.append("file", file)
+
+  const data = await apiFetch<BizRespose<ParsedOpmlData>>("/subscriptions/parse-opml", {
+    method: "POST",
+    body: formData,
+  })
+
+  return data.data
+}
 
 const formSchema = z.object({
   file: z
@@ -47,64 +53,32 @@ const formSchema = z.object({
     }),
 })
 
-const NumberDisplay = ({ value }) => <span className="font-bold text-zinc-800">{value ?? 0}</span>
-
-const list: {
-  key: string
-  title: I18nKeys
-  className: string
-}[] = [
-  {
-    key: "parsedErrorItems",
-    title: "discover.import.parsedErrorItems",
-    className: "text-red-500",
-  },
-  {
-    key: "successfulItems",
-    title: "discover.import.successfulItems",
-    className: "text-green-500",
-  },
-  {
-    key: "conflictItems",
-    title: "discover.import.conflictItems",
-    className: "text-yellow-500",
-  },
-]
-
 export function DiscoverImport() {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
   })
 
-  const mutation = useMutation({
-    mutationFn: async (file: File) => {
-      const formData = new FormData()
-      formData.append("file", file)
-      // FIXME: if post data is form data, hono hc not support this.
+  const { present } = useModalStack()
 
-      const { data } = await apiFetch<{
-        data: {
-          successfulItems: FeedResponseList
-          conflictItems: FeedResponseList
-          parsedErrorItems: FeedResponseList
-        }
-      }>("/subscriptions/import", {
-        method: "POST",
-        body: formData,
-      })
-
-      return data
-    },
-    onSuccess: () => {
-      Queries.subscription.all().invalidateRoot()
-    },
+  const parseOpmlMutation = useMutation({
+    mutationFn: parseOpmlFile,
     async onError(err) {
       toastFetchError(err)
     },
   })
 
   function onSubmit(values: z.infer<typeof formSchema>) {
-    mutation.mutate(values.file)
+    parseOpmlMutation.mutate(values.file, {
+      onSuccess: (parsedData) => {
+        present({
+          title: t("discover.import.preview_opml_content"),
+          content: () => <OpmlSelectionModal file={values.file} parsedData={parsedData} />,
+          clickOutsideToDismiss: false,
+          modalClassName: "max-w-2xl w-full h-[80vh]",
+          modalContentClassName: "flex flex-col h-full",
+        })
+      },
+    })
   }
 
   const { t } = useTranslation()
@@ -180,7 +154,7 @@ export function DiscoverImport() {
         </AccordionItem>
         <AccordionItem value="other" className="border-b-0">
           <AccordionTrigger className="justify-normal gap-2 hover:no-underline">
-            <i className="i-mgc-rss-cute-fi -ml-[0.14rem] size-6 text-orange-500" />
+            <i className="i-mgc-rss-cute-fi ml-[-0.14rem] size-6 text-orange-500" />
             {t("discover.import.opml_step1_other")}
           </AccordionTrigger>
           <AccordionContent className="flex flex-col gap-1">
@@ -230,47 +204,13 @@ export function DiscoverImport() {
             <Button
               type="submit"
               disabled={!form.formState.dirtyFields.file}
-              isLoading={mutation.isPending}
+              isLoading={parseOpmlMutation.isPending}
             >
               {t("words.import")}
             </Button>
           </div>
         </form>
       </Form>
-      {mutation.isSuccess && (
-        <div className="mt-8 w-full max-w-lg">
-          <Card>
-            <CardHeader className="block text-zinc-500">
-              <Trans
-                ns="app"
-                i18nKey="discover.import.result"
-                components={{
-                  SuccessfulNum: <NumberDisplay value={mutation.data?.successfulItems.length} />,
-                  ConflictNum: <NumberDisplay value={mutation.data?.conflictItems.length} />,
-                  ErrorNum: <NumberDisplay value={mutation.data?.parsedErrorItems.length} />,
-                }}
-              />
-            </CardHeader>
-            <CardContent className="space-y-6">
-              {list.map((item) => (
-                <div key={item.key}>
-                  <div className={cn("mb-4 text-lg font-medium", item.className)}>
-                    {t(item.title)}
-                  </div>
-                  <div className="space-y-4">
-                    {!mutation.data?.[item.key].length && (
-                      <div className="text-zinc-500">{t("discover.import.noItems")}</div>
-                    )}
-                    {mutation.data?.[item.key].map((feed) => (
-                      <FollowSummary className="max-w-[462px]" key={feed.id} feed={feed} />
-                    ))}
-                  </div>
-                </div>
-              ))}
-            </CardContent>
-          </Card>
-        </div>
-      )}
     </div>
   )
 }