Android build v1.0.30

android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "com.warren.iwanttoheal"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 47
-        versionName "1.0.29"
+        versionCode 48
+        versionName "1.0.30"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

src/App.css

@@ -4395,6 +4395,10 @@ h2 {
   outline-color: var(--gold);
 }
 
+.customize-tab-back {
+  display: none;
+}
+
 .embedded-screen .gear-summary,
 .embedded-screen .talent-toolbar {
   margin-top: 16px;
@@ -6974,6 +6978,10 @@ h2 {
     padding: 6px;
   }
 
+  .workshop-shell .customize-heading {
+    display: none;
+  }
+
   .workshop-shell .screen-heading {
     padding-bottom: 3px;
   }
@@ -6995,6 +7003,10 @@ h2 {
     padding: 5px 8px;
   }
 
+  .workshop-shell .customize-tab-back {
+    display: block;
+  }
+
   .workshop-shell .customize-tabs,
   .workshop-shell .equipment-tabs,
   .workshop-shell .talent-page-tabs {
@@ -7011,7 +7023,8 @@ h2 {
   }
 
   .workshop-shell .customize-tabs {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-columns: 70px repeat(4, minmax(0, 1fr));
+    margin-top: 0;
   }
 
   .workshop-shell .equipment-screen,
@@ -7256,20 +7269,20 @@ h2 {
   }
 
   .workshop-shell .crafting-filter-grid {
-    grid-template-columns: repeat(11, minmax(0, 1fr));
+    grid-template-columns: repeat(10, minmax(0, 1fr));
   }
 
   .workshop-shell .crafting-filter-grid button {
-    min-height: 28px;
-    padding: 3px 1px;
+    min-height: 32px;
+    padding: 4px 2px;
   }
 
   .workshop-shell .crafting-filter-grid strong {
-    font-size: 4px;
+    font-size: 5px;
   }
 
   .workshop-shell .crafting-filter-grid span {
-    font-size: 8px;
+    font-size: 10px;
   }
 
   .workshop-shell .crafting-level-row button {
@@ -7444,7 +7457,7 @@ h2 {
   }
 
   .workshop-shell .crafting-list > button {
-    min-height: 52px;
+    min-height: 68px;
   }
 
   .workshop-shell .crafting-action-row {
@@ -7639,20 +7652,20 @@ h2 {
   }
 
   .workshop-shell .crafting-filter-grid {
-    grid-template-columns: repeat(11, minmax(0, 1fr));
+    grid-template-columns: repeat(10, minmax(0, 1fr));
   }
 
   .workshop-shell .crafting-filter-grid button {
-    min-height: 30px;
-    padding: 3px 1px;
+    min-height: 34px;
+    padding: 4px 2px;
   }
 
   .workshop-shell .crafting-filter-grid strong {
-    font-size: 4px;
+    font-size: 5px;
   }
 
   .workshop-shell .crafting-filter-grid span {
-    font-size: 8px;
+    font-size: 10px;
   }
 
   .workshop-shell .crafting-level-row {
@@ -7661,11 +7674,7 @@ h2 {
 
   .workshop-shell .crafting-list > button {
     display: grid;
-    min-height: 43px;
-  }
-
-  .workshop-shell .crafting-list > button:nth-child(n+4) {
-    display: grid;
+    min-height: 68px;
   }
 
   .workshop-shell .customize-layout {

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>
                   ))}