Get the base favourite mechanism working so the items are visible on the skills card

templates/Apps/HeroSkillsCardV1/content.hbs

@@ -118,6 +118,24 @@
 			{{ ammo }}
 		</div>
 	</div>
+	{{#each favouriteAmmo as | data |}}
+		{{#if data}}
+			<div
+				class="half-pill fav-ammo"
+				data-item-id="{{data.uuid}}"
+			>
+				<label for="{{@root.meta.idp}}-{{data.uuid}}-quantity">
+					{{data.name}}
+				</label>
+				<input
+					type="number"
+					value="{{data.quantity}}"
+					id="{{@root.meta.idp}}-{{data.uuid}}-quantity"
+				>
+			</div>
+		{{else}}
+		{{/if}}
+	{{/each}}
 
 	{{!-- * Currencies --}}
 	<div class="currencies">

templates/Apps/HeroSkillsCardV1/style.css

@@ -8,6 +8,7 @@
 	grid-template-columns: repeat(3, minmax(0, 1fr));
 	grid-template-rows: repeat(13, minmax(0, 1fr));
 	column-gap: var(--col-gap);
+	row-gap: var(--row-gap);
 
 	background: var(--base-background);
 	color: var(--base-text);
@@ -125,8 +126,13 @@
 			}
 		}
 
+		label, .label {
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
 
-		.input {
+
+		input, .input {
 			margin: 2px;
 			border-radius: 999px;
 			text-align: center;

templates/Apps/popovers/AmmoTracker/ammoList.hbs

@@ -1,18 +1,37 @@
 <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 ammos as | data |}}
+				<li class="ammo" data-item-id="{{data.ammo.uuid}}">
+					<span class="name">{{ data.ammo.name }}</span>
+					<span class="value">{{ data.ammo.system.quantity }}</span>
+					{{#if data.favourite}}
+						<button
+							type="button"
+							class="icon"
+							data-action="unfavourite"
+							aria-label="Unpin ammo"
+						>
+							<rc-icon
+								name="icons/star"
+								var:size="1rem"
+							></rc-icon>
+						</button>
+					{{else}}
+						<button
+							type="button"
+							class="icon"
+							{{ disabled @root.atFavouriteLimit }}
+							data-action="favourite"
+							aria-label="Pin ammo"
+						>
+							<rc-icon
+								name="icons/star-empty"
+								var:size="1rem"
+							></rc-icon>
+						</button>
+					{{/if}}
+				</li>
 			{{/each}}
 		</ul>
 	{{else}}
@@ -20,4 +39,4 @@
 			{{ rc-i18n "RipCrypt.Apps.no-ammo" }}
 		</span>
 	{{/if}}
-</div>
+</div>

templates/Apps/popovers/AmmoTracker/style.css

@@ -1,8 +1,9 @@
 .ripcrypt--AmmoTracker.ripcrypt--AmmoTracker {
 	color: var(--popover-text);
 	background: var(--popover-background);
-	padding: 4px 8px;
+	padding: 4px;
 
+	--row-gap: 4px;
 	--button-text: var(--header-text);
 	--button-background: var(--header-background);
 
@@ -11,11 +12,20 @@
 	}
 
 	ul {
-		&:nth-child(even) {
-			color: var(--popover-alt-row-text);
-			background: var(--popover-alt-row-background);
-			--button-text: unset;
-			--button-background: unset;
+		display: flex;
+		flex-direction: column;
+		row-gap: var(--row-gap);
+
+		> li {
+			padding: 4px 8px;
+			border-radius: 999px;
+
+			&:nth-child(even) {
+				color: var(--popover-alt-row-text);
+				background: var(--popover-alt-row-background);
+				--button-text: unset;
+				--button-background: unset;
+			}
 		}
 	}
 

templates/css/common.css

@@ -29,6 +29,7 @@
 		/* height: 270px; */
 		width: 680px;
 		--col-gap: 2px;
+		--row-gap: 4px;
 	}
 
 	label, input, select {

templates/css/elements/button.css

@@ -1,6 +1,9 @@
 .ripcrypt:where(.popover.frameless, .hud) button,
 .ripcrypt > .window-content button {
 	all: revert;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 	outline: none;
 	border: none;
 	padding: 2px 4px;