From 135997a2f31a083a19dad4a8c7142f0e87f4eaaf Mon Sep 17 00:00:00 2001
From: Freddie <freddie@thing.engineering>
Date: Wed, 15 Jul 2026 19:20:33 -0700
Subject: [PATCH 1/2] Show heirlooms with a higher base level as if they have
 upgrades

---
 apps/frontend/components/heirlooms/HeirloomsItem.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/components/heirlooms/HeirloomsItem.svelte b/apps/frontend/components/heirlooms/HeirloomsItem.svelte
index 08dc34c16..5b2bebb8b 100644
--- a/apps/frontend/components/heirlooms/HeirloomsItem.svelte
+++ b/apps/frontend/components/heirlooms/HeirloomsItem.svelte
@@ -53,7 +53,11 @@
         </WowheadLink>
 
         {#if level !== undefined}
-            <div class="pill {getPercentClass((level / heirloom.upgradeItemIds.length) * 100)}">
+            <div
+                class="pill {getPercentClass(
+                    ((level + (6 - heirloom.upgradeItemIds.length)) / 6) * 100
+                )}"
+            >
                 {level} / {heirloom.upgradeBonusIds.length}
             </div>
 

From de6b647ebbbb7bb2e8fa91eb85b7674425d7eb35 Mon Sep 17 00:00:00 2001
From: Freddie <freddie@thing.engineering>
Date: Thu, 16 Jul 2026 12:03:56 -0700
Subject: [PATCH 2/2] Fix paperdoll brightness/saturation binding and logic

---
 .../paperdoll/CharactersPaperdoll.svelte      | 41 +++++++++++++------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/apps/frontend/components/characters/paperdoll/CharactersPaperdoll.svelte b/apps/frontend/components/characters/paperdoll/CharactersPaperdoll.svelte
index 575410159..91d649a89 100644
--- a/apps/frontend/components/characters/paperdoll/CharactersPaperdoll.svelte
+++ b/apps/frontend/components/characters/paperdoll/CharactersPaperdoll.svelte
@@ -12,12 +12,16 @@
 
     let { character }: CharacterProps = $props();
 
-    let selected = $state(character.configuration.backgroundId);
+    let backgroundId = $state(character.configuration.backgroundId);
+    let backgroundBrightness = $state(character.configuration.backgroundBrightness);
+    let backgroundSaturation = $state(character.configuration.backgroundSaturation);
 
     let { backgroundImage, filter } = $derived.by(() => {
         const retBackgroundImage =
             backgroundMap[
-                selected === -1 ? settingsState.value.characters.defaultBackgroundId : selected
+                backgroundId === -1
+                    ? settingsState.value.characters.defaultBackgroundId
+                    : backgroundId
             ];
 
         let retFilter: string = null;
@@ -25,13 +29,17 @@
             const filterParts: string[] = [];
 
             const brightness =
-                character.configuration.backgroundBrightness !== -1
-                    ? character.configuration.backgroundBrightness
-                    : retBackgroundImage.defaultBrightness;
+                backgroundBrightness !== -1
+                    ? backgroundBrightness
+                    : settingsState.value.characters.defaultBackgroundBrightness !== -1
+                      ? settingsState.value.characters.defaultBackgroundBrightness
+                      : retBackgroundImage.defaultBrightness;
             const saturation =
-                character.configuration.backgroundSaturation !== -1
-                    ? character.configuration.backgroundSaturation
-                    : retBackgroundImage.defaultSaturate;
+                backgroundSaturation !== -1
+                    ? backgroundSaturation
+                    : settingsState.value.characters.defaultBackgroundSaturation !== -1
+                      ? settingsState.value.characters.defaultBackgroundSaturation
+                      : retBackgroundImage.defaultSaturate;
 
             if (brightness != 10) {
                 filterParts.push(`brightness(${brightness / 10})`);
@@ -55,6 +63,13 @@
         return imageUrl ? `${imageUrl}${imagePath}` : imagePath;
     });
 
+    $effect(() => {
+        character.configuration.backgroundBrightness = backgroundBrightness;
+    });
+    $effect(() => {
+        character.configuration.backgroundSaturation = backgroundSaturation;
+    });
+
     const leftSide: InventorySlot[] = [
         InventorySlot.Head,
         InventorySlot.Neck,
@@ -207,13 +222,13 @@
     {/if}
 
     <div class="equipped left">
-        {#each leftSide as inventorySlot}
+        {#each leftSide as inventorySlot (inventorySlot)}
             <Equipped {character} {inventorySlot} />
         {/each}
     </div>
 
     <div class="equipped right">
-        {#each rightSide as inventorySlot}
+        {#each rightSide as inventorySlot (inventorySlot)}
             <Equipped {character} {inventorySlot} leftSide={true} />
         {/each}
     </div>
@@ -237,9 +252,9 @@
 
 {#if !sharedState.public}
     <Configure
-        bind:backgroundBrightness={character.configuration.backgroundBrightness}
-        bind:backgroundSaturation={character.configuration.backgroundSaturation}
-        bind:selected
+        bind:backgroundBrightness
+        bind:backgroundSaturation
+        bind:selected={backgroundId}
         {character}
     />
 {/if}