Merge branch 'refactor/ui' of https://github.com/hoppscotch/hoppscotch into refactor/ui

components/app/Header.vue

@@ -51,11 +51,18 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import intializePwa from "~/helpers/pwa"
 import { currentUser$ } from "~/helpers/fb/auth"
 import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
+import { useReadonlyStream } from "~/helpers/utils/composables"
 
-export default {
+export default defineComponent({
+  setup() {
+    return {
+      currentUser: useReadonlyStream(currentUser$, null),
+    }
+  },
   data() {
     return {
       // Once the PWA code is initialized, this holds a method
@@ -66,11 +73,6 @@ export default {
       isOnLine: navigator.onLine,
     }
   },
-  subscriptions() {
-    return {
-      currentUser: currentUser$,
-    }
-  },
   async mounted() {
     window.addEventListener("online", () => {
       this.isOnLine = true
@@ -82,15 +84,16 @@ export default {
     // Initializes the PWA code - checks if the app is installed,
     // etc.
     this.showInstallPrompt = await intializePwa()
+
     const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
     if (!cookiesAllowed) {
-      this.$toast.show(this.$t("we_use_cookies"), {
+      this.$toast.show(this.$t("we_use_cookies").toString(), {
         icon: "info",
         duration: 5000,
         theme: "toasted-primary",
         action: [
           {
-            text: this.$t("action.dismiss"),
+            text: this.$t("action.dismiss").toString(),
             onClick: (_, toastObject) => {
               setLocalConfig("cookiesAllowed", "yes")
               toastObject.goAway(0)
@@ -100,5 +103,5 @@ export default {
       })
     }
   },
-}
+})
 </script>

components/button/Primary.vue

@@ -73,10 +73,11 @@
   </SmartLink>
 </template>
 
-<script>
+<script lang="ts">
-import { getSettingSubject } from "~/newstore/settings"
+import { defineComponent } from "@nuxtjs/composition-api"
+import { useSetting } from "~/newstore/settings"
 
-export default {
+export default defineComponent({
   props: {
     to: {
       type: String,
@@ -143,15 +144,10 @@ export default {
       default: () => [],
     },
   },
-  data() {
+  setup() {
     return {
-      SHORTCUT_INDICATOR: null,
+      SHORTCUT_INDICATOR: useSetting("SHORTCUT_INDICATOR"),
     }
   },
-  subscriptions() {
+})
-    return {
-      SHORTCUT_INDICATOR: getSettingSubject("SHORTCUT_INDICATOR"),
-    }
-  },
-}
 </script>

components/button/Secondary.vue

@@ -68,10 +68,11 @@
   </SmartLink>
 </template>
 
-<script>
+<script lang="ts">
-import { getSettingSubject } from "~/newstore/settings"
+import { defineComponent } from "@nuxtjs/composition-api"
+import { useSetting } from "~/newstore/settings"
 
-export default {
+export default defineComponent({
   props: {
     to: {
       type: String,
@@ -126,15 +127,10 @@ export default {
       default: () => [],
     },
   },
-  data() {
+  setup() {
     return {
-      SHORTCUT_INDICATOR: null,
+      SHORTCUT_INDICATOR: useSetting("SHORTCUT_INDICATOR"),
     }
   },
-  subscriptions() {
+})
-    return {
-      SHORTCUT_INDICATOR: getSettingSubject("SHORTCUT_INDICATOR"),
-    }
-  },
-}
 </script>

components/collections/ChooseType.vue

@@ -54,25 +54,27 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
 import gql from "graphql-tag"
 import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
+import { useReadonlyStream } from "~/helpers/utils/composables"
 
-export default {
+export default defineComponent({
   props: {
     doc: Boolean,
     show: Boolean,
   },
+  setup() {
+    return {
+      currentUser: useReadonlyStream(currentUserInfo$, null),
+    }
+  },
   data() {
     return {
       skipTeamsFetching: true,
     }
   },
-  subscriptions() {
-    return {
-      currentUser: currentUserInfo$,
-    }
-  },
   apollo: {
     myTeams: {
       query: gql`
@@ -96,12 +98,12 @@ export default {
       this.$apollo.queries.myTeams.refetch()
       this.skipTeamsFetching = false
     },
-    updateCollectionsType(tabID) {
+    updateCollectionsType(tabID: string) {
       this.$emit("update-collection-type", tabID)
     },
-    updateSelectedTeam(team) {
+    updateSelectedTeam(team: any) {
       this.$emit("update-selected-team", team)
     },
   },
-}
+})
 </script>

components/collections/ImportExport.vue

@@ -166,19 +166,27 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { currentUser$ } from "~/helpers/fb/auth"
 import * as teamUtils from "~/helpers/teams/utils"
+import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
   restCollections$,
   setRESTCollections,
   appendRESTCollections,
 } from "~/newstore/collections"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
     collectionsType: { type: Object, default: () => {} },
   },
+  setup() {
+    return {
+      myCollections: useReadonlyStream(restCollections$, []),
+      currentUser: useReadonlyStream(currentUser$, null),
+    }
+  },
   data() {
     return {
       showJsonCode: false,
@@ -187,12 +195,6 @@ export default {
       collectionJson: "",
     }
   },
-  subscriptions() {
-    return {
-      myCollections: restCollections$,
-      currentUser: currentUser$,
-    }
-  },
   methods: {
     async createCollectionGist() {
       this.getJSONCollection()
@@ -547,5 +549,5 @@ export default {
       return Object.prototype.hasOwnProperty.call(item, "item")
     },
   },
-}
+})
 </script>

components/collections/graphql/ImportExport.vue

@@ -91,21 +91,23 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { currentUser$ } from "~/helpers/fb/auth"
+import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
   graphqlCollections$,
   setGraphqlCollections,
   appendGraphqlCollections,
 } from "~/newstore/collections"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
   },
-  subscriptions() {
+  setup() {
     return {
-      collections: graphqlCollections$,
+      collections: useReadonlyStream(graphqlCollections$, []),
-      currentUser: currentUser$,
+      currentUser: useReadonlyStream(currentUser$, null),
     }
   },
   computed: {
@@ -388,5 +390,5 @@ export default {
       return Object.prototype.hasOwnProperty.call(item, "item")
     },
   },
-}
+})
 </script>

components/collections/graphql/index.vue

@@ -122,9 +122,12 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import clone from "lodash/clone"
+import { useReadonlyStream } from "~/helpers/utils/composables"
 import { graphqlCollections$, addGraphqlFolder } from "~/newstore/collections"
 
-export default {
+export default defineComponent({
   props: {
     // Whether to activate the ability to pick items (activates 'select' events)
     savingMode: { type: Boolean, default: false },
@@ -133,6 +136,11 @@ export default {
     // Whether to show the 'New' and 'Import/Export' actions
     showCollActions: { type: Boolean, default: true },
   },
+  setup() {
+    return {
+      collections: useReadonlyStream(graphqlCollections$, []),
+    }
+  },
   data() {
     return {
       showModalAdd: false,
@@ -152,14 +160,9 @@ export default {
       filterText: "",
     }
   },
-  subscriptions() {
-    return {
-      collections: graphqlCollections$,
-    }
-  },
   computed: {
     filteredCollections() {
-      const collections = this.collections
+      const collections = clone(this.collections)
 
       if (!this.filterText) return collections
 
@@ -270,5 +273,5 @@ export default {
       this.$data.editingRequestIndex = undefined
     },
   },
-}
+})
 </script>

components/collections/index.vue

@@ -173,6 +173,7 @@
 <script>
 import gql from "graphql-tag"
 import cloneDeep from "lodash/cloneDeep"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { currentUser$ } from "~/helpers/fb/auth"
 import TeamCollectionAdapter from "~/helpers/teams/TeamCollectionAdapter"
 import * as teamUtils from "~/helpers/teams/utils"
@@ -186,14 +187,28 @@ import {
   removeRESTRequest,
   editRESTRequest,
 } from "~/newstore/collections"
+import {
+  useReadonlyStream,
+  useStreamSubscriber,
+} from "~/helpers/utils/composables"
 
-export default {
+export default defineComponent({
   props: {
     doc: Boolean,
     selected: { type: Array, default: () => [] },
     saveRequest: Boolean,
     picked: { type: Object, default: () => {} },
   },
+  setup() {
+    const { subscribeToStream } = useStreamSubscriber()
+
+    return {
+      subscribeTo: subscribeToStream,
+
+      collections: useReadonlyStream(restCollections$, []),
+      currentUser: useReadonlyStream(currentUser$, null),
+    }
+  },
   data() {
     return {
       showModalAdd: false,
@@ -219,12 +234,6 @@ export default {
       teamCollectionsNew: [],
     }
   },
-  subscriptions() {
-    return {
-      collections: restCollections$,
-      currentUser: currentUser$,
-    }
-  },
   computed: {
     showTeamCollections() {
       if (this.currentUser == null) {
@@ -294,7 +303,7 @@ export default {
     },
   },
   mounted() {
-    this.$subscribeTo(this.teamCollectionAdapter.collections$, (colls) => {
+    this.subscribeTo(this.teamCollectionAdapter.collections$, (colls) => {
       this.teamCollectionsNew = cloneDeep(colls)
     })
   },
@@ -658,5 +667,5 @@ export default {
       }
     },
   },
-}
+})
 </script>

components/environments/ImportExport.vue

@@ -91,21 +91,23 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { currentUser$ } from "~/helpers/fb/auth"
+import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
   environments$,
   replaceEnvironments,
   appendEnvironments,
 } from "~/newstore/environments"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
   },
-  subscriptions() {
+  setup() {
     return {
-      environments: environments$,
+      environments: useReadonlyStream(environments$, []),
-      currentUser: currentUser$,
+      currentUser: useReadonlyStream(currentUser$, null),
     }
   },
   computed: {
@@ -237,5 +239,5 @@ export default {
       })
     },
   },
-}
+})
 </script>

components/environments/index.vue

@@ -93,48 +93,49 @@
   </AppSection>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { useReadonlyStream, useStream } from "~/helpers/utils/composables"
 import {
   environments$,
   setCurrentEnvironment,
   selectedEnvIndex$,
+  Environment,
 } from "~/newstore/environments"
 
-export default {
+export default defineComponent({
+  setup() {
+    return {
+      environments: useReadonlyStream(environments$, []),
+      selectedEnvironmentIndex: useStream(
+        selectedEnvIndex$,
+        -1,
+        setCurrentEnvironment
+      ),
+    }
+  },
   data() {
     return {
       showModalImportExport: false,
       showModalAdd: false,
       showModalEdit: false,
-      editingEnvironment: undefined,
+      editingEnvironment: undefined as Environment | undefined,
-      editingEnvironmentIndex: undefined,
+      editingEnvironmentIndex: undefined as number | undefined,
-      selectedEnvironmentIndex: -1,
     }
   },
-  subscriptions() {
-    return {
-      environments: environments$,
-      selectedEnvironmentIndex: selectedEnvIndex$,
-    }
-  },
-  watch: {
-    selectedEnvironmentIndex(val) {
-      setCurrentEnvironment(val)
-    },
-  },
   methods: {
-    displayModalAdd(shouldDisplay) {
+    displayModalAdd(shouldDisplay: boolean) {
       this.showModalAdd = shouldDisplay
     },
-    displayModalEdit(shouldDisplay) {
+    displayModalEdit(shouldDisplay: boolean) {
       this.showModalEdit = shouldDisplay
 
       if (!shouldDisplay) this.resetSelectedData()
     },
-    displayModalImportExport(shouldDisplay) {
+    displayModalImportExport(shouldDisplay: boolean) {
       this.showModalImportExport = shouldDisplay
     },
-    editEnvironment(environment, environmentIndex) {
+    editEnvironment(environment: Environment, environmentIndex: number) {
       this.$data.editingEnvironment = environment
       this.$data.editingEnvironmentIndex = environmentIndex
       this.displayModalEdit(true)
@@ -144,5 +145,5 @@ export default {
       this.$data.editingEnvironmentIndex = undefined
     },
   },
-}
+})
 </script>

components/firebase/Login.vue

@@ -130,11 +130,19 @@ import {
   signInWithEmail,
 } from "~/helpers/fb/auth"
 import { setLocalConfig } from "~/newstore/localpersistence"
+import { useStreamSubscriber } from "~/helpers/utils/composables"
 
 export default {
   props: {
     show: Boolean,
   },
+  setup() {
+    const { subscribeToStream } = useStreamSubscriber()
+
+    return {
+      subscribeToStream,
+    }
+  },
   data() {
     return {
       form: {
@@ -149,7 +157,7 @@ export default {
     }
   },
   mounted() {
-    this.$subscribeTo(currentUser$, (user) => {
+    this.subscribeToStream(currentUser$, (user) => {
       if (user) this.hideModal()
     })
   },

components/history/index.vue

@@ -85,7 +85,9 @@
   </AppSection>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
   restHistory$,
   graphqlHistory$,
@@ -98,10 +100,18 @@ import {
 } from "~/newstore/history"
 import { setRESTRequest } from "~/newstore/RESTSession"
 
-export default {
+export default defineComponent({
   props: {
     page: { type: String, default: null },
   },
+  setup(props) {
+    return {
+      history: useReadonlyStream(
+        props.page === "rest" ? restHistory$ : graphqlHistory$,
+        []
+      ),
+    }
+  },
   data() {
     return {
       filterText: "",
@@ -109,13 +119,8 @@ export default {
       confirmRemove: false,
     }
   },
-  subscriptions() {
-    return {
-      history: this.page === "rest" ? restHistory$ : graphqlHistory$,
-    }
-  },
   computed: {
-    filteredHistory() {
+    filteredHistory(): any[] {
       const filteringHistory = this.history
 
       return filteringHistory.filter((entry) => {
@@ -133,27 +138,27 @@ export default {
       if (this.page === "rest") clearRESTHistory()
       else clearGraphqlHistory()
 
-      this.$toast.error(this.$t("history_deleted"), {
+      this.$toast.error(this.$t("history_deleted").toString(), {
         icon: "delete",
       })
     },
-    useHistory(entry) {
+    useHistory(entry: any) {
       if (this.page === "rest") setRESTRequest(entry)
       // TODO: restore gql entry to request section
       else console.log("not implemented yet")
     },
-    deleteHistory(entry) {
+    deleteHistory(entry: any) {
       if (this.page === "rest") deleteRESTHistoryEntry(entry)
       else deleteGraphqlHistoryEntry(entry)
 
-      this.$toast.error(this.$t("deleted"), {
+      this.$toast.error(this.$t("deleted").toString(), {
         icon: "delete",
       })
     },
-    toggleStar(entry) {
+    toggleStar(entry: any) {
       if (this.page === "rest") toggleRESTHistoryEntryStar(entry)
       else toggleGraphqlHistoryEntryStar(entry)
     },
   },
-}
+})
 </script>

components/http/Headers.vue

@@ -159,7 +159,8 @@
   </AppSection>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
 import {
   restHeaders$,
   addRESTHeader,
@@ -168,21 +169,20 @@ import {
   deleteAllRESTHeaders,
 } from "~/newstore/RESTSession"
 import { commonHeaders } from "~/helpers/headers"
-import { getSettingSubject } from "~/newstore/settings"
+import { useSetting } from "~/newstore/settings"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
 
-export default {
+export default defineComponent({
+  setup() {
+    return {
+      headers$: useReadonlyStream(restHeaders$, []),
+      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
+    }
+  },
   data() {
     return {
       commonHeaders,
-      headers$: [],
-    }
-  },
-  subscriptions() {
-    return {
-      headers$: restHeaders$,
-      EXPERIMENTAL_URL_BAR_ENABLED: getSettingSubject(
-        "EXPERIMENTAL_URL_BAR_ENABLED"
-      ),
     }
   },
   watch: {
@@ -208,16 +208,16 @@ export default {
     addHeader() {
       addRESTHeader({ key: "", value: "", active: true })
     },
-    updateHeader(index, item) {
+    updateHeader(index: number, item: HoppRESTHeader) {
       console.log(index, item)
       updateRESTHeader(index, item)
     },
-    deleteHeader(index) {
+    deleteHeader(index: number) {
       deleteRESTHeader(index)
     },
     clearContent() {
       deleteAllRESTHeaders()
     },
   },
-}
+})
 </script>

components/http/Parameters.vue

@@ -180,7 +180,10 @@
   </AppSection>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { HoppRESTParam } from "~/helpers/types/HoppRESTRequest"
+import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
   restParams$,
   addRESTParam,
@@ -188,20 +191,13 @@ import {
   deleteRESTParam,
   deleteAllRESTParams,
 } from "~/newstore/RESTSession"
-import { getSettingSubject } from "~/newstore/settings"
+import { useSetting } from "~/newstore/settings"
 
-export default {
+export default defineComponent({
-  data() {
+  setup() {
     return {
-      params$: [],
+      params$: useReadonlyStream(restParams$, []),
-    }
+      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
-  },
-  subscriptions() {
-    return {
-      params$: restParams$,
-      EXPERIMENTAL_URL_BAR_ENABLED: getSettingSubject(
-        "EXPERIMENTAL_URL_BAR_ENABLED"
-      ),
     }
   },
   watch: {
@@ -226,15 +222,15 @@ export default {
     addParam() {
       addRESTParam({ key: "", value: "", active: true })
     },
-    updateParam(index, item) {
+    updateParam(index: number, item: HoppRESTParam) {
       updateRESTParam(index, item)
     },
-    deleteParam(index) {
+    deleteParam(index: number) {
       deleteRESTParam(index)
     },
     clearContent() {
       deleteAllRESTParams()
     },
   },
-}
+})
 </script>

components/http/Response.vue

@@ -5,19 +5,23 @@
   </AppSection>
 </template>
 
-<script>
+<script lang="ts">
+import { computed, defineComponent } from "@nuxtjs/composition-api"
+import { useReadonlyStream } from "~/helpers/utils/composables"
 import { restResponse$ } from "~/newstore/RESTSession"
 
-export default {
+export default defineComponent({
-  subscriptions() {
+  setup() {
+    const response = useReadonlyStream(restResponse$, null)
+
+    const loading = computed(
+      () => response.value === null || response.value.type === "loading"
+    )
+
     return {
-      response: restResponse$,
+      response,
+      loading,
     }
   },
-  computed: {
+})
-    loading() {
-      return this.response === null || this.response.type === "loading"
-    },
-  },
-}
 </script>

components/smart/AccentModePicker.vue

@@ -23,25 +23,19 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import {
   HoppAccentColors,
   HoppAccentColor,
-  getSettingSubject,
-  settingsStore,
   applySetting,
+  useSetting,
 } from "~/newstore/settings"
 
-export default Vue.extend({
+export default defineComponent({
-  data() {
+  setup() {
     return {
       accentColors: HoppAccentColors,
-      active: settingsStore.value.THEME_COLOR,
+      active: useSetting("THEME_COLOR"),
-    }
-  },
-  subscriptions() {
-    return {
-      active: getSettingSubject("THEME_COLOR"),
     }
   },
   methods: {

components/smart/ColorModePicker.vue

@@ -15,23 +15,19 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import {
   applySetting,
-  getSettingSubject,
   HoppBgColor,
   HoppBgColors,
+  useSetting,
 } from "~/newstore/settings"
 
-export default Vue.extend({
+export default defineComponent({
-  data() {
+  setup() {
     return {
       colors: HoppBgColors,
-    }
+      active: useSetting("BG_COLOR"),
-  },
-  subscriptions() {
-    return {
-      active: getSettingSubject("BG_COLOR"),
     }
   },
   methods: {

components/smart/FontSizePicker.vue

@@ -29,25 +29,19 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import {
   HoppFontSizes,
-  getSettingSubject,
   HoppFontSize,
-  settingsStore,
   applySetting,
+  useSetting,
 } from "~/newstore/settings"
 
-export default Vue.extend({
+export default defineComponent({
-  data() {
+  setup() {
     return {
       fontSizes: HoppFontSizes,
-      active: settingsStore.value.FONT_SIZE,
+      active: useSetting("FONT_SIZE"),
-    }
-  },
-  subscriptions() {
-    return {
-      active: getSettingSubject("FONT_SIZE"),
     }
   },
   methods: {

components/teams/index.vue

@@ -52,10 +52,17 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import gql from "graphql-tag"
 import { currentUser$ } from "~/helpers/fb/auth"
+import { useReadonlyStream } from "~/helpers/utils/composables"
 
-export default {
+export default defineComponent({
+  setup() {
+    return {
+      currentUser: useReadonlyStream(currentUser$, null),
+    }
+  },
   data() {
     return {
       showModalAdd: false,
@@ -66,11 +73,6 @@ export default {
       myTeams: [],
     }
   },
-  subscriptions() {
-    return {
-      currentUser: currentUser$,
-    }
-  },
   apollo: {
     me: {
       query: gql`
@@ -128,5 +130,5 @@ export default {
       this.$data.editingteamID = undefined
     },
   },
-}
+})
 </script>

layouts/default.vue

@@ -36,7 +36,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, useRouter } from "@nuxtjs/composition-api"
+import {
+  defineComponent,
+  useContext,
+  useRouter,
+  watch,
+} from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
 import { setupLocalPersistence } from "~/newstore/localpersistence"
@@ -44,7 +49,7 @@ import { performMigrations } from "~/helpers/migrations"
 import { initUserInfo } from "~/helpers/teams/BackendUserInfo"
 import { registerApolloAuthUpdate } from "~/helpers/apollo"
 import { initializeFirebase } from "~/helpers/fb"
-import { getSettingSubject } from "~/newstore/settings"
+import { useSetting } from "~/newstore/settings"
 import { logPageView } from "~/helpers/fb/analytics"
 import { hookKeybindingsListener } from "~/helpers/keybindings"
 import { defineActionHandler } from "~/helpers/actions"
@@ -52,8 +57,12 @@ import { defineActionHandler } from "~/helpers/actions"
 export default defineComponent({
   components: { Splitpanes, Pane },
   setup() {
+    const { $colorMode } = useContext() as any
+
     hookKeybindingsListener()
+
     const router = useRouter()
+
     defineActionHandler("navigation.jump.rest", () => {
       router.push({ path: "/" })
     })
@@ -75,20 +84,33 @@ export default defineComponent({
     defineActionHandler("navigation.jump.forward", () => {
       router.go(1)
     })
+
+    // Apply theme updates
+    const themeColor = useSetting("THEME_COLOR")
+    const bgColor = useSetting("BG_COLOR")
+    const fontSize = useSetting("FONT_SIZE")
+
+    watch(themeColor, () =>
+      document.documentElement.setAttribute("data-accent", themeColor.value)
+    )
+    watch(bgColor, () => ($colorMode.preference = bgColor.value))
+    watch(fontSize, () =>
+      document.documentElement.setAttribute(
+        "data-font-size",
+        fontSize.value.code
+      )
+    )
+
+    return {
+      LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
+      ZEN_MODE: useSetting("ZEN_MODE"),
+    }
   },
   data() {
     return {
-      LEFT_SIDEBAR: null,
-      ZEN_MODE: null,
       windowInnerWidth: 0,
     }
   },
-  subscriptions() {
-    return {
-      LEFT_SIDEBAR: getSettingSubject("LEFT_SIDEBAR"),
-      ZEN_MODE: getSettingSubject("ZEN_MODE"),
-    }
-  },
   watch: {
     $route(to) {
       logPageView(to.fullPath)
@@ -98,18 +120,6 @@ export default defineComponent({
     setupLocalPersistence()
 
     registerApolloAuthUpdate()
-
-    this.$subscribeTo(getSettingSubject("THEME_COLOR"), (color) => {
-      document.documentElement.setAttribute("data-accent", color)
-    })
-
-    this.$subscribeTo(getSettingSubject("BG_COLOR"), (color) => {
-      ;(this as any).$colorMode.preference = color
-    })
-
-    this.$subscribeTo(getSettingSubject("FONT_SIZE"), (size) => {
-      document.documentElement.setAttribute("data-font-size", size.code)
-    })
   },
   async mounted() {
     window.addEventListener("resize", this.handleResize)

nuxt.config.js

@@ -99,7 +99,6 @@ export default {
     "~/plugins/v-tippy",
     "~/plugins/v-focus",
     "~/plugins/vuex-persist",
-    "~/plugins/vue-rx",
     "~/plugins/vue-apollo",
     "~/plugins/crisp",
     { src: "~/plugins/web-worker", ssr: false },

package-lock.json

@@ -38,7 +38,6 @@
         "vue-cli-plugin-apollo": "^0.22.2",
         "vue-functional-data-merge": "^3.1.0",
         "vue-github-button": "^1.3.0",
-        "vue-rx": "^6.2.0",
         "vue-tippy": "^4.10.2",
         "vuejs-auto-complete": "^0.9.0",
         "vuex-persist": "^3.1.3",
@@ -33370,14 +33369,6 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz",
       "integrity": "sha512-807gn82hTnjCYGrnF3eNmIw/dk7/GE4B5h69BlyCK9KHASwSloD1Sjcn06zg9fVG4fYH2DrsNBZkpLtb25WtaQ=="
     },
-    "node_modules/vue-rx": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/vue-rx/-/vue-rx-6.2.0.tgz",
-      "integrity": "sha512-tpKUcqS5IUYS+HsdbR5TlE5LL9PK4zwlplEtmMeydnbqaUTa9ciLMplJXAtFSiQw1vuURoyEJmCXqMxaVEIloQ==",
-      "peerDependencies": {
-        "rxjs": "^6.0.0"
-      }
-    },
     "node_modules/vue-server-renderer": {
       "version": "2.6.14",
       "resolved": "https://registry.npmjs.org/vue-server-renderer/-/vue-server-renderer-2.6.14.tgz",
@@ -61095,12 +61086,6 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz",
       "integrity": "sha512-807gn82hTnjCYGrnF3eNmIw/dk7/GE4B5h69BlyCK9KHASwSloD1Sjcn06zg9fVG4fYH2DrsNBZkpLtb25WtaQ=="
     },
-    "vue-rx": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/vue-rx/-/vue-rx-6.2.0.tgz",
-      "integrity": "sha512-tpKUcqS5IUYS+HsdbR5TlE5LL9PK4zwlplEtmMeydnbqaUTa9ciLMplJXAtFSiQw1vuURoyEJmCXqMxaVEIloQ==",
-      "requires": {}
-    },
     "vue-server-renderer": {
       "version": "2.6.14",
       "resolved": "https://registry.npmjs.org/vue-server-renderer/-/vue-server-renderer-2.6.14.tgz",

package.json

@@ -54,7 +54,6 @@
     "vue-cli-plugin-apollo": "^0.22.2",
     "vue-functional-data-merge": "^3.1.0",
     "vue-github-button": "^1.3.0",
-    "vue-rx": "^6.2.0",
     "vue-tippy": "^4.10.2",
     "vuejs-auto-complete": "^0.9.0",
     "vuex-persist": "^3.1.3",

plugins/vue-rx.js

@@ -1,4 +0,0 @@
-import Vue from "vue"
-import VueRx from "vue-rx"
-
-Vue.use(VueRx)