feat: show version number on header

src/main.rs

@@ -2154,13 +2154,18 @@ mod responses {
         pub columns: Vec<String>,
         pub rows: Vec<Vec<serde_json::Value>>,
     }
+
+    #[derive(Serialize)]
+    pub struct Version {
+        pub version: String,
+    }
 }
 
 mod handlers {
     use serde::Deserialize;
     use warp::Filter;
 
-    use crate::{rejections, Database};
+    use crate::{rejections, responses::Version, Database};
 
     fn with_state<T: Clone + Send>(
         state: &T,
@@ -2194,8 +2199,9 @@ mod handlers {
             .and(warp::path!("query"))
             .and(warp::body::json::<QueryBody>())
             .and_then(query);
+        let version = warp::get().and(warp::path!("version")).and_then(version);
 
-        overview.or(tables).or(table).or(query).or(data)
+        overview.or(tables).or(table).or(query).or(data).or(version)
     }
 
     #[derive(Deserialize)]
@@ -2257,6 +2263,14 @@ mod handlers {
             .map_err(|_| warp::reject::custom(rejections::InternalServerError))?;
         Ok(warp::reply::json(&tables))
     }
+
+    async fn version() -> Result<impl warp::Reply, warp::Rejection> {
+        let version = Version {
+            version: env!("CARGO_PKG_VERSION").to_owned(),
+        };
+
+        Ok(warp::reply::json(&version))
+    }
 }
 
 mod rejections {

ui/src/api.ts

@@ -57,6 +57,10 @@ const query = z.object({
   rows: z.any().array().array(),
 });
 
+const version = z.object({
+  version: z.string(),
+});
+
 const $fetch = createZodFetcher();
 
 export const fetchOverview = () => $fetch(overview, `${BASE_URL}/`);
@@ -74,3 +78,4 @@ export const fetchQuery = (value: string) =>
     },
     body: JSON.stringify({ query: value }),
   });
+export const fetchVersion = () => $fetch(version, `${BASE_URL}/version`);

ui/src/routes/__root.tsx

@@ -12,6 +12,8 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 import { setTheme, useTheme } from "@/provider/theme.provider";
+import { useQuery } from "@tanstack/react-query";
+import { fetchVersion } from "@/api";
 
 const TanStackRouterDevtools = import.meta.env.PROD
   ? () => null // Render nothing in production
@@ -30,6 +32,12 @@ export const Route = createRootRoute({
 export function Root() {
   const theme = useTheme();
   const changeTheme = setTheme();
+
+  const { data } = useQuery({
+    queryKey: ["version"],
+    queryFn: () => fetchVersion(),
+  });
+
   return (
     <>
       <div
@@ -71,6 +79,9 @@ export function Root() {
           </Link>
 
           <div className="flex gap-4 items-center">
+            <p className="text-primary hidden sm:block text-xs text-right">
+              [{data?.version ?? ""}]
+            </p>
             <button
               className="text-foreground "
               onClick={() => {