Merge remote-tracking branch 'origin/main' into refactor/ui

components/realtime/Mqtt.vue

@@ -131,6 +131,7 @@
 import { Splitpanes, Pane } from "splitpanes"
 import Paho from "paho-mqtt"
 import debounce from "~/helpers/utils/debounce"
+import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 
 export default {
   components: { Splitpanes, Pane },
@@ -202,6 +203,10 @@ export default {
       })
       this.client.onConnectionLost = this.onConnectionLost
       this.client.onMessageArrived = this.onMessageArrived
+
+      logHoppRequestRunToAnalytics({
+        platform: "mqtt",
+      })
     },
     onConnectionFailure() {
       this.connectionState = false

components/realtime/Socketio.vue

@@ -153,6 +153,7 @@ import { Splitpanes, Pane } from "splitpanes"
 import { io as Client } from "socket.io-client"
 import wildcard from "socketio-wildcard"
 import debounce from "~/helpers/utils/debounce"
+import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 
 export default {
   components: { Splitpanes, Pane },
@@ -275,6 +276,10 @@ export default {
           icon: "error",
         })
       }
+
+      logHoppRequestRunToAnalytics({
+        platform: "socketio",
+      })
     },
     disconnect() {
       this.io.close()

components/realtime/Sse.vue

@@ -53,6 +53,7 @@
 
 <script>
 import { Splitpanes, Pane } from "splitpanes"
+import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import debounce from "~/helpers/utils/debounce"
 
 export default {
@@ -164,6 +165,10 @@ export default {
           },
         ]
       }
+
+      logHoppRequestRunToAnalytics({
+        platform: "mqtt",
+      })
     },
     handleSSEError(error) {
       this.stop()

components/realtime/Websocket.vue

@@ -169,6 +169,7 @@
 
 <script>
 import { Splitpanes, Pane } from "splitpanes"
+import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import debounce from "~/helpers/utils/debounce"
 import "splitpanes/dist/splitpanes.css"
 
@@ -285,6 +286,10 @@ export default {
           icon: "error",
         })
       }
+
+      logHoppRequestRunToAnalytics({
+        platform: "wss",
+      })
     },
     disconnect() {
       if (this.socket) {

components/smart/AccentModePicker.vue

@@ -21,36 +21,34 @@
   </div>
 </template>
 
-<script>
-import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
+<script lang="ts">
+import Vue from "vue"
+import {
+  HoppAccentColors,
+  HoppAccentColor,
+  getSettingSubject,
+  settingsStore,
+  applySetting,
+} from "~/newstore/settings"
 
-export default {
+export default Vue.extend({
   data() {
     return {
-      active: getLocalConfig("THEME_COLOR") || "green",
-      accentColors: [
-        "blue",
-        "green",
-        "teal",
-        "indigo",
-        "purple",
-        "orange",
-        "pink",
-        "red",
-        "yellow",
-      ],
+      accentColors: HoppAccentColors,
+      active: settingsStore.value.THEME_COLOR,
     }
   },
-  watch: {
-    active(color) {
-      setLocalConfig("THEME_COLOR", color)
-    },
+  subscriptions() {
+    return {
+      active: getSettingSubject("THEME_COLOR"),
+    }
   },
   methods: {
-    setActiveColor(color) {
+    setActiveColor(color: HoppAccentColor) {
       document.documentElement.setAttribute("data-accent", color)
-      this.active = color
+
+      applySetting("THEME_COLOR", color)
     },
   },
-}
+})
 </script>

components/smart/ColorModePicker.vue

@@ -15,15 +15,31 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from "vue"
+import {
+  applySetting,
+  getSettingSubject,
+  HoppBgColor,
+  HoppBgColors,
+} from "~/newstore/settings"
+
+export default Vue.extend({
   data() {
     return {
-      colors: ["system", "light", "dark", "black"],
+      colors: HoppBgColors,
+    }
+  },
+  subscriptions() {
+    return {
+      activeColor: getSettingSubject("BG_COLOR"),
     }
   },
   methods: {
-    getIcon(color) {
+    setBGMode(color: HoppBgColor) {
+      applySetting("BG_COLOR", color)
+    },
+    getIcon(color: HoppBgColor) {
       switch (color) {
         case "system":
           return "desktop_windows"
@@ -38,5 +54,5 @@ export default {
       }
     },
   },
-}
+})
 </script>