diff --git a/src/app/compare/reducer.ts b/src/app/compare/reducer.ts
index 8f93fb64ff..ffc443d990 100644
--- a/src/app/compare/reducer.ts
+++ b/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
diff --git a/src/app/inventory/ItemPopupTrigger.tsx b/src/app/inventory/ItemPopupTrigger.tsx
index 6aa42e7414..5bb7235d76 100644
--- a/src/app/inventory/ItemPopupTrigger.tsx
+++ b/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
,
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,
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);
}
};
diff --git a/src/app/item-actions/ActionButtons.tsx b/src/app/item-actions/ActionButtons.tsx
index 739dc3c7cd..437d16dd92 100644
--- a/src/app/item-actions/ActionButtons.tsx
+++ b/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 (
- {label && {t('Compare.Button')}}
+ {label && (
+ {fromCompare ? t('Compare.New') : t('Compare.Button')}
+ )}
);
}
diff --git a/src/app/item-actions/ItemAccessoryButtons.tsx b/src/app/item-actions/ItemAccessoryButtons.tsx
index 86433ff404..91d05fa092 100644
--- a/src/app/item-actions/ItemAccessoryButtons.tsx
+++ b/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({
)}
{actionsModel.lockable && }
- {actionsModel.comparable && }
+ {actionsModel.comparable && (
+
+ )}
{actionsModel.canConsolidate && (
)}
diff --git a/src/app/item-popup/DesktopItemActions.tsx b/src/app/item-popup/DesktopItemActions.tsx
index 9778c69234..b0a9998434 100644
--- a/src/app/item-popup/DesktopItemActions.tsx
+++ b/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 && (
diff --git a/src/app/item-popup/ItemPopup.tsx b/src/app/item-popup/ItemPopup.tsx
index 0122096a57..6d03ebbb4d 100644
--- a/src/app/item-popup/ItemPopup.tsx
+++ b/src/app/item-popup/ItemPopup.tsx
@@ -102,6 +102,7 @@ export default function ItemPopup({
mobile={true}
showLabel={false}
actionsModel={itemActionsModel}
+ fromCompare={extraInfo?.fromCompare}
/>
)}
@@ -151,7 +152,11 @@ export default function ItemPopup({
{itemActionsModel.hasControls && (