Make Badge expandable if text is overflowing

- Don't show click affordance if not hidding anything

- Don't allow click to expand for flat badges

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/badge/badge.scss

@@ -21,10 +21,25 @@
 
 .Badge {
   display: inline-block;
-  white-space: nowrap;
+  background: $colorVague;
+  color: $textColorSecondary;
+  border-radius: $radius;
+  padding: .2em .4em;
   max-width: 100%;
-  overflow: hidden;
+
-  text-overflow: ellipsis;
+  &.isExpandable {
+    cursor: pointer;
+
+    &:hover {
+      background-color: $mainBackground;
+    }
+  }
+
+  &:not(.isExpanded) {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
   &:not(.flat) {
     background: $colorVague;

src/renderer/components/badge/badge.tsx

@@ -22,6 +22,8 @@
 import "./badge.scss";
 
 import React from "react";
+import { computed, makeObservable, observable } from "mobx";
+import { observer } from "mobx-react";
 import { cssNames } from "../../utils/cssNames";
 import { TooltipDecoratorProps, withTooltip } from "../tooltip";
 
@@ -29,19 +31,76 @@ export interface BadgeProps extends React.HTMLAttributes<any>, TooltipDecoratorP
   small?: boolean;
   flat?: boolean;
   label?: React.ReactNode;
+  isExpanded?: boolean; // always force state to this value
 }
 
 @withTooltip
+@observer
 export class Badge extends React.Component<BadgeProps> {
-  render() {
+  @observable _isExpanded = false;
-    const { className, label, small, flat, children, ...elemProps } = this.props;
+  @observable hasHighlightedText = false;
-    const clickable = Boolean(this.props.onClick);
+  @observable ref = React.createRef<HTMLDivElement>();
 
-    return <>
+  constructor(props: BadgeProps) {
-      <span className={cssNames("Badge", { small, flat, clickable }, className)} {...elemProps}>
+    super(props);
+    makeObservable(this);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("selectionchange", this.onSelectionChange);
+  }
+
+  @computed get isExpanded() {
+    return this.props.isExpanded ?? this._isExpanded;
+  }
+
+  @computed get isExpandable() {
+    if (!this.ref.current) {
+      return false;
+    }
+
+    const { flat } = this.props;
+    const { scrollWidth, clientWidth, clientHeight, scrollHeight } = this.ref.current;
+
+    return !flat && (clientWidth < scrollWidth || clientHeight < scrollHeight);
+  }
+
+  onSelectionChange = () => {
+    this.hasHighlightedText ||= document.getSelection().toString().length > 0;
+  };
+
+  onMouseDown = () => {
+    this.onSelectionChange(); // initial "event" fire on mouse down (for clearing old selections)
+    document.addEventListener("selectionchange", this.onSelectionChange);
+  };
+
+  onMouseUp = () => {
+    document.removeEventListener("selectionchange", this.onSelectionChange);
+
+    if (!this.hasHighlightedText) {
+      this._isExpanded = !this._isExpanded;
+    }
+
+    this.hasHighlightedText = false;
+  };
+
+  render() {
+    const { isExpandable, isExpanded } = this;
+    const { className, label, small, flat, children, isExpanded: _, ...elemProps } = this.props;
+    const clickable = Boolean(this.props.onClick);
+    const classNames = cssNames("Badge", className, {
+      small,
+      flat,
+      isExpandable,
+      isExpanded,
+      clickable,
+    });
+
+    return (
+      <div {...elemProps} className={classNames} onMouseUp={this.onMouseUp} onMouseDown={this.onMouseDown} ref={this.ref}>
         {label}
         {children}
-      </span>
+      </div>
-    </>;
+    );
   }
 }