first pass of migration - states and obvious replacements

src/components/settings_modal/admin_tabs/emoji_tab.js

@@ -6,6 +6,7 @@ import StillImage from 'components/still-image/still-image.vue'
 import { assign, clone } from 'lodash'
 
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface'
 import EmojiEditingPopover from '../helpers/emoji_editing_popover.vue'
 import ModifiedIndicator from '../helpers/modified_indicator.vue'
@@ -102,7 +103,7 @@ const EmojiTab = {
         // Remote pack
         return `${this.pack.remote.instance}/emoji/${encodeURIComponent(this.pack.remote.baseName)}/${name}`
       } else {
-        return `${this.$store.state.instance.server}/emoji/${encodeURIComponent(this.packName)}/${name}`
+        return `${useInstanceStore().server}/emoji/${encodeURIComponent(this.packName)}/${name}`
       }
     },
 

src/components/settings_modal/helpers/attachment_setting.js

@@ -1,6 +1,7 @@
 import Attachment from 'src/components/attachment/attachment.vue'
 import MediaUpload from 'src/components/media_upload/media_upload.vue'
 import { fileTypeExt } from 'src/services/file_type/file_type.service.js'
+import { useInstanceStore } from 'src/stores/instance.js'
 import Setting from './setting.js'
 
 export default {
@@ -24,9 +25,7 @@ export default {
     attachment() {
       const path = this.realDraftMode ? this.draft : this.state
       // The "server" part is primarily for local dev, but could be useful for alt-domain or multiuser usage.
-      const url = path.includes('://')
-        ? path
-        : this.$store.state.instance.server + path
+      const url = path.includes('://') ? path : useInstanceStore().server + path
       return {
         mimetype: fileTypeExt(url),
         url,

src/components/settings_modal/helpers/pwa_manifest_icons_setting.js

@@ -4,6 +4,7 @@ import Attachment from 'src/components/attachment/attachment.vue'
 import MediaUpload from 'src/components/media_upload/media_upload.vue'
 import Select from 'src/components/select/select.vue'
 import { fileTypeExt } from 'src/services/file_type/file_type.service.js'
+import { useInstanceStore } from 'src/stores/instance.js'
 import Setting from './setting.js'
 
 export default {
@@ -34,9 +35,7 @@ export default {
           url: '',
         }
       }
-      const url = path.includes('://')
-        ? path
-        : this.$store.state.instance.server + path
+      const url = path.includes('://') ? path : useInstanceStore().server + path
 
       return {
         mimetype: fileTypeExt(url),

src/components/settings_modal/tabs/appearance_tab.js

@@ -11,6 +11,7 @@ import { getCssRules } from 'src/services/theme_data/css_utils.js'
 import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
 import { init } from 'src/services/theme_data/theme_data_3.service.js'
 import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
+import { useInstanceStore } from 'src/stores/instance.js'
 import { normalizeThemeData, useInterfaceStore } from 'src/stores/interface'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
@@ -83,7 +84,7 @@ const AppearanceTab = {
 
     const updateIndex = (resource) => {
       const capitalizedResource = resource[0].toUpperCase() + resource.slice(1)
-      const currentIndex = this.$store.state.instance[`${resource}sIndex`]
+      const currentIndex = useInstanceStore()[`${resource}sIndex`]
 
       let promise
       if (currentIndex) {
@@ -273,11 +274,11 @@ const AppearanceTab = {
       return !window.IntersectionObserver
     },
     instanceWallpaper() {
-      this.$store.state.instance.background
+      useInstanceStore().background
     },
     instanceWallpaperUsed() {
       return (
-        this.$store.state.instance.background &&
+        useInstanceStore().background &&
         !this.$store.state.users.currentUser.background_image
       )
     },
@@ -332,20 +333,13 @@ const AppearanceTab = {
       }
     },
     isThemeActive(key) {
-      return (
-        key === (this.mergedConfig.theme || this.$store.state.instance.theme)
-      )
+      return key === (this.mergedConfig.theme || useInstanceStore().theme)
     },
     isStyleActive(key) {
-      return (
-        key === (this.mergedConfig.style || this.$store.state.instance.style)
-      )
+      return key === (this.mergedConfig.style || useInstanceStore().style)
     },
     isPaletteActive(key) {
-      return (
-        key ===
-        (this.mergedConfig.palette || this.$store.state.instance.palette)
-      )
+      return key === (this.mergedConfig.palette || useInstanceStore().palette)
     },
     ...mapActions(useInterfaceStore, ['setStyle', 'setTheme']),
     setPalette(name, data) {
@@ -431,10 +425,10 @@ const AppearanceTab = {
       if (!file) {
         return
       }
-      if (file.size > this.$store.state.instance[slot + 'limit']) {
+      if (file.size > useInstanceStore()[slot + 'limit']) {
         const filesize = fileSizeFormatService.fileSizeFormat(file.size)
         const allowedsize = fileSizeFormatService.fileSizeFormat(
-          this.$store.state.instance[slot + 'limit'],
+          useInstanceStore()[slot + 'limit'],
         )
         useInterfaceStore().pushGlobalNotice({
           messageKey: 'upload.error.message',

src/components/settings_modal/tabs/clutter_tab.js

@@ -4,6 +4,7 @@ import { mapState as mapVuexState } from 'vuex'
 
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Select from 'src/components/select/select.vue'
+import { useInstanceStore } from 'src/stores/instance.js'
 import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
@@ -24,7 +25,7 @@ const ClutterTab = {
   },
   computed: {
     instanceSpecificPanelPresent() {
-      return this.$store.state.instance.showInstanceSpecificPanel
+      return useInstanceStore().showInstanceSpecificPanel
     },
     ...SharedComputedObject(),
     ...mapState(useServerSideStorageStore, {
@@ -33,7 +34,7 @@ const ClutterTab = {
       muteFiltersObject: (store) => store.prefsStorage.simple.muteFilters,
     }),
     ...mapVuexState({
-      blockExpirationSupported: (state) => state.instance.blockExpiration,
+      blockExpirationSupported: (state) => useInstanceStore().blockExpiration,
     }),
     onMuteDefaultActionLv1: {
       get() {

src/components/settings_modal/tabs/composing_tab.js

@@ -6,6 +6,7 @@ import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
 import Select from 'src/components/select/select.vue'
 import localeService from 'src/services/locale/locale.service.js'
 import { cacheKey, clearCache, emojiCacheKey } from 'src/services/sw/sw.js'
+import { useInstanceStore } from 'src/stores/instance.js'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
@@ -108,7 +109,7 @@ const ComposingTab = {
   },
   computed: {
     postFormats() {
-      return this.$store.state.instance.postFormats || []
+      return useInstanceStore().postFormats || []
     },
     postContentOptions() {
       return this.postFormats.map((format) => ({
@@ -130,7 +131,7 @@ const ComposingTab = {
     },
     ...SharedComputedObject(),
     ...mapState({
-      blockExpirationSupported: (state) => state.instance.blockExpiration,
+      blockExpirationSupported: (state) => useInstanceStore().blockExpiration,
     }),
   },
   methods: {

src/components/settings_modal/tabs/developer_tab.js

@@ -1,4 +1,5 @@
 import { cacheKey, clearCache, emojiCacheKey } from 'src/services/sw/sw.js'
+import { useInstanceStore } from 'src/stores/instance.js'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
@@ -7,7 +8,7 @@ const pleromaFeCommitUrl =
 
 const VersionTab = {
   data() {
-    const instance = this.$store.state.instance
+    const instance = useInstanceStore()
     return {
       backendVersion: instance.backendVersion,
       backendRepository: instance.backendRepository,

src/components/settings_modal/tabs/filtering_tab.js

@@ -9,6 +9,7 @@ import {
   newExporter,
   newImporter,
 } from 'src/services/export_import/export_import.js'
+import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface'
 import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
 import BooleanSetting from '../helpers/boolean_setting.vue'
@@ -90,7 +91,7 @@ const FilteringTab = {
   },
   computed: {
     instanceSpecificPanelPresent() {
-      return this.$store.state.instance.showInstanceSpecificPanel
+      return useInstanceStore().showInstanceSpecificPanel
     },
     ...SharedComputedObject(),
     ...mapState(useServerSideStorageStore, {
@@ -99,7 +100,7 @@ const FilteringTab = {
       muteFiltersObject: (store) => store.prefsStorage.simple.muteFilters,
     }),
     ...mapVuexState({
-      blockExpirationSupported: (state) => state.instance.blockExpiration,
+      blockExpirationSupported: (state) => useInstanceStore().blockExpiration,
     }),
     onMuteDefaultActionLv1: {
       get() {

src/components/settings_modal/tabs/general_tab.js

@@ -3,6 +3,7 @@ import { mapState } from 'vuex'
 import FontControl from 'src/components/font_control/font_control.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 import localeService from 'src/services/locale/locale.service.js'
+import { useInstanceStore } from 'src/stores/instance.js'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
@@ -50,7 +51,7 @@ const GeneralTab = {
     },
     ...SharedComputedObject(),
     ...mapState({
-      blockExpirationSupported: (state) => state.instance.blockExpiration,
+      blockExpirationSupported: (state) => useInstanceStore().blockExpiration,
     }),
   },
   methods: {

src/components/settings_modal/tabs/layout_tab.js

@@ -1,3 +1,4 @@
+import { useInstanceStore } from 'src/stores/instance.js'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
@@ -30,10 +31,10 @@ const GeneralTab = {
   },
   computed: {
     postFormats() {
-      return this.$store.state.instance.postFormats || []
+      return useInstanceStore().postFormats || []
     },
     instanceShoutboxPresent() {
-      return this.$store.state.instance.shoutAvailable
+      return useInstanceStore().shoutAvailable
     },
     columns() {
       const mode = this.$store.getters.mergedConfig.thirdColumnMode

src/components/settings_modal/tabs/mutes_and_blocks_tab.js

@@ -12,6 +12,7 @@ import MuteCard from 'src/components/mute_card/mute_card.vue'
 import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import SelectableList from 'src/components/selectable_list/selectable_list.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+import { useInstanceStore } from 'src/stores/instance.js'
 import { useOAuthTokensStore } from 'src/stores/oauth_tokens'
 
 const BlockList = withLoadMore({
@@ -64,7 +65,7 @@ const MutesAndBlocks = {
   },
   computed: {
     knownDomains() {
-      return this.$store.state.instance.knownDomains
+      return useInstanceStore().knownDomains
     },
     user() {
       return this.$store.state.users.currentUser

src/components/settings_modal/tabs/old_theme_tab/old_theme_tab.js

@@ -41,6 +41,7 @@ import {
 } from 'src/services/theme_data/theme_data.service.js'
 import { init } from 'src/services/theme_data/theme_data_3.service.js'
 import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
+import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface'
 import Preview from './theme_preview.vue'
 
@@ -125,7 +126,7 @@ export default {
     }
   },
   created() {
-    const currentIndex = this.$store.state.instance.themesIndex
+    const currentIndex = useInstanceStore().themesIndex
 
     let promise
     if (currentIndex) {

src/components/settings_modal/tabs/security_tab/security_tab.js

@@ -1,6 +1,7 @@
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import localeService from 'src/services/locale/locale.service.js'
+import { useInstanceStore } from 'src/stores/instance.js'
 import { useOAuthTokensStore } from 'src/stores/oauth_tokens'
 import Mfa from './mfa.vue'
 
@@ -42,7 +43,7 @@ const SecurityTab = {
       return this.$store.state.users.currentUser
     },
     pleromaExtensionsAvailable() {
-      return this.$store.state.instance.pleromaExtensionsAvailable
+      return useInstanceStore().pleromaExtensionsAvailable
     },
     oauthTokens() {
       return useOAuthTokensStore().tokens.map((oauthToken) => {