From 665cb0dda80fb9583457501289b961d2c4e5534f Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Tue, 22 Oct 2024 09:43:15 -0400
Subject: [PATCH 1/2] feat(ui): add toast lib for displaying errors, display
 error if holochain init fails

---
 package-lock.json            |  9 +++++++++
 ui/package.json              |  1 +
 ui/src/routes/+layout.svelte | 19 +++++++++++++------
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8c03c09e..12798c03 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7988,6 +7988,14 @@
         "svelte": "^4.0.0"
       }
     },
+    "node_modules/svelte-sonner": {
+      "version": "0.3.28",
+      "resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-0.3.28.tgz",
+      "integrity": "sha512-K3AmlySeFifF/cKgsYNv5uXqMVNln0NBAacOYgmkQStLa/UoU0LhfAACU6Gr+YYC8bOCHdVmFNoKuDbMEsppJg==",
+      "peerDependencies": {
+        "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0-next.1"
+      }
+    },
     "node_modules/svelte-time": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/svelte-time/-/svelte-time-0.9.0.tgz",
@@ -8756,6 +8764,7 @@
         "@tauri-apps/plugin-shell": "^2.0.0",
         "bigger-picture": "^1.1.17",
         "p-retry": "^6.2.0",
+        "svelte-sonner": "^0.3.28",
         "sveltekit-i18n": "^2.4.2"
       },
       "devDependencies": {
diff --git a/ui/package.json b/ui/package.json
index 62e91e71..8620b3fa 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -23,6 +23,7 @@
     "@tauri-apps/plugin-shell": "^2.0.0",
     "bigger-picture": "^1.1.17",
     "p-retry": "^6.2.0",
+    "svelte-sonner": "^0.3.28",
     "sveltekit-i18n": "^2.4.2"
   },
   "devDependencies": {
diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index 33ac3552..9e8971ee 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -9,6 +9,7 @@
 	import { RelayClient } from '$store/RelayClient';
 	import { RelayStore } from '$store/RelayStore';
 	import { type RoleNameCallZomeRequest } from '@holochain/client';
+  import { Toaster, toast } from 'svelte-sonner'
 
 	import '../app.postcss';
 
@@ -32,10 +33,8 @@
 		document.documentElement.style.setProperty('--app-height', `${appHeight}px`);
   }
 
-	onMount(() => {
-		async function initHolochain() {
-			// console.log("FISH", window.__TAURI__)
-
+	async function initHolochain() {
+		try {
 			let tokenResp
 			if (adminPort) {
 				const adminWebsocket = await AdminWebsocket.connect({ url: new URL(`ws://localhost:${adminPort}`) })
@@ -73,10 +72,16 @@
 			await relayStore.initialize()
 			connected = true
 			console.log("Connected")
+		} catch(e) {
+			console.error("Failed to init holochain", e);
+			toast.error(`Failed to init holochain ${e.message}`);
 		}
-
+	}
+	
+	onMount(() => {
+		// Launch and connect to holochain
 		initHolochain()
-
+		
 		// To change from light mode to dark mode based on system settings
 		// XXX: not using the built in skeleton autoModeWatcher() because it doesn't set modeCurrent in JS which we use
 		const mql = window.matchMedia('(prefers-color-scheme: light)');
@@ -161,6 +166,8 @@
 	{/if}
 </div>
 
+<Toaster />
+
 <style>
   /* Add this to ensure the page doesn't scroll */
   :global(body) {

From 0e4a6e8773f2b654348d90a9be1fa9778c65ea3b Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Tue, 22 Oct 2024 10:29:25 -0400
Subject: [PATCH 2/2] refactor(ui): use svelte-hot-toast instead of
 svelte-sonner for toasts

---
 package-lock.json                      | 32 ++++++++++++++++++--------
 ui/package.json                        |  2 +-
 ui/src/lib/translations/en/common.json |  3 ++-
 ui/src/routes/+layout.svelte           |  6 ++---
 4 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 12798c03..a6ef457b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7886,6 +7886,17 @@
         }
       }
     },
+    "node_modules/svelte-french-toast": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/svelte-french-toast/-/svelte-french-toast-1.2.0.tgz",
+      "integrity": "sha512-5PW+6RFX3xQPbR44CngYAP1Sd9oCq9P2FOox4FZffzJuZI2mHOB7q5gJBVnOiLF5y3moVGZ7u2bYt7+yPAgcEQ==",
+      "dependencies": {
+        "svelte-writable-derived": "^3.1.0"
+      },
+      "peerDependencies": {
+        "svelte": "^3.57.0 || ^4.0.0"
+      }
+    },
     "node_modules/svelte-gestures": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/svelte-gestures/-/svelte-gestures-5.0.4.tgz",
@@ -7988,14 +7999,6 @@
         "svelte": "^4.0.0"
       }
     },
-    "node_modules/svelte-sonner": {
-      "version": "0.3.28",
-      "resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-0.3.28.tgz",
-      "integrity": "sha512-K3AmlySeFifF/cKgsYNv5uXqMVNln0NBAacOYgmkQStLa/UoU0LhfAACU6Gr+YYC8bOCHdVmFNoKuDbMEsppJg==",
-      "peerDependencies": {
-        "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0-next.1"
-      }
-    },
     "node_modules/svelte-time": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/svelte-time/-/svelte-time-0.9.0.tgz",
@@ -8005,6 +8008,17 @@
         "dayjs": "^1.11.10"
       }
     },
+    "node_modules/svelte-writable-derived": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/svelte-writable-derived/-/svelte-writable-derived-3.1.1.tgz",
+      "integrity": "sha512-w4LR6/bYZEuCs7SGr+M54oipk/UQKtiMadyOhW0PTwAtJ/Ai12QS77sLngEcfBx2q4H8ZBQucc9ktSA5sUGZWw==",
+      "funding": {
+        "url": "https://ko-fi.com/pixievoltno1"
+      },
+      "peerDependencies": {
+        "svelte": "^3.2.1 || ^4.0.0-next.1 || ^5.0.0-next.94"
+      }
+    },
     "node_modules/svelte/node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -8764,7 +8778,7 @@
         "@tauri-apps/plugin-shell": "^2.0.0",
         "bigger-picture": "^1.1.17",
         "p-retry": "^6.2.0",
-        "svelte-sonner": "^0.3.28",
+        "svelte-french-toast": "^1.2.0",
         "sveltekit-i18n": "^2.4.2"
       },
       "devDependencies": {
diff --git a/ui/package.json b/ui/package.json
index 8620b3fa..3942f588 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -23,7 +23,7 @@
     "@tauri-apps/plugin-shell": "^2.0.0",
     "bigger-picture": "^1.1.17",
     "p-retry": "^6.2.0",
-    "svelte-sonner": "^0.3.28",
+    "svelte-french-toast": "^1.2.0",
     "sveltekit-i18n": "^2.4.2"
   },
   "devDependencies": {
diff --git a/ui/src/lib/translations/en/common.json b/ui/src/lib/translations/en/common.json
index 0166608c..755de633 100644
--- a/ui/src/lib/translations/en/common.json
+++ b/ui/src/lib/translations/en/common.json
@@ -27,5 +27,6 @@
   "welcome_text_2": "Private, encrypted and secured by keys only you control.",
   "what_is_your_name": "What is your name?",
   "need_camera_permission": "Camera permission is required to scan codes.",
-  "open_app_settings": "Open App Settings"
+  "open_app_settings": "Open App Settings",
+  "holochain_connect_error": "Error connecting to Holochain"
 }
\ No newline at end of file
diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index 9e8971ee..cb454425 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -9,7 +9,7 @@
 	import { RelayClient } from '$store/RelayClient';
 	import { RelayStore } from '$store/RelayStore';
 	import { type RoleNameCallZomeRequest } from '@holochain/client';
-  import { Toaster, toast } from 'svelte-sonner'
+	import toast, { Toaster } from 'svelte-french-toast';
 
 	import '../app.postcss';
 
@@ -74,7 +74,7 @@
 			console.log("Connected")
 		} catch(e) {
 			console.error("Failed to init holochain", e);
-			toast.error(`Failed to init holochain ${e.message}`);
+			toast.error(`${$t('common.holochain_connect_error')}: ${e.message}`);
 		}
 	}
 	
@@ -166,7 +166,7 @@
 	{/if}
 </div>
 
-<Toaster />
+<Toaster position="bottom-end" />
 
 <style>
   /* Add this to ensure the page doesn't scroll */