feat: add version display to app sidebar and expose app version globally

- Introduced a new  component to show the application version in the sidebar footer.
- Updated  to define a global constant  from the package.json version.
- Modified  to declare the  constant for TypeScript support.

Author: andrejsshell

apps/web/src/components/app-sidebar.tsx

@@ -5,9 +5,11 @@ import { NavProjects } from "@/components/nav-projects";
 import {
   Sidebar,
   SidebarContent,
+  SidebarFooter,
   SidebarHeader,
   useSidebar,
 } from "@/components/ui/sidebar";
+import { VersionDisplay } from "@/components/version-display";
 import { WorkspaceSwitcher } from "@/components/workspace-switcher";
 import { shortcuts } from "@/constants/shortcuts";
 import { useRegisterShortcuts } from "@/hooks/use-keyboard-shortcuts";
@@ -34,6 +36,9 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
         <NavMain />
         <NavProjects />
       </SidebarContent>
+      <SidebarFooter>
+        <VersionDisplay />
+      </SidebarFooter>
     </Sidebar>
   );
 }

apps/web/src/components/version-display.tsx

@@ -0,0 +1,18 @@
+export function VersionDisplay() {
+  const version = __APP_VERSION__;
+  const changelogUrl =
+    "https://github.com/usekaneo/kaneo/blob/main/CHANGELOG.md";
+
+  return (
+    <div className="flex items-center justify-center px-2 py-1.5">
+      <a
+        href={changelogUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-xs text-muted-foreground hover:text-foreground transition-colors duration-200"
+      >
+        v{version}
+      </a>
+    </div>
+  );
+}

apps/web/src/vite-env.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="vite/client" />
 /// <reference types="vite/types/importMeta.d.ts" />
 
+declare const __APP_VERSION__: string;
+
 interface ImportMetaEnv {
   readonly KANEO_API_URL: string;
 }

apps/web/vite.config.ts

@@ -3,8 +3,12 @@ import tailwindcss from "@tailwindcss/vite";
 import { tanstackRouter } from "@tanstack/router-plugin/vite";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
+import packageJson from "../../package.json";
 
 export default defineConfig({
+  define: {
+    __APP_VERSION__: JSON.stringify(packageJson.version),
+  },
   base: "/",
   plugins: [
     tanstackRouter({ autoCodeSplitting: true }),