From c0e1157d11aae130fc65543186ac34dc97eee8ad Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Mon, 25 May 2026 13:32:26 +0200
Subject: [PATCH 1/2] Add collapsible statblock preview to custom NPCs in
 Encounter Builder

Matches the existing SRD/Homebrew expand behaviour: chevron toggles a row
that renders the full statblock via ViewMonster. The NPC name stays a
router-link to the edit page. Data is fetched lazily on first expand and
cached to avoid repeat Firebase reads.
---
 src/components/encounters/Entities.vue | 37 ++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/src/components/encounters/Entities.vue b/src/components/encounters/Entities.vue
index a989caa6..4053722b 100644
--- a/src/components/encounters/Entities.vue
+++ b/src/components/encounters/Entities.vue
@@ -111,8 +111,31 @@
 				:filter="searchNpc"
 				wrap-cells
 			>
+				<template v-slot:header="props">
+					<q-tr :props="props">
+						<q-th auto-width />
+						<q-th
+							v-for="col in props.cols"
+							:key="col.name"
+							:props="props"
+							:auto-width="col.name !== 'name'"
+						>
+							{{ col.label }}
+						</q-th>
+					</q-tr>
+				</template>
+
 				<template v-slot:body="props">
 					<q-tr :props="props">
+						<q-td auto-width>
+							<a @click="toggleCustomNpc(props, props.key)" class="neutral-2">
+								<i
+									aria-hidden="true"
+									class="fas"
+									:class="props.expand ? 'fa-chevron-up' : 'fa-chevron-down'"
+								/>
+							</a>
+						</q-td>
 						<q-td
 							v-for="col in props.cols"
 							:key="col.name"
@@ -187,6 +210,12 @@
 							</template>
 						</q-td>
 					</q-tr>
+					<q-tr v-if="props.expand" :props="props">
+						<q-td colspan="100%" class="p-0" auto-width>
+							<hk-loader v-if="!npcExpandData[props.key]" name="monster" />
+							<ViewMonster v-else :data="npcExpandData[props.key]" class="p-0" />
+						</q-td>
+					</q-tr>
 				</template>
 				<div slot="no-data" />
 				<hk-loader slot="loading" name="monsters" />
@@ -565,6 +594,7 @@ export default {
 					maxContent: true,
 				},
 			},
+			npcExpandData: {},
 			monster_resource_setter: undefined,
 			loading_monsters: true,
 			loading_npcs: true,
@@ -992,6 +1022,13 @@ export default {
 				? this.$set(this.encounter.entities, uuid(), entity)
 				: this.$set(this.encounter, "entities", { [uuid()]: entity });
 		},
+		async toggleCustomNpc(props, id) {
+			props.expand = !props.expand;
+			if (props.expand && !this.npcExpandData[id]) {
+				const npc = await this.get_npc({ uid: this.user.uid, id });
+				this.$set(this.npcExpandData, id, npc);
+			}
+		},
 		setSize(e) {
 			this.width = e.width;
 		},

From 4fb746c2a2f16a7d9205473edf5b97636756a28c Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Mon, 25 May 2026 14:44:39 +0200
Subject: [PATCH 2/2] Handle errors and null results when expanding custom NPC
 preview

---
 src/components/encounters/Entities.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/encounters/Entities.vue b/src/components/encounters/Entities.vue
index 4053722b..0afae61f 100644
--- a/src/components/encounters/Entities.vue
+++ b/src/components/encounters/Entities.vue
@@ -1025,8 +1025,22 @@ export default {
 		async toggleCustomNpc(props, id) {
 			props.expand = !props.expand;
 			if (props.expand && !this.npcExpandData[id]) {
-				const npc = await this.get_npc({ uid: this.user.uid, id });
-				this.$set(this.npcExpandData, id, npc);
+				try {
+					const npc = await this.get_npc({ uid: this.user.uid, id });
+					if (!npc) {
+						props.expand = false;
+						this.$snotify.error("This NPC could not be loaded.", "NPC unavailable", {
+							position: "centerTop",
+						});
+						return;
+					}
+					this.$set(this.npcExpandData, id, npc);
+				} catch (e) {
+					props.expand = false;
+					this.$snotify.error("Failed to load NPC statblock.", "Load error", {
+						position: "centerTop",
+					});
+				}
 			}
 		},
 		setSize(e) {