feat: popular card in discover page

src/renderer/src/hono.ts

@@ -451,6 +451,34 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
             status: 200;
         };
     };
+    "/discover/rsshub": {
+        $get: {
+            input: {
+                query: {
+                    category: string;
+                };
+            };
+            output: {
+                data: Record<string, {
+                    description: string;
+                    name: string;
+                    url: string;
+                    routes: Record<string, {
+                        path: string;
+                        example: string;
+                        description: string;
+                        name: string;
+                        categories: string[];
+                        parameters: Record<string, string>;
+                        maintainers: string[];
+                        location: string;
+                    }>;
+                }>;
+            };
+            outputFormat: "json";
+            status: 200;
+        };
+    };
 } & {
     "/auth-app/new-session": {
         $post: {

src/renderer/src/modules/discover/form.tsx

@@ -39,7 +39,7 @@ const info: Record<
     prefix?: string
   }
 > = {
-  general: {
+  search: {
     label: "Any URL or Keyword",
   },
   rss: {

src/renderer/src/modules/discover/recommendations.tsx

@@ -1,11 +1,47 @@
-export function Recommendations({ type: _type }: { type: string }) {
+import { SiteIcon } from "@renderer/components/site-icon"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@renderer/components/ui/card"
+import { useBizQuery } from "@renderer/hooks"
+import { Queries } from "@renderer/queries"
+
+export function Recommendations() {
+  const rsshubPopular = useBizQuery(Queries.discover.rsshubCategory({
+    category: "popular",
+  }))
+
   return (
     <div className="mt-8">
-      <div className="text-lg font-medium">Suggested</div>
-      <ul className="mt-2">
-        <li>Suggestions1</li>
-        <li>Suggestions2</li>
-      </ul>
+      <div className="text-center text-lg font-medium">Popular</div>
+      {rsshubPopular.data && (
+        <div className="mt-4 grid grid-cols-3 gap-4">
+          {Object.keys(rsshubPopular.data).map((key) => (
+            <Card key={key}>
+              <CardHeader className="p-5 pb-3">
+                <CardTitle className="flex items-center text-base">
+                  <SiteIcon
+                    url={`https://${rsshubPopular.data[key].url}`}
+                  />
+                  {rsshubPopular.data[key].name}
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="p-5 pt-0">
+                <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>
+                    ))}
+                  </ul>
+                </CardDescription>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
     </div>
   )
 }

src/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx

@@ -11,8 +11,8 @@ import { Recommendations } from "@renderer/modules/discover/recommendations"
 export function Component() {
   const tabs = [
     {
-      name: "General",
-      value: "general",
+      name: "Search",
+      value: "search",
     },
     {
       name: "RSS",
@@ -44,9 +44,9 @@ export function Component() {
   ]
 
   return (
-    <div className="flex w-full flex-col items-center justify-center gap-8 overflow-y-auto">
+    <div className="flex w-full flex-col items-center gap-8 overflow-y-auto pb-10 pt-40">
       <div className="text-2xl font-bold">Discover</div>
-      <Tabs defaultValue="General">
+      <Tabs defaultValue="Search">
         <TabsList className="w-full">
           {tabs.map((tab) => (
             <TabsTrigger
@@ -59,7 +59,7 @@ export function Component() {
           ))}
         </TabsList>
         {tabs.map((tab) => (
-          <TabsContent key={tab.name} value={tab.name} className="mt-8 h-96">
+          <TabsContent key={tab.name} value={tab.name} className="mt-8">
             {tab.value === "import" ?
                 (
                   <DiscoverImport />
@@ -67,10 +67,10 @@ export function Component() {
                 (
                   <DiscoverForm type={tab.value} />
                 )}
-            <Recommendations type={tab.value} />
           </TabsContent>
         ))}
       </Tabs>
+      <Recommendations />
     </div>
   )
 }

src/renderer/src/queries/discover.ts

@@ -0,0 +1,18 @@
+import { apiClient } from "@renderer/lib/api-fetch"
+import { defineQuery } from "@renderer/lib/defineQuery"
+
+export const discover = {
+  rsshubCategory: ({
+    category,
+  }: {
+    category: string
+  }) =>
+    defineQuery(["discover", "rsshub", category], async () => {
+      const res = await apiClient.discover.rsshub.$get({
+        query: {
+          category,
+        },
+      })
+      return res.data
+    }),
+}

src/renderer/src/queries/index.ts

@@ -1,6 +1,7 @@
 import { action } from "./actions"
 import { ai } from "./ai"
 import { auth } from "./auth"
+import { discover } from "./discover"
 import { entries } from "./entries"
 import { feed } from "./feed"
 import { subscription } from "./subscriptions"
@@ -12,4 +13,5 @@ export const Queries = {
   action,
   auth,
   ai,
+  discover,
 }