feat: Add BuildInfoCard component

This commit adds a new component called BuildInfoCard. The BuildInfoCard component displays information about the build, including the Git branch, Git hash, build time, and build version. It is used in the SettingPage component.

The packages/client/vite.config.ts file is modified to define environment variables for the build information. The __BUILD_TIME__, __BUILD_VERSION__, __GIT_BRANCH__, and __GIT_HASH__ variables are defined using functions that retrieve the current build time, build version, Git branch, and Git hash respectively.

This commit introduces new functionality and improves the user experience by providing build information in the application.

packages/client/src/components/BuildInfoCard.tsx

@@ -0,0 +1,45 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { getBuildInfo } from "../util/env";
+import { Clock, GitBranch, GitCommit, Tag } from "lucide-react";
+
+export default function BuildInfoCard() {
+  const buildInfo = getBuildInfo();
+
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle className="text-2xl font-bold">Build Information</CardTitle>
+      </CardHeader>
+      <CardContent className="grid gap-4">
+        <div className="flex items-center space-x-4">
+          <GitBranch className="h-5 w-5 text-muted-foreground" />
+          <div>
+            <p className="text-sm font-medium leading-none">Git Branch</p>
+            <p className="text-sm text-muted-foreground">{buildInfo.gitBranch}</p>
+          </div>
+        </div>
+        <div className="flex items-center space-x-4">
+          <GitCommit className="h-5 w-5 text-muted-foreground" />
+          <div>
+            <p className="text-sm font-medium leading-none">Git Hash</p>
+            <p className="text-sm text-muted-foreground">{buildInfo.gitHash}</p>
+          </div>
+        </div>
+        <div className="flex items-center space-x-4">
+          <Clock className="h-5 w-5 text-muted-foreground" />
+          <div>
+            <p className="text-sm font-medium leading-none">Build Time</p>
+            <p className="text-sm text-muted-foreground">{buildInfo.buildTime}</p>
+          </div>
+        </div>
+        <div className="flex items-center space-x-4">
+          <Tag className="h-5 w-5 text-muted-foreground" />
+          <div>
+            <p className="text-sm font-medium leading-none">Build Version</p>
+            <p className="text-sm text-muted-foreground">{buildInfo.buildVersion}</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

packages/client/src/page/settingPage.tsx

@@ -2,6 +2,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { type TernaryDarkMode, useTernaryDarkMode, useMediaQuery } from "usehooks-ts";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Label } from "@/components/ui/label";
+import BuildInfoCard from "@/components/BuildInfoCard";
 
 function LightModeView() {
     return <div className="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
@@ -46,7 +47,7 @@ export function SettingPage() {
     const isSystemDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
 
     return (
-        <div className="p-4">
+        <div className="p-4 space-y-2">
             <Card>
                 <CardHeader>
                     <CardTitle className="text-2xl">Settings</CardTitle>
@@ -85,6 +86,7 @@ export function SettingPage() {
                     </div>
                 </CardContent>
             </Card>
+            <BuildInfoCard />
         </div>
     )
 }

packages/client/src/util/env.ts

@@ -0,0 +1,13 @@
+declare const __GIT_BRANCH__: string;
+declare const __GIT_HASH__: string;
+declare const __BUILD_TIME__: string;
+declare const __BUILD_VERSION__: string;
+
+export function getBuildInfo() {
+  return {
+    gitBranch: __GIT_BRANCH__,
+    gitHash: __GIT_HASH__,
+    buildTime: __BUILD_TIME__,
+    buildVersion: __BUILD_VERSION__,
+  };
+}

packages/client/vite.config.ts

@@ -2,11 +2,41 @@ import { defineConfig, loadEnv } from 'vite'
 import path from 'node:path'
 import react from '@vitejs/plugin-react-swc'
 
+import { execSync } from "child_process";
+
+function getCurrentGitHash(): string {
+  const gitHash = execSync("git rev-parse HEAD")
+    .toString()
+    .trim();
+  return gitHash;
+}
+
+function getBuildTime(): string {
+  return new Date().toISOString();
+}
+
+function getBuildVersion(): string {
+  return process.env.BUILD_VERSION ?? getCurrentGitHash();
+}
+
+function getCurrentGitBranch(): string {
+  const gitBranch = execSync("git rev-parse --abbrev-ref HEAD")
+    .toString()
+    .trim();
+  return gitBranch;
+}
+
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), "");
   return {
   plugins: [react()],
+  define: {
+    __BUILD_TIME__: `"${getBuildTime()}"`,
+    __BUILD_VERSION__: `"${getBuildVersion()}"`,
+    __GIT_BRANCH__: `"${getCurrentGitBranch()}"`,
+    __GIT_HASH__: `"${getCurrentGitHash()}"`,
+  },
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),