ADD: Error notifications

src/renderer/src/App.vue

@@ -3,11 +3,19 @@ import ProfileManager from '@renderer/components/profile/ProfileManager.vue'
 import DevicePreview from '@renderer/components/device/DevicePreview.vue'
 import ConfigPane from '@renderer/components/config/ConfigPane.vue'
 import Navbar from '@renderer/components/navbar/Navbar.vue'
-import { useDeviceStore, initializeDevices } from '@renderer/deviceStore'
+import { useDeviceStore, initializeDevices, onDeviceError } from '@renderer/deviceStore'
+import { Toaster } from '@renderer/components/ui/sonner'
+import { toast } from 'vue-sonner'
 
 const deviceStore = useDeviceStore()
 initializeDevices()
 
+onDeviceError((error) => {
+  toast('Error', {
+    description: error
+  })
+})
+
 // const menuActions = {
 //   connect: () => store.setConnected(!store.connected),
 //   orientation: () => store.cycleScreenOrientation(),
@@ -61,6 +69,7 @@ initializeDevices()
       </div>
     </div>
   </main>
+  <Toaster />
 </template>
 <style scoped>
 .slide-left-enter-active,

src/renderer/src/components/ui/sonner/Sonner.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { Toaster as Sonner, type ToasterProps } from 'vue-sonner'
+
+const props = defineProps<ToasterProps>()
+</script>
+
+<template>
+  <Sonner
+    class="toaster group"
+    v-bind="props"
+    :toast-options="{
+      classes: {
+        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+        description: 'group-[.toast]:text-muted-foreground',
+        actionButton:
+          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+        cancelButton:
+          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+      },
+    }"
+  />
+</template>

src/renderer/src/components/ui/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from './Sonner.vue'

src/renderer/src/deviceStore.ts

@@ -52,6 +52,8 @@ interface UpdateData {
 
 const { nanoIpc } = window
 
+const errorCallbacks: ((error: string) => void)[] = []
+
 export const useDeviceStore = defineStore('device', {
   state: () => ({
     attachedDeviceIds: [] as string[], // list of attached device ids
@@ -281,6 +283,9 @@ export const initializeDevices = () => {
   // register event handlers
   nanoIpc.on((eventid, deviceid, dataString) => {
     console.log('Received event', eventid, deviceid, dataString)
+    if (eventid === 'error') {
+      errorCallbacks.forEach((callback) => callback(dataString))
+    }
     if (eventid === 'device-attached') {
       deviceStore.attachDevice(deviceid)
       if (deviceStore.attachedDeviceIds.length === 1) {
@@ -348,6 +353,10 @@ export const initializeDevices = () => {
   })
 }
 
+export const onDeviceError = (callback: (error: string) => void) => {
+  errorCallbacks.push(callback)
+}
+
 // // devices, device attachment, connection, and disconnection
 // init_devices(ids) {
 //   console.log('Initializing devices: ', ids)