Add remove gem button, add ilvl to gear picker

ui/core/components/gear_picker.tsx

@@ -105,6 +105,7 @@ export class ItemRenderer extends Component {
 
 	readonly iconElem: HTMLAnchorElement;
 	readonly nameElem: HTMLAnchorElement;
+	readonly ilvlElem: HTMLSpanElement;
 	readonly enchantElem: HTMLAnchorElement;
 	readonly socketsContainerElem: HTMLElement;
 
@@ -114,13 +115,17 @@ export class ItemRenderer extends Component {
 
 		const iconElem = ref<HTMLAnchorElement>();
 		const nameElem = ref<HTMLAnchorElement>();
+		const ilvlElem = ref<HTMLSpanElement>();
 		const enchantElem = ref<HTMLAnchorElement>();
 		const sce = ref<HTMLDivElement>();
 		this.rootElem.appendChild(
 			<>
-				<a ref={iconElem} className="item-picker-icon" href="javascript:void(0)" attributes={{ role: 'button' }}>
-					<div ref={sce} className="item-picker-sockets-container"></div>
-				</a>
+				<div className="item-picker-icon-wrapper">
+					<span className="item-picker-ilvl" ref={ilvlElem} />
+					<a ref={iconElem} className="item-picker-icon" href="javascript:void(0)" attributes={{ role: 'button' }}>
+						<div ref={sce} className="item-picker-sockets-container"></div>
+					</a>
+				</div>
 				<div className="item-picker-labels-container">
 					<a ref={nameElem} className="item-picker-name" href="javascript:void(0)" attributes={{ role: 'button' }}></a>
 					<a ref={enchantElem} className="item-picker-enchant" href="javascript:void(0)" attributes={{ role: 'button' }}></a>
@@ -130,6 +135,7 @@ export class ItemRenderer extends Component {
 
 		this.iconElem = iconElem.value!;
 		this.nameElem = nameElem.value!;
+		this.ilvlElem = ilvlElem.value!;
 		this.enchantElem = enchantElem.value!;
 		this.socketsContainerElem = sce.value!;
 	}
@@ -147,6 +153,7 @@ export class ItemRenderer extends Component {
 		this.enchantElem.innerText = '';
 		this.socketsContainerElem.innerText = '';
 		this.nameElem.textContent = '';
+		this.ilvlElem.replaceChildren();
 	}
 
 	update(newItem: EquippedItem) {
@@ -156,6 +163,7 @@ export class ItemRenderer extends Component {
 		} else {
 			this.nameElem.querySelector('.heroic-label')?.remove();
 		}
+		this.ilvlElem.textContent = newItem.item.ilvl.toString();
 
 		setItemQualityCssClass(this.nameElem, newItem.item.quality);
 
@@ -821,6 +829,9 @@ export class ItemList<T> {
 					<label className="source-label">
 						<small>Source</small>
 					</label>
+					<label className="ilvl-label">
+						<small>ILvl</small>
+					</label>
 					<label className="ep-label">
 						<small>EP</small>
 						<i className="fa-solid fa-plus-minus fa-2xs"></i>
@@ -1107,6 +1118,9 @@ export class ItemList<T> {
 			listItemElem.appendChild(
 				<div className="selector-modal-list-item-source-container">{this.getSourceInfo(itemData.item as unknown as Item, this.player.sim)}</div>,
 			);
+			listItemElem.appendChild(
+				<div className="selector-modal-list-item-ilvl-container">{(itemData.item as unknown as Item).ilvl}</div>,
+			);
 		}
 
 		if (this.slot != ItemSlot.ItemSlotTrinket1 && this.slot != ItemSlot.ItemSlotTrinket2) {

ui/core/components/individual_sim_ui/gem_summary.ts → ui/core/components/individual_sim_ui/gem_summary.tsx

@@ -1,9 +1,12 @@
-import { Component } from '../../components/component';
+import { element } from 'tsx-vanilla';
+
 import { setItemQualityCssClass } from '../../css_utils';
 import { Player } from '../../player';
 import { UIGem as Gem } from '../../proto/ui.js';
 import { ActionId } from '../../proto_utils/action_id';
 import { SimUI } from '../../sim_ui';
+import { TypedEvent } from '../../typed_event';
+import { Component } from '../component';
 import { ContentBlock } from '../content_block';
 
 interface GemSummaryData {
@@ -26,6 +29,25 @@ export class GemSummary extends Component {
 			header: { title: 'Gem Summary' },
 		});
 		player.gearChangeEmitter.on(() => this.updateTable());
+
+		const headerElement = this.container.headerElement;
+		if (headerElement) {
+			const unequipButton = (
+				<button
+					className="btn btn-sm btn-link gem-reset-button"
+					onclick={() => {
+						this.unequipAllGems();
+					}}>
+					<i className="fas fa-times me-1"></i>
+					Unequip All Gems
+				</button>
+			);
+			headerElement.appendChild(unequipButton);
+		}
+	}
+
+	private unequipAllGems() {
+		this.player.setGear(TypedEvent.nextEventID(), this.player.getGear().withoutGems());
 	}
 
 	private updateTable() {

ui/scss/core/components/_gear_picker.scss

@@ -50,10 +50,38 @@ $favorite-cell-width: 2rem;
 			.item-picker-labels-container {
 				align-items: flex-end;
 			}
+
+			.item-picker-ilvl {
+				right: 0;
+				@include media-breakpoint-down(md) {
+					left: 0;
+				}
+			}
 		}
 	}
 }
 
+.item-picker-icon-wrapper {
+	position: relative;
+	width: 4rem;
+	height: 4rem;
+	border: var(--border-default);
+
+	@include media-breakpoint-down(lg) {
+		width: 3rem;
+		height: 3rem;
+	}
+}
+
+.item-picker-ilvl {
+	position: absolute;
+	padding-left: 1px;
+	background: rgba($black, 0.5);
+	font-size: 0.75rem;
+	z-index: 1;
+	pointer-events: none;
+}
+
 .item-picker-sockets-container {
 	@include vertical-bottom;
 	@include horizontal-center;
@@ -301,6 +329,10 @@ $favorite-cell-width: 2rem;
 	width: $source-cell-width;
 }
 
+.selector-modal-list-item-ilvl-container {
+	margin-left: map-get($spacers, 3);
+}
+
 .selector-modal-list-item-favorite {
 	margin-left: map-get($spacers, 3);
 	color: $brand;

ui/scss/shared/_gems.scss

@@ -4,7 +4,7 @@
   position: relative;
   width: var(--gem-width);
   height: var(--gem-width);
-  
+
   &:not(:last-child) {
     margin-right: 1px;
   }
@@ -30,3 +30,11 @@
   height: 100%;
   inset: 0;
 }
+
+.gem-reset-button {
+	margin-left: auto;
+	display: flex;
+	align-items: center;
+	padding: 0;
+	color: $link-danger-color;
+}