fix background image

src/App.js

@@ -136,7 +136,7 @@ export default {
       return this.currentUser.background_image
     },
     instanceBackground() {
-      return this.mergedConfig.hideInstanceWallpaper ? null : this.background
+      return useSyncConfigStore().mergedConfig.hideInstanceWallpaper ? null : this.instanceBackgroundUrl
     },
     background() {
       return this.userBackground || this.instanceBackground
@@ -209,7 +209,7 @@ export default {
       'editingAvailable',
     ]),
     ...mapState(useInstanceStore, {
-      background: (store) => store.instanceIdentity.background,
+      instanceBackgroundUrl: (store) => store.instanceIdentity.background,
       showFeaturesPanel: (store) => store.instanceIdentity.showFeaturesPanel,
       instanceSpecificPanelPresent: (store) =>
         store.instanceIdentity.showInstanceSpecificPanel &&

src/components/conversation/conversation.vue

@@ -88,38 +88,34 @@
             class="thread-ancestor"
             :class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1, '-faded': shouldFadeAncestors}"
           >
-            <status
+            <Status
               ref="statusComponent"
-              :inline-expanded="collapsable && isExpanded"
-              :statusoid="status"
-              :expandable="!isExpanded"
-              :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
-              :focused="isFocused(status.id)"
-              :in-conversation="isExpanded"
-              :highlight="getHighlight()"
-              :replies="getReplies(status.id)"
-              :in-profile="inProfile"
-              :profile-user-id="profileUserId"
               class="conversation-status status-fadein panel-body"
 
+              :statusoid="status"
+              :replies="getReplies(status.id)"
+
+              :expandable="!isExpanded"
+              :focused="isFocused(status.id)"
+              :highlight="getHighlight()"
+              :inline-expanded="collapsable && isExpanded"
+              :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+              :in-profile="inProfile"
+              :in-conversation="isExpanded"
+              :profile-user-id="profileUserId"
               :simple-tree="treeViewIsSimple"
-              :toggle-thread-display="toggleThreadDisplay"
-              :thread-display-status="threadDisplayStatus"
-              :show-thread-recursively="showThreadRecursively"
-              :total-reply-count="totalReplyCount"
-              :total-reply-depth="totalReplyDepth"
               :show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
               :dive="() => diveIntoStatus(status.id)"
 
               :controlled-showing-tall="statusContentProperties[status.id].showingTall"
-              :controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
-              :controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
-              :controlled-replying="statusContentProperties[status.id].replying"
-              :controlled-media-playing="statusContentProperties[status.id].mediaPlaying"
               :controlled-toggle-showing-tall="() => toggleStatusContentProperty(status.id, 'showingTall')"
+              :controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
               :controlled-toggle-expanding-subject="() => toggleStatusContentProperty(status.id, 'expandingSubject')"
+              :controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
               :controlled-toggle-showing-long-subject="() => toggleStatusContentProperty(status.id, 'showingLongSubject')"
+              :controlled-replying="statusContentProperties[status.id].replying"
               :controlled-toggle-replying="() => toggleStatusContentProperty(status.id, 'replying')"
+              :controlled-media-playing="statusContentProperties[status.id].mediaPlaying"
               :controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"
 
               @goto="setHighlight"
@@ -195,26 +191,18 @@
             v-for="status in conversation"
             :key="status.id"
             ref="statusComponent"
-            :inline-expanded="collapsable && isExpanded"
-            :statusoid="status"
-            :expandable="!isExpanded"
-            :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
-            :focused="isFocused(status.id)"
-            :in-conversation="isExpanded"
-            :highlight="getHighlight()"
-            :replies="getReplies(status.id)"
-            :in-profile="inProfile"
-            :profile-user-id="profileUserId"
             class="conversation-status status-fadein panel-body"
+            :statusoid="status"
+            :replies="getReplies(status.id)"
 
-            :toggle-thread-display="toggleThreadDisplay"
-            :thread-display-status="threadDisplayStatus"
-            :show-thread-recursively="showThreadRecursively"
-            :total-reply-count="totalReplyCount"
-            :total-reply-depth="totalReplyDepth"
-            :status-content-properties="statusContentProperties"
-            :set-status-content-property="setStatusContentProperty"
-            :toggle-status-content-property="toggleStatusContentProperty"
+            :expandable="!isExpanded"
+            :focused="isFocused(status.id)"
+            :highlight="getHighlight()"
+            :inline-expanded="collapsable && isExpanded"
+            :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+            :in-profile="inProfile"
+            :in-conversation="isExpanded"
+            :profile-user-id="profileUserId"
 
             @goto="setHighlight"
             @toggle-expanded="toggleExpanded"

src/components/mobile_nav/mobile_nav.js

@@ -52,7 +52,10 @@ const MobileNav = {
       return this.$store.state.users.currentUser
     },
     unseenNotifications() {
-      return unseenNotificationsFromStore(this.$store)
+      return unseenNotificationsFromStore(
+        this.$store,
+        useSyncConfigStore().mergedConfig.notificationVisibility,
+      )
     },
     unseenNotificationsCount() {
       return (

src/components/notifications/notifications.js

@@ -76,7 +76,10 @@ const Notifications = {
       return this.$store.state.notifications.error
     },
     unseenNotifications() {
-      return unseenNotificationsFromStore(this.$store)
+      return unseenNotificationsFromStore(
+        this.$store,
+        useSyncConfigStore().mergedConfig.notificationVisibility,
+      )
     },
     filteredNotifications() {
       if (this.unseenAtTop) {

src/components/quick_view_settings/quick_view_settings.js

@@ -1,10 +1,10 @@
 import { mapState } from 'pinia'
-import { mapGetters } from 'vuex'
 
 import Popover from 'src/components/popover/popover.vue'
 import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
 
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -25,18 +25,12 @@ const QuickViewSettings = {
     QuickFilterSettings,
   },
   methods: {
-    setConversationDisplay(visibility) {
-      this.$store.dispatch('setOption', {
-        name: 'conversationDisplay',
-        value: visibility,
-      })
-    },
     openTab(tab) {
       useInterfaceStore().openSettingsModalTab(tab)
     },
   },
   computed: {
-    ...mapGetters(['mergedConfig']),
+    ...mapState(useSyncConfigStore, ['mergedConfig']),
     ...mapState(useInterfaceStore, {
       mobileLayout: (state) => state.layoutType === 'mobile',
     }),
@@ -47,8 +41,11 @@ const QuickViewSettings = {
       get() {
         return this.mergedConfig.conversationDisplay
       },
-      set(newVal) {
-        this.setConversationDisplay(newVal)
+      set(value) {
+        useSyncConfigStore().setPreference({
+          path: 'simple.conversationDisplay',
+          value,
+        })
       },
     },
     autoUpdate: {
@@ -57,7 +54,7 @@ const QuickViewSettings = {
       },
       set() {
         const value = !this.autoUpdate
-        this.$store.dispatch('setOption', { name: 'streaming', value })
+        useSyncConfigStore().setPreference({ path: 'simple.streaming', value })
       },
     },
     collapseWithSubjects: {
@@ -66,8 +63,8 @@ const QuickViewSettings = {
       },
       set() {
         const value = !this.collapseWithSubjects
-        this.$store.dispatch('setOption', {
-          name: 'collapseMessageWithSubject',
+        useSyncConfigStore().setPreference({
+          path: 'simple.collapseMessageWithSubject',
           value,
         })
       },
@@ -78,8 +75,8 @@ const QuickViewSettings = {
       },
       set() {
         const value = !this.showUserAvatars
-        this.$store.dispatch('setOption', {
-          name: 'mentionLinkShowAvatar',
+        useSyncConfigStore().setPreference({
+          path: 'simple.mentionLinkShowAvatar',
           value,
         })
       },
@@ -90,7 +87,10 @@ const QuickViewSettings = {
       },
       set() {
         const value = !this.muteBotStatuses
-        this.$store.dispatch('setOption', { name: 'muteBotStatuses', value })
+        useSyncConfigStore().setPreference({
+          path: 'simple.muteBotStatuses',
+          value,
+        })
       },
     },
     muteSensitiveStatuses: {
@@ -99,8 +99,8 @@ const QuickViewSettings = {
       },
       set() {
         const value = !this.muteSensitiveStatuses
-        this.$store.dispatch('setOption', {
-          name: 'muteSensitiveStatuses',
+        useSyncConfigStore().setPreference({
+          path: 'simple.muteSensitiveStatuses',
           value,
         })
       },

src/components/side_drawer/side_drawer.js

@@ -10,6 +10,7 @@ import { useAnnouncementsStore } from 'src/stores/announcements'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useInterfaceStore } from 'src/stores/interface'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 import { useShoutStore } from 'src/stores/shout'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -72,7 +73,10 @@ const SideDrawer = {
       return useShoutStore().joined
     },
     unseenNotifications() {
-      return unseenNotificationsFromStore(this.$store)
+      return unseenNotificationsFromStore(
+        this.$store,
+        useSyncConfigStore().mergedConfig.notificationVisibility,
+      )
     },
     unseenNotificationsCount() {
       return this.unseenNotifications.length

src/components/status/status.js

@@ -131,25 +131,26 @@ const Status = {
   },
   props: [
     'statusoid',
+    'replies',
+
     'expandable',
-    'inConversation',
     'focused',
     'highlight',
     'compact',
-    'replies',
     'isPreview',
     'noHeading',
     'inlineExpanded',
     'showPinned',
     'inProfile',
-    'profileUserId',
+    'inConversation',
     'inQuote',
-
+    'profileUserId',
     'simpleTree',
+    'showOtherRepliesAsButton',
+    'dive',
+
     'controlledThreadDisplayStatus',
     'controlledToggleThreadDisplay',
-    'showOtherRepliesAsButton',
-
     'controlledShowingTall',
     'controlledToggleShowingTall',
     'controlledExpandingSubject',
@@ -160,9 +161,8 @@ const Status = {
     'controlledToggleReplying',
     'controlledMediaPlaying',
     'controlledSetMediaPlaying',
-    'dive',
   ],
-  emits: ['interacted'],
+  emits: ['interacted', 'goto', 'toggleExpanded'],
   data() {
     return {
       uncontrolledReplying: false,

src/services/notification_utils/notification_utils.js

@@ -105,15 +105,17 @@ export const filteredNotificationsFromStore = (
   )
 }
 
-export const unseenNotificationsFromStore = (store) => {
+export const unseenNotificationsFromStore = (store, notificationVisibility) => {
   const rootGetters = store.rootGetters || store.getters
   const ignoreInactionableSeen = rootGetters.mergedConfig.ignoreInactionableSeen
 
-  return filteredNotificationsFromStore(store).filter(({ seen, type }) => {
-    if (!ignoreInactionableSeen) return !seen
-    if (seen) return false
-    return ACTIONABLE_NOTIFICATION_TYPES.has(type)
-  })
+  return filteredNotificationsFromStore(store, notificationVisibility).filter(
+    ({ seen, type }) => {
+      if (!ignoreInactionableSeen) return !seen
+      if (seen) return false
+      return ACTIONABLE_NOTIFICATION_TYPES.has(type)
+    },
+  )
 }
 
 export const prepareNotificationObject = (notification, i18n) => {