feat: add version information to footer and update link if new update is available

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pocket-id-frontend",
-  "version": "0.0.1",
+  "version": "0.9.0",
   "private": true,
   "scripts": {
     "dev": "vite dev --port 3000",

frontend/src/lib/services/app-config-service.ts

@@ -1,4 +1,6 @@
+import { version as currentVersion } from '$app/environment';
 import type { AllAppConfig, AppConfigRawResponse } from '$lib/types/application-configuration';
+import axios from 'axios';
 import APIService from './api-service';
 
 export default class AppConfigService extends APIService {
@@ -45,4 +47,19 @@ export default class AppConfigService extends APIService {
 
 		await this.api.put(`/application-configuration/background-image`, formData);
 	}
+
+	async getVersionInformation() {
+		const response = (
+			await axios.get('https://api.github.com/repos/stonith404/pocket-id/releases/latest')
+		).data;
+
+		const newestVersion = response.tag_name.replace('v', '');
+		const isUpToDate = newestVersion === currentVersion;
+
+		return {
+			isUpToDate,
+			newestVersion,
+			currentVersion
+		};
+	}
 }

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

@@ -1,14 +1,20 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import userStore from '$lib/stores/user-store';
+	import { LucideExternalLink } from 'lucide-svelte';
 	import type { Snippet } from 'svelte';
+	import type { LayoutData } from './$types';
 
 	let {
-		children
+		children,
+		data
 	}: {
 		children: Snippet;
+		data: LayoutData;
 	} = $props();
 
+	const { versionInformation } = data;
+
 	let links = $state([
 		{ href: '/settings/account', label: 'My Account' },
 		{ href: '/settings/audit-log', label: 'Audit Log' }
@@ -26,8 +32,10 @@
 </script>
 
 <section>
-	<div class="bg-muted/40 min-h-screen w-full">
+	<div class="bg-muted/40 flex min-h-[calc(100vh-64px)] w-full flex-col justify-between">
-		<main class="mx-auto flex max-w-[1640px] flex-col gap-x-4 gap-y-10 p-4 md:p-10 lg:flex-row">
+		<main
+			class="mx-auto flex w-full max-w-[1640px] flex-col gap-x-4 gap-y-10 p-4 md:p-10 lg:flex-row"
+		>
 			<div>
 				<div class="mx-auto grid w-full gap-2">
 					<h1 class="mb-5 text-3xl font-semibold">Settings</h1>
@@ -41,6 +49,15 @@
 								{label}
 							</a>
 						{/each}
+						{#if $userStore?.isAdmin && !versionInformation.isUpToDate}
+							<a
+								href="https://github.com/stonith404/pocket-id/releases/latest"
+								target="_blank"
+								class="flex items-center gap-2"
+							>
+								Update Pocket ID <LucideExternalLink class="my-auto inline-block h-3 w-3" />
+							</a>
+						{/if}
 					</nav>
 				</div>
 			</div>
@@ -48,5 +65,15 @@
 				{@render children()}
 			</div>
 		</main>
+		<div class="flex flex-col items-center">
+			<p class="text-muted-foreground py-3 text-xs">
+				Powered by <a
+					class="text-white"
+					href="https://github.com/stonith404/pocket-id"
+					target="_blank">Pocket ID</a
+				>
+				({versionInformation.currentVersion})
+			</p>
+		</div>
 	</div>
 </section>

frontend/src/routes/settings/+layout.ts

@@ -0,0 +1,11 @@
+import AppConfigService from '$lib/services/app-config-service';
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async () => {
+	const appConfigService = new AppConfigService();
+
+	const versionInformation = await appConfigService.getVersionInformation();
+	return {
+		versionInformation
+	};
+};

frontend/svelte.config.js

@@ -1,5 +1,6 @@
 import adapter from '@sveltejs/adapter-node';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import packageJson from "./package.json" assert { type: "json" };
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -12,6 +13,9 @@ const config = {
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter(),
+		version: {
+			name: packageJson.version,
+		}
 	}
 };
 

scripts/create-release.sh

@@ -6,7 +6,7 @@ increment_version() {
     local version=$1
     local part=$2
 
-    IFS='.' read -r -a parts <<< "$version"
+    IFS='.' read -r -a parts <<<"$version"
     if [ "$part" == "minor" ]; then
         parts[1]=$((parts[1] + 1))
         parts[2]=0
@@ -30,12 +30,15 @@ else
 fi
 
 # Update the .version file with the new version
-echo $NEW_VERSION > .version
+echo $NEW_VERSION >.version
 git add .version
 
+# Update version in frontend/package.json
+jq --arg new_version "$NEW_VERSION" '.version = $new_version' frontend/package.json >frontend/package.json && mv frontend/package_tmp.json frontend/package.json
+git add frontend/package.json
+
 # Check if conventional-changelog is installed, if not install it
-if ! command -v conventional-changelog &> /dev/null
+if ! command -v conventional-changelog &>/dev/null; then
-then
     echo "conventional-changelog not found, installing..."
     npm install -g conventional-changelog-cli
 fi
@@ -55,4 +58,4 @@ git tag "v$NEW_VERSION"
 git push
 git push --tags
 
-echo "Release process complete. New version: $NEW_VERSION"
+echo "Release process complete. New version: $NEW_VERSION"