added costs to tooltip #10508

src/app/dim-ui/EnergyIncrements.m.scss

@@ -80,3 +80,13 @@
     }
   }
 }
+
+.costs {
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+
+  .cost {
+    font-size: 12px !important;
+  }
+}

src/app/dim-ui/EnergyIncrements.tsx

@@ -1,7 +1,11 @@
 import { t } from 'app/i18next-t';
 import { DimItem } from 'app/inventory/item-types';
+import { getEnergyUpgradeHashes, sumModCosts } from 'app/inventory/store/energy';
 import { EnergySwap } from 'app/loadout-builder/generated-sets/GeneratedSetItem';
+import { useD2Definitions } from 'app/manifest/selectors';
 import { MAX_ARMOR_ENERGY_CAPACITY } from 'app/search/d2-known-values';
+import { compareBy } from 'app/utils/comparators';
+import Cost from 'app/vendors/Cost';
 import clsx from 'clsx';
 import styles from './EnergyIncrements.m.scss';
 import { PressTip } from './PressTip';
@@ -66,16 +70,29 @@ export function EnergyMeterIncrements({
 export function EnergyIncrementsWithPresstip({
   energy,
   wrapperClass,
+  item,
 }: {
   energy: {
     energyCapacity: number;
     energyUsed: number;
   };
   wrapperClass?: string | undefined;
+  item: DimItem;
 }) {
   const { energyCapacity, energyUsed } = energy;
   const energyUnused = Math.max(energyCapacity - energyUsed, 0);
 
+  const defs = useD2Definitions()!;
+  if (!item.energy) {
+    return null;
+  }
+
+  const energyModHashes = getEnergyUpgradeHashes(item, energyUsed || 0);
+  const costs = sumModCosts(
+    defs,
+    energyModHashes.map((h) => defs.InventoryItem.get(h)),
+  ).sort(compareBy((c) => c.quantity));
+
   return (
     <PressTip
       tooltip={
@@ -91,6 +108,13 @@ export function EnergyIncrementsWithPresstip({
               {t('EnergyMeter.UpgradeNeeded', energy)}
             </>
           )}
+          <hr />
+          <div className={styles.costs}>
+            <span>{t('Loadouts.ModPlacement.UpgradeCosts')}</span>
+            {costs.map((cost) => (
+              <Cost key={cost.itemHash} cost={cost} className={styles.cost} />
+            ))}
+          </div>
         </>
       }
       className={wrapperClass}

src/app/loadout-builder/generated-sets/GeneratedSetItem.tsx

@@ -115,7 +115,11 @@ export default function GeneratedSetItem({
       <div className={styles.item}>
         <div className={styles.swapButtonContainer}>
           <LoadoutBuilderItem item={item} onShiftClick={() => pinItem(item)} />
-          <EnergyIncrementsWithPresstip wrapperClass={styles.energyMeter} energy={energy} />
+          <EnergyIncrementsWithPresstip
+            wrapperClass={styles.energyMeter}
+            energy={energy}
+            item={item}
+          />
           {itemOptions.length > 1 ? (
             <button
               type="button"

src/app/loadout/mod-assignment-drawer/ModAssignmentDrawer.tsx

@@ -107,7 +107,6 @@ export default function ModAssignmentDrawer({
 
   // TODO: button to apply mods
   // TODO: consider existing mods in assignment
-
   return (
     <>
       <Sheet
@@ -127,10 +126,10 @@ export default function ModAssignmentDrawer({
                       <EnergyIncrementsWithPresstip
                         energy={energy}
                         wrapperClass={styles.energyMeter}
+                        item={item}
                       />
                     )}
                   </div>
-
                   <Sockets
                     item={item}
                     lockedMods={itemModAssignments[item.id]}