notify on new gui version being downloaded (#288)

* #283 notify on new gui version: support i18n in notification banner

* #283 enable i18n setup on notification banner
---------

Co-authored-by: neil <neil@neils-MacBook-Pro.local>

.github/workflows/build-sign-notarize.yml

@@ -29,7 +29,7 @@ jobs:
       os: ${{ steps.platform.outputs.os }}
       cache-set: ${{ steps.platform.outputs.cache-set }}
     steps:
-      - uses: teaxyz/pantry.core/.github/actions/get-platform@main
+      - uses: teaxyz/brewkit/actions/get-platform@main
         id: platform
         with:
           platform: ${{ inputs.platform }}

modules/desktop/electron/electron.ts

@@ -12,6 +12,7 @@ import { installPackage, openTerminal } from "./libs/cli";
 import { autoUpdater } from "electron-updater";
 import * as log from "electron-log";
 import path from "path";
+import i18n from "sveltekit-i18n";
 
 autoUpdater.logger = log;
 log.info("App starting...");
@@ -89,8 +90,13 @@ function sendStatusToWindow(text: string, params?: { [key: string]: any }) {
 autoUpdater.on("checking-for-update", () => {
 	log.info("checking for tea gui update");
 });
-autoUpdater.on("update-available", () => {
-	log.info("update for tea gui available");
+autoUpdater.on("update-available", (info) => {
+	sendStatusToWindow(
+		`A new tea gui(${info.version}) is being downloaded. Please don't close the app.`,
+		{
+			i18n_key: "notification.gui-downloading"
+		}
+	);
 });
 autoUpdater.on("update-not-available", () => {
 	log.info("no update for tea gui");
@@ -106,6 +112,7 @@ autoUpdater.on("download-progress", (progressObj) => {
 });
 autoUpdater.on("update-downloaded", (info) => {
 	sendStatusToWindow(`A new tea gui(${info.version}) is available. Relaunch the app to update.`, {
+		i18n_key: "notification.gui-downloaded",
 		action: "relaunch"
 	});
 });

modules/desktop/src/libs/stores/notifications.ts

@@ -1,6 +1,7 @@
 import { writable } from "svelte/store";
 import { nanoid } from "nanoid";
 
+import { l } from "$libs/translations";
 import { NotificationType } from "@tea/ui/types";
 import type { Notification } from "@tea/ui/types";
 
@@ -14,12 +15,14 @@ export default function initNotificationStore() {
 		update((notifications) => notifications.filter((n) => n.id != id));
 	};
 
-	listenToChannel("message", (message: string, params: any) => {
+	listenToChannel("message", (message: string, params: { [key: string]: string }) => {
 		update((value) => {
 			const newNotification: Notification = {
 				id: nanoid(4),
 				message,
-				type: NotificationType.ACTION_BANNER
+				i18n_key: params["i18n_key"] || "",
+				type: NotificationType.ACTION_BANNER,
+				params
 			};
 			if (params.action) {
 				newNotification.callback_label = params.action;

modules/desktop/src/libs/translations/translations.json

@@ -71,6 +71,10 @@
 			"all": "All",
 			"articles": "Articles",
 			"workshops": "Workshops"
+		},
+		"notification": {
+			"gui-downloading": "A new tea gui({{version}}) is being downloaded. Please don't close the app.",
+			"gui-downloaded": "A new tea gui({{version}}) is now available. Relaunch the app to update."
 		}
 	}
 }

modules/desktop/src/routes/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import '$appcss';
+	import { t } from "$libs/translations";
 	import { navigating } from '$app/stores';
 	import { afterNavigate } from '$app/navigation';
 	import TopBar from '$components/top-bar/top-bar.svelte';
@@ -31,9 +32,16 @@
 <div id="main-layout" class={`${$sideNavOpen ? "w-3/4" : "w-full"} transition-all`}>
 	<TopBar />
 	{#each $notificationStore as notification}
-		<Notification {notification} onClose={() => {
-			notificationStore.remove(notification.id);
-		}}/>
+		<Notification
+			notification={{
+				...notification,
+				// TODO this looks nasty but cleanup later.
+				message: notification.i18n_key ? $t(notification.i18n_key, notification.params) : notification.message
+			}}
+				onClose={() => {
+				notificationStore.remove(notification.id);
+			}}
+		/>
 	{/each}
 	<section class="relative pt-4" bind:this={view}>
 		<div class="content">

modules/ui/src/types.ts

@@ -119,8 +119,10 @@ export enum NotificationType {
 }
 export interface Notification {
 	id: string;
+	i18n_key: string;
 	message: string;
 	type: NotificationType;
 	callback_label?: string;
 	callback?: () => void;
+	params?: { [key: string]: string };
 }