From ad13f2417f193fb7507f99f05ef094cd2be673d7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 27 Nov 2025 12:03:07 +0200
Subject: [PATCH 1/5] fix tab cutoff

---
 .../settings_modal/helpers/vertical_tab_switcher.scss          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/settings_modal/helpers/vertical_tab_switcher.scss b/src/components/settings_modal/helpers/vertical_tab_switcher.scss
index 73aa1ea73..0ce905c2a 100644
--- a/src/components/settings_modal/helpers/vertical_tab_switcher.scss
+++ b/src/components/settings_modal/helpers/vertical_tab_switcher.scss
@@ -65,8 +65,9 @@
     }
 
     .tab-content-wrapper {
+      display: flex;
+      flex-direction: column;
       flex: 1 1 auto;
-      height: 100%;
 
       &.-hidden {
         display: none;

From e4c5a88913edd764041757ea70cd1ff377f16681 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 27 Nov 2025 12:03:15 +0200
Subject: [PATCH 2/5] fix fun content not hiding properly

---
 src/components/settings_modal/tabs/posts_tab.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/settings_modal/tabs/posts_tab.vue b/src/components/settings_modal/tabs/posts_tab.vue
index f95411d61..19389600a 100644
--- a/src/components/settings_modal/tabs/posts_tab.vue
+++ b/src/components/settings_modal/tabs/posts_tab.vue
@@ -239,12 +239,12 @@
       <h3 v-if="expertLevel > 0">
         {{ $t('settings.fun') }}
       </h3>
-      <ul class="setting-list">
+      <ul
+        v-if="expertLevel > 0"
+        class="setting-list"
+      >
         <li v-if="user">
-          <BooleanSetting
-            path="mentionLinkShowYous"
-            expert="1"
-          >
+          <BooleanSetting path="mentionLinkShowYous">
             {{ $t('settings.show_yous') }}
           </BooleanSetting>
         </li>

From 3bc8800c3537489b8a759f1b74c79cf6487e4d95 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 27 Nov 2025 12:26:44 +0200
Subject: [PATCH 3/5] i18n

---
 .../settings_modal/helpers/vertical_tab_switcher.jsx           | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
index ea685576f..7fea1cab8 100644
--- a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
+++ b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
@@ -43,7 +43,7 @@ export default {
     return {
       active: findFirstUsable(this.slots()),
       resizeHandler: null,
-      navSide: 'tabs'
+      navSide: 'tabs',
     }
   },
   computed: {
@@ -144,6 +144,7 @@ export default {
           <button
             type="button"
             onClick={() => this.changeNavSide('tabs')}
+            title={this.$t('nav.back')}
             class="button-unstyled"
           >
             <FAIcon

From 0d04b1c8cecf4ba6a8186e63dc81a2a832eb2075 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 27 Nov 2025 18:20:47 +0200
Subject: [PATCH 4/5] fix scroll again

---
 src/components/settings_modal/helpers/vertical_tab_switcher.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/settings_modal/helpers/vertical_tab_switcher.scss b/src/components/settings_modal/helpers/vertical_tab_switcher.scss
index 0ce905c2a..b51df7d66 100644
--- a/src/components/settings_modal/helpers/vertical_tab_switcher.scss
+++ b/src/components/settings_modal/helpers/vertical_tab_switcher.scss
@@ -67,6 +67,7 @@
     .tab-content-wrapper {
       display: flex;
       flex-direction: column;
+      height: 100%;
       flex: 1 1 auto;
 
       &.-hidden {

From 16f456eaea74ea310cee8c28fb4f93bd1a3173e5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 27 Nov 2025 19:33:47 +0200
Subject: [PATCH 5/5] fun UI for profile background

---
 .../settings_modal/tabs/appearance_tab.js     |   7 ++
 .../settings_modal/tabs/appearance_tab.scss   | 119 ++++++++++++++----
 .../settings_modal/tabs/appearance_tab.vue    |  99 +++++++++------
 3 files changed, 165 insertions(+), 60 deletions(-)

diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index 00568fda6..e4c3741a9 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -236,6 +236,10 @@ const AppearanceTab = {
     noIntersectionObserver () {
       return !window.IntersectionObserver
     },
+    instanceWallpaper () {
+      console.log(this.$store.state.instance.background)
+      this.$store.state.instance.background
+    },
     instanceWallpaperUsed () {
       return this.$store.state.instance.background &&
         !this.$store.state.users.currentUser.background_image
@@ -411,6 +415,9 @@ const AppearanceTab = {
         this.submitBackground('')
       }
     },
+    resetUploadedBackground () {
+      this.backgroundPreview = null
+    },
     submitBackground (background) {
       if (!this.backgroundPreview && background !== '') { return }
 
diff --git a/src/components/settings_modal/tabs/appearance_tab.scss b/src/components/settings_modal/tabs/appearance_tab.scss
index e589c596f..a52bd97d0 100644
--- a/src/components/settings_modal/tabs/appearance_tab.scss
+++ b/src/components/settings_modal/tabs/appearance_tab.scss
@@ -18,7 +18,31 @@
     height: auto;
   }
 
+  .banner-background {
+    display: flex;
+    gap: 1em;
+    flex-wrap: wrap;
+
+    h4 {
+      margin: 0;
+    }
+  }
+
+  .banner-background-input {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+
+    .custom-bg-control {
+      display: grid;
+      gap: 0.5em;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
   .banner-background-preview {
+    display: flex;
     max-width: 100%;
     width: 300px;
     position: relative;
@@ -26,33 +50,86 @@
     img {
       width: 100%;
     }
-  }
 
-  .reset-button {
-    position: absolute;
-    top: 0.2em;
-    right: 0.2em;
-    border-radius: var(--roundness);
-    background-color: rgb(0 0 0 / 60%);
-    opacity: 0.7;
-    width: 1.5em;
-    height: 1.5em;
-    text-align: center;
-    line-height: 1.5em;
-    font-size: 1.5em;
-    cursor: pointer;
+    .fun-monitor {
+      position: relative;
+      pointer-events: none;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
 
-    &:hover {
-      opacity: 1;
-    }
+      * {
+        line-height: 1;
+      }
 
-    svg {
-      color: white;
+      &-display-bezel,
+      &-display-screen {
+        aspect-ratio: 16 / 9;
+        width: 16em;
+      }
+         
+      img {
+        object-fit: cover;
+      }
+
+      .wallpaper {
+        position: absolute;
+        inset: 0;
+        background-color: var(--wallpaper);
+      }
+
+      &-display-uploading {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        display: flex;
+        place-items: center;
+        place-content: center;
+        background-color: rgb(0 0 0 / 60%);
+        font-size: 4em;
+      }
+
+      &-display-screen {
+        padding: 0;
+        overflow: hidden;
+        position: relative;
+
+        &-overlay {
+          background: transparent;
+          position: absolute;
+          inset: 0;
+          z-index: 2;
+        }
+
+        &-image {
+          aspect-ratio: 16 / 9
+        }
+      }
+
+      &-display-bezel {
+        padding: 1em;
+        margin: 0;
+        order: 1;
+        z-index: 3;
+      }
+
+      &-neck {
+        width: 5em;
+        height: 3em;
+        margin-top: -1em;
+        margin-bottom: -0.5em;
+        order: 2
+      }
+
+      &-stand {
+        width: 8em;
+        height: 1em;
+        order: 3;
+        z-index: 1
+      }
     }
   }
 
-
-
   .palettes-container {
     height: 15em;
     overflow: hidden auto;
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 158599a56..d9303ce7b 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -154,46 +154,67 @@
         </div>
       </div>
       <h3>{{ $t('settings.background') }}</h3>
-      <div class="banner-background-preview">
-        <img :src="user.background_image">
-        <button
-          v-if="!isDefaultBackground"
-          class="button-unstyled reset-button"
-          :title="$t('settings.reset_profile_background')"
-          @click="resetBackground"
-        >
-          <FAIcon
-            icon="times"
-            type="button"
-          />
-        </button>
+      <div class="banner-background">
+        <div class="banner-background-preview">
+          <div class="fun-monitor">
+            <div class="fun-monitor-stand button-default" />
+            <div class="fun-monitor-neck button-default" />
+            <div class="fun-monitor-display-bezel button-default">
+              <div class="fun-monitor-display-screen input">
+              <img
+                v-if="backgroundPreview || user.background_image || instanceWallpaper"
+                class="fun-monitor-display-screen-image"
+                :src="backgroundPreview || user.background_image || instanceWallpaper"
+              />
+              <div v-else class="wallpaper" />
+              <div class="fun-monitor-display-screen-overlay input" />
+                <div
+                  v-if="backgroundUploading"
+                  class="fun-monitor-display-uploading"
+                >
+                  <FAIcon
+                    class="fun-monitor-display-screen-uploading"
+                    spin
+                    icon="circle-notch"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="banner-background-input">
+          <h4>{{ $t('settings.set_new_background') }}</h4>
+          <input
+            type="file"
+            class="input"
+            @change="uploadFile('background', $event)"
+          >
+          <div class="custom-bg-control">
+            <button
+              :disabled="!backgroundPreview"
+              class="btn button-default"
+              @click="submitBackground(background)"
+            >
+              {{ $t('settings.save') }}
+            </button>
+            <button
+              :disabled="!backgroundPreview"
+              class="btn button-default"
+              @click="resetUploadedBackground"
+            >
+              {{ $t('settings.reset') }}
+            </button>
+          </div>
+          <button
+            v-if="!isDefaultBackground"
+            class="btn button-default reset-button"
+            :title="$t('settings.reset_profile_background')"
+            @click="resetBackground"
+          >
+            {{ $t('settings.reset_profile_background') }}
+          </button>
+        </div>
       </div>
-      <p>{{ $t('settings.set_new_background') }}</p>
-      <img
-        v-if="backgroundPreview"
-        class="banner-background-preview"
-        :src="backgroundPreview"
-      >
-      <div>
-        <input
-          type="file"
-          class="input"
-          @change="uploadFile('background', $event)"
-        >
-      </div>
-      <FAIcon
-        v-if="backgroundUploading"
-        class="uploading"
-        spin
-        icon="circle-notch"
-      />
-      <button
-        v-else-if="backgroundPreview"
-        class="btn button-default"
-        @click="submitBackground(background)"
-      >
-        {{ $t('settings.save') }}
-      </button>
       <h3>{{ $t('settings.visual_tweaks') }}</h3>
       <div class="alert neutral theme-notice">
         {{ $t("settings.style.visual_tweaks_section_note") }}