feat : Add version settings and API endpoint to display application version

src/app/(main)/settings/preferences/PreferenceSettings.tsx

@@ -4,6 +4,7 @@ import { DateRangeSetting } from './DateRangeSetting';
 import { LanguageSetting } from './LanguageSetting';
 import { ThemeSetting } from './ThemeSetting';
 import { TimezoneSetting } from './TimezoneSetting';
+import { VersionSetting } from './VersionSetting';
 
 export function PreferenceSettings() {
   const { user } = useLoginQuery();
@@ -31,6 +32,10 @@ export function PreferenceSettings() {
         <Label>{formatMessage(labels.theme)}</Label>
         <ThemeSetting />
       </Column>
+      <Column>
+        <Label>{formatMessage(labels.version)}</Label>
+        <VersionSetting />
+      </Column>
     </Column>
   );
 }

src/app/(main)/settings/preferences/VersionSetting.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { Text } from '@umami/react-zen';
+import { useEffect, useState } from 'react';
+
+export function VersionSetting() {
+  const [version, setVersion] = useState<string>('');
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchVersion = async () => {
+      try {
+        const response = await fetch('/api/version');
+        const data = await response.json();
+        setVersion(data.version || 'unknown');
+      } catch (error) {
+        setVersion('unknown');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchVersion();
+  }, []);
+
+  if (loading) {
+    return <Text>Loading...</Text>;
+  }
+
+  return <Text>{version}</Text>;
+}

src/app/api/version/route.ts

@@ -0,0 +1,35 @@
+import { readFile } from 'fs/promises';
+import { join } from 'path';
+import { parseRequest } from '@/lib/request';
+import { json } from '@/lib/response';
+
+let cachedVersion: string | null = null;
+
+async function getVersion(): Promise<string> {
+  if (cachedVersion) {
+    return cachedVersion;
+  }
+
+  try {
+    const packageJsonPath = join(process.cwd(), 'package.json');
+    const data = await readFile(packageJsonPath, 'utf-8');
+    const packageJson = JSON.parse(data);
+    cachedVersion = packageJson.version || 'unknown';
+  } catch (error) {
+    cachedVersion = 'unknown';
+  }
+
+  return cachedVersion;
+}
+
+export async function GET(request: Request) {
+  const { error } = await parseRequest(request, null, { skipAuth: true });
+
+  if (error) {
+    return error();
+  }
+
+  const version = await getVersion();
+
+  return json({ version });
+}

src/components/messages.ts

@@ -351,6 +351,7 @@ export const labels = defineMessages({
   growth: { id: 'label.growth', defaultMessage: 'Growth' },
   account: { id: 'label.account', defaultMessage: 'Account' },
   application: { id: 'label.application', defaultMessage: 'Application' },
+  version: { id: 'label.version', defaultMessage: 'Version' },
   saveSegment: { id: 'label.save-segment', defaultMessage: 'Save as segment' },
   saveCohort: { id: 'label.save-cohort', defaultMessage: 'Save as cohort' },
   analysis: { id: 'label.analysis', defaultMessage: 'Analysis' },