Add ammo to the gear types, and get more design stuff for the AmmoTracker

templates/Apps/popovers/AmmoTracker/ammoList.hbs

@@ -0,0 +1,23 @@
+<div>
+	{{#if ammos}}
+		<ul>
+			{{#each ammos as | ammo |}}
+				<div class="ammo" data-item-id="{{ammo.uuid}}">
+					<span class="name">{{ ammo.name }}</span>
+					<span class="value">{{ ammo.system.quantity }}</span>
+					<button
+						type="button"
+						{{ disabled @root.canPin }}
+						data-action="pinAmmo"
+					>
+						Pin
+					</button>
+				</div>
+			{{/each}}
+		</ul>
+	{{else}}
+		<span class="placeholder">
+			{{ rc-i18n "RipCrypt.Apps.no-ammo" }}
+		</span>
+	{{/if}}
+</div>

templates/Apps/popovers/AmmoTracker/content.hbs

@@ -1,3 +0,0 @@
-<div>
-	Hello
-</div>

templates/Apps/popovers/AmmoTracker/style.css

@@ -1,4 +1,38 @@
-.ripcrypt--AmmoTracker {
-	color: var(--base-text);
-	background: var(--base-background);
+.ripcrypt--AmmoTracker.ripcrypt--AmmoTracker {
+	color: var(--popover-text);
+	background: var(--popover-background);
+	padding: 4px 8px;
+
+	--button-text: var(--header-text);
+	--button-background: var(--header-background);
+
+	button {
+		border-radius: 4px;
+	}
+
+	ul {
+		&:nth-child(even) {
+			color: var(--popover-alt-row-text);
+			background: var(--popover-alt-row-background);
+			--button-text: unset;
+			--button-background: unset;
+		}
+	}
+
+	.ammo {
+		display: grid;
+		grid-template-columns: 150px 30px min-content;
+		grid-template-rows: min-content;
+		align-items: center;
+		justify-items: center;
+		/* display: flex;
+		flex-direction: row;
+		align-items: center; */
+		gap: 8px;
+
+		.name {
+			flex-grow: 1;
+			justify-self: left;
+		}
+	}
 }