From 9955b76956e1d8443a07d1946c145ded29e1f0d3 Mon Sep 17 00:00:00 2001
From: Oliver <oliver@noreply.localhost>
Date: Thu, 9 Apr 2026 21:41:37 -0600
Subject: [PATCH] Finish adding the create button in the item group lists

---
 assets/icons/plus.svg                |  1 +
 styles/Apps/PlayerSheet.css          | 11 +++++++++++
 styles/themes/dark.css               | 29 +++++++++++++++-------------
 templates/PlayerSheet/item-lists.hbs | 13 +++++++++++++
 4 files changed, 41 insertions(+), 13 deletions(-)
 create mode 100644 assets/icons/plus.svg

diff --git a/assets/icons/plus.svg b/assets/icons/plus.svg
new file mode 100644
index 0000000..0a72686
--- /dev/null
+++ b/assets/icons/plus.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M81.801 41.801H58.199V18.199c0-4.5-3.7-8.2-8.2-8.2s-8.198 3.7-8.198 8.2v23.602H18.199c-4.5 0-8.2 3.7-8.2 8.2s3.7 8.198 8.2 8.198H41.8v23.602c0 4.5 3.699 8.2 8.199 8.2s8.199-3.7 8.199-8.2V58.2H81.8c4.5 0 8.2-3.699 8.2-8.199s-3.7-8.199-8.2-8.199"/></svg>
\ No newline at end of file
diff --git a/styles/Apps/PlayerSheet.css b/styles/Apps/PlayerSheet.css
index d6704b7..0594564 100644
--- a/styles/Apps/PlayerSheet.css
+++ b/styles/Apps/PlayerSheet.css
@@ -70,12 +70,23 @@
 	.item-list-header {
 		display: flex;
 		flex-direction: row;
+		align-items: center;
 		gap: 8px;
 		border-radius: 6px 6px 0 0;
 		padding: 6px 6px 4px;
 		margin-bottom: 2px;
 		background: var(--item-list-header-background);
 		color: var(--item-list-header-colour);
+
+		button {
+			padding: 2px;
+			border: none;
+			aspect-ratio: 1;
+			height: unset;
+			min-height: unset;
+			background: var(--item-list-header-input-background);
+			color: var(--item-list-header-input-colour);
+		}
 	}
 
 	.item-list {
diff --git a/styles/themes/dark.css b/styles/themes/dark.css
index ae7a855..fa87c25 100644
--- a/styles/themes/dark.css
+++ b/styles/themes/dark.css
@@ -13,21 +13,24 @@
 
 	/* Actor Sheet Variables */
 	/* Use --steel-850 as the main sheet background */
-	--inventory-summary-background: #171e26;
-	--inventory-summary-colour: white;
-	--inventory-input-background: #2b3642;
-	--inventory-input-colour: white;
-	--inventory-input-disabled-colour: gray;
-	--item-list-header-background: #171e26;
-	--item-list-header-colour: white;
+	--inventory-summary-background: var(--steel-800);
+	--inventory-summary-colour: var(--steel-100);
+	--inventory-input-background: var(--steel-650);
+	--inventory-input-colour: var(--steel-100);
+	--inventory-input-disabled-colour: var(--steel-350);
+
+	--item-list-header-background: var(--steel-800);
+	--item-list-header-colour: var(--steel-100);
+	--item-list-header-input-background: var(--steel-650);
+	--item-list-header-input-colour: var(--steel-100);
 
 	--item-card-background: #1d262f;
-	--item-card-colour: white;
-	--item-card-header-background: #242d38;
-	--item-card-header-colour: white;
-	--item-card-header-input-background: #2b3642;
-	--item-card-header-input-colour: white;
-	--item-card-header-disabled-input-colour: gray;
+	--item-card-colour: var(--steel-100);
+	--item-card-header-background: var(--steel-700);
+	--item-card-header-colour: var(--steel-100);
+	--item-card-header-input-background: var(--steel-650);
+	--item-card-header-input-colour: var(--steel-100);
+	--item-card-header-disabled-input-colour: var(--steel-350);
 
 	/* Item Sheet Variables */
 	--item-sheet-colour: var(--steel-100);
diff --git a/templates/PlayerSheet/item-lists.hbs b/templates/PlayerSheet/item-lists.hbs
index 3b5737f..cd67ee3 100644
--- a/templates/PlayerSheet/item-lists.hbs
+++ b/templates/PlayerSheet/item-lists.hbs
@@ -39,6 +39,19 @@
 	{{#each itemGroups as | group |}}
 		<section>
 			<div class="item-list-header">
+				{{#if @root.meta.editable}}
+					<button
+						data-action="createEmbeddedItem"
+						data-item-group="{{ group.name }}"
+						aria-label="{{localize "taf.Apps.PlayerSheet.create-item"}}"
+						data-tooltip
+					>
+						<taf-icon
+							name="icons/plus"
+							var:fill="currentColor"
+						></taf-icon>
+					</button>
+				{{/if}}
 				<h3 class="grow">
 					{{ group.name }}
 				</h3>