Merge pull request #10581 from DestinyItemManager/feed-compare

Item Feed: Add compare button

src/app/item-feed/ItemFeed.m.scss

@@ -12,11 +12,12 @@
   composes: flexRow from '../dim-ui/common.m.scss';
   align-items: flex-start;
   margin: 8px 0;
+  gap: 8px;
   padding-left: 1px; // to account for the item hover outline
 }
 
 .info {
-  margin-left: 8px;
+  flex: 1;
 }
 
 .title {

src/app/item-feed/TagButtons.m.scss

@@ -2,5 +2,14 @@
 
 .tagButton {
   composes: dim-button from global;
-  margin-right: 4px;
+  flex: 1;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.tagButtons {
+  composes: flexRow from '../dim-ui/common.m.scss';
+  margin-top: 4px;
+  gap: 4px;
+  width: 100%;
 }

src/app/item-feed/TagButtons.tsx

@@ -1,7 +1,9 @@
+import { addCompareItem } from 'app/compare/actions';
 import { clearNewItem, setTag } from 'app/inventory/actions';
 import { TagValue, tagConfig } from 'app/inventory/dim-item-info';
 import { DimItem } from 'app/inventory/item-types';
-import { AppIcon } from 'app/shell/icons';
+import { hideItemPopup } from 'app/item-popup/item-popup';
+import { AppIcon, compareIcon } from 'app/shell/icons';
 import { useThunkDispatch } from 'app/store/thunk-dispatch';
 import _ from 'lodash';
 import styles from './TagButtons.m.scss';
@@ -21,8 +23,16 @@ export default function TagButtons({ item, tag }: { item: DimItem; tag: TagValue
     dispatch(clearNewItem(item.id));
   };
 
+  const openCompare = () => {
+    hideItemPopup();
+    dispatch(addCompareItem(item));
+  };
+
   return (
-    <div>
+    <div className={styles.tagButtons}>
+      <button key="compare" className={styles.tagButton} type="button" onClick={openCompare}>
+        <AppIcon icon={compareIcon} />
+      </button>
       {tagOptions.map((tagOption) => (
         <button
           key={tagOption.type}