From bba6bcd778cb0828fdf891b90172ae20757c3d00 Mon Sep 17 00:00:00 2001
From: jarvis2f <137974272+jarvis2f@users.noreply.github.com>
Date: Mon, 23 Dec 2024 14:17:58 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Added=20an=20About=20page?=
 =?UTF-8?q?=20and=20updated=20the=20settings=20dialog=20to=20include=20new?=
 =?UTF-8?q?=20options.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/telegram/files/HttpVerticle.java     |   3 +-
 web/src/components/about.tsx                  | 119 ++++++++++++++++++
 web/src/components/settings-dialog.tsx        |   9 +-
 3 files changed, 128 insertions(+), 3 deletions(-)
 create mode 100644 web/src/components/about.tsx

diff --git a/api/src/main/java/telegram/files/HttpVerticle.java b/api/src/main/java/telegram/files/HttpVerticle.java
index 7ac62d3..fbca5f2 100644
--- a/api/src/main/java/telegram/files/HttpVerticle.java
+++ b/api/src/main/java/telegram/files/HttpVerticle.java
@@ -111,8 +111,9 @@ public class HttpVerticle extends AbstractVerticle {
         HealthChecks hc = HealthChecks.create(vertx);
         hc.register("http-server", Promise::complete);
 
-        router.get("/health").handler(HealthCheckHandler.createWithHealthChecks(hc));
         router.get("/").handler(ctx -> ctx.response().end("Hello World!"));
+        router.get("/health").handler(HealthCheckHandler.createWithHealthChecks(hc));
+        router.get("/version").handler(ctx -> ctx.json(new JsonObject().put("version", Start.VERSION)));
         router.route("/ws").handler(this::handleWebSocket);
 
         router.get("/settings").handler(this::handleSettings);
diff --git a/web/src/components/about.tsx b/web/src/components/about.tsx
new file mode 100644
index 0000000..f04ee99
--- /dev/null
+++ b/web/src/components/about.tsx
@@ -0,0 +1,119 @@
+import React from "react";
+import useSWR from "swr";
+import { Github, RefreshCw } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { request } from "@/lib/api";
+import Link from "next/link";
+
+interface VersionData {
+  version: string;
+}
+
+interface GitHubReleaseData {
+  tag_name: string;
+}
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+export default function About() {
+  const { data: apiData, error: apiError } = useSWR<VersionData, Error>(
+    "/version",
+    request,
+  );
+  const { data: githubData, error: githubError } = useSWR<
+    GitHubReleaseData,
+    Error
+  >(
+    "https://api.github.com/repos/jarvis2f/telegram-files/releases/latest",
+    fetcher,
+  );
+
+  const projectInfo = {
+    repository: "https://github.com/jarvis2f/telegram-files",
+    author: "Jarvis2f",
+  };
+
+  const currentVersion = apiData?.version ?? "Unknown";
+  const isNewVersionAvailable =
+    githubData && githubData.tag_name !== currentVersion;
+
+  return (
+    <div className="flex h-full items-center justify-center">
+      <Card className="w-full bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))] from-[#7900ff] via-[#548cff] to-[#93ffd8] md:w-1/2">
+        <CardHeader>
+          <CardTitle className="text-white">About This Project</CardTitle>
+          <CardDescription className="text-white">
+            A simple telegram file downloader.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            <div className="flex flex-col items-center justify-center">
+              <p className="text-sm font-medium text-white">Author</p>
+              <p>{projectInfo.author}</p>
+            </div>
+
+            <div className="flex flex-col items-center justify-center">
+              <p className="mb-1 text-sm font-medium text-white">
+                Current Version
+              </p>
+              {apiError ? (
+                <p className="text-red-500">Failed to load current version</p>
+              ) : !apiData ? (
+                <div className="flex items-center space-x-2">
+                  <RefreshCw className="animate-spin text-white" size={16} />
+                  <span>Loading...</span>
+                </div>
+              ) : (
+                <p className="rounded bg-gray-100 px-3">{currentVersion}</p>
+              )}
+            </div>
+
+            <div className="flex flex-col items-center justify-center">
+              <p className="mb-1 text-sm font-medium text-white">
+                Latest Version
+              </p>
+              {githubError ? (
+                <p className="text-red-500">Failed to load release data</p>
+              ) : !githubData ? (
+                <div className="flex items-center space-x-2">
+                  <RefreshCw className="animate-spin text-white" size={16} />
+                  <span>Loading...</span>
+                </div>
+              ) : (
+                <p className="rounded bg-gray-100 px-3">
+                  {githubData.tag_name}
+                </p>
+              )}
+            </div>
+
+            {isNewVersionAvailable && (
+              <div className="border-l-4 border-gray-700 bg-white px-4 py-2">
+                <p className="text-gray-800">
+                  A new version ({githubData?.tag_name}) is available! Update
+                  now.
+                </p>
+              </div>
+            )}
+
+            <div className="flex items-center justify-center space-x-2">
+              <Link
+                href={projectInfo.repository}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Github className="h-6 w-6" />
+              </Link>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/web/src/components/settings-dialog.tsx b/web/src/components/settings-dialog.tsx
index 4e80918..75bc5ed 100644
--- a/web/src/components/settings-dialog.tsx
+++ b/web/src/components/settings-dialog.tsx
@@ -13,6 +13,7 @@ import FileStatistics from "@/components/file-statistics";
 import { useTelegramAccount } from "@/hooks/use-telegram-account";
 import Proxys from "@/components/proxys";
 import SettingsForm from "@/components/settings-form";
+import About from "@/components/about";
 
 export const SettingsDialog: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -46,11 +47,12 @@ export const SettingsDialog: React.FC = () => {
             <TabsTrigger value="general">General</TabsTrigger>
             <TabsTrigger value="statistics">Statistics</TabsTrigger>
             <TabsTrigger value="proxys">Proxys</TabsTrigger>
+            <TabsTrigger value="about">About</TabsTrigger>
           </TabsList>
           <TabsContent value="general" className="overflow-hidden">
             <SettingsForm />
           </TabsContent>
-          <TabsContent value="statistics" className="h-full">
+          <TabsContent value="statistics" className="h-full overflow-hidden">
             <div className="flex flex-col overflow-y-scroll">
               {accountId ? (
                 <FileStatistics telegramId={accountId} />
@@ -63,7 +65,7 @@ export const SettingsDialog: React.FC = () => {
               )}
             </div>
           </TabsContent>
-          <TabsContent value="proxys" className="h-full">
+          <TabsContent value="proxys" className="h-full overflow-hidden">
             <div className="flex h-full flex-col overflow-y-scroll">
               <Proxys
                 telegramId={accountId}
@@ -72,6 +74,9 @@ export const SettingsDialog: React.FC = () => {
               />
             </div>
           </TabsContent>
+          <TabsContent value="about" className="h-full overflow-hidden">
+            <About />
+          </TabsContent>
         </Tabs>
       </DialogContent>
     </Dialog>