UPD: Display dirty state in UI

src/renderer/src/components/navbar/Navbar.vue

@@ -133,13 +133,13 @@
       <div class="grow" />
       <Transition name="fade">
         <div v-if="deviceStore.connected" class="flex items-center gap-2 px-2">
-          <div v-if="numberOfChanges" class="text-sm">
+          <div v-if="deviceStore.dirtyState" class="text-sm">
-            <PenLine class="inline-block h-4" />{{ numberOfChanges }} Changes
+            <PenLine class="inline-block h-4" />Unsaved Changes
           </div>
           <MenubarButton class="app-titlebar-button border-2"> Revert </MenubarButton>
           <MenubarButton
             :class="
-              numberOfChanges
+              deviceStore.dirtyState
                 ? 'border border-zinc-100 bg-zinc-300 text-zinc-950 hover:bg-zinc-200 hover:text-zinc-950'
                 : 'border-2'
             "
@@ -215,8 +215,6 @@ const { appIpc } = window
 const isMacOS = appIpc.platform === 'darwin'
 const zoomFactor = ref(1)
 
-const numberOfChanges = ref(27)
-
 const previewDeviceNames = ref({
   nanoOne: 'One',
   nanoZero: 'Zero'

src/renderer/src/deviceStore.ts

@@ -118,6 +118,7 @@ export const useDeviceStore = defineStore('device', {
       }
       nanoIpc.send(this.currentDeviceId!, JSON.stringify({ profile: name }))
       this.selectProfile(name)
+      this.setDirtyState(true)
     },
     addProfile(profile: Profile, updateDevice: boolean = true) {
       if (!this.profileNames.includes(profile.name)) {
@@ -138,6 +139,7 @@ export const useDeviceStore = defineStore('device', {
           this.currentDeviceId!,
           JSON.stringify({ profile: profile.name, updates: newProfile })
         )
+        this.setDirtyState(true)
       }
     },
     renameProfile(oldName: string, newName: string, updateDevice: boolean = true) {
@@ -153,6 +155,7 @@ export const useDeviceStore = defineStore('device', {
             JSON.stringify({ profile: oldName, updates: { name: newName } })
           )
         }
+        this.setDirtyState(true)
       }
     },
     deleteProfile(profileName: string, updateDevice: boolean = true) {
@@ -170,6 +173,7 @@ export const useDeviceStore = defineStore('device', {
       }
       if (updateDevice) {
         nanoIpc.send(this.currentDeviceId!, JSON.stringify({ profiles: this.profileNames }))
+        this.setDirtyState(true)
       }
     },
     duplicateProfile(profileName: string, updateDevice: boolean = true) {
@@ -181,6 +185,7 @@ export const useDeviceStore = defineStore('device', {
         if (this.currentProfileName === profileName) {
           this.selectProfile(newProfile.name, updateDevice)
         }
+        this.setDirtyState(true)
       }
     },
     detachDevice(deviceId: string) {
@@ -216,6 +221,7 @@ export const useDeviceStore = defineStore('device', {
       this.profileNames = profileNames
       if (updateDevice) {
         nanoIpc.send(this.currentDeviceId!, JSON.stringify({ profiles: profileNames }))
+        this.setDirtyState(true)
       }
     },
     setCurrentProfile(profileName: string, updateDevice: boolean = true) {
@@ -245,6 +251,7 @@ export const useDeviceStore = defineStore('device', {
           this.currentDeviceId!,
           JSON.stringify({ profile: this.currentProfileName, updates: { [propertyName]: color } })
         )
+        this.setDirtyState(true)
       }
     },
     setPrimaryColor(color: number, updateDevice: boolean = true) {
@@ -254,6 +261,7 @@ export const useDeviceStore = defineStore('device', {
           this.currentDeviceId!,
           JSON.stringify({ profile: this.currentProfileName, updates: { primary: color } })
         )
+        this.setDirtyState(true)
       }
     },
     setSecondaryColor(color: number, updateDevice: boolean = true) {
@@ -263,6 +271,7 @@ export const useDeviceStore = defineStore('device', {
           this.currentDeviceId!,
           JSON.stringify({ profile: this.currentProfileName, updates: { secondary: color } })
         )
+        this.setDirtyState(true)
       }
     },
     setPointerColor(color: number, updateDevice: boolean = true) {
@@ -272,6 +281,7 @@ export const useDeviceStore = defineStore('device', {
           this.currentDeviceId!,
           JSON.stringify({ profile: this.currentProfileName, updates: { pointer: color } })
         )
+        this.setDirtyState(true)
       }
     }
   }