RSSNext
diff --git a/‎apps/desktop/layer/renderer/src/modules/discover/import.tsx
Copy file name to clipboard
+89-7Lines changed: 89 additions & 7 deletions b/‎apps/desktop/layer/renderer/src/modules/discover/import.tsx
Copy file name to clipboard
+89-7Lines changed: 89 additions & 7 deletions
diff --git a/‎apps/desktop/layer/renderer/src/modules/new-user-guide/guide-modal-content.tsx
Copy file name to clipboard
+21-55Lines changed: 21 additions & 55 deletions b/‎apps/desktop/layer/renderer/src/modules/new-user-guide/guide-modal-content.tsx
Copy file name to clipboard
+21-55Lines changed: 21 additions & 55 deletions
diff --git a/‎apps/desktop/tailwind.config.ts
Copy file name to clipboard
+10Lines changed: 10 additions & 0 deletions b/‎apps/desktop/tailwind.config.ts
Copy file name to clipboard
+10Lines changed: 10 additions & 0 deletions
diff --git a/‎locales/app/en.json
Copy file name to clipboard
+15-9Lines changed: 15 additions & 9 deletions b/‎locales/app/en.json
Copy file name to clipboard
+15-9Lines changed: 15 additions & 9 deletions
@@ -1,11 +1,16 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  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,
   FormField,
   FormItem,
-  FormLabel,
   FormMessage,
 } from "@follow/components/ui/form/index.jsx"
 import { Input } from "@follow/components/ui/input/index.js"
@@ -18,6 +23,7 @@ import { Trans, useTranslation } from "react-i18next"
 import { z } from "zod"
 
 import { DropZone } from "~/components/ui/drop-zone"
+import { Media } from "~/components/ui/media"
 import { apiFetch } from "~/lib/api-fetch"
 import { toastFetchError } from "~/lib/error-parser"
 import { Queries } from "~/queries"
@@ -65,7 +71,7 @@ const list: {
   },
 ]
 
-export function DiscoverImport({ isInit = false }: { isInit?: boolean }) {
+export function DiscoverImport() {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
   })
@@ -104,17 +110,93 @@ export function DiscoverImport({ isInit = false }: { isInit?: boolean }) {
   const { t } = useTranslation()
 
   return (
-    <>
+    <div className="flex flex-col">
+      <div className="mb-2 font-medium">1. {t("discover.import.opml_step1")}</div>
+      <Accordion type="single" collapsible className="mb-6 w-[500px]">
+        <AccordionItem value="inoreader">
+          <AccordionTrigger className="justify-normal gap-2 hover:no-underline">
+            <Media
+              className="size-5"
+              src="https://inoreader.com/favicon.ico"
+              alt="inoreader"
+              type="photo"
+            />
+            {t("discover.import.opml_step1_inoreader")}
+          </AccordionTrigger>
+          <AccordionContent className="flex flex-col gap-1">
+            <p>
+              <Trans
+                ns="app"
+                i18nKey="discover.import.opml_step1_inoreader_step1"
+                components={{
+                  Link: (
+                    <a
+                      href="https://www.inoreader.com/preferences/content"
+                      className="underline"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      inoreader.com/preferences/content
+                    </a>
+                  ),
+                }}
+              />
+            </p>
+            <p>{t("discover.import.opml_step1_inoreader_step2")}</p>
+            <p>{t("discover.import.opml_step1_inoreader_step3")}</p>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="feedly">
+          <AccordionTrigger className="justify-normal gap-2 hover:no-underline">
+            <Media
+              className="size-5"
+              src="https://feedly.com/favicon.ico"
+              alt="feedly"
+              type="photo"
+            />
+            {t("discover.import.opml_step1_feedly")}
+          </AccordionTrigger>
+          <AccordionContent className="flex flex-col gap-1">
+            <p>
+              <Trans
+                ns="app"
+                i18nKey="discover.import.opml_step1_feedly_step1"
+                components={{
+                  Link: (
+                    <a
+                      href="https://feedly.com/i/opml"
+                      className="underline"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      feedly.com/i/opml
+                    </a>
+                  ),
+                }}
+              />
+            </p>
+            <p>{t("discover.import.opml_step1_feedly_step2")}</p>
+          </AccordionContent>
+        </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" />
+            {t("discover.import.opml_step1_other")}
+          </AccordionTrigger>
+          <AccordionContent className="flex flex-col gap-1">
+            {t("discover.import.opml_step1_other_step1")}
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+
+      <div className="mb-4 font-medium">2. {t("discover.import.opml_step2")}</div>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="w-full max-w-[540px] space-y-8">
           <FormField
             control={form.control}
             name="file"
             render={({ field: { value, onChange, ...fieldProps } }) => (
               <FormItem>
-                <FormLabel>
-                  {isInit ? t("discover.import.new_import_opml") : t("discover.import.opml")}
-                </FormLabel>
                 <FormControl>
                   <DropZone onDrop={(fileList) => onChange(fileList[0])}>
                     {form.formState.dirtyFields.file ? (
@@ -189,6 +271,6 @@ export function DiscoverImport({ isInit = false }: { isInit?: boolean }) {
           </Card>
         </div>
       )}
-    </>
+    </div>
   )
 }
@@ -8,25 +8,18 @@ import type { ComponentProps, FunctionComponentElement } from "react"
 import { createElement, useEffect, useMemo, useRef, useState } from "react"
 import { Trans, useTranslation } from "react-i18next"
 
-import RSSHubIconUrl from "~/assets/rsshub-icon.png?url"
-import { useIsInMASReview } from "~/atoms/server-configs"
-import { useGeneralSettingKey } from "~/atoms/settings/general"
 import { mountLottie } from "~/components/ui/lottie-container"
 import { Markdown } from "~/components/ui/markdown/Markdown"
 import { useI18n } from "~/hooks/common"
 import confettiUrl from "~/lottie/confetti.lottie?url"
-import { MyWalletSection } from "~/modules/power/my-wallet-section"
 import { settings } from "~/queries/settings"
 
-import { ActivationModalContent } from "../activation/ActivationModalContent"
 import { DiscoverImport } from "../discover/import"
 import { ProfileSettingForm } from "../profile/profile-setting-form"
 import { settingSyncQueue } from "../settings/helper/sync-queue"
 import { LanguageSelector } from "../settings/tabs/general"
 import { BehaviorGuide } from "./steps/behavior"
-import { RSSHubGuide } from "./steps/rsshub"
 
-const RSSHubIcon = new URL(RSSHubIconUrl, import.meta.url).href
 const containerWidth = 600
 const variants = {
   enter: (direction: number) => {
@@ -52,9 +45,9 @@ const variants = {
 function Intro() {
   const { t } = useTranslation("app")
   return (
-    <div className="max-w-[50ch] space-y-4 text-balance text-center">
+    <div className="max-w-[50ch] space-y-8 text-balance text-center">
       <Logo className="mx-auto size-20" />
-      <p className="mt-5 text-xl font-bold">{t("new_user_guide.intro.title")}</p>
+      <p className="mt-5 text-2xl font-bold">{t("new_user_guide.intro.title")}</p>
       <p className="text-lg">{t("new_user_guide.intro.description")}</p>
       <LanguageSelector contentClassName="z-10" />
     </div>
@@ -64,9 +57,9 @@ function Intro() {
 function Outtro() {
   const { t } = useTranslation("app")
   return (
-    <div className="max-w-[50ch] space-y-4 text-balance text-center">
+    <div className="max-w-[50ch] space-y-8 text-balance text-center">
       <Logo className="mx-auto size-20" />
-      <p className="mt-5 text-xl font-semibold">{t("new_user_guide.outro.title")}</p>
+      <p className="mt-5 text-2xl font-semibold">{t("new_user_guide.outro.title")}</p>
       <p className="text-lg">{t("new_user_guide.outro.description")}</p>
 
       <div className="space-y-2 text-sm opacity-80">
@@ -89,15 +82,19 @@ export function GuideModalContent({ onClose }: { onClose: () => void }) {
   const t = useI18n()
   const [step, setStep] = useState(0)
   const [direction, setDirection] = useState(1)
-  const lang = useGeneralSettingKey("language")
-  const defaultLang = ["zh-CN", "zh-HK", "zh-TW"].includes(lang ?? "") ? "zh-CN" : "en"
-  const isInMASReview = useIsInMASReview()
 
   const guideSteps = useMemo(
     () =>
       [
         {
-          title: t.app("new_user_guide.step.migrate.profile"),
+          title: t.app("new_user_guide.step.migrate.title"),
+          description: t.app("new_user_guide.step.migrate.description"),
+          content: createElement(DiscoverImport),
+          icon: "i-mgc-file-import-cute-re",
+        },
+        {
+          title: t.app("new_user_guide.step.profile.title"),
+          description: t.app("new_user_guide.step.profile.description"),
           content: (
             <ProfileSettingForm
               className="w-[500px] max-w-full"
@@ -106,52 +103,19 @@ export function GuideModalContent({ onClose }: { onClose: () => void }) {
           ),
           icon: "i-mgc-user-setting-cute-re",
         },
-        ...(!isInMASReview
-          ? [
-              {
-                title: t.app("new_user_guide.step.activation.title"),
-                description: t.app("new_user_guide.step.activation.description"),
-                content: (
-                  <ActivationModalContent className="w-full max-w-[500px]" hideDescription />
-                ),
-                icon: "i-mgc-love-cute-re",
-              },
-              {
-                title: t.app("new_user_guide.step.migrate.wallet"),
-                content: <MyWalletSection className="w-full max-w-[600px]" />,
-                icon: <i className="i-mgc-power text-accent" />,
-              },
-            ]
-          : []),
         {
           title: t.app("new_user_guide.step.behavior.unread_question.content"),
-          description: t.app("new_user_guide.step.behavior.unread_question.description"),
+          description: t.app("new_user_guide.step.profile.description"),
           content: createElement(BehaviorGuide),
           icon: tw`i-mgc-cursor-3-cute-re`,
         },
-        {
-          title: t.app("new_user_guide.step.migrate.title"),
-          content: createElement(DiscoverImport, {
-            isInit: true,
-          }),
-          icon: "i-mgc-file-import-cute-re",
-        },
-        {
-          title: t.app("new_user_guide.step.rsshub.title"),
-          description: t.app("new_user_guide.step.rsshub.info"),
-          content: createElement(RSSHubGuide, {
-            categories: "popular",
-            lang: defaultLang,
-          }),
-          icon: <img src={RSSHubIcon} className="size-[22px]" />,
-        },
       ].filter((i) => !!i) as {
         title: string
         icon: React.ReactNode
         content: FunctionComponentElement<object>
         description?: string
       }[],
-    [t, defaultLang],
+    [t],
   )
 
   const totalSteps = useMemo(() => guideSteps.length, [guideSteps])
@@ -180,7 +144,7 @@ export function GuideModalContent({ onClose }: { onClose: () => void }) {
   return (
     <m.div
       layout
-      className="bg-theme-background relative flex min-h-full w-full flex-col items-center justify-center overflow-hidden sm:min-h-[80%] sm:w-4/5 sm:rounded-xl sm:shadow-xl"
+      className="bg-theme-background relative flex min-h-full w-full flex-col items-center justify-center overflow-hidden pb-14 sm:min-h-[80%] sm:w-4/5 sm:rounded-xl sm:shadow-xl"
     >
       <div className="center relative mx-auto w-full">
         <AnimatePresence initial={false} custom={direction} mode="popLayout">
@@ -198,10 +162,10 @@ export function GuideModalContent({ onClose }: { onClose: () => void }) {
             className="min-w-0 px-6 sm:mt-12"
           >
             {!!title && (
-              <div className="mb-6">
-                <h1 className="mb-2 flex w-full items-center justify-center gap-2 text-xl font-bold">
+              <div className="mb-8">
+                <h1 className="mb-2 flex w-full items-center justify-center gap-2 text-2xl font-bold">
                   {typeof guideSteps[step - 1]!.icon === "string" ? (
-                    <i className={cn(guideSteps[step - 1]!.icon, "size-[22px]")} />
+                    <i className={cn(guideSteps[step - 1]!.icon, "text-accent")} />
                   ) : (
                     guideSteps[step - 1]!.icon
                   )}
@@ -237,7 +201,7 @@ export function GuideModalContent({ onClose }: { onClose: () => void }) {
         ))}
       </div>
 
-      <div className="absolute inset-x-0 bottom-4 z-[1] flex w-full items-center justify-between px-6">
+      <div className="absolute inset-x-0 bottom-8 z-[1] flex w-full items-center justify-between px-8">
         <div className={cn("flex h-fit gap-3 max-sm:hidden", step === 0 && "invisible")}>
           {Array.from({ length: totalSteps }, (_, i) => i + 1).map((i) => (
             <Step key={i} step={i} currentStep={step} />
@@ -247,6 +211,7 @@ export function GuideModalContent({ onClose }: { onClose: () => void }) {
         <div className="flex gap-2">
           {step !== 0 && (
             <Button
+              size="lg"
               onClick={() => {
                 if (step > 0) {
                   setStep((prev) => prev - 1)
@@ -259,6 +224,7 @@ export function GuideModalContent({ onClose }: { onClose: () => void }) {
             </Button>
           )}
           <Button
+            size="lg"
             disabled={isLottieAnimating}
             onClick={(e) => {
               if (step <= totalSteps) {
 
@@ -53,9 +53,19 @@ export default extendConfig({
           "0%, 100%": { opacity: "0.5" },
           "50%": { opacity: "0.7" },
         },
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
       },
       animation: {
         "caret-blink": "caret-blink 1.25s ease-out infinite",
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
       },
     },
   },
 
@@ -44,9 +44,19 @@
   "discover.feed_maintainers": "This feed is provided by RSSHub, with credit to <maintainers />",
   "discover.import.click_to_upload": "Click to upload OPML file",
   "discover.import.conflictItems": "Conflict Items",
-  "discover.import.new_import_opml": "If you have used RSS before, you can export your data config to an OPML file and import it here",
   "discover.import.noItems": "No items",
   "discover.import.opml": "OPML file",
+  "discover.import.opml_step1": "Export OPML from your RSS reader",
+  "discover.import.opml_step1_feedly": "Export OPML from Feedly",
+  "discover.import.opml_step1_feedly_step1": "Open <Link />.",
+  "discover.import.opml_step1_feedly_step2": "Click the \"Download Your Feedly OPML\" button.",
+  "discover.import.opml_step1_inoreader": "Export OPML from Inoreader",
+  "discover.import.opml_step1_inoreader_step1": "Open <Link />.",
+  "discover.import.opml_step1_inoreader_step2": "Switch to the \"SYSTEM FOLDERS\" tab.",
+  "discover.import.opml_step1_inoreader_step3": "Click the \"OPML\" button on the right side of \"Newsfeed\".",
+  "discover.import.opml_step1_other": "Export OPML from other readers",
+  "discover.import.opml_step1_other_step1": "OPML is a widely supported open format and is essentially the standard for sharing feed subscription lists. Nearly all RSS readers allow for OPML import and export. If you're unsure how to do this, please refer to your RSS reader's help manual or join our community for assistance.",
+  "discover.import.opml_step2": "Import OPML to Folo",
   "discover.import.parsedErrorItems": "Parsed Error Items",
   "discover.import.result": "<SuccessfulNum /> feeds were successfully imported, <ConflictNum /> were already subscribed to, and <ErrorNum /> failed to import.",
   "discover.import.successfulItems": "Successful Items",
@@ -239,23 +249,19 @@
   "new_user_guide.intro.title": "Welcome to Folo!",
   "new_user_guide.outro.description": "You have completed the guide. Enjoy your journey!",
   "new_user_guide.outro.title": "You're all set!",
-  "new_user_guide.step.activation.description": "Don't worry, you can continue to use Folo without an invitation code.",
-  "new_user_guide.step.activation.title": "Activate your account",
   "new_user_guide.step.automation.description": "- Folo leverages advanced AI to assist your operations.\n- Action rules allow you to automate various actions on sources that meet specific conditions.\n- Integrations allow you to save entries to other services.",
   "new_user_guide.step.behavior.title": "Behavior",
   "new_user_guide.step.behavior.unread_question.content": "Select how you would like to mark as read.",
-  "new_user_guide.step.behavior.unread_question.description": "Don't worry, you can also change it later in the preferences.",
   "new_user_guide.step.behavior.unread_question.option1": "Radical: Automatically marked as read when displayed.",
   "new_user_guide.step.behavior.unread_question.option2": "Balanced: Automatically marked as read when hovered over or scrolled out of view.",
   "new_user_guide.step.behavior.unread_question.option3": "Conservative: Marked as read only when clicked.",
   "new_user_guide.step.features.actions.description": "Action rules allow you to perform different actions for different feeds.\n- Using AI to summarize or translate.\n- Configure how to read entries.\n- Enable notifications for new entries or silence them.\n- Rewrite or block specific entries.\n- Send new entries to a webhook address.",
   "new_user_guide.step.features.integration.description": "Integrations allow you to save entries to other services. Currently supported services are:\n- Eagle\n- Readwise\n- Instapaper\n- Obsidian\n- Outline\n- Readeck",
-  "new_user_guide.step.migrate.profile": "Setup your profile",
-  "new_user_guide.step.migrate.title": "Migrate from OPML file",
-  "new_user_guide.step.migrate.wallet": "Check your wallet",
+  "new_user_guide.step.migrate.description": "You can also import them later in Discover.",
+  "new_user_guide.step.migrate.title": "Migrate from other RSS readers",
   "new_user_guide.step.power.description": "Folo uses blockchain technology as an incentive mechanism for active users and outstanding creators. Users can obtain more services and benefits by holding and using Power Token. Creators can obtain more rewards by providing high-quality content and services.",
-  "new_user_guide.step.rsshub.info": "Everything is RSSible. Our [RSSHub](https://github.com/DIYgod/RSSHub) community, comprising over 1,000 developers, has spent six years adapting nearly a thousand websites to provide almost all the content you need. This includes platforms like X (Twitter), Instagram, PlayStation, Spotify, Telegram, YouTube, and more. You can also write your own scripts to adapt additional websites.",
-  "new_user_guide.step.rsshub.title": "Subscribe from RSSHub",
+  "new_user_guide.step.profile.description": "You can also set it up later in Preferences.",
+  "new_user_guide.step.profile.title": "Setup your profile",
   "new_user_guide.step.shortcuts.description1": "Shortcut keys allow you to use Folo more conveniently and efficiently.",
   "new_user_guide.step.shortcuts.description2": "Press <kbd /> to quickly view all shortcut keys at any time.",
   "new_user_guide.step.shortcuts.title": "Shortcuts",