From 1f21877ae262907ddd89f48fc09d8bd812404ece Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Tue, 25 Jun 2024 01:22:02 +0800
Subject: [PATCH] feat: recommendation modal

---
 src/renderer/src/models/types.ts              |  2 ++
 .../discover/recommendation-content.tsx       | 12 +++++++++
 .../src/modules/discover/recommendations.tsx  | 25 ++++++++++++++++++-
 3 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/src/modules/discover/recommendation-content.tsx

diff --git a/src/renderer/src/models/types.ts b/src/renderer/src/models/types.ts
index 93fad4d68e..5c83c62b18 100644
--- a/src/renderer/src/models/types.ts
+++ b/src/renderer/src/models/types.ts
@@ -82,3 +82,5 @@ export type FeedListModel = {
 export type SupportedLanguages = Parameters<
   typeof apiClient.ai.translation.$get
 >[0]["query"]["language"]
+
+export type RecommendationItem = ExtractBizResponse<typeof apiClient.discover.rsshub.$get>["data"][string]
diff --git a/src/renderer/src/modules/discover/recommendation-content.tsx b/src/renderer/src/modules/discover/recommendation-content.tsx
new file mode 100644
index 0000000000..e8de8cb68e
--- /dev/null
+++ b/src/renderer/src/modules/discover/recommendation-content.tsx
@@ -0,0 +1,12 @@
+import type { RecommendationItem } from "@renderer/models"
+
+export const RecommendationContent = ({
+  route,
+}: {
+  route: RecommendationItem["routes"][string]
+}) => (
+  <>
+    rsshub:/
+    {route.path}
+  </>
+)
diff --git a/src/renderer/src/modules/discover/recommendations.tsx b/src/renderer/src/modules/discover/recommendations.tsx
index bc7ba5ded5..ae6d8573a8 100644
--- a/src/renderer/src/modules/discover/recommendations.tsx
+++ b/src/renderer/src/modules/discover/recommendations.tsx
@@ -6,13 +6,17 @@ import {
   CardHeader,
   CardTitle,
 } from "@renderer/components/ui/card"
+import { useModalStack } from "@renderer/components/ui/modal/stacked/hooks"
 import { useBizQuery } from "@renderer/hooks"
 import { Queries } from "@renderer/queries"
 
+import { RecommendationContent } from "./recommendation-content"
+
 export function Recommendations() {
   const rsshubPopular = useBizQuery(Queries.discover.rsshubCategory({
     category: "popular",
   }))
+  const { present } = useModalStack()
 
   return (
     <div className="mt-8">
@@ -33,7 +37,26 @@ export function Recommendations() {
                 <CardDescription>
                   <ul className="space-y-1">
                     {Object.keys(rsshubPopular.data[key].routes).map((route) => (
-                      <li key={route} className="transition-colors hover:font-medium hover:text-zinc-800">{rsshubPopular.data[key].routes[route].name}</li>
+                      <li
+                        key={route}
+                        className="transition-colors hover:font-medium hover:text-zinc-800"
+                        onClick={() => {
+                          present({
+                            content: () => <RecommendationContent route={rsshubPopular.data[key].routes[route]} />,
+                            title: (
+                              <div className="flex items-center">
+                                <SiteIcon
+                                  url={`https://${rsshubPopular.data[key].url}`}
+                                />
+                                {`${rsshubPopular.data[key].name} - ${rsshubPopular.data[key].routes[route].name}`}
+                              </div>
+                            ),
+                            clickOutsideToDismiss: true,
+                          })
+                        }}
+                      >
+                        {rsshubPopular.data[key].routes[route].name}
+                      </li>
                     ))}
                   </ul>
                 </CardDescription>