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

2021-08-12 13:56:51 +05:30
parent b18f7af28f c273ded97d
commit 55bcb34fd5
24 changed files with 238 additions and 234 deletions
--- a/components/app/Header.vue
+++ b/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>
--- a/components/button/Primary.vue
+++ b/components/button/Primary.vue
@@ -73,10 +73,11 @@
  </SmartLink>
 </template>

-<script>
-import { getSettingSubject } from "~/newstore/settings"
+<script lang="ts">
+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>
--- a/components/button/Secondary.vue
+++ b/components/button/Secondary.vue
@@ -68,10 +68,11 @@
  </SmartLink>
 </template>

-<script>
-import { getSettingSubject } from "~/newstore/settings"
+<script lang="ts">
+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>
--- a/components/collections/ChooseType.vue
+++ b/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>
--- a/components/collections/ImportExport.vue
+++ b/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>
--- a/components/collections/graphql/ImportExport.vue
+++ b/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$,
-      currentUser: currentUser$,
+      collections: useReadonlyStream(graphqlCollections$, []),
+      currentUser: useReadonlyStream(currentUser$, null),
    }
  },
  computed: {
@@ -388,5 +390,5 @@ export default {
      return Object.prototype.hasOwnProperty.call(item, "item")
    },
  },
-}
+})
 </script>
--- a/components/collections/graphql/index.vue
+++ b/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>
--- a/components/collections/index.vue
+++ b/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>
--- a/components/environments/ImportExport.vue
+++ b/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$,
-      currentUser: currentUser$,
+      environments: useReadonlyStream(environments$, []),
+      currentUser: useReadonlyStream(currentUser$, null),
    }
  },
  computed: {
@@ -237,5 +239,5 @@ export default {
      })
    },
  },
-}
+})
 </script>
--- a/components/environments/index.vue
+++ b/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,
-      editingEnvironmentIndex: undefined,
-      selectedEnvironmentIndex: -1,
+      editingEnvironment: undefined as Environment | undefined,
+      editingEnvironmentIndex: undefined as number | undefined,
    }
  },
-  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>
--- a/components/firebase/Login.vue
+++ b/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()
    })
  },
--- a/components/history/index.vue
+++ b/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>
--- a/components/http/Headers.vue
+++ b/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>
--- a/components/http/Parameters.vue
+++ b/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 {
-  data() {
+export default defineComponent({
+  setup() {
    return {
-      params$: [],
-    }
-  },
-  subscriptions() {
-    return {
-      params$: restParams$,
-      EXPERIMENTAL_URL_BAR_ENABLED: getSettingSubject(
-        "EXPERIMENTAL_URL_BAR_ENABLED"
-      ),
+      params$: useReadonlyStream(restParams$, []),
+      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("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>
--- a/components/http/Response.vue
+++ b/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 {
-  subscriptions() {
+export default defineComponent({
+  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>
--- a/components/smart/AccentModePicker.vue
+++ b/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({
-  data() {
+export default defineComponent({
+  setup() {
    return {
      accentColors: HoppAccentColors,
-      active: settingsStore.value.THEME_COLOR,
-    }
-  },
-  subscriptions() {
-    return {
-      active: getSettingSubject("THEME_COLOR"),
+      active: useSetting("THEME_COLOR"),
    }
  },
  methods: {
--- a/components/smart/ColorModePicker.vue
+++ b/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({
-  data() {
+export default defineComponent({
+  setup() {
    return {
      colors: HoppBgColors,
-    }
-  },
-  subscriptions() {
-    return {
-      active: getSettingSubject("BG_COLOR"),
+      active: useSetting("BG_COLOR"),
    }
  },
  methods: {
--- a/components/smart/FontSizePicker.vue
+++ b/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({
-  data() {
+export default defineComponent({
+  setup() {
    return {
      fontSizes: HoppFontSizes,
-      active: settingsStore.value.FONT_SIZE,
-    }
-  },
-  subscriptions() {
-    return {
-      active: getSettingSubject("FONT_SIZE"),
+      active: useSetting("FONT_SIZE"),
    }
  },
  methods: {
--- a/components/teams/index.vue
+++ b/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>
--- a/layouts/default.vue
+++ b/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)
--- a/nuxt.config.js
+++ b/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 },
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/plugins/vue-rx.js
+++ b/plugins/vue-rx.js
@@ -1,4 +0,0 @@
-import Vue from "vue"
-import VueRx from "vue-rx"
-
-Vue.use(VueRx)