feat(desktop): add trending in onboarding

DIYgod · DIYgod · commit 7a8a092c63b9 · 2025-05-04T11:53:36.000+08:00
diff --git a/apps/desktop/layer/renderer/src/modules/new-user-guide/guide-modal-content.tsx b/apps/desktop/layer/renderer/src/modules/new-user-guide/guide-modal-content.tsx
@@ -18,6 +18,7 @@ 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 { Trending } from "../trending"
 import { BehaviorGuide } from "./steps/behavior"
 
 const containerWidth = 600
@@ -92,6 +93,16 @@ export function GuideModalContent({ onClose }: { onClose: () => void }) {
           content: createElement(DiscoverImport),
           icon: "i-mgc-file-import-cute-re",
         },
+        {
+          title: t.app("new_user_guide.step.discover.title"),
+          description: t.app("new_user_guide.step.discover.description"),
+          content: (
+            <div className="overflow-scroll">
+              <Trending center limit={50} />
+            </div>
+          ),
+          icon: "i-mgc-emoji-2-cute-re",
+        },
         {
           title: t.app("new_user_guide.step.profile.title"),
           description: t.app("new_user_guide.step.profile.description"),
@@ -144,9 +155,9 @@ 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 pb-14 sm:min-h-[80%] sm:w-4/5 sm:rounded-xl sm:shadow-xl"
+      className="bg-theme-background center relative flex size-full flex-col items-center justify-center overflow-scroll pb-14 sm:size-4/5 sm:rounded-xl sm:shadow-xl"
     >
-      <div className="center relative mx-auto w-full">
+      <div className="relative mx-auto flex max-h-full w-full justify-center">
         <AnimatePresence initial={false} custom={direction} mode="popLayout">
           <m.div
             key={step - 1}
@@ -159,7 +170,7 @@ export function GuideModalContent({ onClose }: { onClose: () => void }) {
               x: { type: "spring", stiffness: 300, damping: 30 },
               opacity: { duration: 0.1 },
             }}
-            className="min-w-0 px-6 sm:mt-12"
+            className="flex min-w-0 flex-col px-6 sm:mt-12"
           >
             {!!title && (
               <div className="mb-8">
diff --git a/apps/desktop/layer/renderer/src/modules/trending/index.tsx b/apps/desktop/layer/renderer/src/modules/trending/index.tsx
@@ -120,7 +120,7 @@ export function Trending({
         {isLoading ? (
           <>
             {Array.from({ length: limit }).map((_, index) => (
-              <Skeleton key={index} className="h-[146px]" />
+              <Skeleton key={index} className="h-[146px] w-[386px]" />
             ))}
           </>
         ) : (
diff --git a/icons/mgc/emoji_2_cute_re.svg b/icons/mgc/emoji_2_cute_re.svg
@@ -0,0 +1 @@
+<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M10.995 2.044C7.799 2.29 5.173 3.742 3.589 6.14c-.297.449-.774 1.425-.968 1.98-.441 1.259-.657 2.799-.606 4.32.065 1.937.382 3.346 1.068 4.746 1.009 2.059 2.727 3.493 5.089 4.248 2.316.741 5.34.741 7.656 0 3.049-.974 5.023-3.087 5.807-6.214.285-1.133.424-2.873.33-4.11-.205-2.691-1.084-4.761-2.704-6.37-1.99-1.977-4.972-2.95-8.266-2.696m2.485 2.055c2.379.366 4.155 1.433 5.29 3.181.986 1.519 1.399 3.62 1.172 5.961-.326 3.358-1.954 5.476-4.882 6.35-1.825.545-4.295.545-6.12 0-2.832-.846-4.432-2.838-4.859-6.051-.083-.624-.095-2.026-.024-2.7.297-2.799 1.634-4.85 3.883-5.959.93-.458 1.823-.696 3.22-.857.328-.038 1.921.013 2.32.075M8.673 7.063c-.244.075-.523.351-.609.603-.094.277-.094 2.391 0 2.668.124.363.549.666.936.666.237 0 .514-.12.697-.303C9.98 10.414 10 10.303 10 9s-.02-1.414-.303-1.697c-.279-.279-.63-.361-1.024-.24m5.967.006c-.144.05-.315.197-.844.727C13.091 8.501 13 8.639 13 9s.091.499.796 1.206c.606.607.683.671.881.73.27.08.374.08.633.003.378-.112.69-.537.69-.939 0-.244-.119-.505-.343-.752L15.433 9l.224-.248c.325-.358.403-.654.282-1.062-.155-.524-.754-.81-1.299-.621m-6.2 4.975c-.486.095-1.013.509-1.244.977-.181.368-.224.732-.163 1.389.026.292.081.656.121.81.624 2.398 2.885 3.99 5.316 3.744.961-.097 1.703-.38 2.502-.955.726-.523 1.415-1.441 1.718-2.289.239-.673.361-1.596.282-2.142-.109-.762-.71-1.4-1.447-1.538-.269-.05-6.827-.046-7.085.004m6.544 2.258c-.108 1.187-.961 2.216-2.144 2.584-.434.135-1.246.135-1.68 0-1.183-.368-2.036-1.397-2.144-2.584L8.989 14h6.022l-.027.302" fill="#10161F" fill-rule="evenodd"/></svg>
diff --git a/locales/app/en.json b/locales/app/en.json
@@ -255,6 +255,8 @@
   "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.discover.description": "You can also find it later in Discover.",
+  "new_user_guide.step.discover.title": "Recommend for you",
   "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.description": "You can also import them later in Discover.",
