From 495e669ba68a65f6298c90488bdfe99fcea27960 Mon Sep 17 00:00:00 2001
From: Eldritch-Oliver <Oliver.akins1999@gmail.com>
Date: Sun, 5 Oct 2025 16:28:40 -0600
Subject: [PATCH] Add the buttons for creating new embedded items from the
 sheet

---
 langs/en-ca.json                        |  1 +
 templates/Apps/SkillsCardV1/content.hbs | 67 +++++++++++++++++++++++++
 templates/Apps/SkillsCardV1/style.css   |  2 +-
 templates/Apps/StatsCardV1/content.hbs  | 18 ++++++-
 templates/Apps/StatsCardV1/style.css    |  4 ++
 5 files changed, 90 insertions(+), 2 deletions(-)

diff --git a/langs/en-ca.json b/langs/en-ca.json
index cad8c6a..24b1475 100644
--- a/langs/en-ca.json
+++ b/langs/en-ca.json
@@ -206,6 +206,7 @@
 			"shield-bonus": "Shield Bonus: {value}",
 			"set-fate-to": "Set Fate to {ordinal}",
 			"current-tour": "Current Delve Tour",
+			"create-new-item": "Create new item",
 			"next-tour": "Next Delve Tour",
 			"prev-tour": "Previous Delve Tour",
 			"auras": {
diff --git a/templates/Apps/SkillsCardV1/content.hbs b/templates/Apps/SkillsCardV1/content.hbs
index 2f170d2..231e388 100644
--- a/templates/Apps/SkillsCardV1/content.hbs
+++ b/templates/Apps/SkillsCardV1/content.hbs
@@ -1,6 +1,19 @@
 <div class="SkillsCardV1">
 	<div class="label col-header list-header gait-skills-header">
 		<span>{{ rc-i18n "RipCrypt.Apps.grit-skills" }}</span>
+		<button
+			class="transparent"
+			data-action="createItem"
+			data-item-types="skill"
+			data-tooltip="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+			aria-label="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+		>
+			<rc-icon
+				name="icons/plus"
+				var:size="16px"
+				var:fill="var(--accent-3)"
+			></rc-icon>
+		</button>
 	</div>
 	<ol class="num-before skill-list even grit-skills">
 		{{#each skills.grit as | skill |}}
@@ -23,6 +36,19 @@
 
 	<div class="label col-header list-header gait-skills-header">
 		<span>{{ rc-i18n "RipCrypt.Apps.gait-skills" }}</span>
+		<button
+			class="transparent"
+			data-action="createItem"
+			data-item-types="skill"
+			data-tooltip="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+			aria-label="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+		>
+			<rc-icon
+				name="icons/plus"
+				var:size="16px"
+				var:fill="var(--accent-3)"
+			></rc-icon>
+		</button>
 	</div>
 	<ol class="num-before skill-list even gait-skills">
 		{{#each skills.gait as | skill |}}
@@ -45,6 +71,19 @@
 
 	<div class="label col-header list-header grip-skills-header">
 		<span>{{ rc-i18n "RipCrypt.Apps.grip-skills" }}</span>
+		<button
+			class="transparent"
+			data-action="createItem"
+			data-item-types="skill"
+			data-tooltip="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+			aria-label="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+		>
+			<rc-icon
+				name="icons/plus"
+				var:size="16px"
+				var:fill="var(--accent-3)"
+			></rc-icon>
+		</button>
 	</div>
 	<ol class="num-before skill-list odd grip-skills">
 		{{#each skills.grip as | skill |}}
@@ -67,6 +106,19 @@
 
 	<div class="label col-header list-header glim-skills-header">
 		<span>{{ rc-i18n "RipCrypt.Apps.glim-skills" }}</span>
+		<button
+			class="transparent"
+			data-action="createItem"
+			data-item-types="skill"
+			data-tooltip="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+			aria-label="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+		>
+			<rc-icon
+				name="icons/plus"
+				var:size="16px"
+				var:fill="var(--accent-3)"
+			></rc-icon>
+		</button>
 	</div>
 	<ol class="num-before skill-list odd glim-skills">
 		{{#each skills.glim as | skill |}}
@@ -89,6 +141,21 @@
 
 	<div class="label col-header list-header">
 		<span>{{ rc-i18n "RipCrypt.common.gear" }}</span>
+		<button
+			class="transparent"
+			data-action="createItem"
+			data-item-types="ammo,armour,good,shield,weapon"
+			data-default-item-type="good"
+			data-tooltip="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+			aria-label="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+		>
+			<rc-icon
+				name="icons/plus"
+				var:size="16px"
+				var:fill="var(--accent-3)"
+			></rc-icon>
+		</button>
+		<div class="grow"></div>
 		<span class="small">{{ rc-i18n "RipCrypt.common.slot" }}</span>
 	</div>
 	<ol class="num-after gear-list">
diff --git a/templates/Apps/SkillsCardV1/style.css b/templates/Apps/SkillsCardV1/style.css
index a25718b..c1815ce 100644
--- a/templates/Apps/SkillsCardV1/style.css
+++ b/templates/Apps/SkillsCardV1/style.css
@@ -34,7 +34,7 @@
 
 	.list-header {
 		display: flex;
-		justify-content: space-between;
+		gap: 4px;
 		align-items: center;
 		border-radius: 999px;
 	}
diff --git a/templates/Apps/StatsCardV1/content.hbs b/templates/Apps/StatsCardV1/content.hbs
index 99e3c74..9c87e00 100644
--- a/templates/Apps/StatsCardV1/content.hbs
+++ b/templates/Apps/StatsCardV1/content.hbs
@@ -205,7 +205,23 @@
 	<table class="weapons">
 		<thead>
 			<tr>
-				<th class="label col-header left-pill">{{ rc-i18n "RipCrypt.common.weapon.singular" }}</th>
+				<th class="label col-header left-pill">
+					{{ rc-i18n "RipCrypt.common.weapon.singular" }}
+					<button
+						class="transparent"
+						data-action="createItem"
+						data-item-types="weapon,ammo"
+						data-default-item-type="weapon"
+						data-tooltip="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+						aria-label="{{ rc-i18n "RipCrypt.tooltips.create-new-item" }}"
+					>
+						<rc-icon
+							name="icons/plus"
+							var:size="16px"
+							var:fill="var(--accent-3)"
+						></rc-icon>
+					</button>
+				</th>
 				<th class="label col-header">{{ rc-i18n "RipCrypt.Apps.traits-range" }}</th>
 				<th class="label col-header">{{ rc-i18n "RipCrypt.common.wear" }}</th>
 				<th class="label col-header right-pill">{{ rc-i18n "RipCrypt.common.damage" }}</th>
diff --git a/templates/Apps/StatsCardV1/style.css b/templates/Apps/StatsCardV1/style.css
index e33246e..598d138 100644
--- a/templates/Apps/StatsCardV1/style.css
+++ b/templates/Apps/StatsCardV1/style.css
@@ -12,6 +12,10 @@
 	color: var(--base-text);
 
 	.col-header {
+		display: flex;
+		flex-direction: row;
+		gap: 4px;
+		align-items: center;
 		background: var(--section-header-background);
 		color: var(--section-header-text);
 	}