Add the filter checkboxes and infra for toggling them (closes #110)

module/sheets/Actors/PC/Improved.mjs

@@ -50,6 +50,7 @@ export class PlayerSheetv2 extends GenericActorSheet {
 			canChangeGroup: ctx.settings.playersCanChangeGroup || ctx.isGM,
 			canAddAspect: !await actor.proxyFunction.bind(actor)(`atAspectLimit`),
 			stats: this.#statData,
+			itemFilters: this.#itemFilters,
 		};
 		console.log(ctx)
 		return ctx;
@@ -102,6 +103,30 @@ export class PlayerSheetv2 extends GenericActorSheet {
 		return stats;
 	};
 
+	_itemFiltersActive = new Set();
+	toggleItemFilter(filterName) {
+		if (this._itemFiltersActive.has(filterName)) {
+			this._itemFiltersActive.add(filterName);
+		} else {
+			this._itemFiltersActive.delete(filterName);
+		};
+		this.render();
+	};
+
+	get #itemFilters() {
+		const types = CONFIG.Item.typeLabels;
+		const filters = [];
+		for (const type in types) {
+			if (["base", "spell", "legendaryItem"].includes(type)) continue;
+			filters.push({
+				label: localizer(types[type]),
+				key: type,
+				active: this._itemFiltersActive.has(type),
+			});
+		};
+		return filters;
+	};
+
 	_updateObject(...args) {
 		console.log(args)
 		super._updateObject(...args);

styles/sheets/actor/char-sheet/pages/inventory.scss

@@ -64,4 +64,26 @@
 			text-align: center;
 		}
 	}
+
+	.filter-panel {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-template-rows: repeat(6, 1fr);
+		gap: 8px;
+
+		label {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+
+			&:nth-of-type(2n) {
+				flex-direction: row-reverse;
+				justify-content: right;
+			}
+		}
+
+		input[type="checkbox"] {
+			margin: 0;
+		}
+	}
 }

templates/actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs

@@ -46,5 +46,15 @@
 	</div>
 	<div class="e-1dp panel filter-panel">
 		<h2>Show</h2>
+		<label>
+			<input type="checkbox" name="">
+			All
+		</label>
+		{{#each computed.itemFilters as | filter |}}
+			<label class="{{filter.key}}-filter">
+				<input type="checkbox" {{checked filter.active}}>
+				{{filter.label}}
+			</label>
+		{{/each}}
 	</div>
 </div>