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>

1 files changed, 23 insertions, 0 deletions

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
+  });
+}