Display versions: Add new version notification in footer (#101)

* 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.

* Modify version notification

* current version 0.3.1

* Resolve conflicts

* Code formatting

---------

Co-authored-by: Wayne <5291640+ringoinca@users.noreply.github.com>

Author: wayneshn

package.json

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

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

@@ -52,16 +52,16 @@
 
 <div class="mt-2 rounded-md border bg-white p-4">
 	{#if isLoading}
-		<p>{$t('components.email_preview.loading')}</p>
+		<p>{$t('app.components.email_preview.loading')}</p>
 	{:else if emailHtml}
 		<iframe
-			title={$t('archive.email_preview')}
+			title={$t('app.archive.email_preview')}
 			srcdoc={emailHtml()}
 			class="h-[600px] w-full border-none"
 		></iframe>
 	{:else if raw}
-		<p>{$t('components.email_preview.render_error')}</p>
+		<p>{$t('app.components.email_preview.render_error')}</p>
 	{:else}
-		<p class="text-gray-500">{$t('components.email_preview.not_available')}</p>
+		<p class="text-gray-500">{$t('app.components.email_preview.not_available')}</p>
 	{/if}
 </div>

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

@@ -15,12 +15,14 @@
 					<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">
+						<a
+							href={newVersionInfo.url}
+							target="_blank"
+							class=" text-muted-foreground underline"
+						>
 							{newVersionInfo.description}
 						</a>
-					</Alert.Description>
+					</Alert.Title>
 				</Alert.Root>
 			{/if}
 			<p class="text-balance text-center text-xs font-medium leading-loose">