ADD: Error notifications

package.json

@@ -41,6 +41,7 @@
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
     "vue-i18n": "^9.10.1",
+    "vue-sonner": "^1.1.2",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -65,6 +65,9 @@ dependencies:
   vue-i18n:
     specifier: ^9.10.1
     version: 9.10.1(vue@3.4.21)
+  vue-sonner:
+    specifier: ^1.1.2
+    version: 1.1.2
   vuedraggable:
     specifier: ^4.1.0
     version: 4.1.0(vue@3.4.21)
@@ -4414,6 +4417,10 @@ packages:
       vue: 3.4.21(typescript@5.3.3)
     dev: false
 
+  /vue-sonner@1.1.2:
+    resolution: {integrity: sha512-yg4f5s0a3oiiI7cNvO0Dajux1Y7s04lxww3vnQtnwQawJ3KqaKA9RIRMdI9wGTosRGIOwgYFniFRGl4+IuKPZw==}
+    dev: false
+
   /vue-template-compiler@2.7.16:
     resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
     dependencies:

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)