user profile's backgrounds support

src/App.js

@@ -149,13 +149,16 @@ export default {
     userBackground() {
       return this.currentUser.background_image
     },
+    foreignProfileBackground() {
+      return useMergedConfigStore().mergedConfig.allowForeignUserBackground && useInterfaceStore().foreignProfileBackground
+    },
     instanceBackground() {
       return useMergedConfigStore().mergedConfig.hideInstanceWallpaper
         ? null
         : this.instanceBackgroundUrl
     },
     background() {
-      return this.userBackground || this.instanceBackground
+      return this.foreignProfileBackground || this.userBackground || this.instanceBackground
     },
     bgStyle() {
       if (this.background) {

src/App.scss

@@ -200,6 +200,7 @@ nav {
   background-color: var(--wallpaper);
   background-image: var(--body-background-image);
   background-position: 50%;
+  transition: background-image 1s;
 }
 
 .underlay {

src/components/settings_modal/tabs/appearance_tab.vue

@@ -263,6 +263,11 @@
             {{ $t('settings.hide_wallpaper') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="allowForeignUserBackground">
+            {{ $t('settings.foreign_user_background') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting path="compactProfiles">
             {{ $t('settings.compact_profiles') }}

src/components/user_profile/user_profile.js

@@ -11,6 +11,7 @@ import Timeline from '../timeline/timeline.vue'
 import UserCard from '../user_card/user_card.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
@@ -56,9 +57,14 @@ const UserProfile = {
     const routeParams = this.$route.params
     this.load({ name: routeParams.name, id: routeParams.id })
     this.tab = get(this.$route, 'query.tab', defaultTabKey)
+    useInterfaceStore().setForeignProfileBackground(this.user?.background_image)
+  },
+  updated() {
+    useInterfaceStore().setForeignProfileBackground(this.user?.background_image)
   },
   unmounted() {
     this.stopFetching()
+    useInterfaceStore().setForeignProfileBackground(null)
   },
   computed: {
     timeline() {

src/i18n/en.json

@@ -636,6 +636,7 @@
     "navbar_column_stretch": "Stretch navbar to columns width",
     "always_show_post_button": "Always show floating New Post button",
     "hide_wallpaper": "Hide instance wallpaper",
+    "foreign_user_background": "Allow other user's profiles to override wallpaper",
     "preload_images": "Preload images",
     "use_one_click_nsfw": "Open NSFW attachments with just one click",
     "hide_post_stats": "Hide post statistics (e.g. the number of favorites)",

src/modules/default_config_state.js

@@ -140,6 +140,10 @@ export const INSTANCE_DEFAULT_CONFIG_DEFINITIONS = {
     description: 'Hide Instance-specific panel',
     default: false,
   },
+  allowForeignUserBackground: {
+    description: 'Allow other user\'s profiles to override wallpaper',
+    default: true,
+  },
   hideInstanceWallpaper: {
     description: 'Hide Instance default background',
     default: false,

src/stores/interface.js

@@ -60,6 +60,7 @@ export const useInterfaceStore = defineStore('interface', {
     globalNotices: [],
     layoutHeight: 0,
     lastTimeline: null,
+    foreignProfileBackground: null,
   }),
   actions: {
     setTemporaryChanges({ confirm, revert }) {
@@ -96,6 +97,9 @@ export const useInterfaceStore = defineStore('interface', {
         console.error(`${error}`)
       }
     },
+    setForeignProfileBackground(url) {
+      this.foreignProfileBackground = url
+    },
     settingsSaved({ success, error }) {
       if (success) {
         if (this.noticeClearTimeout) {