feat: Add new version notification in footer

This commit implements a system to check for new application versions and notify the user.

On page load, the server-side code now fetches the latest release from the GitHub repository API. It uses `semver` to compare the current application version with the latest release tag.

If a newer version is available, an alert is displayed in the footer with a link to the release page. The current application version is also now displayed in the footer. The version check is cached for one hour to minimize API requests.

package.json

@@ -1,5 +1,6 @@
 {
 	"name": "open-archiver",
+	"version": "0.3.0",
 	"private": true,
 	"scripts": {
 		"dev": "dotenv -- pnpm --filter \"./packages/*\" --parallel dev",

packages/frontend/package.json

@@ -22,6 +22,7 @@
 		"jose": "^6.0.1",
 		"lucide-svelte": "^0.525.0",
 		"postal-mime": "^2.4.4",
+		"semver": "^7.7.2",
 		"svelte-persisted-store": "^0.12.0",
 		"sveltekit-i18n": "^2.4.2",
 		"tailwind-merge": "^3.3.1",
@@ -35,6 +36,7 @@
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"@tailwindcss/vite": "^4.0.0",
 		"@types/d3-shape": "^3.1.7",
+		"@types/semver": "^7.7.1",
 		"dotenv": "^17.2.0",
 		"layerchart": "2.0.0-next.27",
 		"mode-watcher": "^1.1.0",

packages/frontend/src/lib/components/custom/Footer.svelte

@@ -1,18 +1,37 @@
 <script lang="ts">
 	import { t } from '$lib/translations';
+	import * as Alert from '$lib/components/ui/alert';
+	import { Info } from 'lucide-svelte';
+
+	export let currentVersion: string;
+	export let newVersionInfo: { version: string; description: string; url: string } | null = null;
 </script>
 
 <footer class="bg-muted py-6 md:py-0">
-	<div
-		class="container mx-auto flex flex-col items-center justify-center gap-4 md:h-24 md:flex-row"
-	>
+	<div class="container mx-auto flex flex-col items-center justify-center gap-4 py-8 md:flex-row">
 		<div class="flex flex-col items-center gap-2">
+			{#if newVersionInfo}
+				<Alert.Root>
+					<Alert.Title class="flex items-center gap-2">
+						<Info class="h-4 w-4" />
+						{$t('app.components.footer.new_version_available')}
+					</Alert.Title>
+					<Alert.Description>
+						<a href={newVersionInfo.url} target="_blank" class="underline">
+							{newVersionInfo.description}
+						</a>
+					</Alert.Description>
+				</Alert.Root>
+			{/if}
 			<p class="text-balance text-center text-xs font-medium leading-loose">
 				© {new Date().getFullYear()}
 				<a href="https://openarchiver.com/" target="_blank">Open Archiver</a>. {$t(
 					'app.components.footer.all_rights_reserved'
 				)}
 			</p>
+			<p class="text-balance text-center text-xs font-medium leading-loose">
+				Version: {currentVersion}
+			</p>
 		</div>
 	</div>
 </footer>

packages/frontend/src/lib/translations/en.json

@@ -163,7 +163,8 @@
 				"not_available": "Raw .eml file not available for this email."
 			},
 			"footer": {
-				"all_rights_reserved": "All rights reserved."
+				"all_rights_reserved": "All rights reserved.",
+				"new_version_available": "New version available"
 			},
 			"ingestion_source_form": {
 				"provider_generic_imap": "Generic IMAP",

packages/frontend/src/routes/+layout.server.ts

@@ -3,6 +3,11 @@ import type { LayoutServerLoad } from './$types';
 import 'dotenv/config';
 import { api } from '$lib/server/api';
 import type { SystemSettings } from '@open-archiver/types';
+import { version } from '../../../../package.json';
+import semver from 'semver';
+
+let newVersionInfo: { version: string; description: string; url: string } | null = null;
+let lastChecked: Date | null = null;
 
 export const load: LayoutServerLoad = async (event) => {
 	const { locals, url } = event;
@@ -32,10 +37,33 @@ export const load: LayoutServerLoad = async (event) => {
 		? await systemSettingsResponse.json()
 		: null;
 
+	const now = new Date();
+	if (!lastChecked || now.getTime() - lastChecked.getTime() > 1000 * 60 * 60) {
+		try {
+			const res = await fetch('https://api.github.com/repos/LogicLabs-OU/OpenArchiver/releases/latest');
+			if (res.ok) {
+				const latestRelease = await res.json();
+				const latestVersion = latestRelease.tag_name.replace('v', '');
+				if (semver.gt(latestVersion, version)) {
+					newVersionInfo = {
+						version: latestVersion,
+						description: latestRelease.name,
+						url: latestRelease.html_url
+					};
+				}
+			}
+			lastChecked = now;
+		} catch (error) {
+			console.error('Failed to fetch latest version from GitHub:', error);
+		}
+	}
+
 	return {
 		user: locals.user,
 		accessToken: locals.accessToken,
 		isDemo: process.env.IS_DEMO === 'true',
 		systemSettings,
+		currentVersion: version,
+		newVersionInfo: newVersionInfo
 	};
 };

packages/frontend/src/routes/+layout.svelte

@@ -35,5 +35,5 @@
 	<main class="flex-1">
 		{@render children()}
 	</main>
-	<Footer />
+	<Footer currentVersion={data.currentVersion} newVersionInfo={data.newVersionInfo} />
 </div>

pnpm-lock.yaml

@@ -229,6 +229,9 @@ importers:
       postal-mime:
         specifier: ^2.4.4
         version: 2.4.4
+      semver:
+        specifier: ^7.7.2
+        version: 7.7.2
       svelte-persisted-store:
         specifier: ^0.12.0
         version: 0.12.0(svelte@5.35.5)
@@ -263,6 +266,9 @@ importers:
       '@types/d3-shape':
         specifier: ^3.1.7
         version: 3.1.7
+      '@types/semver':
+        specifier: ^7.7.1
+        version: 7.7.1
       dotenv:
         specifier: ^17.2.0
         version: 17.2.0
@@ -1802,6 +1808,9 @@ packages:
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
+  '@types/semver@7.7.1':
+    resolution: {integrity: sha512-FmgJfu+MOcQ370SD0ev7EI8TlCAfKYU+B4m5T3yXc1CiRN94g/SZPtsCkk506aUDtlMnFZvasDwHHUcZUEaYuA==}
+
   '@types/send@0.17.5':
     resolution: {integrity: sha512-z6F2D3cOStZvuk2SaP6YrwkNO65iTZcwA2ZkSABegdkAh/lf+Aa/YQndZVfmEXT5vgAp6zv06VQ3ejSVjAny4w==}
 
@@ -6557,6 +6566,8 @@ snapshots:
 
   '@types/resolve@1.20.2': {}
 
+  '@types/semver@7.7.1': {}
+
   '@types/send@0.17.5':
     dependencies:
       '@types/mime': 1.3.5