feat: add ui version to sidebar footer

ui/admin/app/components/sidebar/Sidebar.tsx

@@ -1,26 +1,30 @@
 import {
     BotIcon,
     BoxesIcon,
+    InfoIcon,
     KeyIcon,
     MessageSquare,
     PuzzleIcon,
-    SettingsIcon,
     User,
     WebhookIcon,
     Wrench,
 } from "lucide-react";
 import { Link, useLocation } from "react-router";
 import { $path } from "safe-routes";
+import useSWR from "swr";
 
+import { VersionApiService } from "~/lib/service/api/versionApiService";
 import { cn } from "~/lib/utils";
 
+import { TypographyMuted, TypographySmall } from "~/components/Typography";
 import { ObotLogo } from "~/components/branding/ObotLogo";
 import { Button } from "~/components/ui/button";
 import {
     Popover,
     PopoverContent,
     PopoverTrigger,
 } from "~/components/ui/popover";
+import { Separator } from "~/components/ui/separator";
 import {
     Sidebar,
     SidebarContent,
@@ -131,39 +135,48 @@ export function AppSidebar() {
                     </SidebarGroupContent>
                 </SidebarGroup>
             </SidebarContent>
+            <SidebarFooter>
+                <VersionInfo />
+            </SidebarFooter>
         </Sidebar>
     );
 }
 
-// disabling this because this will inevitably be used in the future
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function AppSidebarFooter() {
+function VersionInfo() {
     const { state } = useSidebar();
-    return (
-        <SidebarFooter
-            className={cn(
-                "pb-4 bg-background",
-                state === "collapsed" ? "" : "px-2"
-            )}
-        >
-            <Popover>
-                <PopoverTrigger asChild>
-                    <SidebarMenuButton className="w-full flex items-center">
-                        <SettingsIcon className="mr-2" /> Settings
-                    </SidebarMenuButton>
-                </PopoverTrigger>
-                <PopoverContent side="right" align="end">
-                    <Button variant="secondary" asChild className="w-full">
-                        <Link
-                            to={$path("/oauth-apps")}
-                            className="flex items-center p-2 hover:bg-accent rounded-md"
-                        >
-                            <KeyIcon className="mr-2 h-4 w-4" />
-                            <span>Manage OAuth Apps</span>
-                        </Link>
-                    </Button>
-                </PopoverContent>
-            </Popover>
-        </SidebarFooter>
+    const getVersion = useSWR(VersionApiService.getVersion.key(), () =>
+        VersionApiService.getVersion()
     );
+
+    const { data: version } = getVersion;
+    const versionEntries = Object.entries(version ?? {});
+    return version?.obot ? (
+        <Popover>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    startContent={<InfoIcon />}
+                    className="text-muted-foreground"
+                >
+                    {state !== "collapsed" ? version.obot : null}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-fit min-w-44 p-2">
+                <div>
+                    {versionEntries.map(([key, value], index) =>
+                        value ? (
+                            <div key={key}>
+                                <TypographyMuted>{key}:</TypographyMuted>
+                                <TypographySmall>{value}</TypographySmall>
+                                {index !== versionEntries.length - 1 && (
+                                    <Separator className="my-2" />
+                                )}
+                            </div>
+                        ) : null
+                    )}
+                </div>
+            </PopoverContent>
+        </Popover>
+    ) : null;
 }

ui/admin/app/lib/model/version.ts

@@ -0,0 +1,4 @@
+export type Version = {
+    obot: string;
+    [key: string]: string;
+};

ui/admin/app/lib/routers/apiRoutes.ts

@@ -217,6 +217,7 @@ export const ApiRoutes = {
             buildUrl(`/webhooks/${webhookId}`),
         invoke: (webhookId: string) => buildUrl(`/webhooks/${webhookId}`),
     },
+    version: () => buildUrl("/version"),
 };
 
 /** revalidates the cache for all routes that match the filter callback

ui/admin/app/lib/service/api/versionApiService.ts

@@ -0,0 +1,17 @@
+import { Version } from "~/lib/model/version";
+import { ApiRoutes } from "~/lib/routers/apiRoutes";
+import { request } from "~/lib/service/api/primitives";
+
+async function getVersion() {
+    const res = await request<Version>({
+        url: ApiRoutes.version().url,
+        errorMessage: "Failed to fetch app version.",
+    });
+
+    return res.data;
+}
+getVersion.key = () => ({ url: ApiRoutes.version().path }) as const;
+
+export const VersionApiService = {
+    getVersion,
+};