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