From b10cd4ac79fa9ff088de50c79876ed563044fe99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20=C5=9Al=C4=99zak?= <fslezak@teonite.com>
Date: Mon, 22 Jun 2026 14:45:01 +0200
Subject: [PATCH] display app version via tauri api

---
 .../components/WindowHeader/WindowHeader.tsx   | 18 +++++++++++++++++-
 .../shared/components/WindowHeader/style.scss  |  1 +
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/new-ui/src/shared/components/WindowHeader/WindowHeader.tsx b/new-ui/src/shared/components/WindowHeader/WindowHeader.tsx
index 094fc7e9..dd7073bd 100644
--- a/new-ui/src/shared/components/WindowHeader/WindowHeader.tsx
+++ b/new-ui/src/shared/components/WindowHeader/WindowHeader.tsx
@@ -1,6 +1,9 @@
 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 {
@@ -8,13 +11,26 @@ interface Props {
 }
 
 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">
diff --git a/new-ui/src/shared/components/WindowHeader/style.scss b/new-ui/src/shared/components/WindowHeader/style.scss
index 4fefee13..f65046d6 100644
--- a/new-ui/src/shared/components/WindowHeader/style.scss
+++ b/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);