Android build v1.0.30

src/components/CustomizeScreen.tsx

@@ -105,7 +105,7 @@ export function CustomizeScreen({ profile, onBack, onSaved }: Props) {
 
   return (
     <section className="content-screen customize-screen">
-      <div className="screen-heading">
+      <div className="screen-heading customize-heading">
         <div>
           <p className="eyebrow">Character Workshop</p>
           <h1>Customize Character</h1>
@@ -114,6 +114,7 @@ export function CustomizeScreen({ profile, onBack, onSaved }: Props) {
       </div>
 
       <div className="customize-tabs" role="tablist" aria-label="Customize character sections">
+        <button className="back-button customize-tab-back" onClick={onBack} type="button">Back</button>
         {([
           { key: 'equipment', label: 'Equipment' },
           { key: 'crafting', label: 'Crafting' },

src/components/EquipmentScreen.tsx

@@ -25,7 +25,9 @@ const SLOT_LABELS: Record<EquipmentSlot, string> = {
 }
 
 const EQUIPMENT_LIST_PAGE_SIZE = 3
-const CRAFTING_LIST_PAGE_SIZE = 4
+const CRAFTING_LIST_PAGE_SIZE = 3
+const CRAFTING_FILTER_SLOTS = (Object.keys(SLOT_LABELS) as EquipmentSlot[])
+  .filter((slot) => slot !== 'component')
 
 type Props = {
   profile: CharacterProfile
@@ -377,9 +379,25 @@ export function EquipmentScreen({
               title: selectedItem.equipped ? 'Already Equipped' : 'Empty Slot',
               status: 'Comparison',
             }]),
+          ...(upgradeRecipe
+            ? [
+              {
+                glyph: upgradeRecipe.item.glyph,
+                title: `Upgrade to ${upgradeRecipe.item.name}`,
+                meta: `Item Level ${upgradeRecipe.item.itemLevel}`,
+                status: upgradeRecipe.canCraft ? 'Ready' : 'Missing materials',
+              },
+              ...upgradeRecipe.components.map((component) => ({
+                glyph: component.item.glyph,
+                title: component.item.name,
+                meta: `Required for upgrade`,
+                status: `${component.owned}/${component.quantity}`,
+              })),
+            ]
+            : []),
         ],
     }
-  }, [comparisonItem, equipmentTab, selectedItem, selectedRecipe])
+  }, [comparisonItem, equipmentTab, selectedItem, selectedRecipe, upgradeRecipe])
 
   useDualScreenWorkshopPublisher(workshopState, dualScreenEnabled)
 
@@ -573,7 +591,7 @@ export function EquipmentScreen({
                     <strong>All</strong>
                     <span>{profile.craftingRecipes.length}</span>
                   </button>
-                  {(Object.entries(SLOT_LABELS) as [EquipmentSlot, string][]).map(([slot, label]) => (
+                  {CRAFTING_FILTER_SLOTS.map((slot) => (
                     <button
                       className={slotFilter === slot ? 'active' : ''}
                       disabled={(slotRecipeCounts.get(slot) ?? 0) === 0}
@@ -584,7 +602,7 @@ export function EquipmentScreen({
                       }}
                       type="button"
                     >
-                      <strong>{label}</strong>
+                      <strong>{SLOT_LABELS[slot]}</strong>
                       <span>{slotRecipeCounts.get(slot) ?? 0}</span>
                     </button>
                   ))}