minor fixes & refactoring

src/components/chat_message/chat_message.js

@@ -86,7 +86,7 @@ const ChatMessage = {
       }
     },
     ...mapGetters(['findUser']),
-    ...mapState(useSyncConfigStore, ['mergedConfig']),
+    ...mapPiniaState(useSyncConfigStore, ['mergedConfig']),
   },
   data() {
     return {

src/components/conversation/conversation.js

@@ -79,37 +79,12 @@ const conversation = {
     }
   },
   computed: {
-    maxDepthToShowByDefault() {
-      // maxDepthInThread = max number of depths that is *visible*
-      // since our depth starts with 0 and "showing" means "showing children"
-      // there is a -2 here
-      const maxDepth = useSyncConfigStore().mergedConfig.maxDepthInThread - 2
-      return maxDepth >= 1 ? maxDepth : 1
-    },
-    streamingEnabled() {
-      return (
-        useSyncConfigStore().mergedConfig.useStreamingApi &&
-        this.mastoUserSocketStatus === WSConnectionStatus.JOINED
-      )
-    },
-    displayStyle() {
-      return useSyncConfigStore().mergedConfig.conversationDisplay
-    },
     isTreeView() {
       return !this.isLinearView
     },
-    treeViewIsSimple() {
-      return !useSyncConfigStore().mergedConfig.conversationTreeAdvanced
-    },
     isLinearView() {
       return this.displayStyle === 'linear'
     },
-    shouldFadeAncestors() {
-      return useSyncConfigStore().mergedConfig.conversationTreeFadeAncestors
-    },
-    otherRepliesButtonPosition() {
-      return useSyncConfigStore().mergedConfig.conversationOtherRepliesButton
-    },
     showOtherRepliesButtonBelowStatus() {
       return this.otherRepliesButtonPosition === 'below'
     },
@@ -394,7 +369,28 @@ const conversation = {
     maybeHighlight() {
       return this.isExpanded ? this.highlight : null
     },
-    ...mapState(useSyncConfigStore, ['mergedConfig']),
+    ...mapPiniaState(useSyncConfigStore, ['mergedConfig']),
+    ...mapPiniaState(useSyncConfigStore, {
+      maxDepthToShowByDefault: (store) => {
+        // maxDepthInThread = max number of depths that is *visible*
+        // since our depth starts with 0 and "showing" means "showing children"
+        // there is a -2 here
+        const maxDepth = store.mergedConfig.maxDepthInThread - 2
+        return maxDepth >= 1 ? maxDepth : 1
+      },
+      streamingEnabled: (store) => {
+        return (
+          store.mergedConfig.useStreamingApi &&
+          this.mastoUserSocketStatus === WSConnectionStatus.JOINED
+        )
+      },
+      displayStyle: (store) => store.mergedConfig.conversationDisplay,
+      treeViewIsSimple: (store) => !store.mergedConfig.conversationTreeAdvanced,
+      shouldFadeAncestors: (store) =>
+        store.mergedConfig.conversationTreeFadeAncestors,
+      otherRepliesButtonPosition: (store) =>
+        store.mergedConfig.conversationOtherRepliesButton,
+    }),
     ...mapState({
       mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
     }),

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -24,7 +24,8 @@ import StringSetting from '../../helpers/string_setting.vue'
 import Preview from '../old_theme_tab/theme_preview.vue'
 import VirtualDirectivesTab from './virtual_directives_tab.vue'
 
-import { useInterfaceStore, useSyncConfigStore } from 'src/stores/interface'
+import { useInterfaceStore } from 'src/stores/interface'
+import { useSyncConfigStore } from 'src/stores/sync_config'
 
 import {
   getContrastRatio,

src/components/still-image/still-image-emoji-popover.js

@@ -0,0 +1,127 @@
+import Popover from 'components/popover/popover.vue'
+import SelectComponent from 'components/select/select.vue'
+import { assign } from 'lodash'
+
+import StillImage from './still-image.vue'
+
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInterfaceStore } from 'src/stores/interface'
+
+export default {
+  components: { StillImage, Popover, SelectComponent },
+  props: {
+    shortcode: {
+      type: String,
+      required: true,
+    },
+    isLocal: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      knownLocalPacks: {},
+      packName: '',
+    }
+  },
+  computed: {
+    isUserAdmin() {
+      return this.$store.state.users.currentUser.rights.admin
+    },
+  },
+  methods: {
+    displayError(msg) {
+      useInterfaceStore().pushGlobalNotice({
+        messageKey: 'admin_dash.emoji.error',
+        messageArgs: [msg],
+        level: 'error',
+      })
+    },
+    copyToLocalPack() {
+      this.$store.state.api.backendInteractor
+        .addNewEmojiFile({
+          packName: this.packName,
+          file: this.$attrs.src,
+          shortcode: this.shortcode,
+          filename: '',
+        })
+        .then((resp) => resp.json())
+        .then((resp) => {
+          if (resp.error !== undefined) {
+            this.displayError(resp.error)
+            return
+          }
+          useInterfaceStore().pushGlobalNotice({
+            messageKey: 'admin_dash.emoji.copied_successfully',
+            messageArgs: [this.shortcode, this.packName],
+            level: 'success',
+          })
+
+          this.$refs.emojiPopover.hidePopover()
+          this.packName = ''
+        })
+    },
+
+    // Copied from emoji_tab.js
+    loadPacksPaginated(listFunction) {
+      const pageSize = 25
+      const allPacks = {}
+
+      return listFunction({
+        instance: useInstanceStore().server,
+        page: 1,
+        pageSize: 0,
+      })
+        .then((data) => data.json())
+        .then((data) => {
+          if (data.error !== undefined) {
+            return Promise.reject(data.error)
+          }
+
+          let resultingPromise = Promise.resolve({})
+          for (let i = 0; i < Math.ceil(data.count / pageSize); i++) {
+            resultingPromise = resultingPromise
+              .then(() =>
+                listFunction({
+                  instance: useInstanceStore().server,
+                  page: i,
+                  pageSize,
+                }),
+              )
+              .then((data) => data.json())
+              .then((pageData) => {
+                if (pageData.error !== undefined) {
+                  return Promise.reject(pageData.error)
+                }
+
+                assign(allPacks, pageData.packs)
+              })
+          }
+
+          return resultingPromise
+        })
+        .then(() => allPacks)
+        .catch((data) => {
+          this.displayError(data)
+        })
+    },
+    fetchEmojiPacksIfAdmin() {
+      if (!this.isUserAdmin) return
+
+      this.loadPacksPaginated(
+        this.$store.state.api.backendInteractor.listEmojiPacks,
+      ).then((allPacks) => {
+        // Sort by key
+        const sorted = Object.keys(allPacks)
+          .sort()
+          .reduce((acc, key) => {
+            if (key.length === 0) return acc
+            acc[key] = allPacks[key]
+            return acc
+          }, {})
+        this.knownLocalPacks = sorted
+      })
+    },
+  },
+}

src/components/still-image/still-image-emoji-popover.vue

@@ -55,135 +55,7 @@
   </Popover>
 </template>
 
-<script>
+<script src="./still-image-emoji-popover.js" />
-import Popover from 'components/popover/popover.vue'
-import SelectComponent from 'components/select/select.vue'
-import { assign } from 'lodash'
-
-import StillImage from './still-image.vue'
-
-import { useInstanceStore } from 'src/stores/instance.js'
-import { useInterfaceStore } from 'src/stores/interface'
-
-export default {
-  components: { StillImage, Popover, SelectComponent },
-  props: {
-    shortcode: {
-      type: String,
-      required: true,
-    },
-    isLocal: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      knownLocalPacks: {},
-      packName: '',
-    }
-  },
-  computed: {
-    isUserAdmin() {
-      return this.$store.state.users.currentUser.rights.admin
-    },
-  },
-  methods: {
-    displayError(msg) {
-      useInterfaceStore().pushGlobalNotice({
-        messageKey: 'admin_dash.emoji.error',
-        messageArgs: [msg],
-        level: 'error',
-      })
-    },
-    copyToLocalPack() {
-      this.$store.state.api.backendInteractor
-        .addNewEmojiFile({
-          packName: this.packName,
-          file: this.$attrs.src,
-          shortcode: this.shortcode,
-          filename: '',
-        })
-        .then((resp) => resp.json())
-        .then((resp) => {
-          if (resp.error !== undefined) {
-            this.displayError(resp.error)
-            return
-          }
-          useInterfaceStore().pushGlobalNotice({
-            messageKey: 'admin_dash.emoji.copied_successfully',
-            messageArgs: [this.shortcode, this.packName],
-            level: 'success',
-          })
-
-          this.$refs.emojiPopover.hidePopover()
-          this.packName = ''
-        })
-    },
-
-    // Copied from emoji_tab.js
-    loadPacksPaginated(listFunction) {
-      const pageSize = 25
-      const allPacks = {}
-
-      return listFunction({
-        instance: useInstanceStore().server,
-        page: 1,
-        pageSize: 0,
-      })
-        .then((data) => data.json())
-        .then((data) => {
-          if (data.error !== undefined) {
-            return Promise.reject(data.error)
-          }
-
-          let resultingPromise = Promise.resolve({})
-          for (let i = 0; i < Math.ceil(data.count / pageSize); i++) {
-            resultingPromise = resultingPromise
-              .then(() =>
-                listFunction({
-                  instance: useInstanceStore().server,
-                  page: i,
-                  pageSize,
-                }),
-              )
-              .then((data) => data.json())
-              .then((pageData) => {
-                if (pageData.error !== undefined) {
-                  return Promise.reject(pageData.error)
-                }
-
-                assign(allPacks, pageData.packs)
-              })
-          }
-
-          return resultingPromise
-        })
-        .then(() => allPacks)
-        .catch((data) => {
-          this.displayError(data)
-        })
-    },
-    fetchEmojiPacksIfAdmin() {
-      if (!this.isUserAdmin) return
-
-      this.loadPacksPaginated(
-        this.$store.state.api.backendInteractor.listEmojiPacks,
-      ).then((allPacks) => {
-        // Sort by key
-        const sorted = Object.keys(allPacks)
-          .sort()
-          .reduce((acc, key) => {
-            if (key.length === 0) return acc
-            acc[key] = allPacks[key]
-            return acc
-          }, {})
-        this.knownLocalPacks = sorted
-      })
-    },
-  },
-}
-</script>
 
 <style>
   .emoji-popover {

src/components/timeago/timeago.js

@@ -0,0 +1,129 @@
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
+
+import * as DateUtils from 'src/services/date_utils/date_utils.js'
+import localeService from 'src/services/locale/locale.service.js'
+
+export default {
+  name: 'Timeago',
+  props: ['time', 'autoUpdate', 'longFormat', 'nowThreshold', 'templateKey'],
+  data() {
+    return {
+      relativeTimeMs: 0,
+      relativeTime: { key: 'time.now', num: 0 },
+      interval: null,
+    }
+  },
+  computed: {
+    shouldUseAbsoluteTimeFormat() {
+      if (!useSyncConfigStore().mergedConfig.useAbsoluteTimeFormat) {
+        return false
+      }
+      return (
+        DateUtils.durationStrToMs(
+          useSyncConfigStore().mergedConfig.absoluteTimeFormatMinAge,
+        ) <= this.relativeTimeMs
+      )
+    },
+    time12hFormat() {
+      return useSyncConfigStore().mergedConfig.absoluteTimeFormat12h === '12h'
+    },
+    browserLocale() {
+      return localeService.internalToBrowserLocale(this.$i18n.locale)
+    },
+    timeAsDate() {
+      return typeof this.time === 'string'
+        ? new Date(Date.parse(this.time))
+        : this.time
+    },
+    localeDateString() {
+      return this.timeAsDate.toLocaleString(this.browserLocale)
+    },
+    relativeTimeString() {
+      const timeString = this.$i18n.t(
+        this.relativeTime.key,
+        [this.relativeTime.num],
+        this.relativeTime.num,
+      )
+
+      if (
+        typeof this.templateKey === 'string' &&
+        this.relativeTime.key !== 'time.now'
+      ) {
+        return this.$i18n.t(this.templateKey, [timeString])
+      }
+
+      return timeString
+    },
+    absoluteTimeString() {
+      if (this.longFormat) {
+        return this.localeDateString
+      }
+      const now = new Date()
+      const formatter = (() => {
+        if (DateUtils.isSameDay(this.timeAsDate, now)) {
+          return new Intl.DateTimeFormat(this.browserLocale, {
+            minute: 'numeric',
+            hour: 'numeric',
+            hour12: this.time12hFormat,
+          })
+        } else if (DateUtils.isSameMonth(this.timeAsDate, now)) {
+          return new Intl.DateTimeFormat(this.browserLocale, {
+            month: 'short',
+            day: 'numeric',
+            hour12: this.time12hFormat,
+          })
+        } else if (DateUtils.isSameYear(this.timeAsDate, now)) {
+          return new Intl.DateTimeFormat(this.browserLocale, {
+            month: 'short',
+            day: 'numeric',
+            hour12: this.time12hFormat,
+          })
+        } else {
+          return new Intl.DateTimeFormat(this.browserLocale, {
+            year: 'numeric',
+            month: 'short',
+            hour12: this.time12hFormat,
+          })
+        }
+      })()
+
+      return formatter.format(this.timeAsDate)
+    },
+    relativeOrAbsoluteTimeString() {
+      return this.shouldUseAbsoluteTimeFormat
+        ? this.absoluteTimeString
+        : this.relativeTimeString
+    },
+  },
+  watch: {
+    time(newVal, oldVal) {
+      if (oldVal !== newVal) {
+        clearTimeout(this.interval)
+        this.refreshRelativeTimeObject()
+      }
+    },
+  },
+  created() {
+    this.refreshRelativeTimeObject()
+  },
+  unmounted() {
+    clearTimeout(this.interval)
+  },
+  methods: {
+    refreshRelativeTimeObject() {
+      const nowThreshold =
+        typeof this.nowThreshold === 'number' ? this.nowThreshold : 1
+      this.relativeTimeMs = DateUtils.relativeTimeMs(this.time)
+      this.relativeTime = this.longFormat
+        ? DateUtils.relativeTime(this.time, nowThreshold)
+        : DateUtils.relativeTimeShort(this.time, nowThreshold)
+
+      if (this.autoUpdate) {
+        this.interval = setTimeout(
+          this.refreshRelativeTimeObject,
+          1000 * this.autoUpdate,
+        )
+      }
+    },
+  },
+}

src/components/timeago/timeago.vue

@@ -7,134 +7,4 @@
   </time>
 </template>
 
-<script>
+<script src="./timeago.js" />
-import { useSyncConfigStore } from 'src/stores/sync_config.js'
-
-import * as DateUtils from 'src/services/date_utils/date_utils.js'
-import localeService from 'src/services/locale/locale.service.js'
-
-export default {
-  name: 'Timeago',
-  props: ['time', 'autoUpdate', 'longFormat', 'nowThreshold', 'templateKey'],
-  data() {
-    return {
-      relativeTimeMs: 0,
-      relativeTime: { key: 'time.now', num: 0 },
-      interval: null,
-    }
-  },
-  computed: {
-    shouldUseAbsoluteTimeFormat() {
-      if (!useSyncConfigStore().mergedConfig.useAbsoluteTimeFormat) {
-        return false
-      }
-      return (
-        DateUtils.durationStrToMs(
-          useSyncConfigStore().mergedConfig.absoluteTimeFormatMinAge,
-        ) <= this.relativeTimeMs
-      )
-    },
-    time12hFormat() {
-      return useSyncConfigStore().mergedConfig.absoluteTimeFormat12h === '12h'
-    },
-    browserLocale() {
-      return localeService.internalToBrowserLocale(this.$i18n.locale)
-    },
-    timeAsDate() {
-      return typeof this.time === 'string'
-        ? new Date(Date.parse(this.time))
-        : this.time
-    },
-    localeDateString() {
-      return this.timeAsDate.toLocaleString(this.browserLocale)
-    },
-    relativeTimeString() {
-      const timeString = this.$i18n.t(
-        this.relativeTime.key,
-        [this.relativeTime.num],
-        this.relativeTime.num,
-      )
-
-      if (
-        typeof this.templateKey === 'string' &&
-        this.relativeTime.key !== 'time.now'
-      ) {
-        return this.$i18n.t(this.templateKey, [timeString])
-      }
-
-      return timeString
-    },
-    absoluteTimeString() {
-      if (this.longFormat) {
-        return this.localeDateString
-      }
-      const now = new Date()
-      const formatter = (() => {
-        if (DateUtils.isSameDay(this.timeAsDate, now)) {
-          return new Intl.DateTimeFormat(this.browserLocale, {
-            minute: 'numeric',
-            hour: 'numeric',
-            hour12: this.time12hFormat,
-          })
-        } else if (DateUtils.isSameMonth(this.timeAsDate, now)) {
-          return new Intl.DateTimeFormat(this.browserLocale, {
-            month: 'short',
-            day: 'numeric',
-            hour12: this.time12hFormat,
-          })
-        } else if (DateUtils.isSameYear(this.timeAsDate, now)) {
-          return new Intl.DateTimeFormat(this.browserLocale, {
-            month: 'short',
-            day: 'numeric',
-            hour12: this.time12hFormat,
-          })
-        } else {
-          return new Intl.DateTimeFormat(this.browserLocale, {
-            year: 'numeric',
-            month: 'short',
-            hour12: this.time12hFormat,
-          })
-        }
-      })()
-
-      return formatter.format(this.timeAsDate)
-    },
-    relativeOrAbsoluteTimeString() {
-      return this.shouldUseAbsoluteTimeFormat
-        ? this.absoluteTimeString
-        : this.relativeTimeString
-    },
-  },
-  watch: {
-    time(newVal, oldVal) {
-      if (oldVal !== newVal) {
-        clearTimeout(this.interval)
-        this.refreshRelativeTimeObject()
-      }
-    },
-  },
-  created() {
-    this.refreshRelativeTimeObject()
-  },
-  unmounted() {
-    clearTimeout(this.interval)
-  },
-  methods: {
-    refreshRelativeTimeObject() {
-      const nowThreshold =
-        typeof this.nowThreshold === 'number' ? this.nowThreshold : 1
-      this.relativeTimeMs = DateUtils.relativeTimeMs(this.time)
-      this.relativeTime = this.longFormat
-        ? DateUtils.relativeTime(this.time, nowThreshold)
-        : DateUtils.relativeTimeShort(this.time, nowThreshold)
-
-      if (this.autoUpdate) {
-        this.interval = setTimeout(
-          this.refreshRelativeTimeObject,
-          1000 * this.autoUpdate,
-        )
-      }
-    },
-  },
-}
-</script>

src/modules/users.js

@@ -551,7 +551,7 @@ const users = {
     },
     registerPushNotifications(store) {
       const token = store.state.currentUser.credentials
-      const vapidPublicKey = store.rootState.instance.vapidPublicKey
+      const vapidPublicKey = useInstanceStore().vapidPublicKey
       const isEnabled = store.rootState.config.webPushNotifications
       const notificationVisibility =
         store.rootState.config.notificationVisibility
@@ -648,7 +648,6 @@ const users = {
 
     logout(store) {
       const oauth = useOAuthStore()
-      const { instance } = store.rootState
 
       // NOTE: No need to verify the app still exists, because if it doesn't,
       // the token will be invalid too
@@ -657,7 +656,7 @@ const users = {
         .then((app) => {
           const params = {
             app,
-            instance: instance.server,
+            instance: useInstanceStore().server,
             token: oauth.userToken,
           }
 

src/stores/oauth.js

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+
 import { useInstanceStore } from 'src/stores/instance.js'
 
 import {
@@ -59,7 +60,6 @@ export const useOAuthStore = defineStore('oauth', {
       this.userToken = false
     },
     async createApp() {
-      const { state } = window.vuex
       const instance = useInstanceStore().server
       const app = await createApp(instance)
       this.setClientData(app)
@@ -79,7 +79,6 @@ export const useOAuthStore = defineStore('oauth', {
       }
     },
     async getAppToken() {
-      const { state } = window.vuex
       const instance = useInstanceStore().server
       const res = await getClientToken({
         clientId: this.clientId,
@@ -92,7 +91,6 @@ export const useOAuthStore = defineStore('oauth', {
     /// Use this if you want to ensure the app is still valid to use.
     /// @return {string} The access token to the app (not attached to any user)
     async ensureAppToken() {
-      const { state } = window.vuex
       if (this.appToken) {
         try {
           await verifyAppToken({