feat: recommendation modal

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]

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}
+  </>
+)

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>