From c91f217357580babd706b686abf658f77c8d898e Mon Sep 17 00:00:00 2001
From: robojumper <robojumper@gmail.com>
Date: Fri, 7 Jan 2022 12:31:04 +0100
Subject: [PATCH 1/4] First iteration of Item Picker tooltips

---
 src/app/item-picker/ItemPicker.tsx          | 14 +++--
 src/app/item-picker/ItemTooltip.m.scss      | 28 +++++++++
 src/app/item-picker/ItemTooltip.m.scss.d.ts |  8 +++
 src/app/item-picker/ItemTooltip.tsx         | 70 +++++++++++++++++++++
 4 files changed, 115 insertions(+), 5 deletions(-)
 create mode 100644 src/app/item-picker/ItemTooltip.m.scss
 create mode 100644 src/app/item-picker/ItemTooltip.m.scss.d.ts
 create mode 100644 src/app/item-picker/ItemTooltip.tsx

diff --git a/src/app/item-picker/ItemPicker.tsx b/src/app/item-picker/ItemPicker.tsx
index 5ca35c03e8..a8c4ab7bf3 100644
--- a/src/app/item-picker/ItemPicker.tsx
+++ b/src/app/item-picker/ItemPicker.tsx
@@ -1,4 +1,5 @@
 import ClassIcon from 'app/dim-ui/ClassIcon';
+import PressTip from 'app/dim-ui/PressTip';
 import { t } from 'app/i18next-t';
 import { ItemFilter } from 'app/search/filter-types';
 import SearchBar from 'app/search/SearchBar';
@@ -16,6 +17,7 @@ import { itemSortOrderSelector } from '../settings/item-sort';
 import { sortItems } from '../shell/filters';
 import { ItemPickerState } from './item-picker';
 import './ItemPicker.scss';
+import { DimItemTooltip } from './ItemTooltip';
 
 type ProvidedProps = ItemPickerState & {
   onSheetClosed(): void;
@@ -101,11 +103,13 @@ function ItemPicker({
         <div className="sub-bucket">
           {items.map((item) => (
             <div key={item.index} className="item-picker-item">
-              <ConnectedInventoryItem
-                item={item}
-                onClick={() => onItemSelectedFn(item, onClose)}
-                ignoreSelectedPerks={ignoreSelectedPerks}
-              />
+              <PressTip tooltip={() => <DimItemTooltip item={item} />}>
+                <ConnectedInventoryItem
+                  item={item}
+                  onClick={() => onItemSelectedFn(item, onClose)}
+                  ignoreSelectedPerks={ignoreSelectedPerks}
+                />
+              </PressTip>
               {item.type === 'Class' && (
                 <ClassIcon classType={item.classType} className="item-picker-item-class-icon" />
               )}
diff --git a/src/app/item-picker/ItemTooltip.m.scss b/src/app/item-picker/ItemTooltip.m.scss
new file mode 100644
index 0000000000..4062a59f87
--- /dev/null
+++ b/src/app/item-picker/ItemTooltip.m.scss
@@ -0,0 +1,28 @@
+@import '../variables.scss';
+
+.perks {
+  display: flex;
+  flex-flow: column;
+  margin: 4px 0;
+
+  > div {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+  }
+
+  img {
+    height: 24px;
+    width: 24px;
+  }
+}
+
+.stats {
+  margin: 4px 0 0 0;
+  :global(.stat-row) {
+    margin-bottom: 8px;
+  }
+  :global(.stat) {
+    line-height: 8px;
+  }
+}
diff --git a/src/app/item-picker/ItemTooltip.m.scss.d.ts b/src/app/item-picker/ItemTooltip.m.scss.d.ts
new file mode 100644
index 0000000000..b2bcb7cdd4
--- /dev/null
+++ b/src/app/item-picker/ItemTooltip.m.scss.d.ts
@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'perks': string;
+  'stats': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/src/app/item-picker/ItemTooltip.tsx b/src/app/item-picker/ItemTooltip.tsx
new file mode 100644
index 0000000000..d7d9bada79
--- /dev/null
+++ b/src/app/item-picker/ItemTooltip.tsx
@@ -0,0 +1,70 @@
+import BungieImage from 'app/dim-ui/BungieImage';
+import { DimItem, DimStat } from 'app/inventory/item-types';
+import { DefItemIcon } from 'app/inventory/ItemIcon';
+import { useD2Definitions } from 'app/manifest/selectors';
+import { isKillTrackerSocket } from 'app/utils/item-utils';
+import { DestinyInventoryItemDefinition } from 'bungie-api-ts/destiny2';
+import clsx from 'clsx';
+import _ from 'lodash';
+import React from 'react';
+import styles from './ItemTooltip.m.scss';
+
+export function DimItemTooltip({ item }: { item: DimItem }) {
+  const defs = useD2Definitions()!;
+  const itemDef = defs.InventoryItem.get(item.hash);
+  if (item.bucket.sort === 'Weapons' && item.sockets) {
+    const perkSockets = item.sockets?.allSockets.filter((s) => s.isPerk && !isKillTrackerSocket(s));
+    const perks = _.takeRight(perkSockets, 2).flatMap((s) => {
+      const perk = s.plugged?.plugDef;
+      return perk ? [perk] : [];
+    });
+    const contents = (
+      <div className={clsx(styles.perks)}>
+        {perks.map((perk, index) => (
+          <div key={index}>
+            <DefItemIcon itemDef={perk} borderless={true} /> {perk.displayProperties.name}
+          </div>
+        ))}
+      </div>
+    );
+    return <Tooltip def={itemDef} contents={contents} />;
+  } else if (item.bucket.sort === 'Armor' && item.stats) {
+    const renderStat = (stat: DimStat) => (
+      <div key={stat.statHash} className="stat">
+        {stat.displayProperties.hasIcon ? (
+          <span title={stat.displayProperties.name}>
+            <BungieImage src={stat.displayProperties.icon} />
+          </span>
+        ) : (
+          stat.displayProperties.name + ': '
+        )}
+        {stat.base}
+      </div>
+    );
+    const contents = (
+      <div className={clsx(styles.stats, 'stat-bars', 'destiny2')}>
+        <div className="stat-row">{item.stats?.filter((s) => s.statHash > 0).map(renderStat)}</div>
+        <div className="stat-row">{item.stats?.filter((s) => s.statHash < 0).map(renderStat)}</div>
+      </div>
+    );
+    return <Tooltip def={itemDef} contents={contents} />;
+  } else {
+    return <Tooltip def={itemDef} contents={<></>} />;
+  }
+}
+
+function Tooltip({
+  def,
+  contents,
+}: {
+  def: DestinyInventoryItemDefinition;
+  contents?: React.ReactNode;
+}) {
+  return (
+    <>
+      <h2>{def.displayProperties.name}</h2>
+      {def.itemTypeDisplayName && <h3>{def.itemTypeDisplayName}</h3>}
+      {contents}
+    </>
+  );
+}

From baf02170000c70f8db3383ae4d71bf5400164fc0 Mon Sep 17 00:00:00 2001
From: robojumper <robojumper@gmail.com>
Date: Fri, 7 Jan 2022 16:30:38 +0100
Subject: [PATCH 2/4] Move ItemTooltip

---
 src/app/inventory/ConnectedInventoryItem.tsx     |  3 +++
 src/app/inventory/InventoryItem.tsx              | 16 ++++++++++++++--
 .../ItemTooltip.m.scss                           |  3 ---
 .../ItemTooltip.m.scss.d.ts                      |  0
 .../{item-picker => inventory}/ItemTooltip.tsx   |  8 ++++----
 src/app/item-picker/ItemPicker.tsx               | 15 ++++++---------
 6 files changed, 27 insertions(+), 18 deletions(-)
 rename src/app/{item-picker => inventory}/ItemTooltip.m.scss (85%)
 rename src/app/{item-picker => inventory}/ItemTooltip.m.scss.d.ts (100%)
 rename src/app/{item-picker => inventory}/ItemTooltip.tsx (92%)

diff --git a/src/app/inventory/ConnectedInventoryItem.tsx b/src/app/inventory/ConnectedInventoryItem.tsx
index 9938fda756..b5bdab1b1d 100644
--- a/src/app/inventory/ConnectedInventoryItem.tsx
+++ b/src/app/inventory/ConnectedInventoryItem.tsx
@@ -16,6 +16,7 @@ interface ProvidedProps {
   id?: string; // defaults to item.index - id is typically used for `itemPop`
   allowFilter?: boolean;
   ignoreSelectedPerks?: boolean;
+  includeTooltip?: boolean;
   innerRef?: React.Ref<HTMLDivElement>;
   onClick?(e: React.MouseEvent): void;
   onShiftClick?(e: React.MouseEvent): void;
@@ -71,6 +72,7 @@ function ConnectedInventoryItem({
   onDoubleClick,
   searchHidden,
   ignoreSelectedPerks,
+  includeTooltip,
   innerRef,
 }: Props) {
   return (
@@ -86,6 +88,7 @@ function ConnectedInventoryItem({
       onDoubleClick={onDoubleClick}
       searchHidden={searchHidden}
       ignoreSelectedPerks={ignoreSelectedPerks}
+      includeTooltip={includeTooltip}
       innerRef={innerRef}
     />
   );
diff --git a/src/app/inventory/InventoryItem.tsx b/src/app/inventory/InventoryItem.tsx
index 90dabf85c7..4f6a97fb99 100644
--- a/src/app/inventory/InventoryItem.tsx
+++ b/src/app/inventory/InventoryItem.tsx
@@ -1,3 +1,4 @@
+import PressTip from 'app/dim-ui/PressTip';
 import clsx from 'clsx';
 import React, { useMemo } from 'react';
 import BungieImage from '../dim-ui/BungieImage';
@@ -9,6 +10,7 @@ import { TagValue } from './dim-item-info';
 import styles from './InventoryItem.m.scss';
 import { DimItem } from './item-types';
 import ItemIcon from './ItemIcon';
+import { DimItemTooltip } from './ItemTooltip';
 import NewItemIndicator from './NewItemIndicator';
 import { selectedSubclassPath } from './subclass';
 import TagIcon from './TagIcon';
@@ -28,6 +30,8 @@ interface Props {
   wishlistRoll?: InventoryWishListRoll;
   /** Don't show information that relates to currently selected perks (only used for subclasses currently) */
   ignoreSelectedPerks?: boolean;
+  /** Don't show information that relates to currently selected perks (only used for subclasses currently) */
+  includeTooltip?: boolean;
   innerRef?: React.Ref<HTMLDivElement>;
   /** TODO: item locked needs to be passed in */
   onClick?(e: React.MouseEvent): void;
@@ -43,6 +47,7 @@ export default function InventoryItem({
   notes,
   searchHidden,
   wishlistRoll,
+  includeTooltip,
   ignoreSelectedPerks,
   onClick,
   onShiftClick,
@@ -115,16 +120,23 @@ export default function InventoryItem({
     );
   }, [isNew, item, notes, subclassPath, tag, wishlistRoll]);
 
-  return (
+  const tooltip = includeTooltip ?? false;
+  const inner = (
     <div
       id={id || item.index}
       onClick={enhancedOnClick}
       onDoubleClick={onDoubleClick}
-      title={`${item.name}\n${subtitle}`}
+      title={!tooltip ? `${item.name}\n${subtitle}` : undefined}
       className={itemStyles}
       ref={innerRef}
     >
       {contents}
     </div>
   );
+
+  if (tooltip) {
+    return <PressTip tooltip={() => <DimItemTooltip item={item} />}>{inner}</PressTip>;
+  } else {
+    return inner;
+  }
 }
diff --git a/src/app/item-picker/ItemTooltip.m.scss b/src/app/inventory/ItemTooltip.m.scss
similarity index 85%
rename from src/app/item-picker/ItemTooltip.m.scss
rename to src/app/inventory/ItemTooltip.m.scss
index 4062a59f87..b3252d5a7a 100644
--- a/src/app/item-picker/ItemTooltip.m.scss
+++ b/src/app/inventory/ItemTooltip.m.scss
@@ -19,9 +19,6 @@
 
 .stats {
   margin: 4px 0 0 0;
-  :global(.stat-row) {
-    margin-bottom: 8px;
-  }
   :global(.stat) {
     line-height: 8px;
   }
diff --git a/src/app/item-picker/ItemTooltip.m.scss.d.ts b/src/app/inventory/ItemTooltip.m.scss.d.ts
similarity index 100%
rename from src/app/item-picker/ItemTooltip.m.scss.d.ts
rename to src/app/inventory/ItemTooltip.m.scss.d.ts
diff --git a/src/app/item-picker/ItemTooltip.tsx b/src/app/inventory/ItemTooltip.tsx
similarity index 92%
rename from src/app/item-picker/ItemTooltip.tsx
rename to src/app/inventory/ItemTooltip.tsx
index d7d9bada79..ccfa3f2c3e 100644
--- a/src/app/item-picker/ItemTooltip.tsx
+++ b/src/app/inventory/ItemTooltip.tsx
@@ -18,7 +18,7 @@ export function DimItemTooltip({ item }: { item: DimItem }) {
       const perk = s.plugged?.plugDef;
       return perk ? [perk] : [];
     });
-    const contents = (
+    const contents = perks.length ? (
       <div className={clsx(styles.perks)}>
         {perks.map((perk, index) => (
           <div key={index}>
@@ -26,9 +26,9 @@ export function DimItemTooltip({ item }: { item: DimItem }) {
           </div>
         ))}
       </div>
-    );
+    ) : undefined;
     return <Tooltip def={itemDef} contents={contents} />;
-  } else if (item.bucket.sort === 'Armor' && item.stats) {
+  } else if (item.bucket.sort === 'Armor' && item.stats?.length) {
     const renderStat = (stat: DimStat) => (
       <div key={stat.statHash} className="stat">
         {stat.displayProperties.hasIcon ? (
@@ -49,7 +49,7 @@ export function DimItemTooltip({ item }: { item: DimItem }) {
     );
     return <Tooltip def={itemDef} contents={contents} />;
   } else {
-    return <Tooltip def={itemDef} contents={<></>} />;
+    return <Tooltip def={itemDef} contents={undefined} />;
   }
 }
 
diff --git a/src/app/item-picker/ItemPicker.tsx b/src/app/item-picker/ItemPicker.tsx
index a8c4ab7bf3..e0b6dc3bf9 100644
--- a/src/app/item-picker/ItemPicker.tsx
+++ b/src/app/item-picker/ItemPicker.tsx
@@ -1,5 +1,4 @@
 import ClassIcon from 'app/dim-ui/ClassIcon';
-import PressTip from 'app/dim-ui/PressTip';
 import { t } from 'app/i18next-t';
 import { ItemFilter } from 'app/search/filter-types';
 import SearchBar from 'app/search/SearchBar';
@@ -17,7 +16,6 @@ import { itemSortOrderSelector } from '../settings/item-sort';
 import { sortItems } from '../shell/filters';
 import { ItemPickerState } from './item-picker';
 import './ItemPicker.scss';
-import { DimItemTooltip } from './ItemTooltip';
 
 type ProvidedProps = ItemPickerState & {
   onSheetClosed(): void;
@@ -103,13 +101,12 @@ function ItemPicker({
         <div className="sub-bucket">
           {items.map((item) => (
             <div key={item.index} className="item-picker-item">
-              <PressTip tooltip={() => <DimItemTooltip item={item} />}>
-                <ConnectedInventoryItem
-                  item={item}
-                  onClick={() => onItemSelectedFn(item, onClose)}
-                  ignoreSelectedPerks={ignoreSelectedPerks}
-                />
-              </PressTip>
+              <ConnectedInventoryItem
+                item={item}
+                onClick={() => onItemSelectedFn(item, onClose)}
+                includeTooltip
+                ignoreSelectedPerks={ignoreSelectedPerks}
+              />
               {item.type === 'Class' && (
                 <ClassIcon classType={item.classType} className="item-picker-item-class-icon" />
               )}

From 8c2104c2de66fa02941893e6cd4d7e628f1588db Mon Sep 17 00:00:00 2001
From: robojumper <robojumper@gmail.com>
Date: Fri, 7 Jan 2022 18:35:36 +0100
Subject: [PATCH 3/4] Use Item Tooltip everywhere item cannot be popped

---
 src/app/dim-ui/PressTip.tsx               | 34 ++++++++++------
 src/app/infuse/InfusionFinder.tsx         | 16 ++++++--
 src/app/inventory/InventoryItem.tsx       | 10 ++---
 src/app/inventory/ItemTooltip.m.scss      | 22 ++++++++++-
 src/app/inventory/ItemTooltip.m.scss.d.ts |  4 ++
 src/app/inventory/ItemTooltip.tsx         | 47 ++++++++++++++++-------
 src/app/inventory/StoreInventoryItem.tsx  |  4 ++
 7 files changed, 103 insertions(+), 34 deletions(-)

diff --git a/src/app/dim-ui/PressTip.tsx b/src/app/dim-ui/PressTip.tsx
index 5df8b232dc..c23b98c2e6 100644
--- a/src/app/dim-ui/PressTip.tsx
+++ b/src/app/dim-ui/PressTip.tsx
@@ -29,6 +29,10 @@ interface Props {
    * constructing the tree until the tooltip is shown.
    */
   tooltip: React.ReactNode | (() => React.ReactNode);
+  /**
+   * Whether the presstip should be shown or not.
+   */
+  disabled?: boolean;
   /**
    * The children of this component define the content that will trigger the tooltip.
    */
@@ -41,6 +45,7 @@ interface Props {
 
 type ControlProps = Props &
   React.HTMLAttributes<HTMLDivElement> & {
+    events: React.HTMLAttributes<HTMLDivElement>;
     open: boolean;
     triggerRef: React.RefObject<HTMLDivElement>;
   };
@@ -65,10 +70,12 @@ type ControlProps = Props &
 function Control({
   tooltip,
   open,
+  disabled,
   triggerRef,
   children,
   elementType: Component = 'div',
   className,
+  events,
   ...rest
 }: ControlProps) {
   const tooltipContents = useRef<HTMLDivElement>(null);
@@ -94,8 +101,10 @@ function Control({
   // TODO: or use framer motion layout animations?
   return (
     <Component ref={triggerRef} className={clsx(styles.control, className)} {...rest}>
-      {children}
+      <div {...events}>{children}</div>
       {open &&
+        !disabled &&
+        tooltip &&
         ReactDOM.createPortal(
           <div className={styles.tooltip} ref={tooltipContents}>
             <div className={styles.content}>{_.isFunction(tooltip) ? tooltip() : tooltip}</div>
@@ -142,14 +151,17 @@ function PressTip(props: Props) {
     timer.current = 0;
   }, []);
 
-  const hover = useCallback((e: React.MouseEvent | React.TouchEvent | TouchEvent) => {
-    e.preventDefault();
-    clearTimeout(timer.current);
-    timer.current = window.setTimeout(() => {
-      setOpen(true);
-    }, hoverDelay);
-    touchStartTime.current = performance.now();
-  }, []);
+  const hover = useCallback(
+    (e: React.MouseEvent | React.TouchEvent | TouchEvent) => {
+      e.preventDefault();
+      clearTimeout(timer.current);
+      timer.current = window.setTimeout(() => {
+        setOpen(!props.disabled);
+      }, hoverDelay);
+      touchStartTime.current = performance.now();
+    },
+    [props.disabled]
+  );
 
   // Stop the hover timer when the component unmounts
   useEffect(() => () => clearTimeout(timer.current), []);
@@ -181,12 +193,12 @@ function PressTip(props: Props) {
         onClick: absorbClick,
       }
     : {
-        onMouseEnter: hover,
+        onMouseOver: hover,
         onMouseUp: closeToolTip,
         onMouseLeave: closeToolTip,
       };
 
-  return <Control open={open} triggerRef={ref} {...events} {...props} />;
+  return <Control open={open} triggerRef={ref} events={events} {...props} />;
 }
 
 export default PressTip;
diff --git a/src/app/infuse/InfusionFinder.tsx b/src/app/infuse/InfusionFinder.tsx
index 6132caf60a..d2364f4834 100644
--- a/src/app/infuse/InfusionFinder.tsx
+++ b/src/app/infuse/InfusionFinder.tsx
@@ -229,15 +229,23 @@ export default function InfusionFinder() {
       <div className="infusionControls">
         <div className="infuseTopRow">
           <div className="infusionEquation">
-            {effectiveTarget ? <ConnectedInventoryItem item={effectiveTarget} /> : missingItem}
+            {effectiveTarget ? (
+              <ConnectedInventoryItem item={effectiveTarget} includeTooltip />
+            ) : (
+              missingItem
+            )}
             <div className="icon">
               <AppIcon icon={plusIcon} />
             </div>
-            {effectiveSource ? <ConnectedInventoryItem item={effectiveSource} /> : missingItem}
+            {effectiveSource ? (
+              <ConnectedInventoryItem item={effectiveSource} includeTooltip />
+            ) : (
+              missingItem
+            )}
             <div className="icon">
               <AppIcon icon={faEquals} />
             </div>
-            {result ? <ConnectedInventoryItem item={result} /> : missingItem}
+            {result ? <ConnectedInventoryItem item={result} includeTooltip /> : missingItem}
           </div>
           <div className="infuseActions">
             <button type="button" className="dim-button" onClick={switchDirection}>
@@ -269,7 +277,7 @@ export default function InfusionFinder() {
       className={clsx({ 'infuse-selected': item === target })}
       onClick={() => selectItem(item)}
     >
-      <ConnectedInventoryItem item={item} />
+      <ConnectedInventoryItem includeTooltip item={item} />
     </div>
   );
 
diff --git a/src/app/inventory/InventoryItem.tsx b/src/app/inventory/InventoryItem.tsx
index 4f6a97fb99..22fb083cf6 100644
--- a/src/app/inventory/InventoryItem.tsx
+++ b/src/app/inventory/InventoryItem.tsx
@@ -134,9 +134,9 @@ export default function InventoryItem({
     </div>
   );
 
-  if (tooltip) {
-    return <PressTip tooltip={() => <DimItemTooltip item={item} />}>{inner}</PressTip>;
-  } else {
-    return inner;
-  }
+  return (
+    <PressTip disabled={!tooltip} tooltip={() => <DimItemTooltip item={item} />}>
+      {inner}
+    </PressTip>
+  );
 }
diff --git a/src/app/inventory/ItemTooltip.m.scss b/src/app/inventory/ItemTooltip.m.scss
index b3252d5a7a..015545dd89 100644
--- a/src/app/inventory/ItemTooltip.m.scss
+++ b/src/app/inventory/ItemTooltip.m.scss
@@ -5,6 +5,9 @@
   flex-flow: column;
   margin: 4px 0;
 
+  border-left: 2px solid #888;
+  padding-left: 3px;
+
   > div {
     display: flex;
     flex-flow: row;
@@ -17,9 +20,26 @@
   }
 }
 
+.perkSelected {
+  font-weight: bold;
+}
+
+.notes {
+  margin-left: 4px;
+}
+
+.note {
+  margin-left: -4px;
+}
+
+.noteIcon {
+  height: 24px;
+  width: 24px;
+}
+
 .stats {
   margin: 4px 0 0 0;
   :global(.stat) {
-    line-height: 8px;
+    line-height: 12px;
   }
 }
diff --git a/src/app/inventory/ItemTooltip.m.scss.d.ts b/src/app/inventory/ItemTooltip.m.scss.d.ts
index b2bcb7cdd4..23027153be 100644
--- a/src/app/inventory/ItemTooltip.m.scss.d.ts
+++ b/src/app/inventory/ItemTooltip.m.scss.d.ts
@@ -1,6 +1,10 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'note': string;
+  'noteIcon': string;
+  'notes': string;
+  'perkSelected': string;
   'perks': string;
   'stats': string;
 }
diff --git a/src/app/inventory/ItemTooltip.tsx b/src/app/inventory/ItemTooltip.tsx
index ccfa3f2c3e..d6e0432503 100644
--- a/src/app/inventory/ItemTooltip.tsx
+++ b/src/app/inventory/ItemTooltip.tsx
@@ -2,32 +2,43 @@ import BungieImage from 'app/dim-ui/BungieImage';
 import { DimItem, DimStat } from 'app/inventory/item-types';
 import { DefItemIcon } from 'app/inventory/ItemIcon';
 import { useD2Definitions } from 'app/manifest/selectors';
+import { AppIcon, stickyNoteIcon } from 'app/shell/icons';
 import { isKillTrackerSocket } from 'app/utils/item-utils';
 import { DestinyInventoryItemDefinition } from 'bungie-api-ts/destiny2';
 import clsx from 'clsx';
 import _ from 'lodash';
 import React from 'react';
+import { useSelector } from 'react-redux';
+import { itemNoteSelector } from './dim-item-info';
 import styles from './ItemTooltip.m.scss';
 
 export function DimItemTooltip({ item }: { item: DimItem }) {
   const defs = useD2Definitions()!;
   const itemDef = defs.InventoryItem.get(item.hash);
+  const savedNotes = useSelector(itemNoteSelector(item));
+
   if (item.bucket.sort === 'Weapons' && item.sockets) {
     const perkSockets = item.sockets?.allSockets.filter((s) => s.isPerk && !isKillTrackerSocket(s));
-    const perks = _.takeRight(perkSockets, 2).flatMap((s) => {
-      const perk = s.plugged?.plugDef;
-      return perk ? [perk] : [];
-    });
-    const contents = perks.length ? (
-      <div className={clsx(styles.perks)}>
-        {perks.map((perk, index) => (
-          <div key={index}>
-            <DefItemIcon itemDef={perk} borderless={true} /> {perk.displayProperties.name}
+    const sockets = _.takeRight(perkSockets, 2);
+
+    const contents = sockets.map((socket) => (
+      <div key={socket.socketIndex} className={clsx(styles.perks)}>
+        {socket.plugOptions.map((p) => (
+          <div
+            key={p.plugDef.hash}
+            className={clsx(undefined, {
+              [styles.perkSelected]:
+                socket.isPerk && socket.plugOptions.length > 1 && p === socket.plugged,
+            })}
+            data-perk-name={p.plugDef.displayProperties.name}
+          >
+            <DefItemIcon itemDef={p.plugDef} borderless={true} /> {p.plugDef.displayProperties.name}
           </div>
         ))}
       </div>
-    ) : undefined;
-    return <Tooltip def={itemDef} contents={contents} />;
+    ));
+
+    return <Tooltip def={itemDef} notes={savedNotes} contents={contents} />;
   } else if (item.bucket.sort === 'Armor' && item.stats?.length) {
     const renderStat = (stat: DimStat) => (
       <div key={stat.statHash} className="stat">
@@ -41,29 +52,39 @@ export function DimItemTooltip({ item }: { item: DimItem }) {
         {stat.base}
       </div>
     );
+
     const contents = (
       <div className={clsx(styles.stats, 'stat-bars', 'destiny2')}>
         <div className="stat-row">{item.stats?.filter((s) => s.statHash > 0).map(renderStat)}</div>
         <div className="stat-row">{item.stats?.filter((s) => s.statHash < 0).map(renderStat)}</div>
       </div>
     );
-    return <Tooltip def={itemDef} contents={contents} />;
+
+    return <Tooltip def={itemDef} notes={savedNotes} contents={contents} />;
   } else {
-    return <Tooltip def={itemDef} contents={undefined} />;
+    return <Tooltip def={itemDef} notes={savedNotes} contents={undefined} />;
   }
 }
 
 function Tooltip({
   def,
+  notes,
   contents,
 }: {
   def: DestinyInventoryItemDefinition;
+  notes?: string;
   contents?: React.ReactNode;
 }) {
   return (
     <>
       <h2>{def.displayProperties.name}</h2>
       {def.itemTypeDisplayName && <h3>{def.itemTypeDisplayName}</h3>}
+      {notes && (
+        <div className={clsx(styles.notes)}>
+          <AppIcon className={styles.noteIcon} icon={stickyNoteIcon} />
+          <span className={clsx(styles.note)}>{notes}</span>
+        </div>
+      )}
       {contents}
     </>
   );
diff --git a/src/app/inventory/StoreInventoryItem.tsx b/src/app/inventory/StoreInventoryItem.tsx
index 520ecc5da9..dd2a359dbf 100644
--- a/src/app/inventory/StoreInventoryItem.tsx
+++ b/src/app/inventory/StoreInventoryItem.tsx
@@ -1,5 +1,7 @@
+import { compareOpenSelector } from 'app/compare/selectors';
 import { useThunkDispatch } from 'app/store/thunk-dispatch';
 import React from 'react';
+import { useSelector } from 'react-redux';
 import ConnectedInventoryItem from './ConnectedInventoryItem';
 import DraggableInventoryItem from './DraggableInventoryItem';
 import { DimItem } from './item-types';
@@ -15,6 +17,7 @@ interface Props {
  */
 export default function StoreInventoryItem({ item }: Props) {
   const dispatch = useThunkDispatch();
+  const compareOpen = useSelector(compareOpenSelector);
   const doubleClicked = (e: React.MouseEvent) => {
     dispatch(moveItemToCurrentStore(item, e));
   };
@@ -27,6 +30,7 @@ export default function StoreInventoryItem({ item }: Props) {
             item={item}
             allowFilter={true}
             innerRef={ref}
+            includeTooltip={compareOpen}
             onClick={onClick}
             onDoubleClick={doubleClicked}
             // for only StoreInventoryItems (the main inventory page)

From c1ac7a58367fddfbbe6239e56ac056d6aea0c0b1 Mon Sep 17 00:00:00 2001
From: robojumper <robojumper@gmail.com>
Date: Sat, 8 Jan 2022 16:07:16 +0100
Subject: [PATCH 4/4] Minor layout improvements

---
 src/app/dim-ui/PressTip.tsx               | 16 +++++++++-------
 src/app/inventory/InventoryItem.tsx       |  2 +-
 src/app/inventory/ItemTooltip.m.scss      |  7 +------
 src/app/inventory/ItemTooltip.m.scss.d.ts |  1 -
 src/app/inventory/ItemTooltip.tsx         |  2 +-
 5 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/app/dim-ui/PressTip.tsx b/src/app/dim-ui/PressTip.tsx
index c23b98c2e6..98e6cb98db 100644
--- a/src/app/dim-ui/PressTip.tsx
+++ b/src/app/dim-ui/PressTip.tsx
@@ -30,7 +30,7 @@ interface Props {
    */
   tooltip: React.ReactNode | (() => React.ReactNode);
   /**
-   * Whether the presstip should be shown or not.
+   * Whether the presstip should react to events or not.
    */
   disabled?: boolean;
   /**
@@ -153,12 +153,14 @@ function PressTip(props: Props) {
 
   const hover = useCallback(
     (e: React.MouseEvent | React.TouchEvent | TouchEvent) => {
-      e.preventDefault();
-      clearTimeout(timer.current);
-      timer.current = window.setTimeout(() => {
-        setOpen(!props.disabled);
-      }, hoverDelay);
-      touchStartTime.current = performance.now();
+      if (!props.disabled) {
+        e.preventDefault();
+        clearTimeout(timer.current);
+        timer.current = window.setTimeout(() => {
+          setOpen(true);
+        }, hoverDelay);
+        touchStartTime.current = performance.now();
+      }
     },
     [props.disabled]
   );
diff --git a/src/app/inventory/InventoryItem.tsx b/src/app/inventory/InventoryItem.tsx
index 22fb083cf6..e5029609de 100644
--- a/src/app/inventory/InventoryItem.tsx
+++ b/src/app/inventory/InventoryItem.tsx
@@ -30,7 +30,7 @@ interface Props {
   wishlistRoll?: InventoryWishListRoll;
   /** Don't show information that relates to currently selected perks (only used for subclasses currently) */
   ignoreSelectedPerks?: boolean;
-  /** Don't show information that relates to currently selected perks (only used for subclasses currently) */
+  /** Show a tooltip summarizing the item for when a click on the item has other effects than bringing up item popup */
   includeTooltip?: boolean;
   innerRef?: React.Ref<HTMLDivElement>;
   /** TODO: item locked needs to be passed in */
diff --git a/src/app/inventory/ItemTooltip.m.scss b/src/app/inventory/ItemTooltip.m.scss
index 015545dd89..43ac358faf 100644
--- a/src/app/inventory/ItemTooltip.m.scss
+++ b/src/app/inventory/ItemTooltip.m.scss
@@ -29,12 +29,7 @@
 }
 
 .note {
-  margin-left: -4px;
-}
-
-.noteIcon {
-  height: 24px;
-  width: 24px;
+  margin-left: 2px;
 }
 
 .stats {
diff --git a/src/app/inventory/ItemTooltip.m.scss.d.ts b/src/app/inventory/ItemTooltip.m.scss.d.ts
index 23027153be..c6cb703e1b 100644
--- a/src/app/inventory/ItemTooltip.m.scss.d.ts
+++ b/src/app/inventory/ItemTooltip.m.scss.d.ts
@@ -2,7 +2,6 @@
 // Please do not change this file!
 interface CssExports {
   'note': string;
-  'noteIcon': string;
   'notes': string;
   'perkSelected': string;
   'perks': string;
diff --git a/src/app/inventory/ItemTooltip.tsx b/src/app/inventory/ItemTooltip.tsx
index d6e0432503..057010ac0f 100644
--- a/src/app/inventory/ItemTooltip.tsx
+++ b/src/app/inventory/ItemTooltip.tsx
@@ -81,7 +81,7 @@ function Tooltip({
       {def.itemTypeDisplayName && <h3>{def.itemTypeDisplayName}</h3>}
       {notes && (
         <div className={clsx(styles.notes)}>
-          <AppIcon className={styles.noteIcon} icon={stickyNoteIcon} />
+          <AppIcon icon={stickyNoteIcon} />
           <span className={clsx(styles.note)}>{notes}</span>
         </div>
       )}