display app version via tauri api

new-ui/src/shared/components/WindowHeader/WindowHeader.tsx

@@ -1,20 +1,36 @@
 import clsx from 'clsx';
 import './style.scss';
+import { useQuery } from '@tanstack/react-query';
+import { getVersion } from '@tauri-apps/api/app';
 import { useId } from 'react';
+import { isPresent } from '../../utils/isPresent';
 import { ConnectionWatcher } from './components/ConnectionWatcher/ConnectionsWatcher';
 
 interface Props {
   variant: 'compact' | 'desktop';
 }
 
 export const WindowHeader = ({ variant }: Props) => {
+  const { data: appVersion } = useQuery({
+    queryFn: getVersion,
+    queryKey: ['app-version'],
+  });
+
+  const version = () => {
+    if (appVersion) {
+      return `Version ${appVersion}`;
+    }
+  };
+
   return (
     <div id="window-header" className={clsx(`variant-${variant}`)}>
       <LogoIcon size={variant === 'desktop' ? 33 : 48} />
       <div className="info">
         <p className="label">Defguard VPN Client</p>
         {variant === 'compact' && <ConnectionWatcher />}
-        {variant === 'desktop' && <p className="version">{`Version placeholder`}</p>}
+        {variant === 'desktop' && isPresent(appVersion) && (
+          <p className="version">{version()}</p>
+        )}
       </div>
       {variant === 'desktop' && (
         <div className="right">

new-ui/src/shared/components/WindowHeader/style.scss

@@ -30,6 +30,7 @@
     flex-flow: column;
     align-items: flex-start;
     row-gap: var(--spacing-xs);
+    user-select: none;
 
     > .label {
       font: var(--t-body-sm-500);