feat: add version badge in ui

web/src/components/version-badge.tsx

@@ -0,0 +1,30 @@
+import { env } from "@/config";
+import { useQuery } from "@tanstack/react-query";
+import { LoaderCircle } from "lucide-react";
+import type React from "react";
+import { Button } from "./ui/button";
+
+const VersionBadge: React.FC = () => {
+  const { isPending, data } = useQuery<string>({
+    queryKey: ["version"],
+    queryFn: async () => {
+      const response = await fetch(`${env.API_URL}/version`);
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      return await response.text();
+    },
+  });
+
+  return (
+    <div className="flex items-center space-x-2">
+      <Button
+        className={`rounded-full ${data && "bg-green-500 text-white"}`}
+        size="sm"
+        variant={isPending ? "ghost" : "default"}
+      >
+        {isPending ? <LoaderCircle className="h-3.5 w-3.5 animate-spin" /> : <span>v{data}</span>}
+      </Button>
+    </div>
+  );
+};
+
+export default VersionBadge;

web/src/routes/__root.tsx

@@ -2,6 +2,7 @@ import { LanguageSwitcher } from "@/components/language-switcher";
 import { ModeToggle } from "@/components/mode-toggle.tsx";
 import { ThemeProvider } from "@/components/theme-provider.tsx";
 import { Button } from "@/components/ui/button.tsx";
+import VersionBadge from "@/components/version-badge";
 import { Outlet, createRootRoute } from "@tanstack/react-router";
 
 export const Route = createRootRoute({
@@ -18,6 +19,7 @@ function RootComponent() {
               <h2 className="text-lg font-semibold">MemShellParty - JavaWeb</h2>
             </div>
             <div className="flex gap-1 mr-4">
+              <VersionBadge />
               <LanguageSwitcher />
               <Button
                 variant="ghost"