Merge pull request 'Let (foreign) user profiles override current wallpaper' (#3498) from profile-bg into develop

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

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/status_action_buttons/action_button_container.vue

@@ -79,7 +79,7 @@
       :button="button"
       :status="status"
       v-bind="$attrs"
-      @emojiPickerShown="e => $emit('emojiPickerShown', e)"
+      @emoji-picker-shown="e => $emit('emojiPickerShown', e)"
     />
     <teleport to="#modal">
       <MuteConfirm

src/components/status_action_buttons/status_action_buttons.vue

@@ -20,7 +20,7 @@
           :get-component="getComponent"
           :close="() => { /* no-op */ }"
           :do-action="doAction"
-          @emojiPickerShown="onEmojiPickerShown"
+          @emoji-picker-shown="onEmojiPickerShown"
         />
         <button
           v-if="showPin && currentUser"

src/components/user_profile/user_profile.js

@@ -12,6 +12,7 @@ import UserCard from '../user_card/user_card.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -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() {