✨ Add Stats info to Index page

app/api/stats/route.ts

@@ -0,0 +1,60 @@
+import { NextResponse } from "next/server";
+import { gql } from "@apollo/client";
+
+import client from "@/lib/apolloClient";
+
+// Define the GraphQL query to fetch torrent details by hash
+const query = gql`
+  query StatsInfo {
+    statsInfo {
+      size
+      total_count
+      updated_at
+      latest_torrent_hash
+      latest_torrent {
+        hash
+        name
+        size
+        created_at
+        updated_at
+      }
+    }
+  }
+`;
+
+// Function to handle GET requests
+const handler = async () => {
+  try {
+    // Execute the GraphQL query with the provided hash variable
+    const { data } = await client.query({ query, fetchPolicy: "no-cache" });
+
+    await new Promise((resolve) => setTimeout(resolve, 5000));
+
+    // Return a 200 response with the query data
+    return NextResponse.json(
+      {
+        data: data.statsInfo,
+        message: "success",
+        status: 200,
+      },
+      {
+        status: 200,
+      },
+    );
+  } catch (error: any) {
+    console.error(error);
+
+    // Return a 500 response if there's an error during the query execution
+    return NextResponse.json(
+      {
+        message: error?.message || "Internal Server Error",
+        status: 500,
+      },
+      {
+        status: 500,
+      },
+    );
+  }
+};
+
+export { handler as GET, handler as POST };

app/page.tsx

@@ -1,12 +1,16 @@
 import { HomeLogo } from "@/components/HomeLogo";
 import { SearchInput } from "@/components/SearchInput";
 import { ToggleTheme, SwitchLanguage } from "@/components/FloatTool";
+import { Stats } from "@/components/Stats";
 
 export default function Home() {
   return (
     <section className="flex flex-col items-center justify-center gap-4 w-4/5 md:w-3/5 h-full mx-auto pb-24 md:pb-20">
       <HomeLogo />
       <SearchInput />
+      <div className="fixed bottom-4 right-4 invisible md:visible">
+        <Stats />
+      </div>
       <div className="fixed top-4 right-4 flex gap-1">
         <SwitchLanguage noBg />
         <ToggleTheme noBg />

components/Stats.tsx

@@ -0,0 +1,57 @@
+import { Suspense } from "react";
+import { getTranslations } from "next-intl/server";
+import { Tooltip } from "@nextui-org/react";
+
+import apiFetch from "@/utils/api";
+import { InfoFilledIcon } from "@/components/icons";
+import { formatByteSize, formatDate } from "@/utils";
+
+async function StatsCard() {
+  const t = await getTranslations();
+
+  const { data } = await apiFetch("/api/stats", {
+    next: { revalidate: 60 },
+  });
+
+  return (
+    <div className="text-xs text-foreground-600">
+      <h4 className="font-bold">{t("Stats.title")}</h4>
+      <ul>
+        <li>{t("Stats.size", { size: formatByteSize(data.size) })}</li>
+        <li>
+          {t("Stats.total_count", {
+            total_count: data.total_count.toLocaleString(),
+          })}
+        </li>
+        <li>
+          {t("Stats.updated_at", {
+            updated_at: formatDate(
+              data.updated_at,
+              t("COMMON.DATE_FORMAT_DATE"),
+            ),
+          })}
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+export function Stats() {
+  return (
+    <Tooltip
+      classNames={{
+        content: "bg-opacity-60",
+      }}
+      closeDelay={0}
+      content={
+        <Suspense fallback={<div>Loading...</div>}>
+          <StatsCard />
+        </Suspense>
+      }
+      delay={0}
+      radius="sm"
+    >
+      <InfoFilledIcon className="cursor-pointer text-stone-500" size={15} />
+    </Tooltip>
+  );
+}

components/icons.tsx

@@ -236,6 +236,28 @@ export const LangFilledIcon: React.FC<IconSvgProps> = ({
   </svg>
 );
 
+export const InfoFilledIcon: React.FC<IconSvgProps> = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 512 512"
+    width={size || width}
+    {...props}
+  >
+    <path
+      d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
 export const FileTypeFolderIcon: React.FC<IconSvgProps> = (
   props: IconSvgProps,
 ) => (

config/site.ts

@@ -2,5 +2,5 @@ export type SiteConfig = typeof siteConfig;
 
 export const siteConfig = {
   name: "Bitmagnet Next Web",
-  description: "Another Bitmagnet frontend",
+  description: "🧲 A modern BitTorrent indexer, powered by Bitmagnet.",
 };

i18n/locales/en.json

@@ -1,6 +1,15 @@
 {
   "COMMON": {
-    "DATE_FORMAT": "YYYY-MM-DD HH:mm:ss"
+    "DATE_FORMAT": "YYYY-MM-DD HH:mm:ss",
+    "DATE_FORMAT_SHORT": "YYYY-MM-DD HH:mm",
+    "DATE_FORMAT_DATE": "YYYY-MM-DD",
+    "DATE_FORMAT_TIME": "HH:mm:ss"
+  },
+  "Stats": {
+    "title": "Stats",
+    "size": "Database: {size}",
+    "total_count": "Torrents: {total_count}",
+    "updated_at": "Last updated: {updated_at}"
   },
   "ERROR_MESSAGE": { 
     "INTERNAL_SERVER_ERROR": "Something went wrong!",

i18n/locales/zh-CN.json

@@ -1,12 +1,16 @@
 {
-  "COMMON": {
-    "DATE_FORMAT": "YYYY-MM-DD HH:mm:ss"
+  "COMMON": {},
+  "Stats": {
+    "title": "统计信息",
+    "size": "数据库大小: {size}",
+    "total_count": "收录数量: {total_count}",
+    "updated_at": "最后更新日期: {updated_at}"
   },
   "ERROR_MESSAGE": {
     "INTERNAL_SERVER_ERROR": "发生意外错误",
     "NOT_FOUND": "资源不存在",
     "GoHome": "返回首页"
-   },
+  },
   "Metadata": {
     "search": {
       "title": "{keyword} 的搜索结果"
@@ -56,4 +60,4 @@
     "keyword_too_short": "关键词需要大于两个字符",
     "copy_success": "磁力链接已复制到剪贴板"
   }
-}
+}

i18n/locales/zh-TW.json

@@ -1,6 +1,10 @@
 {
-  "COMMON": {
-    "DATE_FORMAT": "YYYY-MM-DD HH:mm:ss"
+  "COMMON": {},
+  "Stats": {
+    "title": "統計資訊",
+    "size": "資料庫大小: {size}",
+    "total_count": "收錄數量: {total_count}",
+    "updated_at": "最後更新日期: {updated_at}"
   },
   "ERROR_MESSAGE": {
     "INTERNAL_SERVER_ERROR": "發生意外錯誤",