From 050c7df2e669620a689ab5ac26d6f9c84889d39c Mon Sep 17 00:00:00 2001
From: Oneric <oneric@oneric.stub>
Date: Wed, 14 Feb 2024 17:44:57 +0000
Subject: [PATCH] Display profile background of other users

And add a new frontend setting to hide other people's background.
---
 src/App.js                                         | 7 ++++++-
 src/components/settings_modal/tabs/general_tab.vue | 5 +++++
 src/components/user_profile/user_profile.js        | 7 ++++++-
 src/i18n/en.json                                   | 1 +
 src/modules/config.js                              | 1 +
 src/modules/users.js                               | 9 +++++++++
 6 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index d4b3b41a..3e0d0d6f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -64,6 +64,11 @@ export default {
         '-' + this.layoutType
       ]
     },
+    pageBackground () {
+      return this.mergedConfig.displayPageBackgrounds
+        ? this.$store.state.users.displayBackground
+        : null
+    },
     currentUser () { return this.$store.state.users.currentUser },
     userBackground () { return this.currentUser.background_image },
     instanceBackground () {
@@ -71,7 +76,7 @@ export default {
         ? null
         : this.$store.state.instance.background
     },
-    background () { return this.userBackground || this.instanceBackground },
+    background () { return this.pageBackground || this.userBackground || this.instanceBackground },
     bgStyle () {
       if (this.background) {
         return {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 2754cde0..64950f8a 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -146,6 +146,11 @@
             {{ $t('settings.show_wider_shortcuts') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="displayPageBackgrounds">
+            {{ $t('settings.show_page_backgrounds') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting path="stopGifs">
             {{ $t('settings.stop_gifs') }}
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 9ea8c2a7..eaadca72 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -145,10 +145,12 @@ const UserProfile = {
       if (user) {
         loadById(user.id)
         this.note = user.relationship.note
+        this.$store.dispatch('setDisplayBackground', user.background_image)
       } else {
         this.$store.dispatch('fetchUser', userNameOrId)
-          .then(({ id, relationship }) => {
+          .then(({ id, relationship, background_image }) => {
             this.note = relationship.note
+            this.$store.dispatch('setDisplayBackground', background_image)
             return loadById(id)
           })
           .catch((reason) => {
@@ -225,6 +227,9 @@ const UserProfile = {
     Conversation,
     RichContent,
     FollowedTagList
+  },
+  beforeRouteLeave(to, from) {
+    this.$store.dispatch('setDisplayBackground', null)
   }
 }
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a7fbb12f..7b091cd2 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -750,6 +750,7 @@
         "show_nav_shortcuts": "Show extra navigation shortcuts in top panel",
         "show_panel_nav_shortcuts": "Show timeline navigation shortcuts at the top of the panel",
         "show_scrollbars": "Show side column's scrollbars",
+        "show_page_backgrounds": "Show page-specific backgrounds, e.g. for user profiles",
         "show_wider_shortcuts": "Show wider gap between top panel shortcuts",
         "show_yous": "Show (You)s",
         "stop_gifs": "Pause animated images until you hover on them",
diff --git a/src/modules/config.js b/src/modules/config.js
index 91a966bd..551b5bb6 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -55,6 +55,7 @@ export const defaultState = {
   alwaysShowNewPostButton: false,
   autohideFloatingPostButton: false,
   pauseOnUnfocused: true,
+  displayPageBackgrounds: true,
   stopGifs: undefined,
   replyVisibility: 'all',
   thirdColumnMode: 'notifications',
diff --git a/src/modules/users.js b/src/modules/users.js
index 6968ce1e..b8baf9a4 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -135,6 +135,10 @@ export const mutations = {
     const user = state.usersObject[id]
     user['deactivated'] = deactivated
   },
+  setDisplayBackground(state, url) {
+    console.log("Commiting user profile bg mutation")
+    state.displayBackground = url
+  },
   setCurrentUser (state, user) {
     state.lastLoginName = user.screen_name
     state.currentUser = mergeWith(state.currentUser || {}, user, mergeArrayLength)
@@ -307,6 +311,7 @@ export const defaultState = {
   currentUser: false,
   users: [],
   usersObject: {},
+  displayBackground: null,
   signUpPending: false,
   signUpErrors: [],
   relationships: {},
@@ -319,6 +324,10 @@ const users = {
   mutations,
   getters,
   actions: {
+    setDisplayBackground (store, url) {
+      console.log("Performing user profile bg action...")
+      store.commit('setDisplayBackground', url)
+    },
     fetchUserIfMissing (store, id) {
       if (!store.getters.findUser(id)) {
         store.dispatch('fetchUser', id)