feat: add about page

web/src/components/layouts/root-layout.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { NavLink } from "react-router";
 import { Outlet } from "react-router-dom";
 import { LanguageSwitcher } from "@/components/language-switcher";
@@ -5,12 +6,12 @@ import { ModeToggle } from "@/components/mode-toggle.tsx";
 import { ThemeProvider } from "@/components/theme-provider.tsx";
 import { Button } from "@/components/ui/button";
 import { Toaster } from "@/components/ui/sonner";
-import VersionBadge from "@/components/version-badge";
 import { GitHubIcon } from "@/icon";
 import { siteConfig } from "@/lib/config";
 import { MobileNav } from "../modile-nav";
 
 export default function RootLayout() {
+  const { t } = useTranslation("common");
   return (
     <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
       <Toaster />
@@ -19,25 +20,29 @@ export default function RootLayout() {
           <div className="flex items-center gap-2">
             <MobileNav className="flex lg:hidden" items={siteConfig.navItems} />
             <div className="hidden lg:flex">
-              <NavLink to="/" className="text-base sm:text-lg font-semibold text-center">
-                MemShellParty
+              <NavLink
+                to="/"
+                className="text-base sm:text-lg font-semibold text-center"
+              >
+                {siteConfig.name}
               </NavLink>
             </div>
             <nav className="items-center gap-0.5 hidden lg:flex">
               {siteConfig.navItems.map((item) => (
                 <Button key={item.href} variant="ghost" size="sm" asChild>
-                  <NavLink to={item.href}>{item.label}</NavLink>
+                  <NavLink to={item.href}>{t(item.label)}</NavLink>
                 </Button>
               ))}
             </nav>
             <div className="ml-auto flex items-center gap-2 md:flex-1 md:justify-end">
-              <VersionBadge />
               <LanguageSwitcher />
               <Button
                 variant="ghost"
                 size="icon"
                 className="size-8"
-                onClick={() => window.open("https://github.com/ReaJason/MemShellParty")}
+                onClick={() =>
+                  window.open("https://github.com/ReaJason/MemShellParty")
+                }
               >
                 <GitHubIcon />
               </Button>

web/src/components/ui/avatar.tsx

@@ -0,0 +1,51 @@
+import * as React from "react"
+import {Avatar as AvatarPrimitive} from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

web/src/components/version-badge.tsx

@@ -1,90 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { CircleX, LoaderCircle, RefreshCcw } from "lucide-react";
-import type React from "react";
-import { useTranslation } from "react-i18next";
-import { env } from "@/config";
-import { Button } from "./ui/button";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
-
-type VersionInfo = {
-  currentVersion: string;
-  latestVersion: string;
-  hasUpdate: boolean;
-};
-
-const VersionBadge: React.FC = () => {
-  const { isPending, data, isError } = useQuery<VersionInfo>({
-    queryKey: ["version"],
-    queryFn: async () => {
-      const response = await fetch(`${env.API_URL}/version`);
-      if (response.ok) {
-        return await response.json();
-      }
-      return "unknown";
-    },
-  });
-  const inProduction = env.MODE === "production";
-  const { t } = useTranslation();
-
-  return (
-    <div className="flex items-center space-x-2">
-      {isPending && (
-        <Button className="rounded-full" size="sm" variant="ghost">
-          <LoaderCircle className="h-3.5 w-3.5 animate-spin" />
-        </Button>
-      )}
-      {isError && (
-        <Button
-          className="rounded-full"
-          size="sm"
-          variant="ghost"
-          onClick={() => {
-            window.open("https://github.com/ReaJason/MemShellParty/releases");
-          }}
-        >
-          <CircleX className="h-3.5 w-3.5" />
-        </Button>
-      )}
-      {data?.hasUpdate && inProduction && (
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                className="rounded-full bg-yellow-500 text-white hover:bg-yellow-600 hover:text-white"
-                size="sm"
-                variant="ghost"
-                onClick={() => {
-                  window.open(`https://github.com/ReaJason/MemShellParty/releases/tag/v${data.latestVersion}`);
-                }}
-              >
-                <span className="flex items-center gap-1">
-                  <RefreshCcw className="h-3.5 w-3.5" />
-                  {t("version.updateAvailable")}
-                </span>
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>
-                {t("version.updateAvailableTooltip", {
-                  currentVersion: data.currentVersion,
-                  latestVersion: data.latestVersion,
-                })}
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      )}
-      {data && (!data.hasUpdate || !inProduction) && (
-        <Button
-          className="rounded-full text-xs bg-green-500 text-white hover:bg-green-600 hover:text-white"
-          size="sm"
-          variant="ghost"
-        >
-          <span>v{data?.currentVersion}</span>
-        </Button>
-      )}
-    </div>
-  );
-};
-
-export default VersionBadge;