From bd969b34d76bea5ed81b6497d611efccae6984c7 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sat, 20 Dec 2025 12:29:54 +0000
Subject: feat: add server version display to mobile app settings (#2276)

- Created useServerVersion hook to fetch server version from /api/version
- Display both app version (from expo-constants) and server version
- Added version info at the bottom of settings page
- Server version shows loading state and handles errors gracefully

Co-authored-by: Claude <noreply@anthropic.com>
---
 apps/mobile/app/dashboard/(tabs)/settings.tsx | 20 ++++++++++++++++++++
 apps/mobile/lib/hooks.ts                      | 23 +++++++++++++++++++++++
 2 files changed, 43 insertions(+)

(limited to 'apps/mobile')

diff --git a/apps/mobile/app/dashboard/(tabs)/settings.tsx b/apps/mobile/app/dashboard/(tabs)/settings.tsx
index 7c1e00d6..db19b6fe 100644
--- a/apps/mobile/app/dashboard/(tabs)/settings.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/settings.tsx
@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { ActivityIndicator, Pressable, Switch, View } from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import { useSharedValue } from "react-native-reanimated";
+import Constants from "expo-constants";
 import { Link } from "expo-router";
 import { Button } from "@/components/ui/Button";
 import ChevronRight from "@/components/ui/ChevronRight";
@@ -9,6 +10,7 @@ import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import { Divider } from "@/components/ui/Divider";
 import PageTitle from "@/components/ui/PageTitle";
 import { Text } from "@/components/ui/Text";
+import { useServerVersion } from "@/lib/hooks";
 import { useSession } from "@/lib/session";
 import useAppSettings from "@/lib/settings";
 import { api } from "@/lib/trpc";
@@ -30,6 +32,11 @@ export default function Dashboard() {
   }, [settings]);
 
   const { data, error, isLoading } = api.users.whoami.useQuery();
+  const {
+    data: serverVersion,
+    isLoading: isServerVersionLoading,
+    error: serverVersionError,
+  } = useServerVersion();
 
   if (error?.data?.code === "UNAUTHORIZED") {
     logout();
@@ -141,6 +148,19 @@ export default function Dashboard() {
         >
           <Text>Log Out</Text>
         </Button>
+        <View className="mt-4 w-full gap-1">
+          <Text className="text-center text-sm text-muted-foreground">
+            App Version: {Constants.expoConfig?.version ?? "unknown"}
+          </Text>
+          <Text className="text-center text-sm text-muted-foreground">
+            Server Version:{" "}
+            {isServerVersionLoading
+              ? "Loading..."
+              : serverVersionError
+                ? "unavailable"
+                : (serverVersion ?? "unknown")}
+          </Text>
+        </View>
       </View>
     </CustomSafeAreaView>
   );
diff --git a/apps/mobile/lib/hooks.ts b/apps/mobile/lib/hooks.ts
index 38ecebea..3540df23 100644
--- a/apps/mobile/lib/hooks.ts
+++ b/apps/mobile/lib/hooks.ts
@@ -1,4 +1,5 @@
 import { ImageURISource } from "react-native";
+import { useQuery } from "@tanstack/react-query";
 
 import useAppSettings from "./settings";
 import { buildApiHeaders } from "./utils";
@@ -10,3 +11,25 @@ export function useAssetUrl(assetId: string): ImageURISource {
     headers: buildApiHeaders(settings.apiKey, settings.customHeaders),
   };
 }
+
+export function useServerVersion() {
+  const { settings } = useAppSettings();
+
+  return useQuery({
+    queryKey: ["serverVersion", settings.address],
+    queryFn: async () => {
+      const response = await fetch(`${settings.address}/api/version`, {
+        headers: buildApiHeaders(settings.apiKey, settings.customHeaders),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Failed to fetch server version: ${response.status}`);
+      }
+
+      const data = await response.json();
+      return data.version as string;
+    },
+    enabled: !!settings.address,
+    staleTime: 1000 * 60 * 5, // Cache for 5 minutes
+  });
+}
-- 
cgit v1.2.3-70-g09d2