Merge pull request 'instance-migration' (#3470) from instance-migration into develop

Reviewed-on: https://git.pleroma.social/pleroma/pleroma-fe/pulls/3470

src/components/settings_modal/admin_tabs/emoji_tab.js

@@ -6,12 +6,14 @@ 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 { useInterfaceStore } from 'src/stores/interface'
 import EmojiEditingPopover from '../helpers/emoji_editing_popover.vue'
 import ModifiedIndicator from '../helpers/modified_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faArrowsRotate,
@@ -102,7 +104,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/admin_tabs/frontends_tab.js

@@ -1,6 +1,5 @@
 import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
 import Popover from 'src/components/popover/popover.vue'
-import { useInterfaceStore } from 'src/stores/interface'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import GroupSetting from '../helpers/group_setting.vue'
@@ -8,6 +7,8 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'
 
+import { useInterfaceStore } from 'src/stores/interface.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faGlobe } from '@fortawesome/free-solid-svg-icons'
 

src/components/settings_modal/helpers/attachment_setting.js

@@ -1,8 +1,11 @@
 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 Setting from './setting.js'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
+import { fileTypeExt } from 'src/services/file_type/file_type.service.js'
+
 export default {
   ...Setting,
   props: {
@@ -24,9 +27,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

@@ -3,9 +3,12 @@ import { clone } from 'lodash'
 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 Setting from './setting.js'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
+import { fileTypeExt } from 'src/services/file_type/file_type.service.js'
+
 export default {
   ...Setting,
   components: {
@@ -34,9 +37,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/helpers/setting.js

@@ -15,6 +15,10 @@ export default {
       type: String,
       default: null,
     },
+    description: {
+      type: String,
+      default: null,
+    },
     path: {
       type: [String, Array],
       required: false,

src/components/settings_modal/helpers/vertical_tab_switcher.jsx

@@ -8,7 +8,7 @@ import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
 
 import './vertical_tab_switcher.scss'
 
-import { useInterfaceStore } from 'src/stores/interface'
+import { useInterfaceStore } from 'src/stores/interface.js'
 
 const findFirstUsable = (slots) => slots.findIndex((_) => _.props)
 
@@ -35,11 +35,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    parentCollapsed: {
-      required: false,
-      type: Boolean,
-      default: null,
-    },
   },
   data() {
     return {
@@ -202,7 +197,7 @@ export default {
         </div>
         <div
           role="tabpanel"
-          class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}
+          class="contents"
           v-body-scroll-lock={this.bodyScrollLock}
           ref="contents"
         >

src/components/settings_modal/settings_modal.js

@@ -6,13 +6,15 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import Modal from 'src/components/modal/modal.vue'
 import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
+import Popover from '../popover/popover.vue'
+
+import { useInterfaceStore } from 'src/stores/interface.js'
+
 import {
   newExporter,
   newImporter,
 } from 'src/services/export_import/export_import.js'
 import getResettableAsyncComponent from 'src/services/resettable_async_component.js'
-import { useInterfaceStore } from 'src/stores/interface'
-import Popover from '../popover/popover.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faWindowMinimize } from '@fortawesome/free-regular-svg-icons'

src/components/settings_modal/settings_modal_admin_content.js

@@ -1,4 +1,3 @@
-import { useInterfaceStore } from 'src/stores/interface'
 import AuthTab from './admin_tabs/auth_tab.vue'
 import EmojiTab from './admin_tabs/emoji_tab.vue'
 import FederationTab from './admin_tabs/federation_tab.vue'
@@ -18,6 +17,8 @@ import RegistrationsTab from './admin_tabs/registrations_tab.vue'
 import UploadsTab from './admin_tabs/uploads_tab.vue'
 import VerticalTabSwitcher from './helpers/vertical_tab_switcher.jsx'
 
+import { useInterfaceStore } from 'src/stores/interface.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faChain,

src/components/settings_modal/settings_modal_user_content.js

@@ -1,4 +1,3 @@
-import { useInterfaceStore } from 'src/stores/interface'
 import VerticalTabSwitcher from './helpers/vertical_tab_switcher.jsx'
 import AppearanceTab from './tabs/appearance_tab.vue'
 import ClutterTab from './tabs/clutter_tab.vue'
@@ -16,6 +15,8 @@ import ProfileTab from './tabs/profile_tab.vue'
 import SecurityTab from './tabs/security_tab/security_tab.vue'
 import StyleTab from './tabs/style_tab/style_tab.vue'
 
+import { useInterfaceStore } from 'src/stores/interface.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBell,

src/components/settings_modal/settings_modal_user_content.vue

@@ -3,7 +3,6 @@
     ref="tabSwitcher"
     class="settings_tab-switcher"
     :scrollable-tabs="true"
-    :child-collapsed="childCollapsed"
     :body-scroll-lock="bodyLock"
     :hide-header="navHideHeader"
   >

src/components/settings_modal/tabs/appearance_tab.js

@@ -2,6 +2,18 @@ import { mapActions } from 'pinia'
 
 import fileSizeFormatService from 'src/components/../services/file_size_format/file_size_format.js'
 import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import FloatSetting from '../helpers/float_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+import UnitSetting from '../helpers/unit_setting.vue'
+import Preview from './old_theme_tab/theme_preview.vue'
+
+import { useInstanceStore } from 'src/stores/instance.js'
+import { normalizeThemeData, useInterfaceStore } from 'src/stores/interface.js'
+
 import { newImporter } from 'src/services/export_import/export_import.js'
 import {
   adoptStyleSheets,
@@ -11,15 +23,6 @@ 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 { normalizeThemeData, useInterfaceStore } from 'src/stores/interface'
-import BooleanSetting from '../helpers/boolean_setting.vue'
-import ChoiceSetting from '../helpers/choice_setting.vue'
-import FloatSetting from '../helpers/float_setting.vue'
-import IntegerSetting from '../helpers/integer_setting.vue'
-import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
-import SharedComputedObject from '../helpers/shared_computed_object.js'
-import UnitSetting from '../helpers/unit_setting.vue'
-import Preview from './old_theme_tab/theme_preview.vue'
 
 const AppearanceTab = {
   data() {
@@ -83,7 +86,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 +276,11 @@ const AppearanceTab = {
       return !window.IntersectionObserver
     },
     instanceWallpaper() {
-      this.$store.state.instance.background
+      useInstanceStore().instanceIdentity.background
     },
     instanceWallpaperUsed() {
       return (
-        this.$store.state.instance.background &&
+        useInstanceStore().instanceIdentity.background &&
         !this.$store.state.users.currentUser.background_image
       )
     },
@@ -333,18 +336,21 @@ const AppearanceTab = {
     },
     isThemeActive(key) {
       return (
-        key === (this.mergedConfig.theme || this.$store.state.instance.theme)
+        key ===
+        (this.mergedConfig.theme || useInstanceStore().instanceIdentity.theme)
       )
     },
     isStyleActive(key) {
       return (
-        key === (this.mergedConfig.style || this.$store.state.instance.style)
+        key ===
+        (this.mergedConfig.style || useInstanceStore().instanceIdentity.style)
       )
     },
     isPaletteActive(key) {
       return (
         key ===
-        (this.mergedConfig.palette || this.$store.state.instance.palette)
+        (this.mergedConfig.palette ||
+          useInstanceStore().instanceIdentity.palette)
       )
     },
     ...mapActions(useInterfaceStore, ['setStyle', 'setTheme']),
@@ -431,10 +437,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

@@ -1,10 +1,8 @@
 import { mapActions, mapState } from 'pinia'
 import { v4 as uuidv4 } from 'uuid'
-import { mapState as mapVuexState } from 'vuex'
 
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Select from 'src/components/select/select.vue'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import HelpIndicator from '../helpers/help_indicator.vue'
@@ -12,6 +10,10 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import UnitSetting from '../helpers/unit_setting.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
+
 const ClutterTab = {
   components: {
     BooleanSetting,
@@ -23,18 +25,19 @@ const ClutterTab = {
     HelpIndicator,
   },
   computed: {
-    instanceSpecificPanelPresent() {
-      return this.$store.state.instance.showInstanceSpecificPanel
-    },
     ...SharedComputedObject(),
+    ...mapState(useInstanceCapabilitiesStore, ['shoutAvailable']),
+    ...mapState(useInstanceStore, {
+      showFeaturesPanel: (store) => store.instanceIdentity.showFeaturesPanel,
+      instanceSpecificPanelPresent: (store) =>
+        store.instanceIdentity.showInstanceSpecificPanel &&
+        store.instanceIdentity.instanceSpecificPanelContent,
+    }),
     ...mapState(useServerSideStorageStore, {
       muteFilters: (store) =>
         Object.entries(store.prefsStorage.simple.muteFilters),
       muteFiltersObject: (store) => store.prefsStorage.simple.muteFilters,
     }),
-    ...mapVuexState({
-      blockExpirationSupported: (state) => state.instance.blockExpiration,
-    }),
     onMuteDefaultActionLv1: {
       get() {
         const value = this.$store.state.config.onMuteDefaultAction

src/components/settings_modal/tabs/clutter_tab.vue

@@ -45,6 +45,11 @@
                 {{ $t('settings.hide_scrobbles_after') }}
               </UnitSetting>
             </li>
+            <li v-if="instanceSpecificPanelPresent">
+              <BooleanSetting path="hideISP">
+                {{ $t('settings.hide_isp') }}
+              </BooleanSetting>
+            </li>
           </ul>
         </li>
       </ul>
@@ -73,7 +78,7 @@
             {{ $t('settings.user_card_hide_personal_marks') }}
           </BooleanSetting>
         </li>
-        <li v-if="instanceShoutboxPresent">
+        <li v-if="shoutAvailable">
           <BooleanSetting
             path="hideShoutbox"
           >

src/components/settings_modal/tabs/composing_tab.js

@@ -1,11 +1,9 @@
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import FontControl from 'src/components/font_control/font_control.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 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 BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
@@ -14,6 +12,11 @@ import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import UnitSetting from '../helpers/unit_setting.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
+import localeService from 'src/services/locale/locale.service.js'
+import { cacheKey, clearCache, emojiCacheKey } from 'src/services/sw/sw.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faDatabase,
@@ -26,12 +29,6 @@ import {
 library.add(faGlobe, faMessage, faPenAlt, faDatabase, faSliders)
 
 const ComposingTab = {
-  props: {
-    parentCollapsed: {
-      required: true,
-      type: Boolean,
-    },
-  },
   data() {
     return {
       subjectLineOptions: ['email', 'noop', 'masto'].map((mode) => ({
@@ -108,7 +105,7 @@ const ComposingTab = {
   },
   computed: {
     postFormats() {
-      return this.$store.state.instance.postFormats || []
+      return useInstanceStore().postFormats || []
     },
     postContentOptions() {
       return this.postFormats.map((format) => ({
@@ -129,9 +126,7 @@ const ComposingTab = {
       },
     },
     ...SharedComputedObject(),
-    ...mapState({
-      blockExpirationSupported: (state) => state.instance.blockExpiration,
-    }),
+    ...mapState(useInstanceStore, ['blockExpiration']),
   },
   methods: {
     changeDefaultScope(value) {

src/components/settings_modal/tabs/data_import_export_tab.js

@@ -3,7 +3,8 @@ import { mapState } from 'vuex'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Exporter from 'src/components/exporter/exporter.vue'
 import Importer from 'src/components/importer/importer.vue'
-import { useOAuthTokensStore } from 'src/stores/oauth_tokens'
+
+import { useOAuthTokensStore } from 'src/stores/oauth_tokens.js'
 
 const DataImportExportTab = {
   data() {

src/components/settings_modal/tabs/developer_tab.js

@@ -1,13 +1,16 @@
-import { cacheKey, clearCache, emojiCacheKey } from 'src/services/sw/sw.js'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
+import { cacheKey, clearCache, emojiCacheKey } from 'src/services/sw/sw.js'
+
 const pleromaFeCommitUrl =
   'https://git.pleroma.social/pleroma/pleroma-fe/commit/'
 
 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

@@ -1,16 +1,9 @@
 import { cloneDeep } from 'lodash'
 import { mapActions, mapState } from 'pinia'
 import { v4 as uuidv4 } from 'uuid'
-import { mapState as mapVuexState } from 'vuex'
 
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Select from 'src/components/select/select.vue'
-import {
-  newExporter,
-  newImporter,
-} from 'src/services/export_import/export_import.js'
-import { useInterfaceStore } from 'src/stores/interface'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import HelpIndicator from '../helpers/help_indicator.vue'
@@ -18,6 +11,15 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import UnitSetting from '../helpers/unit_setting.vue'
 
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useInterfaceStore } from 'src/stores/interface'
+import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
+
+import {
+  newExporter,
+  newImporter,
+} from 'src/services/export_import/export_import.js'
+
 const SUPPORTED_TYPES = new Set(['word', 'regexp', 'user', 'user_regexp'])
 
 const FilteringTab = {
@@ -89,18 +91,13 @@ const FilteringTab = {
     HelpIndicator,
   },
   computed: {
-    instanceSpecificPanelPresent() {
-      return this.$store.state.instance.showInstanceSpecificPanel
-    },
     ...SharedComputedObject(),
     ...mapState(useServerSideStorageStore, {
       muteFilters: (store) =>
         Object.entries(store.prefsStorage.simple.muteFilters),
       muteFiltersObject: (store) => store.prefsStorage.simple.muteFilters,
     }),
-    ...mapVuexState({
-      blockExpirationSupported: (state) => state.instance.blockExpiration,
-    }),
+    ...mapState(useInstanceCapabilitiesStore, ['blockExpiration']),
     onMuteDefaultActionLv1: {
       get() {
         const value = this.$store.state.config.onMuteDefaultAction

src/components/settings_modal/tabs/filtering_tab.vue

@@ -47,7 +47,7 @@
             </li>
           </ul>
         </li>
-        <li v-if="blockExpirationSupported">
+        <li v-if="blockExpiration">
           <span class="setting-item">
             <span class="setting-label">
               {{ $t('user_card.default_block_expiration') }}

src/components/settings_modal/tabs/general_tab.js

@@ -1,8 +1,7 @@
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 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 BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
@@ -10,13 +9,12 @@ import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import UnitSetting from '../helpers/unit_setting.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+
+import localeService from 'src/services/locale/locale.service.js'
+
 const GeneralTab = {
-  props: {
-    parentCollapsed: {
-      required: true,
-      type: Boolean,
-    },
-  },
   data() {
     return {
       absoluteTime12hOptions: ['24h', '12h'].map((mode) => ({
@@ -49,9 +47,7 @@ const GeneralTab = {
       },
     },
     ...SharedComputedObject(),
-    ...mapState({
-      blockExpirationSupported: (state) => state.instance.blockExpiration,
-    }),
+    ...mapState(useInstanceCapabilitiesStore, ['blockExpiration']),
   },
   methods: {
     updateProfile() {

src/components/settings_modal/tabs/general_tab.vue

@@ -157,7 +157,7 @@
               </BooleanSetting>
             </li>
             <li
-              v-if="!blockExpirationSupported"
+              v-if="!blockExpiration"
             >
               <BooleanSetting
                 path="modalOnBlock"

src/components/settings_modal/tabs/layout_tab.js

@@ -1,16 +1,14 @@
+import { mapState } from 'pinia'
+
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import UnitSetting from '../helpers/unit_setting.vue'
 
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+
 const GeneralTab = {
-  props: {
-    parentCollapsed: {
-      required: true,
-      type: Boolean,
-    },
-  },
   data() {
     return {
       thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(
@@ -29,12 +27,10 @@ const GeneralTab = {
     ProfileSettingIndicator,
   },
   computed: {
-    postFormats() {
-      return this.$store.state.instance.postFormats || []
-    },
-    instanceShoutboxPresent() {
-      return this.$store.state.instance.shoutAvailable
-    },
+    ...mapState(useInstanceCapabilitiesStore, [
+      'postFormats',
+      'suggestionsEnabled',
+    ]),
     columns() {
       const mode = this.$store.getters.mergedConfig.thirdColumnMode
 

src/components/settings_modal/tabs/layout_tab.vue

@@ -69,11 +69,6 @@
             {{ $t('settings.show_scrollbars') }}
           </BooleanSetting>
         </li>
-        <li v-if="instanceSpecificPanelPresent">
-          <BooleanSetting path="hideISP">
-            {{ $t('settings.hide_isp') }}
-          </BooleanSetting>
-        </li>
         <li>
           <UnitSetting
             path="panelHeaderSize"

src/components/settings_modal/tabs/mutes_and_blocks_tab.js

@@ -12,7 +12,9 @@ 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 { useOAuthTokensStore } from 'src/stores/oauth_tokens'
+
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useOAuthTokensStore } from 'src/stores/oauth_tokens.js'
 
 const BlockList = withLoadMore({
   fetch: (props, $store) => $store.dispatch('fetchBlocks'),
@@ -48,7 +50,7 @@ const MutesAndBlocks = {
   },
   created() {
     useOAuthTokensStore().fetchTokens()
-    this.$store.dispatch('getKnownDomains')
+    useInstanceStore().getKnownDomains()
   },
   components: {
     TabSwitcher,
@@ -64,7 +66,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

@@ -7,6 +7,11 @@ import RangeInput from 'src/components/range_input/range_input.vue'
 import Select from 'src/components/select/select.vue'
 import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+import Preview from './theme_preview.vue'
+
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
+
 import {
   getContrastRatioLayers,
   hex2rgb,
@@ -41,8 +46,6 @@ 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 { useInterfaceStore } from 'src/stores/interface'
-import Preview from './theme_preview.vue'
 
 // List of color values used in v1
 const v1OnlyNames = [
@@ -125,7 +128,7 @@ export default {
     }
   },
   created() {
-    const currentIndex = this.$store.state.instance.themesIndex
+    const currentIndex = useInstanceStore().themesIndex
 
     let promise
     if (currentIndex) {

src/components/settings_modal/tabs/posts_tab.js

@@ -6,12 +6,6 @@ import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
 const GeneralTab = {
-  props: {
-    parentCollapsed: {
-      required: true,
-      type: Boolean,
-    },
-  },
   data() {
     return {
       conversationDisplayOptions: ['tree', 'linear'].map((mode) => ({

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

@@ -1,9 +1,13 @@
 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 { useOAuthTokensStore } from 'src/stores/oauth_tokens'
 import Mfa from './mfa.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useOAuthTokensStore } from 'src/stores/oauth_tokens'
+
+import localeService from 'src/services/locale/locale.service.js'
+
 const SecurityTab = {
   data() {
     return {
@@ -42,7 +46,7 @@ const SecurityTab = {
       return this.$store.state.users.currentUser
     },
     pleromaExtensionsAvailable() {
-      return this.$store.state.instance.pleromaExtensionsAvailable
+      return useInstanceCapabilitiesStore().pleromaExtensionsAvailable
     },
     oauthTokens() {
       return useOAuthTokensStore().tokens.map((oauthToken) => {

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

@@ -20,6 +20,12 @@ import SelectMotion from 'src/components/select/select_motion.vue'
 import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import Tooltip from 'src/components/tooltip/tooltip.vue'
+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 } from 'src/stores/interface'
+
 import {
   getContrastRatio,
   hex2rgb,
@@ -43,10 +49,6 @@ import {
   findColor,
   init,
 } from 'src/services/theme_data/theme_data_3.service.js'
-import { useInterfaceStore } from 'src/stores/interface'
-import StringSetting from '../../helpers/string_setting.vue'
-import Preview from '../old_theme_tab/theme_preview.vue'
-import VirtualDirectivesTab from './virtual_directives_tab.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {

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

@@ -4,6 +4,7 @@ import ColorInput from 'src/components/color_input/color_input.vue'
 import Select from 'src/components/select/select.vue'
 import SelectMotion from 'src/components/select/select_motion.vue'
 import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
+
 import { serializeShadow } from 'src/services/theme_data/iss_serializer.js'
 
 // helper for debugging