feat: selecting Compare from item popup in Compare panel will set new initialItemId

config/i18n.json

@@ -99,6 +99,7 @@
   "Compare": {
     "NoModArmor": "Pre-mods",
     "Button": "Compare",
+    "New": "New Compare",
     "Archetype": "Archetype",
     "ButtonHelp": "Compare Items",
     "CompareBaseStats": "Show Base Stats",

src/app/compare/CompareItem.tsx

@@ -79,7 +79,7 @@ export default memo(function CompareItem({
           {item.taggable ? <TagActionButton item={item} label={false} hideKeys={true} /> : <div />}
           <button type="button" className={styles.close} onClick={() => remove(item)} />
         </div>
-        <ItemPopupTrigger item={item} noCompare={true}>
+        <ItemPopupTrigger item={item} extraData={{ fromCompare: true }}>
           {(ref, onClick) => (
             <div className={styles.itemAside} ref={ref} onClick={onClick}>
               <ConnectedInventoryItem item={item} />

src/app/compare/reducer.ts

@@ -25,7 +25,7 @@ export interface CompareSession {
   /**
    * The instance ID of the first item added to compare, so we can highlight it.
    */
-  readonly initialItemId?: string;
+  initialItemId?: string;
 
   /**
    * The ID of the character (if any) whose vendor response we should intermingle with owned items

src/app/inventory/ItemPopupTrigger.tsx

@@ -1,5 +1,3 @@
-import { addCompareItem } from 'app/compare/actions';
-import { compareOpenSelector } from 'app/compare/selectors';
 import { useThunkDispatch } from 'app/store/thunk-dispatch';
 import { ThunkResult } from 'app/store/types';
 import React, { JSX, useCallback, useEffect, useRef } from 'react';
@@ -19,12 +17,9 @@ export default function ItemPopupTrigger({
   item,
   extraData,
   children,
-  noCompare,
 }: {
   item: DimItem;
   extraData?: ItemPopupExtraInfo;
-  /** Don't allow adding to compare */
-  noCompare?: boolean;
   children: (
     ref: React.Ref<HTMLDivElement>,
     onClick: (e: React.MouseEvent) => void,
@@ -36,9 +31,9 @@ export default function ItemPopupTrigger({
   const clicked = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation();
-      dispatch(itemPopupTriggerClicked(item, ref, extraData, noCompare));
+      dispatch(itemPopupTriggerClicked(item, ref, extraData));
     },
-    [dispatch, extraData, item, noCompare],
+    [dispatch, extraData, item],
   );
 
   // Close the popup if this component is unmounted
@@ -58,14 +53,11 @@ function itemPopupTriggerClicked(
   item: DimItem,
   ref: React.RefObject<HTMLDivElement | null>,
   extraData?: ItemPopupExtraInfo,
-  noCompare?: boolean,
 ): ThunkResult {
-  return async (dispatch, getState) => {
+  return async (dispatch) => {
     dispatch(clearNewItem(item.id));
 
-    if (!noCompare && compareOpenSelector(getState())) {
-      dispatch(addCompareItem(item));
-    } else if (ref.current) {
+    if (ref.current) {
       showItemPopup(item, ref.current, extraData);
     }
   };

src/app/item-actions/ActionButtons.tsx

@@ -1,4 +1,5 @@
 import { addCompareItem } from 'app/compare/actions';
+import { compareSessionSelector } from 'app/compare/selectors';
 import { settingSelector } from 'app/dim-api/selectors';
 import { t } from 'app/i18next-t';
 import { showInfuse } from 'app/infuse/infuse';
@@ -25,13 +26,18 @@ import styles from './ActionButtons.m.scss';
 interface ActionButtonProps {
   item: DimItem;
   label?: boolean;
+  fromCompare?: boolean;
 }
 
-export function CompareActionButton({ item, label }: ActionButtonProps) {
+export function CompareActionButton({ item, label, fromCompare = false }: ActionButtonProps) {
   const dispatch = useDispatch();
+  const session = useSelector(compareSessionSelector);
 
   const openCompare = () => {
     hideItemPopup();
+    if (fromCompare && session) {
+      session.initialItemId = item.id;
+    }
     dispatch(addCompareItem(item));
   };
 
@@ -42,7 +48,9 @@ export function CompareActionButton({ item, label }: ActionButtonProps) {
   return (
     <ActionButton onClick={openCompare} hotkey="c" hotkeyDescription={t('Compare.ButtonHelp')}>
       <AppIcon icon={compareIcon} />
-      {label && <span className={styles.label}>{t('Compare.Button')}</span>}
+      {label && (
+        <span className={styles.label}>{fromCompare ? t('Compare.New') : t('Compare.Button')}</span>
+      )}
     </ActionButton>
   );
 }

src/app/item-actions/ItemAccessoryButtons.tsx

@@ -21,11 +21,13 @@ export default function ItemAccessoryButtons({
   mobile,
   actionsModel,
   showLabel = true,
+  fromCompare = false,
 }: {
   item: DimItem;
   mobile: boolean;
   showLabel: boolean;
   actionsModel: ItemActionsModel;
+  fromCompare?: boolean;
 }) {
   const streamDeckEnabled = $featureFlags.elgatoStreamDeck
     ? // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -38,7 +40,9 @@ export default function ItemAccessoryButtons({
         <TagActionButton item={item} label={mobile || showLabel} hideKeys={mobile} />
       )}
       {actionsModel.lockable && <LockActionButton item={item} label={showLabel} />}
-      {actionsModel.comparable && <CompareActionButton item={item} label={showLabel} />}
+      {actionsModel.comparable && (
+        <CompareActionButton item={item} label={showLabel} fromCompare={fromCompare} />
+      )}
       {actionsModel.canConsolidate && (
         <ConsolidateActionButton item={item} label={showLabel} actionModel={actionsModel} />
       )}

src/app/item-popup/DesktopItemActions.tsx

@@ -22,9 +22,11 @@ export const menuClassName = styles.interaction;
 export default function DesktopItemActions({
   item,
   actionsModel,
+  fromCompare = false,
 }: {
   item: DimItem;
   actionsModel: ItemActionsModel;
+  fromCompare?: boolean;
 }) {
   const stores = useSelector(sortedStoresSelector);
   const dispatch = useThunkDispatch();
@@ -80,6 +82,7 @@ export default function DesktopItemActions({
         mobile={false}
         showLabel={!sidecarCollapsed}
         actionsModel={actionsModel}
+        fromCompare={fromCompare}
       />
 
       {!sidecarCollapsed && (

src/app/item-popup/ItemPopup.tsx

@@ -102,6 +102,7 @@ export default function ItemPopup({
             mobile={true}
             showLabel={false}
             actionsModel={itemActionsModel}
+            fromCompare={extraInfo?.fromCompare}
           />
         </div>
       )}
@@ -151,7 +152,11 @@ export default function ItemPopup({
               </div>
               {itemActionsModel.hasControls && (
                 <div className={styles.desktopActions}>
-                  <DesktopItemActions item={item} actionsModel={itemActionsModel} />
+                  <DesktopItemActions
+                    item={item}
+                    actionsModel={itemActionsModel}
+                    fromCompare={extraInfo?.fromCompare}
+                  />
                 </div>
               )}
             </div>

src/app/item-popup/item-popup.ts

@@ -24,6 +24,7 @@ export interface ItemPopupExtraInfo {
   canCraftThis?: boolean;
   // if you completely leveled up the item, it can be crafted with any of its perks. impressive.
   canCraftAllPlugs?: boolean;
+  fromCompare?: boolean;
 }
 
 export function showItemPopup(