feat(navbar): implement ui and dataset version display

Author: jsrwell

src/entities/vehicle/api/use-vehicles.ts

@@ -11,3 +11,13 @@ export function useVehicles() {
     select: (data) => data.vehicles,
   });
 }
+
+export function useVehicleMetadata() {
+  return useQuery({
+    queryKey: ['vehicles'],
+    queryFn: fetchLatestVehicles,
+    staleTime: APP_CONSTANTS.CACHE.STALE_TIME_MS,
+    gcTime: APP_CONSTANTS.CACHE.GC_TIME_MS,
+    select: (data) => data.metadata,
+  });
+}

src/vite-env.d.ts

@@ -4,3 +4,5 @@ declare module '*.txt?raw' {
   const content: string;
   export default content;
 }
+
+declare const __APP_VERSION__: string;

src/widgets/LayoutHeader/ui/LayoutHeader.module.css

@@ -74,6 +74,22 @@
   align-items: center;
 }
 
+.versionInfo {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  margin-right: var(--space-2);
+  line-height: 1.2;
+}
+
+.versionText {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  font-family: var(--font-mono);
+  white-space: nowrap;
+}
+
 /* Mobile */
 @media (max-width: 768px) {
   .header {
@@ -110,6 +126,10 @@
   .contributeButton > span {
     display: none !important;
   }
+
+  .versionInfo {
+    display: none;
+  }
 }
 
 .contributeButton {

src/widgets/LayoutHeader/ui/LayoutHeader.tsx

@@ -8,7 +8,10 @@ import styles from './LayoutHeader.module.css';
 import { Info, Github } from 'lucide-react';
 import { AboutModal } from '@/widgets/AboutModal';
 
+import { useVehicleMetadata } from '@/entities/vehicle/api/use-vehicles';
+
 export function LayoutHeader({ className }: { className?: string }) {
+  const { data: metadata } = useVehicleMetadata();
   const [isAboutModalOpen, setIsAboutModalOpen] = useState(() => {
     try {
       const hasSeen = localStorage.getItem('hasSeenAboutModal');
@@ -36,6 +39,19 @@ export function LayoutHeader({ className }: { className?: string }) {
           <SearchBar />
         </div>
         <div className={styles.actions}>
+          <div className={styles.versionInfo}>
+            <span className={styles.versionText} title={`UI Version: v${__APP_VERSION__}`}>
+              UI v{__APP_VERSION__}
+            </span>
+            {metadata && (
+              <span
+                className={styles.versionText}
+                title={`Dataset Commit: ${metadata.dataset_commit}`}
+              >
+                Data v{metadata.etl_version}
+              </span>
+            )}
+          </div>
           <Button
             variant="ghost"
             size="sm"

vite.config.ts

@@ -5,6 +5,9 @@ import path from 'path';
 // https://vite.dev/config/
 export default defineConfig({
   base: '/open-ev-data-ui/',
+  define: {
+    __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
+  },
   plugins: [react()],
   resolve: {
     alias: {