Chore: refactor notifications and enable permanent notifications

src/components/auth/delegate-account/ConnectBackupDevice.svelte

@@ -11,7 +11,7 @@
 
   const copyLink = async () => {
     await clipboardCopy(connectionLink)
-    addNotification('Copied to clipboard', 'success')
+    addNotification({ msg: 'Copied to clipboard', type: 'success' })
   }
 </script>
 

src/components/auth/link-device/LinkDevice.svelte

@@ -15,7 +15,7 @@
 
   const copyCode = async () => {
     await clipboardCopy(pin)
-    addNotification('Copied to clipboard', 'success')
+    addNotification({ msg: 'Copied to clipboard', type: 'success' })
   }
 </script>
 

src/components/home/Public.svelte

@@ -34,10 +34,10 @@
 
       await register(encodedUsername)
 
-      addNotification('Account created!', 'success')
+      addNotification({ msg: 'Account created!', type: 'success' })
     } catch (error) {
       console.error(error)
-      addNotification('Failed to register account', 'error')
+      addNotification({ msg: 'Failed to register account', type: 'error' })
     }
     loading = false
   }

src/components/settings/NodeInfo.svelte

@@ -13,7 +13,7 @@
 
   const handleCopyToClipboard = async (value: string): Promise<void> => {
     await clipboardCopy(value)
-    addNotification('Copied to clipboard', 'success')
+    addNotification({ msg: 'Copied to clipboard', type: 'success' })
   }
 
   onMount(async () => {

src/components/settings/Username.svelte

@@ -8,7 +8,7 @@
 
   const handleCopyUsername = async (): Promise<void> => {
     await clipboardCopy($sessionStore.username.full)
-    addNotification('Copied to clipboard', 'success')
+    addNotification({ msg: 'Copied to clipboard', type: 'success' })
   }
 </script>
 

src/lib/account-settings.ts

@@ -174,9 +174,9 @@ export const uploadAvatarToWNFS = async (image: File): Promise<void> => {
     // Announce the changes to the server
     await fs.publish()
 
-    addNotification(`Your avatar has been updated!`, 'success')
+    addNotification({ msg: `Your avatar has been updated!`, type: 'success' })
   } catch (error) {
-    addNotification(error.message, 'error')
+    addNotification({ msg: error.message, type: 'error' })
     console.error(error)
   }
 }

src/lib/network.ts

@@ -139,7 +139,7 @@ export const subscribNetworkEvents = async (): Promise<void> => {
     })
   } catch (error) {
     console.error(error)
-    addNotification('Failed to subscribe to network events', 'error')
+    addNotification({ msg: 'Failed to subscribe to network events', type: 'error' })
   }
 
   // await homestar2.networkEvents(result => {

src/lib/notifications.ts

@@ -15,11 +15,17 @@ export const removeNotification: (id: string) => void = id => {
   )
 }
 
-export const addNotification: (
-  msg: string,
-  type?: NotificationType,
+export const addNotification = ({
+  msg,
+  permanent = false,
+  timeout = 5000,
+  type = 'info',
+}: {
+  msg: string
+  permanent?: boolean
   timeout?: number
-) => void = (msg, type = 'info', timeout = 5000) => {
+  type?: NotificationType
+}): string => {
   // uuid for each notification
   const id = crypto.randomUUID()
 
@@ -30,15 +36,17 @@ export const addNotification: (
       id,
       msg,
       type,
-      timeout,
+      timeout
     }
   ])
 
-  // removing the notification after a specified timeout
-  const timer = setTimeout(() => {
-    removeNotification(id)
-    clearTimeout(timer)
-  }, timeout)
+  if (!permanent) {
+    // removing the notification after a specified timeout
+    const timer = setTimeout(() => {
+      removeNotification(id)
+      clearTimeout(timer)
+    }, timeout)
+  }
 
   // return the id
   return id

src/lib/rpc.ts

@@ -23,7 +23,7 @@ export const getHomestarClient = (): Client => {
     return homestar
   } catch (error) {
     console.error(error)
-    addNotification(error, 'error')
+    addNotification({ msg: error, type: 'error' })
   }
 }
 

src/lib/workflows/index.ts

@@ -311,7 +311,7 @@ export const handleMessage = async (message: Message): Promise<void> => {
     }
   } catch (error) {
     console.error(error)
-    addNotification('Run failed', 'error')
+    addNotification({ msg: 'Run failed', type: 'error' })
   }
 }
 

src/routes/+layout.svelte

@@ -5,6 +5,10 @@
 
   import '../global.css'
   import { instantiatePostHog } from '$lib/analytics'
+  import {
+    checkHomestarConnection,
+    checkIPFSConnection
+  } from '$lib/connections'
   import subscribNetworkEvents from '$lib/network'
   import { addNotification } from '$lib/notifications'
   import { sessionStore, themeStore } from '$lib/stores'
@@ -29,7 +33,7 @@
   const unsubscribeSessionStore = sessionStore.subscribe(session => {
     if (session.error) {
       const message = errorToMessage(session.error)
-      addNotification(message, 'error')
+      addNotification({ msg: message, type: 'error' })
     }
   })
 
@@ -48,41 +52,14 @@
   init()
 
   onMount(async () => {
-    // Check if Homestar node is connected
-    let homestarError = false
-    const ws = new WebSocket(import.meta.env.VITE_WEBSOCKET_ENDPOINT)
-    ws.addEventListener('error', () => {
-      // Connection closed
-      if (ws.readyState === 3) {
-        homestarError = true
-        console.error(`Error: couldn't connect to WebSocket`)
-        addNotification(
-          'Failed to connect to Homestar. Please check the WebSocket endpoint in your .env and ensure Homestar is running.',
-          'error',
-          15000
-        )
-      }
-    })
-
-    // Check if IPFS daemon is running
-    try {
-      await fetch('http://localhost:5001/debug/vars', {
-        method: 'GET',
-        mode: 'no-cors'
-      })
-    } catch (error) {
-      homestarError = true
-      console.error(`Error: IPFS daemon isn't running`)
-      addNotification(
-        "Your IPFS daemon isn't running. Please run 'ipfs daemon' in your terminal.",
-        'error',
-        15000
-      )
-    }
+    // Check for a Homestar WebSocket connection
+    checkHomestarConnection()
 
-    if (!homestarError) {
-      subscribNetworkEvents()
-    }
+    // Check if the IPFS daemon is running
+    await checkIPFSConnection()
+
+    // Subscribe to Homestar network events
+    subscribNetworkEvents()
 
     // Instantiate PostHog Analytics
     instantiatePostHog()

src/routes/delegate-account/+page.svelte

@@ -86,13 +86,16 @@
         if (fs) {
           await setBackupStatus(fs, { created: true })
 
-          addNotification("You've connected a backup device!", 'success')
+          addNotification({
+            msg: "You've connected a backup device!",
+            type: 'success'
+          })
           goto('/')
         } else {
-          addNotification(
-            'Missing filesystem. Unable to create a backup device.',
-            'error'
-          )
+          addNotification({
+            msg: 'Missing filesystem. Unable to create a backup device.',
+            type: 'error'
+          })
         }
       }
     })
@@ -109,7 +112,10 @@
   const cancelConnection = () => {
     rejectPin()
 
-    addNotification('The connection attempt was cancelled', 'info')
+    addNotification({
+      msg: 'The connection attempt was cancelled',
+      type: 'info'
+    })
     goto('/')
   }
 

src/routes/link-device/+page.svelte

@@ -38,17 +38,23 @@
         await waitForDataRoot(hashedUsername)
         await loadAccount(hashedUsername, fullUsername)
 
-        addNotification("You're now connected!", 'success')
+        addNotification({ msg: "You're now connected!", type: 'success' })
         goto('/')
       } else {
-        addNotification('The connection attempt was cancelled', 'info')
+        addNotification({
+          msg: 'The connection attempt was cancelled',
+          type: 'info'
+        })
         goto('/')
       }
     })
   }
 
   const cancelConnection = async () => {
-    addNotification('The connection attempt was cancelled', 'info')
+    addNotification({
+      msg: 'The connection attempt was cancelled',
+      type: 'info'
+    })
 
     await accountLinkingConsumer?.cancel()
     goto('/')

src/routes/workflows/components/WorkflowBuilder.svelte

@@ -67,7 +67,7 @@
             w.name.toLowerCase() === $workflowsStore.builder.name.toLowerCase()
         )
       ) {
-        addNotification('Workflow name must be unique', 'error')
+        addNotification({ msg: 'Workflow name must be unique', type: 'error' })
         saving = false
         return
       }
@@ -76,7 +76,7 @@
       const errorId = document.querySelector('.input-error')?.id
       const errorMessage = 'Invalid params'
       if (errorId && !imageBitmap) {
-        addNotification(errorMessage, 'error')
+        addNotification({ msg: errorMessage, type: 'error' })
         throw new Error(errorMessage)
       }
 
@@ -111,16 +111,16 @@
           (errorId && CROP_PARAMS.find(p => p.name === errorId)) ||
           invalidCropError
         ) {
-          addNotification(
-            `Crop x + width must be less than ${imageBitmap.width} and crop y + height must be less than ${imageBitmap.height}`,
-            'error',
-            7000
-          )
+          addNotification({
+            msg: `Crop x + width must be less than ${imageBitmap.width} and crop y + height must be less than ${imageBitmap.height}`,
+            type: 'error',
+            timeout: 7000
+          })
           throw new Error(errorMessage)
         }
 
         if (errorId) {
-          addNotification(errorMessage, 'error')
+          addNotification({ msg: errorMessage, type: 'error' })
           throw new Error(errorMessage)
         }
       }
@@ -176,7 +176,7 @@
 
       handleCloseBuilder()
 
-      addNotification('Workflow created', 'success')
+      addNotification({ msg: 'Workflow created', type: 'success' })
     } catch (error) {
       saving = false
     }

src/routes/workflows/components/graph/Actions.svelte

@@ -135,12 +135,12 @@
       })?.length
 
       if ((errorId && CROP_PARAMS.find(p => p.name === errorId)) || invalidCropError) {
-        addNotification(`Crop x + width must be less than ${imageBitmap.width} and crop y + height must be less than ${imageBitmap.height}`, 'error', 7000)
+        addNotification({ msg: `Crop x + width must be less than ${imageBitmap.width} and crop y + height must be less than ${imageBitmap.height}`, type: 'error', timeout: 7000 })
         throw new Error(errorMessage)
       }
 
       if (errorId) {
-        addNotification(errorMessage, 'error')
+        addNotification({ msg: errorMessage, type: 'error' })
         throw new Error(errorMessage)
       }
     }

src/routes/workflows/components/graph/ImageNode.svelte

@@ -26,7 +26,7 @@
     status = 'running'
 
     if (files[0]?.type !== 'image/png') {
-      addNotification('Image must be a PNG', 'error')
+      addNotification({ msg: 'Image must be a PNG', type: 'error' })
       status = 'ready'
       return
     }

src/routes/workflows/components/graph/NewFunctionNode.svelte

@@ -82,7 +82,7 @@
       (functionName === 'blur' && updatedArg < param?.min)
 
     if (invalid) {
-      // addNotification(`Param must be less than ${param.max}`)
+      // addNotification({ msg: `Param must be less than ${param.max}` })
       event.target.classList.add(errorClass)
       return
     }
@@ -102,16 +102,16 @@
           .charAt(0)
           .toUpperCase()}${param.name.slice(1)}`
         if (invalidCropWidth) {
-          addNotification(
-            `${paramName} must be less than ${imageBitmap.width}`,
-            'error'
-          )
+          addNotification({
+            msg: `${paramName} must be less than ${imageBitmap.width}`,
+            type: 'error'
+          })
         }
         if (invalidCropHeight) {
-          addNotification(
-            `${paramName} must be less than ${imageBitmap.height}`,
-            'error'
-          )
+          addNotification({
+            msg: `${paramName} must be less than ${imageBitmap.height}`,
+            type: 'error'
+          })
         }
 
         return