<commit_before>import { D2ManifestDefinitions } from 'app/destiny2/d2-definitions';
import ClosableContainer from 'app/dim-ui/ClosableContainer';
import PressTip from 'app/dim-ui/PressTip';
import RichDestinyText from 'app/dim-ui/RichDestinyText';
import { PluggableInventoryItemDefinition } from 'app/inventory/item-types';
import { SocketDetailsMod } from 'app/item-popup/SocketDetails';
import { useD2Definitions } from 'app/manifest/selectors';
import { useIsPhonePortrait } from 'app/shell/selectors';
import _ from 'lodash';
import React from 'react';
import styles from './PlugDef.m.scss';

interface Props {
  plug: PluggableInventoryItemDefinition;
  onClick?(): void;
  onClose?(): void;
}

export default function PlugDef({ plug, onClick, onClose }: Props) {
  const isPhonePortrait = useIsPhonePortrait();
  const defs = useD2Definitions();

  const contents = (
    <div className={styles.emptyItem}>
      <SocketDetailsMod itemDef={plug} onClick={onClick} />
    </div>
  );

  return (
    <ClosableContainer onClose={onClose} showCloseIconOnHover={true}>
      <div className={styles.emptyItem}>
        {defs && !isPhonePortrait ? (
          <PressTip tooltip={<ToolTip plug={plug} defs={defs} />}>{contents}</PressTip>
        ) : (
          contents
        )}
      </div>
    </ClosableContainer>
  );
}

function ToolTip({
  plug,
  defs,
}: {
  plug: PluggableInventoryItemDefinition;
  defs: D2ManifestDefinitions;
}) {
  return plug.displayProperties.description ? (
    <div>
      <RichDestinyText text={plug.displayProperties.description} />
    </div>
  ) : (
    <>
      {_.uniqBy(
        plug.perks,
        (p) => defs.SandboxPerk.get(p.perkHash).displayProperties.description
      ).map((perk) => (
        <div key={perk.perkHash}>
          <RichDestinyText
            text={defs.SandboxPerk.get(perk.perkHash).displayProperties.description}
          />
          {perk.requirementDisplayString && <div>{perk.requirementDisplayString}</div>}
        </div>
      ))}
    </>
  );
}<commit_msg>Some tweaks.<commit_after>import { D2ManifestDefinitions } from 'app/destiny2/d2-definitions';
import ClosableContainer from 'app/dim-ui/ClosableContainer';
import PressTip from 'app/dim-ui/PressTip';
import RichDestinyText from 'app/dim-ui/RichDestinyText';
import { PluggableInventoryItemDefinition } from 'app/inventory/item-types';
import { DefItemIcon } from 'app/inventory/ItemIcon';
import { useD2Definitions } from 'app/manifest/selectors';
import { useIsPhonePortrait } from 'app/shell/selectors';
import _ from 'lodash';
import React from 'react';
import styles from './PlugDef.m.scss';

interface Props {
  plug: PluggableInventoryItemDefinition;
  onClick?(): void;
  onClose?(): void;
}

export default function PlugDef({ plug, onClick, onClose }: Props) {
  const isPhonePortrait = useIsPhonePortrait();
  const defs = useD2Definitions();
  const showTooltip = defs && !isPhonePortrait;

  const contents = (
    <div className={styles.emptyItem}>
      <div
        role="button"
        className="item"
        title={showTooltip ? undefined : plug.displayProperties.name}
        onClick={onClick}
        tabIndex={0}
      >
        <DefItemIcon itemDef={plug} />
      </div>
    </div>
  );

  return (
    <ClosableContainer onClose={onClose} showCloseIconOnHover={true}>
      <div className={styles.emptyItem}>
        {showTooltip ? (
          <PressTip tooltip={<ToolTip plug={plug} defs={defs} />}>{contents}</PressTip>
        ) : (
          contents
        )}
      </div>
    </ClosableContainer>
  );
}

function ToolTip({
  plug,
  defs,
}: {
  plug: PluggableInventoryItemDefinition;
  defs: D2ManifestDefinitions;
}) {
  return plug.displayProperties.description ? (
    <div>
      <RichDestinyText text={plug.displayProperties.description} />
    </div>
  ) : (
    <>
      {_.uniqBy(
        plug.perks,
        (p) => defs.SandboxPerk.get(p.perkHash).displayProperties.description
      ).map((perk) => (
        <div key={perk.perkHash}>
          <RichDestinyText
            text={defs.SandboxPerk.get(perk.perkHash).displayProperties.description}
          />
        </div>
      ))}
    </>
  );
}
{'fraction_non_alphanumeric': 0.13725490196078433, 'fraction_numerical': 0.0031085604973696795, 'mean_word_length': 3.2946611909650922, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7305650', 'n_tokens_mistral': 1358, 'n_tokens_neox': 1338, 'n_words': 240}