diff --git a/src/App.js b/src/App.js index ae34d9d5e..afb1d69b6 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,10 @@ import { throttle } from 'lodash' -import { mapState } from 'pinia' +import { mapActions, mapState } from 'pinia' import { defineAsyncComponent } from 'vue' -import { mapGetters } from 'vuex' +import { useInstanceStore } from 'src/stores/instance.js' +import { useInterfaceStore } from 'src/stores/interface.js' +import { useShoutStore } from 'src/stores/shout.js' import { useSyncConfigStore } from 'src/stores/sync_config.js' import DesktopNav from './components/desktop_nav/desktop_nav.vue' import EditStatusModal from './components/edit_status_modal/edit_status_modal.vue' @@ -22,9 +24,6 @@ import UserReportingModal from './components/user_reporting_modal/user_reporting import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue' import { getOrCreateServiceWorker } from './services/sw/sw' import { windowHeight, windowWidth } from './services/window_utils/window_utils' -import { useInstanceStore } from 'src/stores/instance.js' -import { useInterfaceStore } from 'src/stores/interface.js' -import { useShoutStore } from 'src/stores/shout.js' export default { name: 'app', @@ -155,16 +154,7 @@ export default { newPostButtonShown() { if (this.isChats) return false if (this.isListEdit) return false - return ( - useSyncConfigStore().mergedConfig.alwaysShowNewPostButton || - this.layoutType === 'mobile' - ) - }, - shoutboxPosition() { - return useSyncConfigStore().mergedConfig.alwaysShowNewPostButton || false - }, - layoutType() { - return useInterfaceStore().layoutType + return (this.alwaysShowNewPostButton || this.layoutType === 'mobile') }, reverseLayout() { const { thirdColumnMode, sidebarRight: reverseSetting } = @@ -177,19 +167,23 @@ export default { : !reverseSetting } }, - noSticky() { - return useSyncConfigStore().mergedConfig.disableStickyHeaders - }, - showScrollbars() { - return useSyncConfigStore().mergedConfig.showScrollbars - }, scrollParent() { return window /* this.$refs.appContentRef */ }, - ...mapGetters(['mergedConfig']), + + ...mapState(useSyncConfigStore, { + shoutboxPosition: (store) => store.mergedConfig.alwaysShowSubjectInput || false, + alwaysShowSubjectInput: (store) => store.mergedConfig.alwaysShowSubjectInput, + }), + + ...mapState(useInterfaceStore, ['layoutType']), + ...mapState(useSyncConfigStore, { hideShoutbox: (store) => store.mergedConfig.hideShoutbox, + noSticky: (store) => store.mergedConfig.disableStickyHeaders, + showScrollbars: (store) => store.mergedConfig.showScrollbars, }), + ...mapState(useInstanceStore, { instanceBackground: (store) => this.mergedConfig.hideInstanceWallpaper ? null : store.background, @@ -207,8 +201,8 @@ export default { }, methods: { resizeHandler() { - useInterfaceStore().setLayoutWidth(windowWidth()) - useInterfaceStore().setLayoutHeight(windowHeight()) + this.setLayoutWidth(windowWidth()) + this.setLayoutHeight(windowHeight()) }, scrollHandler() { const scrollPosition = @@ -255,5 +249,6 @@ export default { splashscreenRoot.classList.add('hidden') document.querySelector('#app').classList.remove('hidden') }, + ...mapActions(useInterfaceStore, ['setLayoutWidth', 'setLayoutHeight']), }, } diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index af3bf3d69..f6f132efd 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -1,5 +1,5 @@ -import { mapGetters } from 'vuex' import { mapState } from 'pinia' +import { mapGetters } from 'vuex' import { useInstanceStore } from 'src/stores/instance.js' import { useMediaViewerStore } from 'src/stores/media_viewer' @@ -56,7 +56,8 @@ const Attachment = { data() { return { localDescription: this.description || this.attachment.description, - nsfwImage: useInstanceStore().instanceIdentity.nsfwCensorImage || nsfwImage, + nsfwImage: + useInstanceStore().instanceIdentity.nsfwCensorImage || nsfwImage, hideNsfwLocal: useSyncConfigStore().mergedConfig.hideNsfw, preloadImage: useSyncConfigStore().mergedConfig.preloadImage, loading: false, diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 2644d53e4..9c3a1d6db 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -3,8 +3,8 @@ import { defineAsyncComponent } from 'vue' import Popover from 'src/components/popover/popover.vue' import { ensureFinalFallback } from 'src/i18n/languages.js' -import { useInstanceStore } from 'src/stores/instance.js' import { useEmojiStore } from 'src/stores/emoji.js' +import { useInstanceStore } from 'src/stores/instance.js' import { useSyncConfigStore } from 'src/stores/sync_config.js' import Checkbox from '../checkbox/checkbox.vue' import StillImage from '../still-image/still-image.vue' diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js index d9580d8a2..eb79a95b1 100644 --- a/src/components/mention_link/mention_link.js +++ b/src/components/mention_link/mention_link.js @@ -1,9 +1,9 @@ +import { mapState as mapPiniaState } from 'pinia' import { defineAsyncComponent } from 'vue' import { mapGetters, mapState } from 'vuex' -import { mapState as mapPiniaState } from 'pinia' -import { useSyncConfigStore } from 'src/stores/sync_config.js' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' +import { useSyncConfigStore } from 'src/stores/sync_config.js' import { highlightClass, highlightStyle, @@ -99,7 +99,10 @@ const MentionLink = { return this.user && this.user.screen_name_ui }, highlight() { - return this.user && useSyncConfigStore().mergedConfig.highlight[this.user.screen_name] + return ( + this.user && + useSyncConfigStore().mergedConfig.highlight[this.user.screen_name] + ) }, highlightType() { return this.highlight && '-' + this.highlight.type diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js index 6be7787c0..56fecf9ae 100644 --- a/src/components/nav_panel/nav_panel.js +++ b/src/components/nav_panel/nav_panel.js @@ -117,8 +117,7 @@ const NavPanel = { new Set(store.prefsStorage.collections.pinnedNavItems), }), ...mapPiniaState(useInstanceStore, { - bubbleTimeline: (store) => - store.featureSet.localBubble, + bubbleTimeline: (store) => store.featureSet.localBubble, pleromaChatMessagesAvailable: (store) => store.featureSet.pleromaChatMessagesAvailable, bookmarkFolders: (store) => diff --git a/src/components/navigation/navigation_pins.js b/src/components/navigation/navigation_pins.js index 1789a6d9c..2f347f9ad 100644 --- a/src/components/navigation/navigation_pins.js +++ b/src/components/navigation/navigation_pins.js @@ -77,8 +77,7 @@ const NavPanel = { federating: (store) => store.featureSet.federating, pleromaChatMessagesAvailable: (store) => store.featureSet.pleromaChatMessagesAvailable, - bubbleTimelinesSupported: (store) => - store.featureSet.localBubble, + bubbleTimelinesSupported: (store) => store.featureSet.localBubble, }), ...mapState({ currentUser: (state) => state.users.currentUser, diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index f5d5c3f41..a42e32fc6 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -183,7 +183,7 @@ const PostStatusForm = { } const scope = - (this.copyMessageScope && this.scopeCopy) || + (this.copyMessageScope && this.scopeCopy) || this.copyMessageScope === 'direct' ? this.copyMessageScope : this.$store.state.users.currentUser.default_scope diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js index 35108d47b..7ca98ebf8 100644 --- a/src/components/settings_modal/helpers/setting.js +++ b/src/components/settings_modal/helpers/setting.js @@ -228,8 +228,6 @@ export default { }, configSource() { switch (this.realSource) { - case 'server-side': - return useSyncConfigStore().mergedConfig case 'profile': return this.$store.state.profileConfig case 'admin': @@ -242,14 +240,8 @@ export default { if (this.path == null) { return (k, v) => this.$emit('update:modelValue', v) } + switch (this.realSource) { - case 'server-side': { - return (originalPath, value, operator) => { - const path = `simple.${originalPath}` - useSyncConfigStore().setPreference({ path, value }) - useSyncConfigStore().pushSyncConfig() - } - } case 'profile': return (k, v) => this.$store.dispatch('setProfileOption', { name: k, value: v }) @@ -257,15 +249,33 @@ export default { return (k, v) => this.$store.dispatch('pushAdminSetting', { path: k, value: v }) default: - if (this.timedApplyMode) { - return (k, v) => - this.$store.dispatch('setOptionTemporarily', { - name: k, - value: v, - }) - } else { - return (k, v) => - this.$store.dispatch('setOption', { name: k, value: v }) + return (originalPath, value) => { + const path = `simple.${originalPath}` + + if (!this.timedApplyMode) { + useSyncConfigStore().setPreference({ path, value }) + useSyncConfigStore().pushSyncConfig() + } else { + if (useInterfaceStore().temporaryChangesTimeoutId !== null) { + console.error("Can't track more than one temporary change") + return + } + + useSyncConfigStore().setPreference({ path, value }) + const oldValue = get(this.configSource, path) + + const confirm = () => { + useSyncConfigStore().pushSyncConfig() + useInterfaceStore().clearTemporaryChanges() + } + + const revert = () => { + useSyncConfigStore().setPreference({ path, value: oldValue }) + useInterfaceStore().clearTemporaryChanges() + } + + useInterfaceStore().setTemporaryChanges({ confirm, revert }) + } } } }, @@ -273,10 +283,8 @@ export default { switch (this.realSource) { case 'profile': return {} - case 'server-side': - return get(useInstanceStore().prefsStorage, this.path) default: - return get(this.$store.getters.defaultConfig, this.path) + return get(useInstanceStore().prefsStorage, this.path) } }, isProfileSetting() { diff --git a/src/components/settings_modal/helpers/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js index 731fee206..142fe3022 100644 --- a/src/components/settings_modal/helpers/shared_computed_object.js +++ b/src/components/settings_modal/helpers/shared_computed_object.js @@ -4,18 +4,15 @@ import { mapGetters, mapState } from 'vuex' import { useSyncConfigStore } from 'src/stores/sync_config.js' const SharedComputedObject = () => ({ + ...mapPiniaState(useSyncConfigStore, ['mergedConfig']), ...mapPiniaState(useSyncConfigStore, { - serverSide: (store) => store.state.prefsStorage, + expertLevel: (store) => store.mergedConfig.expertLevel, }), - ...mapGetters(['mergedConfig']), ...mapState({ adminConfig: (state) => state.adminSettings.config, adminDraft: (state) => state.adminSettings.draft, user: (state) => state.users.currentUser, }), - expertLevel() { - return this.mergedConfig.expertLevel > 0 - }, }) export default SharedComputedObject diff --git a/src/components/settings_modal/tabs/clutter_tab.vue b/src/components/settings_modal/tabs/clutter_tab.vue index 59e942492..6174bee50 100644 --- a/src/components/settings_modal/tabs/clutter_tab.vue +++ b/src/components/settings_modal/tabs/clutter_tab.vue @@ -4,57 +4,38 @@

{{ $t('settings.interface') }}