🎨 Style improve

app/layout.tsx

@@ -7,7 +7,7 @@ import clsx from "clsx";
 import { Providers } from "./providers";
 
 import { siteConfig } from "@/config/site";
-import { fontSans, fontNoto } from "@/config/fonts";
+import { fontSans, fontNoto, fontMono } from "@/config/fonts";
 import { BgEffect } from "@/components/BgEffect";
 
 export const metadata: Metadata = {
@@ -49,6 +49,7 @@ export default async function RootLayout({
         className={clsx(
           "h-full bg-background font-sans antialiased",
           fontSans.variable,
+          fontMono.variable,
           locale.startsWith("zh") ? fontNoto.className : "",
         )}
       >

components/DetailContent.tsx

@@ -7,41 +7,60 @@ import {
   CardFooter,
   Divider,
   Link,
+  Button,
 } from "@nextui-org/react";
 import { useTranslations } from "next-intl";
 
 import { TorrentItemProps } from "@/types";
-import { $env, formatByteSize, formatDate, setClipboard, Toast } from "@/utils";
+import { formatByteSize, formatDate, setClipboard, Toast } from "@/utils";
+import useBreakpoint from "@/hooks/useBreakpoints";
 import FileList from "@/components/FileList";
+import { CopyIcon } from "@/components/icons";
 
 export const DetailContent = ({ data }: { data: TorrentItemProps }) => {
   const t = useTranslations();
+  const { isXs } = useBreakpoint();
 
   return (
     <>
       {/* Torrent name */}
-      <h1 className="text-2xl break-words">{data.name}</h1>
-
-      {/* Torrent details */}
-      <div className="flex gap-x-2 text-xs md:text-sm text-gray-500">
-        <span>
-          {t("Search.file_size", { size: formatByteSize(data.size) })}
-        </span>
-        <span>{t("Search.file_count", { count: data.files.length })}</span>
-        <span>
-          {t("Search.created_at", {
-            time: formatDate(data.created_at, t("COMMON.DATE_FORMAT")),
-          })}
-        </span>
-      </div>
-
-      <Divider className="bg-gray-300 dark:bg-slate-800" />
+      <h1 className="text-xl md:text-2xl break-all">{data.name}</h1>
 
       {/* Magnet link and file list */}
       <div className="grid grid-cols-1 gap-5">
+        {/* Torrent details card */}
+        <Card className="bg-opacity-80">
+          <CardHeader className="flex py-2 bg-gray-100 dark:bg-slate-800">
+            {t("Detail.details")}
+          </CardHeader>
+          <Divider className="bg-gray-200 dark:bg-slate-700" />
+          <CardBody>
+            <div className="flex flex-col gap-y-[2px] break-all text-xs md:text-sm text-gray-600">
+              <span>
+                {t("Search.file_size")}
+                {formatByteSize(data.size)}
+              </span>
+              <span>
+                {t("Search.file_count")}
+                {data.files.length}
+              </span>
+              <span>
+                {t("Search.created_at")}
+                {formatDate(data.created_at, t("COMMON.DATE_FORMAT"))}
+              </span>
+              <span>
+                {t("Search.hash")}
+                <span className="border rounded-sm px-1 font-mono bg-gray-100">
+                  {data.hash}
+                </span>
+              </span>
+            </div>
+          </CardBody>
+        </Card>
+
         {/* Magnet link card */}
         <Card className="bg-opacity-80">
-          <CardHeader className="flex gap-3 bg-gray-100 dark:bg-slate-800">
+          <CardHeader className="flex py-2 bg-gray-100 dark:bg-slate-800">
             {t("Detail.magnet")}
           </CardHeader>
           <Divider className="bg-gray-200 dark:bg-slate-700" />
@@ -50,26 +69,32 @@ export const DetailContent = ({ data }: { data: TorrentItemProps }) => {
               <span className="mr-1 pointer-events-none select-none dark:brightness-90">
                 🧲
               </span>
-              <Link
-                className="text-sm"
-                href={data.magnet_uri}
-                onClick={(e) => {
-                  if ($env.isMobile) {
-                    e.preventDefault();
-                    setClipboard(data.magnet_uri);
-                    Toast.success(t("Toast.copy_success"));
-                  }
-                }}
-              >
+              <Link className="text-sm" href={data.magnet_uri}>
                 {`magnet:?xt=urn:btih:${data.hash}`}
               </Link>
             </div>
+            <div className="mt-1">
+              <Button
+                className="bg-opacity-80"
+                color="primary"
+                radius="sm"
+                size={isXs ? "sm" : "md"}
+                startContent={<CopyIcon />}
+                variant="flat"
+                onClick={() => {
+                  setClipboard(data.magnet_uri);
+                  Toast.success(t("Toast.copy_success"));
+                }}
+              >
+                {t("Detail.copy")}
+              </Button>
+            </div>
           </CardBody>
         </Card>
 
         {/* File list card */}
         <Card className="bg-opacity-80">
-          <CardHeader className="flex gap-3 bg-gray-100 dark:bg-slate-800">
+          <CardHeader className="flex py-2 bg-gray-100 dark:bg-slate-800">
             {t("Detail.file_list")}
           </CardHeader>
           <Divider className="bg-gray-200 dark:bg-slate-700" />
@@ -80,15 +105,16 @@ export const DetailContent = ({ data }: { data: TorrentItemProps }) => {
           <CardFooter className="bg-gray-100 dark:bg-slate-800 p-2 px-3">
             <div className="flex flex-col mr-auto gap-x-2 text-xs text-gray-500 md:flex-row md:mr-0 md:ml-2 md:text-sm">
               <span>
-                {t("Search.file_size", { size: formatByteSize(data.size) })}
+                {t("Search.file_size")}
+                {formatByteSize(data.size)}
               </span>
               <span>
-                {t("Search.file_count", { count: data.files.length })}
+                {t("Search.file_count")}
+                {data.files.length}
               </span>
               <span>
-                {t("Search.created_at", {
-                  time: formatDate(data.created_at, t("COMMON.DATE_FORMAT")),
-                })}
+                {t("Search.created_at")}
+                {formatDate(data.created_at, t("COMMON.DATE_FORMAT"))}
               </span>
             </div>
           </CardFooter>

components/SearchResultsItem.tsx

@@ -82,13 +82,16 @@ export default function SearchResultsItem({
         </Link>
         <div className="flex flex-col mr-auto gap-x-2 text-xs text-gray-500 md:flex-row md:mr-0 md:ml-2 md:text-sm">
           <span>
-            {t("Search.file_size", { size: formatByteSize(data.size) })}
+            {t("Search.file_size")}
+            {formatByteSize(data.size)}
           </span>
-          <span>{t("Search.file_count", { count: data.files.length })}</span>
           <span>
-            {t("Search.created_at", {
-              time: formatDate(data.created_at, t("COMMON.DATE_FORMAT")),
-            })}
+            {t("Search.file_count")}
+            {data.files.length}
+          </span>
+          <span>
+            {t("Search.created_at")}
+            {formatDate(data.created_at, t("COMMON.DATE_FORMAT"))}
           </span>
         </div>
       </CardFooter>

components/Stats.tsx

@@ -1,6 +1,6 @@
 import { Suspense } from "react";
 import { getTranslations } from "next-intl/server";
-import { Tooltip } from "@nextui-org/react";
+import { Tooltip, Spinner } from "@nextui-org/react";
 
 import apiFetch from "@/utils/api";
 import { InfoFilledIcon } from "@/components/icons";
@@ -27,7 +27,7 @@ async function StatsCard() {
           {t("Stats.updated_at", {
             updated_at: formatDate(
               data.updated_at,
-              t("COMMON.DATE_FORMAT_DATE"),
+              t("COMMON.DATE_FORMAT_SHORT"),
             ),
           })}
         </li>
@@ -44,14 +44,14 @@ export function Stats() {
       }}
       closeDelay={0}
       content={
-        <Suspense fallback={<div>Loading...</div>}>
+        <Suspense fallback={<Spinner size="sm" />}>
           <StatsCard />
         </Suspense>
       }
       delay={0}
       radius="sm"
     >
-      <InfoFilledIcon className="cursor-pointer text-stone-500" size={15} />
+      <InfoFilledIcon className="cursor-pointer text-gray-500" size={15} />
     </Tooltip>
   );
 }

components/icons.tsx

@@ -273,7 +273,7 @@ export const MagnetIcon: React.FC<IconSvgProps> = (props: IconSvgProps) => (
   </svg>
 );
 
-export const copyIcon: React.FC<IconSvgProps> = (props: IconSvgProps) => (
+export const CopyIcon: React.FC<IconSvgProps> = (props: IconSvgProps) => (
   <svg
     height="1em"
     viewBox="0 0 448 512"

config/constant.ts

@@ -31,3 +31,11 @@ export const DEFAULT_FILTER_SIZE = "all";
 export const UI_HIDE_PADDING_FILE = true; // https://www.bittorrent.org/beps/bep_0047.html
 
 export const UI_BACKGROUND_ANIMATION = true;
+
+export const UI_BREAKPOINTS = {
+  xs: "(max-width: 649px)",
+  sm: "(min-width: 650px)",
+  md: "(min-width: 960px)",
+  lg: "(min-width: 1280px)",
+  xl: "(min-width: 1400px)",
+};

hooks/useBreakpoints.ts

@@ -0,0 +1,25 @@
+import { useIsSSR } from "@react-aria/ssr";
+import { useMediaQuery } from "react-responsive";
+
+const useBreakpoints = () => {
+  const isSSR = useIsSSR();
+
+  // detect screen size
+  const isXs = useMediaQuery({ query: "(max-width: 649px)" });
+  const isSmUp = useMediaQuery({ query: "(min-width: 650px)" });
+  const isMdUp = useMediaQuery({ query: "(min-width: 960px)" });
+  const isLgUp = useMediaQuery({ query: "(min-width: 1280px)" });
+  const isXlUp = useMediaQuery({ query: "(min-width: 1400px)" });
+
+  // client-side rendering return the actual media query result
+  // server-side rendering return the default value
+  return {
+    isXs: !isSSR && isXs,
+    isSmUp: !isSSR && isSmUp,
+    isMdUp: !isSSR && isMdUp,
+    isLgUp: !isSSR && isLgUp,
+    isXlUp: !isSSR && isXlUp,
+  };
+};
+
+export default useBreakpoints;

i18n/locales/en.json

@@ -1,8 +1,8 @@
 {
   "COMMON": {
-    "DATE_FORMAT": "YYYY-MM-DD HH:mm:ss",
-    "DATE_FORMAT_SHORT": "YYYY-MM-DD HH:mm",
-    "DATE_FORMAT_DATE": "YYYY-MM-DD",
+    "DATE_FORMAT": "MM/DD/YYYY HH:mm:ss",
+    "DATE_FORMAT_SHORT": "MM/DD/YYYY HH:mm",
+    "DATE_FORMAT_DATE": "MM/DD/YYYY",
     "DATE_FORMAT_TIME": "HH:mm:ss"
   },
   "Stats": {
@@ -55,13 +55,16 @@
     "cost_time": "(Processed in {cost_time}ms)",
     "more_files": "…and {count} more files",
     "magnet": "Magnet link",
-    "file_size": "File size: {size}",
-    "file_count": "File count: {count}",
-    "created_at": "Date added: {time}"
+    "file_size": "File size: ",
+    "file_count": "File count: ",
+    "created_at": "Date added: ",
+    "hash": "Hash: "
   },
   "Detail": {
+    "details": "Torrent Details",
     "magnet": "Magnet address",
-    "file_list": "File list"
+    "file_list": "File list",
+    "copy": "Copy Magnet Link"
   },
   "Toast": {
     "keyword_too_short": "Keyword needs to be at least 2 characters",

i18n/locales/zh-CN.json

@@ -1,10 +1,15 @@
 {
-  "COMMON": {},
+  "COMMON": {
+    "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": "统计信息",
     "size": "数据库大小: {size}",
     "total_count": "收录数量: {total_count}",
-    "updated_at": "最后更新日期: {updated_at}"
+    "updated_at": "最后更新: {updated_at}"
   },
   "ERROR_MESSAGE": {
     "INTERNAL_SERVER_ERROR": "发生意外错误",
@@ -48,13 +53,16 @@
     "cost_time": "(用时{cost_time}ms)",
     "more_files": "…还有 {count} 个文件",
     "magnet": "磁力链接",
-    "file_size": "文件大小: {size}",
-    "file_count": "文件数量: {count}",
-    "created_at": "收录时间: {time}"
+    "file_size": "文件大小: ",
+    "file_count": "文件数量: ",
+    "created_at": "收录时间: ",
+    "hash": "哈希值: "
   },
   "Detail": {
+    "details": "资源详情",
     "magnet": "磁链地址",
-    "file_list": "文件列表"
+    "file_list": "文件列表",
+    "copy": "复制磁链"
   },
   "Toast": {
     "keyword_too_short": "关键词需要大于两个字符",

i18n/locales/zh-TW.json

@@ -1,10 +1,15 @@
 {
-  "COMMON": {},
+  "COMMON": {
+    "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": "統計資訊",
     "size": "資料庫大小: {size}",
     "total_count": "收錄數量: {total_count}",
-    "updated_at": "最後更新日期: {updated_at}"
+    "updated_at": "最後更新: {updated_at}"
   },
   "ERROR_MESSAGE": {
     "INTERNAL_SERVER_ERROR": "發生意外錯誤",
@@ -48,13 +53,16 @@
     "cost_time": "(耗時{cost_time}ms)",
     "more_files": "…還有 {count} 個文件",
     "magnet": "磁力連結",
-    "file_size": "文件大小: {size}",
-    "file_count": "文件數量: {count}",
-    "created_at": "收錄時間: {time}"
+    "file_size": "文件大小: ",
+    "file_count": "文件數量: ",
+    "created_at": "收錄時間: ",
+    "hash": "Hash: "
   },
   "Detail": {
+    "details": "資料詳情",
     "magnet": "磁鏈地址",
-    "file_list": "文件列表"
+    "file_list": "文件列表",
+    "copy": "複製磁鏈"
   },
   "Toast": {
     "keyword_too_short": "關鍵字需要大於兩個字元",

package.json

@@ -34,6 +34,7 @@
 		"postcss": "8.4.38",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
+		"react-responsive": "^10.0.0",
 		"tailwind-variants": "0.1.20",
 		"tailwindcss": "3.4.3",
 		"zod": "^3.23.8"

tailwind.config.js

@@ -17,7 +17,7 @@ module.exports = {
     extend: {
       fontFamily: {
         sans: ["var(--font-sans)"],
-        mono: ["var(--font-geist-mono)"],
+        mono: ["var(--font-mono)"],
       },
       keyframes: {
         'fade-in': {