module/apps/PlayerSheet.mjs

@@ -98,6 +98,7 @@ export class PlayerSheet extends
 	 * they occur.
 	 */
 	#expandedItems = new Set();
+	#collapsedAttributeGroups = new Set();
 
 	/**
 	 * This method is used in order to ensure that when we hide specific
@@ -309,6 +310,23 @@ export class PlayerSheet extends
 
 	async _prepareAttributesTab(ctx) {
 		ctx.tabActive = this.tabGroups.primary === `attributes`;
+
+		const groups = new Map();
+		const attrs = this.actor.itemTypes.attribute ?? [];
+		for (const attr of attrs) {
+			const groupName = attr.system.group ?? "Attributes";
+			if (!groups.has(groupName)) {
+				groups.set(groupName, {
+					name: groupName.titleCase(),
+					attrs: [],
+					collapsed: false,
+				});
+			};
+			const group = groups.get(groupName);
+
+			group.attrs.push(attr);
+		};
+		ctx.attrGroups = [...groups.values()];
 	};
 
 	async _prepareTabList(ctx) {

styles/Apps/PlayerSheet.css

@@ -37,7 +37,8 @@
 		}
 	}
 
-	.items-tab.active {
+	.items-tab.active,
+	.attributes-tab.active {
 		display: flex;
 		flex-direction: column;
 		gap: 8px;
@@ -67,7 +68,7 @@
 		}
 	}
 
-	.item-list-header {
+	.embedded-list-header {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
@@ -75,8 +76,8 @@
 		border-radius: 6px 6px 0 0;
 		padding: 6px 6px 4px;
 		margin-bottom: 2px;
-		background: var(--item-list-header-background);
+		background: var(--embedded-list-header-background);
-		color: var(--item-list-header-colour);
+		color: var(--embedded-list-header-colour);
 
 		button {
 			padding: 2px;
@@ -84,12 +85,12 @@
 			aspect-ratio: 1;
 			height: unset;
 			min-height: unset;
-			background: var(--item-list-header-input-background);
+			background: var(--embedded-list-header-input-background);
-			color: var(--item-list-header-input-colour);
+			color: var(--embedded-list-header-input-colour);
 		}
 	}
 
-	.item-list {
+	.embedded-list {
 		display: flex;
 		flex-direction: column;
 		gap: 2px;
@@ -172,6 +173,38 @@
 		}
 	}
 
+	.attribute {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 8px;
+		background: var(--attribute-background);
+		color: var(--attribute-colour);
+		padding: 4px;
+
+		.name {
+			font-size: 1.1rem;
+		}
+
+		input {
+			width: 50px;
+		}
+
+		input, button {
+			background: var(--item-card-header-input-background);
+			color: var(--item-card-header-input-colour);
+			text-align: center;
+
+			&:disabled {
+				color: var(--item-card-header-disabled-input-colour);
+			}
+		}
+
+		&:last-child {
+			border-radius: 0 0 6px 6px;
+		}
+	}
+
 	.content {
 		flex-grow: 1;
 		overflow: hidden;

styles/themes/dark.css

@@ -19,10 +19,16 @@
 	--inventory-input-colour: var(--steel-100);
 	--inventory-input-disabled-colour: var(--steel-350);
 
-	--item-list-header-background: var(--steel-800);
+	--embedded-list-header-background: var(--steel-800);
-	--item-list-header-colour: var(--steel-100);
+	--embedded-list-header-colour: var(--steel-100);
-	--item-list-header-input-background: var(--steel-650);
+	--embedded-list-header-input-background: var(--steel-650);
-	--item-list-header-input-colour: var(--steel-100);
+	--embedded-list-header-input-colour: var(--steel-100);
+
+	--attribute-background: var(--steel-700);
+	--attribute-colour: var(--steel-100);
+	--attribute-input-background: var(--steel-650);
+	--attribute-input-colour: var(--steel-100);
+	--attribute-disabled-input-colour: var(--steel-350);
 
 	--item-card-background: #1d262f;
 	--item-card-colour: var(--steel-100);

templates/PlayerSheet/tabs/attributes/attribute.hbs

@@ -1,10 +1,16 @@
 <li
-	class="item"
+	class="attribute"
 	data-item-uuid="{{uuid}}"
 >
-	<div class="summary">
+	<div class="title grow">
-		<div class="title">
+		<span class="name">{{ name }}</span>
-			<span class="name">{{ name }}</span>
-		</div>
 	</div>
+	<input
+		type="number"
+		id="{{uuid}}-value"
+		data-foreign-name="system.value"
+		value="{{ system.value }}"
+		min="{{ system.min }}"
+		max="{{ system.max }}"
+	>
 </li>

templates/PlayerSheet/tabs/attributes/lists.hbs

@@ -3,5 +3,18 @@
 	data-group="primary"
 	data-tab="attributes"
 >
-	Attribute Tab
+	{{#each attrGroups as |group|}}
+		<section>
+			<div class="embedded-list-header">
+				<h3 class="grow">
+					{{ group.name }}
+				</h3>
+			</div>
+			<ul class="embedded-list">
+				{{#each group.attrs as |attr|}}
+					{{> (systemFilePath "templates/PlayerSheet/tabs/attributes/attribute.hbs") attr }}
+				{{/each}}
+			</ul>
+		</section>
+	{{/each}}
 </div>

templates/PlayerSheet/tabs/items/lists.hbs

@@ -38,7 +38,7 @@
 	</section>
 	{{#each itemGroups as | group |}}
 		<section>
-			<div class="item-list-header">
+			<div class="embedded-list-header">
 				{{#if @root.meta.editable}}
 					<button
 						data-action="createEmbeddedItem"
@@ -59,7 +59,7 @@
 					{{ group.weight }}
 				</span>
 			</div>
-			<ul class="item-list">
+			<ul class="embedded-list">
 				{{#each group.items as |item|}}
 					{{> (systemFilePath "templates/PlayerSheet/tabs/items/item.hbs") item }}
 				{{/each}}