From f4c821a2c9419d731bce72e05cfeffdc9efb2c4d Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Wed, 4 Mar 2026 11:35:52 +0100
Subject: [PATCH 1/6] Add NPC groups feature for organizing NPCs

- Add NPC groups Firebase service and Vuex store module
- Add group CRUD management dialog (NpcGroupManager)
- Add group assignment in NPC editor via multi-select
- Display group membership as chips in NPC table
- Add group filter dropdown to NPC list
- Cascade group cleanup when deleting a group
- Sync groups field to search_npcs for client-side filtering
---
 src/components/npcs/NpcGroupManager.vue    | 266 +++++++++++++++++++++
 src/services/npc_groups.js                 |  73 ++++++
 src/store/index.js                         |   2 +
 src/store/modules/userContent/npcGroups.js | 151 ++++++++++++
 src/store/modules/userContent/npcs.js      |  41 +++-
 src/views/UserContent/Npcs/EditNpc.vue     |  60 +++++
 src/views/UserContent/Npcs/Npcs.vue        | 142 +++++++++--
 7 files changed, 716 insertions(+), 19 deletions(-)
 create mode 100644 src/components/npcs/NpcGroupManager.vue
 create mode 100644 src/services/npc_groups.js
 create mode 100644 src/store/modules/userContent/npcGroups.js

diff --git a/src/components/npcs/NpcGroupManager.vue b/src/components/npcs/NpcGroupManager.vue
new file mode 100644
index 000000000..46d78d60c
--- /dev/null
+++ b/src/components/npcs/NpcGroupManager.vue
@@ -0,0 +1,266 @@
+<template>
+	<hk-card class="npc-group-manager">
+		<div slot="header" class="card-header">
+			<template v-if="selectedGroup">
+				<a @click="selectedGroup = null" class="btn btn-sm bg-neutral-5 mr-2">
+					<i aria-hidden="true" class="fas fa-arrow-left" />
+				</a>
+				<span>{{ selectedGroup.name ? selectedGroup.name.capitalizeEach() : "" }}</span>
+			</template>
+			<span v-else>Manage NPC Groups</span>
+			<q-btn padding="sm" size="sm" no-caps icon="fas fa-times" flat v-close-popup />
+		</div>
+		<div class="card-body">
+			<!-- GROUP DETAIL VIEW -->
+			<template v-if="selectedGroup">
+				<!-- Rename -->
+				<div class="row q-col-gutter-sm mb-3">
+					<div class="col">
+						<q-input
+							:dark="$store.getters.theme === 'dark'"
+							filled
+							square
+							dense
+							v-model="editName"
+							label="Group name"
+							@keyup.enter="renameGroup"
+						/>
+					</div>
+					<div class="col-auto">
+						<q-btn
+							no-caps
+							color="primary"
+							:disable="!editName || editName.toLowerCase() === selectedGroup.name"
+							@click="renameGroup"
+						>
+							Rename
+						</q-btn>
+					</div>
+				</div>
+
+				<!-- Add NPCs -->
+				<q-select
+					:dark="$store.getters.theme === 'dark'"
+					filled
+					square
+					dense
+					multiple
+					use-chips
+					label="Add NPCs to group"
+					v-model="groupNpcIds"
+					:options="npcOptions"
+					option-value="value"
+					option-label="label"
+					emit-value
+					map-options
+					class="mb-3"
+				/>
+
+				<!-- NPC Members -->
+				<div v-if="groupMembers.length" class="member-list">
+					<div
+						v-for="npc in groupMembers"
+						:key="npc.key"
+						class="member d-flex justify-content-between items-center"
+					>
+						<span>{{ npc.name ? npc.name.capitalizeEach() : npc.key }}</span>
+						<a class="btn btn-sm bg-neutral-5" @click="removeNpcFromGroup(npc.key)">
+							<i aria-hidden="true" class="fas fa-times red" />
+						</a>
+					</div>
+				</div>
+				<p v-else class="neutral-3">No NPCs in this group yet.</p>
+			</template>
+
+			<!-- GROUP LIST VIEW -->
+			<template v-else>
+				<!-- Add new group -->
+				<div class="row q-col-gutter-sm mb-3">
+					<div class="col">
+						<q-input
+							:dark="$store.getters.theme === 'dark'"
+							filled
+							square
+							dense
+							v-model="newGroupName"
+							label="New group name"
+							@keyup.enter="addGroup"
+						/>
+					</div>
+					<div class="col-auto">
+						<q-btn no-caps color="primary" :disable="!newGroupName" @click="addGroup">
+							Add
+						</q-btn>
+					</div>
+				</div>
+
+				<!-- Groups list -->
+				<div v-if="npc_groups && npc_groups.length" class="group-list">
+					<div
+						v-for="group in npc_groups"
+						:key="group.key"
+						class="group-item d-flex justify-content-between items-center"
+					>
+						<a @click="selectGroup(group)" class="group-name truncate">
+							{{ group.name ? group.name.capitalizeEach() : group.key }}
+						</a>
+						<div class="d-flex">
+							<a class="btn btn-sm bg-neutral-5 mr-1" @click="selectGroup(group)">
+								<i aria-hidden="true" class="fas fa-pencil" />
+							</a>
+							<a class="btn btn-sm bg-neutral-5" @click="confirmDeleteGroup(group)">
+								<i aria-hidden="true" class="fas fa-trash-alt" />
+							</a>
+						</div>
+					</div>
+				</div>
+				<p v-else class="neutral-3">No groups created yet.</p>
+			</template>
+		</div>
+	</hk-card>
+</template>
+
+<script>
+import { mapActions, mapGetters } from "vuex";
+
+export default {
+	name: "NpcGroupManager",
+	data() {
+		return {
+			newGroupName: "",
+			selectedGroup: null,
+			editName: "",
+		};
+	},
+	computed: {
+		...mapGetters("npcGroups", ["npc_groups"]),
+		...mapGetters("npcs", ["npcs"]),
+		npcOptions() {
+			return this.npcs.map((npc) => ({
+				label: npc.name ? npc.name.capitalizeEach() : npc.key,
+				value: npc.key,
+			}));
+		},
+		groupMembers() {
+			if (!this.selectedGroup) return [];
+			return this.npcs.filter(
+				(npc) => npc.groups && npc.groups[this.selectedGroup.key]
+			);
+		},
+		groupNpcIds: {
+			get() {
+				return this.groupMembers.map((npc) => npc.key);
+			},
+			set(val) {
+				this.syncGroupNpcs(val);
+			},
+		},
+	},
+	methods: {
+		...mapActions("npcGroups", ["add_npc_group", "edit_npc_group", "delete_npc_group"]),
+		...mapActions("npcs", ["update_npc_groups"]),
+		async addGroup() {
+			if (!this.newGroupName) return;
+			await this.add_npc_group({ name: this.newGroupName });
+			this.newGroupName = "";
+		},
+		selectGroup(group) {
+			this.selectedGroup = group;
+			this.editName = group.name ? group.name.capitalizeEach() : "";
+		},
+		async renameGroup() {
+			if (!this.editName || this.editName.toLowerCase() === this.selectedGroup.name) return;
+			await this.edit_npc_group({
+				id: this.selectedGroup.key,
+				group: { name: this.editName },
+			});
+			this.selectedGroup.name = this.editName.toLowerCase();
+		},
+		confirmDeleteGroup(group) {
+			this.$snotify.error(
+				`Are you sure you want to delete "${group.name ? group.name.capitalizeEach() : group.key}"?`,
+				"Delete Group",
+				{
+					timeout: false,
+					buttons: [
+						{
+							text: "Yes",
+							action: (toast) => {
+								this.delete_npc_group(group.key);
+								if (this.selectedGroup && this.selectedGroup.key === group.key) {
+									this.selectedGroup = null;
+								}
+								this.$snotify.remove(toast.id);
+							},
+							bold: false,
+						},
+						{
+							text: "No",
+							action: (toast) => {
+								this.$snotify.remove(toast.id);
+							},
+							bold: true,
+						},
+					],
+				}
+			);
+		},
+		async syncGroupNpcs(newNpcIds) {
+			const groupId = this.selectedGroup.key;
+			const currentNpcIds = this.groupMembers.map((npc) => npc.key);
+
+			// NPCs to add to group
+			const toAdd = newNpcIds.filter((id) => !currentNpcIds.includes(id));
+			// NPCs to remove from group
+			const toRemove = currentNpcIds.filter((id) => !newNpcIds.includes(id));
+
+			for (const npcId of toAdd) {
+				const npc = this.npcs.find((n) => n.key === npcId);
+				const groups = { ...(npc.groups || {}), [groupId]: true };
+				await this.update_npc_groups({ id: npcId, groups });
+			}
+			for (const npcId of toRemove) {
+				await this.removeNpcFromGroup(npcId);
+			}
+		},
+		async removeNpcFromGroup(npcId) {
+			const groupId = this.selectedGroup.key;
+			const npc = this.npcs.find((n) => n.key === npcId);
+			if (npc && npc.groups) {
+				const groups = { ...npc.groups };
+				delete groups[groupId];
+				await this.update_npc_groups({
+					id: npcId,
+					groups: Object.keys(groups).length ? groups : undefined,
+				});
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.npc-group-manager {
+	max-width: 95vw;
+	width: 576px;
+	margin-top: 100px;
+}
+.group-list,
+.member-list {
+	.group-item,
+	.member {
+		padding: 5px 0;
+		border-bottom: solid 1px $neutral-6;
+
+		&:last-child {
+			border-bottom: none;
+		}
+	}
+	.group-name {
+		cursor: pointer;
+		&:hover {
+			color: $blue;
+		}
+	}
+}
+</style>
diff --git a/src/services/npc_groups.js b/src/services/npc_groups.js
new file mode 100644
index 000000000..d5f5e29d3
--- /dev/null
+++ b/src/services/npc_groups.js
@@ -0,0 +1,73 @@
+import { firebase, db } from "src/firebase";
+
+const NPC_GROUPS_REF = db.ref("npc_groups");
+
+/**
+ * NPC Groups Firebase Service
+ * CRUD interface for NPC group management
+ */
+export class npcGroupServices {
+	/**
+	 * Get all NPC groups for a user
+	 *
+	 * @param {String} uid ID of active user
+	 * @returns All NPC groups for the user
+	 */
+	async getGroups(uid) {
+		try {
+			const groups = await NPC_GROUPS_REF.child(uid).once("value");
+			return groups.val();
+		} catch (error) {
+			throw error;
+		}
+	}
+
+	/**
+	 * Add a new NPC group
+	 *
+	 * @param {String} uid ID of active user
+	 * @param {Object} group Group object { name }
+	 * @returns Key of the newly added group
+	 */
+	async addGroup(uid, group) {
+		try {
+			group.name = group.name.toLowerCase();
+			group.created = firebase.database.ServerValue.TIMESTAMP;
+
+			const newGroup = await NPC_GROUPS_REF.child(uid).push(group);
+			return newGroup.key;
+		} catch (error) {
+			throw error;
+		}
+	}
+
+	/**
+	 * Update an existing NPC group
+	 *
+	 * @param {String} uid ID of active user
+	 * @param {String} id Group ID
+	 * @param {Object} group Updated group object
+	 */
+	async updateGroup(uid, id, group) {
+		try {
+			group.name = group.name.toLowerCase();
+			await NPC_GROUPS_REF.child(`${uid}/${id}`).update(group);
+		} catch (error) {
+			throw error;
+		}
+	}
+
+	/**
+	 * Delete an NPC group
+	 *
+	 * @param {String} uid ID of active user
+	 * @param {String} id Group ID
+	 */
+	async deleteGroup(uid, id) {
+		try {
+			await NPC_GROUPS_REF.child(`${uid}/${id}`).remove();
+		} catch (error) {
+			throw error;
+		}
+	}
+}
diff --git a/src/store/index.js b/src/store/index.js
index 44c4ddb27..d72d1bee6 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -11,6 +11,7 @@ import api_items from "./modules/content/items.js";
 import api_conditions from "./modules/content/conditions.js";
 import campaigns from "./modules/userContent/campaigns.js";
 import npcs from "./modules/userContent/npcs.js";
+import npcGroups from "./modules/userContent/npcGroups.js";
 import items from "./modules/userContent/items.js";
 import spells from "./modules/userContent/spells.js";
 import reminders from "./modules/userContent/reminders.js";
@@ -44,6 +45,7 @@ export default function () {
 			api_items: api_items,
 			api_conditions: api_conditions,
 			npcs: npcs,
+			npcGroups: npcGroups,
 			items: items,
 			spells: spells,
 			reminders: reminders,
diff --git a/src/store/modules/userContent/npcGroups.js b/src/store/modules/userContent/npcGroups.js
new file mode 100644
index 000000000..5897e20b0
--- /dev/null
+++ b/src/store/modules/userContent/npcGroups.js
@@ -0,0 +1,151 @@
+import Vue from "vue";
+import { npcGroupServices } from "src/services/npc_groups";
+import _ from "lodash";
+
+const npc_group_state = () => ({
+	npc_group_services: null,
+	npc_groups: undefined,
+});
+
+const npc_group_getters = {
+	npc_groups: (state) => {
+		// Convert object to sorted array
+		return _.chain(state.npc_groups)
+			.filter((group, key) => {
+				group.key = key;
+				return group;
+			})
+			.orderBy("name", "asc")
+			.value();
+	},
+	npc_group_services: (state) => {
+		return state.npc_group_services;
+	},
+};
+
+const npc_group_actions = {
+	async get_npc_group_services({ getters, commit }) {
+		if (getters.npc_group_services === null || !Object.keys(getters.npc_group_services).length) {
+			commit("SET_NPC_GROUP_SERVICES", new npcGroupServices());
+		}
+		return getters.npc_group_services;
+	},
+
+	/**
+	 * Fetches all NPC groups for a user
+	 */
+	async get_npc_groups({ state, rootGetters, dispatch, commit }) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		let groups = state.npc_groups ? state.npc_groups : undefined;
+
+		if (!groups && uid) {
+			const services = await dispatch("get_npc_group_services");
+			try {
+				groups = await services.getGroups(uid);
+				commit("SET_NPC_GROUPS", groups || {});
+			} catch (error) {
+				throw error;
+			}
+		}
+		return groups;
+	},
+
+	/**
+	 * Add a new NPC group
+	 *
+	 * @param {Object} group { name }
+	 * @returns {String} the id of the newly added group
+	 */
+	async add_npc_group({ rootGetters, commit, dispatch }, group) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+
+		if (uid) {
+			const services = await dispatch("get_npc_group_services");
+			try {
+				const id = await services.addGroup(uid, group);
+				commit("SET_NPC_GROUP", { id, group });
+				return id;
+			} catch (error) {
+				throw error;
+			}
+		}
+	},
+
+	/**
+	 * Update an existing NPC group
+	 *
+	 * @param {String} id
+	 * @param {Object} group
+	 */
+	async edit_npc_group({ rootGetters, commit, dispatch }, { id, group }) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+
+		if (uid) {
+			const services = await dispatch("get_npc_group_services");
+			try {
+				await services.updateGroup(uid, id, group);
+				commit("SET_NPC_GROUP", { id, group });
+				return;
+			} catch (error) {
+				throw error;
+			}
+		}
+	},
+
+	/**
+	 * Delete an NPC group and remove it from all NPCs
+	 *
+	 * @param {String} id
+	 */
+	async delete_npc_group({ rootGetters, commit, dispatch }, id) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+
+		if (uid) {
+			const services = await dispatch("get_npc_group_services");
+			try {
+				await services.deleteGroup(uid, id);
+				commit("REMOVE_NPC_GROUP", id);
+
+				// Remove group from all NPCs that reference it
+				await dispatch("npcs/remove_group_from_all_npcs", id, { root: true });
+				return;
+			} catch (error) {
+				throw error;
+			}
+		}
+	},
+
+	clear_npc_group_store({ commit }) {
+		commit("CLEAR_STORE");
+	},
+};
+
+const npc_group_mutations = {
+	SET_NPC_GROUP_SERVICES(state, payload) {
+		Vue.set(state, "npc_group_services", payload);
+	},
+	SET_NPC_GROUPS(state, value) {
+		Vue.set(state, "npc_groups", value);
+	},
+	SET_NPC_GROUP(state, { id, group }) {
+		if (state.npc_groups) {
+			Vue.set(state.npc_groups, id, group);
+		} else {
+			Vue.set(state, "npc_groups", { [id]: group });
+		}
+	},
+	REMOVE_NPC_GROUP(state, id) {
+		Vue.delete(state.npc_groups, id);
+	},
+	CLEAR_STORE(state) {
+		Vue.set(state, "npc_groups", undefined);
+	},
+};
+
+export default {
+	namespaced: true,
+	state: npc_group_state,
+	getters: npc_group_getters,
+	actions: npc_group_actions,
+	mutations: npc_group_mutations,
+};
diff --git a/src/store/modules/userContent/npcs.js b/src/store/modules/userContent/npcs.js
index 4dfbcbf95..fca98f6f6 100644
--- a/src/store/modules/userContent/npcs.js
+++ b/src/store/modules/userContent/npcs.js
@@ -4,7 +4,7 @@ import _ from "lodash";
 
 // Converts a full npc to a search_npc
 const convert_npc = (npc) => {
-	const properties = ["name", "challenge_rating", "avatar", "storage_avatar", "type"];
+	const properties = ["name", "challenge_rating", "avatar", "storage_avatar", "type", "groups"];
 	const returnNpc = {};
 
 	for (const prop of properties) {
@@ -359,6 +359,45 @@ const npc_actions = {
 		}
 	},
 
+	/**
+	 * Updates the groups for an NPC
+	 *
+	 * @param {string} id NPC ID
+	 * @param {object} groups Groups object { groupId: true, ... }
+	 */
+	async update_npc_groups({ rootGetters, commit, dispatch }, { id, groups }) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		if (uid) {
+			const services = await dispatch("get_npc_services");
+			try {
+				await services.updateNpc(uid, id, "", { groups }, true);
+				commit("SET_NPC_PROP", { uid, id, property: "groups", value: groups, update_search: true });
+				return;
+			} catch (error) {
+				throw error;
+			}
+		}
+	},
+
+	/**
+	 * Removes a group from all NPCs that reference it
+	 * Called when a group is deleted
+	 *
+	 * @param {string} groupId
+	 */
+	async remove_group_from_all_npcs({ state, rootGetters, dispatch }, groupId) {
+		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
+		if (uid && state.npcs) {
+			const services = await dispatch("get_npc_services");
+			for (const [npcId, npc] of Object.entries(state.npcs)) {
+				if (npc.groups && npc.groups[groupId]) {
+					await services.updateNpc(uid, npcId, "/groups", { [groupId]: null }, true);
+					Vue.delete(state.npcs[npcId].groups, groupId);
+				}
+			}
+		}
+	},
+
 	cache_generated_npc({ commit }, npc) {
 		commit("CACHE_GENERATED_NPC", npc);
 	},
diff --git a/src/views/UserContent/Npcs/EditNpc.vue b/src/views/UserContent/Npcs/EditNpc.vue
index 9ab5add4d..0c01b73a4 100644
--- a/src/views/UserContent/Npcs/EditNpc.vue
+++ b/src/views/UserContent/Npcs/EditNpc.vue
@@ -41,6 +41,26 @@
 					<div class="form">
 						<BasicInfo v-model="npc" />
 
+						<!-- NPC GROUPS -->
+						<hk-card v-if="userId" header="Groups">
+							<div class="card-body">
+								<q-select
+									:dark="$store.getters.theme === 'dark'"
+									filled
+									square
+									multiple
+									use-chips
+									label="Assign to groups"
+									v-model="selectedGroups"
+									:options="groupOptions"
+									option-value="value"
+									option-label="label"
+									emit-value
+									map-options
+								/>
+							</div>
+						</hk-card>
+
 						<Senses v-model="npc" />
 
 						<AbilityScores v-model="npc" />
@@ -239,6 +259,10 @@ export default {
 		};
 	},
 	async mounted() {
+		if (this.userId) {
+			this.get_npc_groups();
+			this.get_campaigns();
+		}
 		if (this.npcId) {
 			this.loading = true;
 			await this.get_npc({ uid: this.userId, id: this.npcId }).then((npc) => {
@@ -255,6 +279,40 @@ export default {
 	computed: {
 		...mapGetters(["user", "tier", "overencumbered"]),
 		...mapGetters("npcs", ["npc_count"]),
+		...mapGetters("npcGroups", { npc_groups: "npc_groups" }),
+		...mapGetters("campaigns", { all_campaigns: "campaigns" }),
+		selectedGroups: {
+			get() {
+				return this.npc.groups ? Object.keys(this.npc.groups) : [];
+			},
+			set(val) {
+				const groups = {};
+				for (const id of val) {
+					groups[id] = true;
+				}
+				this.$set(this.npc, "groups", Object.keys(groups).length ? groups : undefined);
+			},
+		},
+		groupOptions() {
+			const options = [];
+			if (this.npc_groups) {
+				for (const group of this.npc_groups) {
+					options.push({
+						label: group.name ? group.name.capitalizeEach() : group.key,
+						value: group.key,
+					});
+				}
+			}
+			if (this.all_campaigns) {
+				for (const campaign of this.all_campaigns) {
+					options.push({
+						label: `[Campaign] ${campaign.name ? campaign.name.capitalizeEach() : campaign.key}`,
+						value: `campaign__${campaign.key}`,
+					});
+				}
+			}
+			return options;
+		},
 	},
 	watch: {
 		npc: {
@@ -275,6 +333,8 @@ export default {
 		...mapActions(["setDrawer"]),
 		...mapActions("api_monsters", ["fetch_monsters", "fetch_monster"]),
 		...mapActions("npcs", ["add_npc", "edit_npc", "get_npc"]),
+		...mapActions("npcGroups", ["get_npc_groups"]),
+		...mapActions("campaigns", ["get_campaigns"]),
 		isOwner() {
 			return this.$route.name !== "Edit Companion";
 		},
diff --git a/src/views/UserContent/Npcs/Npcs.vue b/src/views/UserContent/Npcs/Npcs.vue
index 349cfb5ea..edc2ddfb6 100644
--- a/src/views/UserContent/Npcs/Npcs.vue
+++ b/src/views/UserContent/Npcs/Npcs.vue
@@ -10,6 +10,9 @@
 					>
 						<span>Export</span>
 					</ExportUserContent>
+					<button class="btn btn-sm bg-neutral-5 mr-2" @click="group_dialog = true">
+						Groups
+					</button>
 					<button
 						v-if="content_count.npcs >= tier.benefits.npcs && ai.total > 0"
 						class="btn btn-sm bg-neutral-5 mr-2"
@@ -31,21 +34,44 @@
 			<div class="card-body" v-if="!loading_npcs">
 				<p class="neutral-2">These are your custom Non-Player Characters and monsters.</p>
 				<template v-if="npcs.length">
-					<q-input
-						:dark="$store.getters.theme !== 'light'"
-						v-model="search"
-						borderless
-						filled
-						square
-						debounce="300"
-						clearable
-						placeholder="Search NPCs"
-					>
-						<q-icon slot="prepend" name="search" />
-					</q-input>
+					<div class="row q-col-gutter-sm mb-1">
+						<div class="col">
+							<q-input
+								:dark="$store.getters.theme !== 'light'"
+								v-model="search"
+								borderless
+								filled
+								square
+								dense
+								debounce="300"
+								clearable
+								placeholder="Search NPCs"
+							>
+								<q-icon slot="prepend" name="search" />
+							</q-input>
+						</div>
+						<div class="col" v-if="groupFilterOptions.length">
+							<q-select
+								:dark="$store.getters.theme !== 'light'"
+								v-model="groupFilter"
+								:options="groupFilterOptions"
+								multiple
+								filled
+								square
+								dense
+								clearable
+								placeholder="Filter by group"
+								option-value="value"
+								option-label="label"
+								emit-value
+								map-options
+								use-chips
+							/>
+						</div>
+					</div>
 
 					<q-table
-						:data="npcs"
+						:data="filteredNpcs"
 						:visible-columns="visibleColumns"
 						:columns="columns"
 						row-key="key"
@@ -74,6 +100,21 @@
 									<template v-if="col.name === 'avatar'">
 										<i aria-hidden="true" v-if="!avatar(props.row)" class="hki-monster" />
 									</template>
+									<template v-else-if="col.name === 'groups'">
+										<template v-if="props.row.groups">
+											<q-chip
+												v-for="(_, groupId) in props.row.groups"
+												:key="groupId"
+												dense
+												size="sm"
+												color="neutral-4"
+												text-color="white"
+												class="mr-1"
+											>
+												{{ groupNameMap[groupId] || groupId }}
+											</q-chip>
+										</template>
+									</template>
 									<template v-else-if="col.name !== 'actions'">
 										<router-link v-if="col.name === 'name'" :to="`${$route.path}/${props.key}`">
 											{{ col.value }}
@@ -143,6 +184,11 @@
 			</hk-card>
 		</q-dialog>
 
+		<!-- Groups dialog -->
+		<q-dialog v-model="group_dialog">
+			<NpcGroupManager />
+		</q-dialog>
+
 		<!-- generate dialog-->
 		<q-dialog v-model="generate_dialog">
 			<hk-card class="npc-dialog" :persistent="generating">
@@ -180,6 +226,7 @@ import ImportUserContent from "src/components/userContent/ImportUserContent.vue"
 import ContentHeader from "src/components/userContent/ContentHeader.vue";
 import ExportUserContent from "src/components/userContent/ExportUserContent.vue";
 import GenerateMonster from "src/components/npcs/GenerateMonster.vue";
+import NpcGroupManager from "src/components/npcs/NpcGroupManager.vue";
 
 export default {
 	name: "Npcs",
@@ -189,15 +236,18 @@ export default {
 		ContentHeader,
 		ExportUserContent,
 		GenerateMonster,
+		NpcGroupManager,
 	},
 	data() {
 		return {
 			userId: this.$store.getters.user.uid,
 			import_dialog: false,
 			generate_dialog: false,
+			group_dialog: false,
 			loading_npcs: true,
 			show_warning: true,
 			search: "",
+			groupFilter: [],
 			card_width: 0,
 			overwrite: undefined,
 			generating: false,
@@ -225,6 +275,12 @@ export default {
 					align: "left",
 					sortable: true,
 				},
+				{
+					name: "groups",
+					label: "Groups",
+					field: "groups",
+					align: "left",
+				},
 				{
 					name: "challenge_rating",
 					label: "CR",
@@ -247,19 +303,68 @@ export default {
 		...mapGetters("npcs", ["npcs"]),
 		...mapGetters("players", ["players"]),
 		...mapGetters("campaigns", ["campaigns"]),
+		...mapGetters("npcGroups", { npc_groups: "npc_groups" }),
 		visibleColumns() {
-			return this.card_width > 600
-				? ["avatar", "name", "type", "challenge_rating", "actions"]
-				: this.card_width > 450
-					? ["avatar", "name", "type", "actions"]
-					: ["avatar", "name", "actions"];
+			return this.card_width > 800
+				? ["avatar", "name", "groups", "type", "challenge_rating", "actions"]
+				: this.card_width > 600
+					? ["avatar", "name", "type", "challenge_rating", "actions"]
+					: this.card_width > 450
+						? ["avatar", "name", "type", "actions"]
+						: ["avatar", "name", "actions"];
 		},
 		npcIds() {
 			return this.npcs.map((npc) => npc.key);
 		},
+		groupFilterOptions() {
+			const options = [];
+			if (this.npc_groups) {
+				for (const group of this.npc_groups) {
+					options.push({
+						label: group.name ? group.name.capitalizeEach() : group.key,
+						value: group.key,
+					});
+				}
+			}
+			if (this.campaigns) {
+				for (const campaign of this.campaigns) {
+					options.push({
+						label: `[Campaign] ${campaign.name ? campaign.name.capitalizeEach() : campaign.key}`,
+						value: `campaign__${campaign.key}`,
+					});
+				}
+			}
+			return options;
+		},
+		groupNameMap() {
+			const map = {};
+			if (this.npc_groups) {
+				for (const group of this.npc_groups) {
+					map[group.key] = group.name ? group.name.capitalizeEach() : group.key;
+				}
+			}
+			if (this.campaigns) {
+				for (const campaign of this.campaigns) {
+					map[`campaign__${campaign.key}`] = campaign.name
+						? campaign.name.capitalizeEach()
+						: campaign.key;
+				}
+			}
+			return map;
+		},
+		filteredNpcs() {
+			if (!this.groupFilter || !this.groupFilter.length) {
+				return this.npcs;
+			}
+			return this.npcs.filter((npc) => {
+				if (!npc.groups) return false;
+				return this.groupFilter.some((groupId) => npc.groups[groupId]);
+			});
+		},
 	},
 	async mounted() {
 		await this.get_npcs();
+		this.get_npc_groups();
 		this.update_npc_count();
 
 		this.loading_npcs = false;
@@ -274,6 +379,7 @@ export default {
 			"add_npc",
 			"update_npc_count",
 		]),
+		...mapActions("npcGroups", ["get_npc_groups"]),
 		...mapActions("spells", ["get_spell"]),
 		cr(val) {
 			return val == 0.125 ? "1/8" : val == 0.25 ? "1/4" : val == 0.5 ? "1/2" : val;

From f65cab919d40945ef20cdf51b405b9327de8ad89 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Wed, 4 Mar 2026 11:46:39 +0100
Subject: [PATCH 2/6] Exclude groups field from NPC export and import

Groups are user-specific and should not be transferred between accounts.
Strip groups during export to keep JSON clean, and during import to
avoid AJV schema validation errors.
---
 src/components/userContent/ExportUserContent.vue | 1 +
 src/components/userContent/ImportUserContent.vue | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/userContent/ExportUserContent.vue b/src/components/userContent/ExportUserContent.vue
index 84a2ad8ae..3cb012893 100644
--- a/src/components/userContent/ExportUserContent.vue
+++ b/src/components/userContent/ExportUserContent.vue
@@ -241,6 +241,7 @@ export default {
 
 		addNpcToExport(npc_id, npc) {
 			delete npc.player_id;
+			delete npc.groups;
 			npc.harmless_key = npc_id;
 
 			this.exportData.npcs[npc_id] = npc;
diff --git a/src/components/userContent/ImportUserContent.vue b/src/components/userContent/ImportUserContent.vue
index 0f94b9666..0aab8013a 100644
--- a/src/components/userContent/ImportUserContent.vue
+++ b/src/components/userContent/ImportUserContent.vue
@@ -596,6 +596,7 @@ export default {
 			 */
 
 			this.removeTimestamps(npc);
+			delete npc.groups;
 
 			this.versatileToOptions(npc);
 			this.renameNpcProps(npc);

From e661e62e2b2eb190e0c3309671c8e6e5a0ff34dc Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Wed, 4 Mar 2026 12:00:02 +0100
Subject: [PATCH 3/6] Improve NPC list UI: add group filter label and reorder
 header buttons

---
 src/views/UserContent/Npcs/Npcs.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/views/UserContent/Npcs/Npcs.vue b/src/views/UserContent/Npcs/Npcs.vue
index edc2ddfb6..63dbdc711 100644
--- a/src/views/UserContent/Npcs/Npcs.vue
+++ b/src/views/UserContent/Npcs/Npcs.vue
@@ -3,6 +3,9 @@
 		<hk-card>
 			<ContentHeader type="npcs">
 				<template #actions-left>
+					<button class="btn btn-sm bg-neutral-5 mr-2" @click="group_dialog = true">
+						Groups
+					</button>
 					<ExportUserContent
 						class="btn-sm bg-neutral-5 mr-2"
 						content-type="npc"
@@ -10,9 +13,6 @@
 					>
 						<span>Export</span>
 					</ExportUserContent>
-					<button class="btn btn-sm bg-neutral-5 mr-2" @click="group_dialog = true">
-						Groups
-					</button>
 					<button
 						v-if="content_count.npcs >= tier.benefits.npcs && ai.total > 0"
 						class="btn btn-sm bg-neutral-5 mr-2"
@@ -60,6 +60,7 @@
 								square
 								dense
 								clearable
+								label="Filter by group"
 								placeholder="Filter by group"
 								option-value="value"
 								option-label="label"

From 7f76894e3f203276e2db580164c3a29b01a0e224 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Wed, 4 Mar 2026 12:15:51 +0100
Subject: [PATCH 4/6] Add campaign groups to NPC group manager and fetch
 campaigns on NPC page load

---
 src/components/npcs/NpcGroupManager.vue | 32 +++++++++++++++++++++++--
 src/views/UserContent/Npcs/Npcs.vue     |  2 ++
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/components/npcs/NpcGroupManager.vue b/src/components/npcs/NpcGroupManager.vue
index 46d78d60c..07a030185 100644
--- a/src/components/npcs/NpcGroupManager.vue
+++ b/src/components/npcs/NpcGroupManager.vue
@@ -13,8 +13,8 @@
 		<div class="card-body">
 			<!-- GROUP DETAIL VIEW -->
 			<template v-if="selectedGroup">
-				<!-- Rename -->
-				<div class="row q-col-gutter-sm mb-3">
+				<!-- Rename (only for custom groups, not campaigns) -->
+				<div v-if="!selectedGroup.isCampaign" class="row q-col-gutter-sm mb-3">
 					<div class="col">
 						<q-input
 							:dark="$store.getters.theme === 'dark'"
@@ -115,6 +115,25 @@
 					</div>
 				</div>
 				<p v-else class="neutral-3">No groups created yet.</p>
+
+				<!-- Campaign groups -->
+				<template v-if="campaignGroups.length">
+					<h3 class="mt-3 mb-2">Campaigns</h3>
+					<div class="group-list">
+						<div
+							v-for="group in campaignGroups"
+							:key="group.key"
+							class="group-item d-flex justify-content-between items-center"
+						>
+							<a @click="selectGroup(group)" class="group-name truncate">
+								{{ group.name ? group.name.capitalizeEach() : group.key }}
+							</a>
+							<a class="btn btn-sm bg-neutral-5" @click="selectGroup(group)">
+								<i aria-hidden="true" class="fas fa-pencil" />
+							</a>
+						</div>
+					</div>
+				</template>
 			</template>
 		</div>
 	</hk-card>
@@ -135,6 +154,15 @@ export default {
 	computed: {
 		...mapGetters("npcGroups", ["npc_groups"]),
 		...mapGetters("npcs", ["npcs"]),
+		...mapGetters("campaigns", ["campaigns"]),
+		campaignGroups() {
+			if (!this.campaigns) return [];
+			return this.campaigns.map((campaign) => ({
+				key: `campaign__${campaign.key}`,
+				name: campaign.name || campaign.key,
+				isCampaign: true,
+			}));
+		},
 		npcOptions() {
 			return this.npcs.map((npc) => ({
 				label: npc.name ? npc.name.capitalizeEach() : npc.key,
diff --git a/src/views/UserContent/Npcs/Npcs.vue b/src/views/UserContent/Npcs/Npcs.vue
index 63dbdc711..b8055527f 100644
--- a/src/views/UserContent/Npcs/Npcs.vue
+++ b/src/views/UserContent/Npcs/Npcs.vue
@@ -366,6 +366,7 @@ export default {
 	async mounted() {
 		await this.get_npcs();
 		this.get_npc_groups();
+		this.get_campaigns();
 		this.update_npc_count();
 
 		this.loading_npcs = false;
@@ -381,6 +382,7 @@ export default {
 			"update_npc_count",
 		]),
 		...mapActions("npcGroups", ["get_npc_groups"]),
+		...mapActions("campaigns", ["get_campaigns"]),
 		...mapActions("spells", ["get_spell"]),
 		cr(val) {
 			return val == 0.125 ? "1/8" : val == 0.25 ? "1/4" : val == 0.5 ? "1/2" : val;

From c84e84c49fb4a2fdf2516410c33c487fd9a33503 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Wed, 4 Mar 2026 13:55:54 +0100
Subject: [PATCH 5/6] Add campaign-only NPC filter to encounters and extract
 campaignGroupKey helper
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add toggle to filter custom NPCs by campaign in the encounter entity picker.
Extract shared campaignGroupKey() utility to replace hardcoded 'campaign__'
prefix across 4 files. Fix router-link using wrong key property (col.key →
props.key).
---
 src/components/encounters/Entities.vue  | 47 +++++++++++++++++--------
 src/components/npcs/NpcGroupManager.vue |  3 +-
 src/utils/generalFunctions.js           |  4 +++
 src/views/UserContent/Npcs/EditNpc.vue  |  4 +--
 src/views/UserContent/Npcs/Npcs.vue     |  5 +--
 5 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/src/components/encounters/Entities.vue b/src/components/encounters/Entities.vue
index 53ff30c4c..77513f900 100644
--- a/src/components/encounters/Entities.vue
+++ b/src/components/encounters/Entities.vue
@@ -73,20 +73,30 @@
 
 		<!-- CUSTOM NPCs -->
 		<template v-if="monster_resource === 'custom'">
-			<q-input
-				:dark="$store.getters.theme !== 'light'"
-				v-model="searchNpc"
-				borderless
-				filled
-				square
-				debounce="300"
-				clearable
-				placeholder="Search custom NPCs"
-			>
-				<q-icon slot="prepend" name="search" />
-			</q-input>
+			<div class="d-flex items-center mb-1">
+				<q-input
+					:dark="$store.getters.theme !== 'light'"
+					v-model="searchNpc"
+					borderless
+					filled
+					square
+					debounce="300"
+					clearable
+					placeholder="Search custom NPCs"
+					class="col"
+				>
+					<q-icon slot="prepend" name="search" />
+				</q-input>
+				<q-toggle
+					v-if="campaignId"
+					:dark="$store.getters.theme !== 'light'"
+					v-model="campaignOnly"
+					label="Campaign only"
+					class="ml-2"
+				/>
+			</div>
 			<q-table
-				:data="npcs"
+				:data="filteredCustomNpcs"
 				:visible-columns="visibleColumns"
 				:columns="columns"
 				row-key="key"
@@ -107,7 +117,7 @@
 							:props="props"
 							:auto-width="col.name !== 'name'"
 						>
-							<router-link v-if="col.name === 'name'" :to="`/content/npcs/${col.key}`">
+							<router-link v-if="col.name === 'name'" :to="`/content/npcs/${props.key}`">
 								{{ col.value }}
 							</router-link>
 							<span v-else-if="col.name === 'environment'">
@@ -457,7 +467,7 @@ import { mapActions, mapGetters } from "vuex";
 
 import { dice } from "src/mixins/dice.js";
 import { general } from "src/mixins/general.js";
-import { uuid } from "src/utils/generalFunctions";
+import { uuid, campaignGroupKey } from "src/utils/generalFunctions";
 import ViewMonster from "src/components/compendium/Monster.vue";
 import TutorialPopover from "src/components/demo/TutorialPopover.vue";
 
@@ -499,6 +509,7 @@ export default {
 			player: {},
 			drawer: this.$store.getters.getDrawer,
 			to_add: {},
+			campaignOnly: false,
 			filter_dialog: false,
 			filter: {},
 			typeFilter: [],
@@ -599,6 +610,12 @@ export default {
 	computed: {
 		...mapGetters(["content_count"]),
 		...mapGetters("npcs", ["npcs", "npc_count"]),
+		filteredCustomNpcs() {
+			const npcs = this.npcs;
+			if (!this.campaignOnly || !this.campaignId) return npcs;
+			const groupKey = campaignGroupKey(this.campaignId);
+			return npcs.filter((npc) => npc.groups && npc.groups[groupKey]);
+		},
 		...mapGetters("tutorial", ["follow_tutorial", "get_step"]),
 		monster_resource: {
 			get() {
diff --git a/src/components/npcs/NpcGroupManager.vue b/src/components/npcs/NpcGroupManager.vue
index 07a030185..1648e8b2d 100644
--- a/src/components/npcs/NpcGroupManager.vue
+++ b/src/components/npcs/NpcGroupManager.vue
@@ -141,6 +141,7 @@
 
 <script>
 import { mapActions, mapGetters } from "vuex";
+import { campaignGroupKey } from "src/utils/generalFunctions";
 
 export default {
 	name: "NpcGroupManager",
@@ -158,7 +159,7 @@ export default {
 		campaignGroups() {
 			if (!this.campaigns) return [];
 			return this.campaigns.map((campaign) => ({
-				key: `campaign__${campaign.key}`,
+				key: campaignGroupKey(campaign.key),
 				name: campaign.name || campaign.key,
 				isCampaign: true,
 			}));
diff --git a/src/utils/generalFunctions.js b/src/utils/generalFunctions.js
index 2e4527d47..734224d6f 100644
--- a/src/utils/generalFunctions.js
+++ b/src/utils/generalFunctions.js
@@ -452,4 +452,8 @@ export async function downloadMonsterFile(element, filetype = "png", options = {
 		pdf.save(`${filename}.pdf`);
 		document.body.removeChild(clone);
 	}
+}
+
+export function campaignGroupKey(campaignId) {
+	return `campaign__${campaignId}`;
 }
\ No newline at end of file
diff --git a/src/views/UserContent/Npcs/EditNpc.vue b/src/views/UserContent/Npcs/EditNpc.vue
index 0c01b73a4..f6a6a3110 100644
--- a/src/views/UserContent/Npcs/EditNpc.vue
+++ b/src/views/UserContent/Npcs/EditNpc.vue
@@ -217,7 +217,7 @@ import Defenses from "src/components/npcs/Defenses";
 import SpellCasting from "src/components/npcs/SpellCasting";
 import Actions from "src/components/npcs/Actions";
 import CopyContent from "src/components/CopyContent";
-import { downloadJSON } from "src/utils/generalFunctions";
+import { downloadJSON, campaignGroupKey } from "src/utils/generalFunctions";
 import SignUp from "src/components/SignUp.vue";
 import GenerateMonster from "src/components/npcs/GenerateMonster.vue";
 
@@ -307,7 +307,7 @@ export default {
 				for (const campaign of this.all_campaigns) {
 					options.push({
 						label: `[Campaign] ${campaign.name ? campaign.name.capitalizeEach() : campaign.key}`,
-						value: `campaign__${campaign.key}`,
+						value: campaignGroupKey(campaign.key),
 					});
 				}
 			}
diff --git a/src/views/UserContent/Npcs/Npcs.vue b/src/views/UserContent/Npcs/Npcs.vue
index b8055527f..f97207fec 100644
--- a/src/views/UserContent/Npcs/Npcs.vue
+++ b/src/views/UserContent/Npcs/Npcs.vue
@@ -222,6 +222,7 @@
 
 <script>
 import { mapActions, mapGetters } from "vuex";
+import { campaignGroupKey } from "src/utils/generalFunctions";
 import { monsterMixin } from "src/mixins/monster";
 import ImportUserContent from "src/components/userContent/ImportUserContent.vue";
 import ContentHeader from "src/components/userContent/ContentHeader.vue";
@@ -331,7 +332,7 @@ export default {
 				for (const campaign of this.campaigns) {
 					options.push({
 						label: `[Campaign] ${campaign.name ? campaign.name.capitalizeEach() : campaign.key}`,
-						value: `campaign__${campaign.key}`,
+						value: campaignGroupKey(campaign.key),
 					});
 				}
 			}
@@ -346,7 +347,7 @@ export default {
 			}
 			if (this.campaigns) {
 				for (const campaign of this.campaigns) {
-					map[`campaign__${campaign.key}`] = campaign.name
+					map[campaignGroupKey(campaign.key)] = campaign.name
 						? campaign.name.capitalizeEach()
 						: campaign.key;
 				}

From 07727447495277a874556ae6f90acf4afd3a5f18 Mon Sep 17 00:00:00 2001
From: Harm Manders <harmmanders@gmail.com>
Date: Wed, 4 Mar 2026 14:08:33 +0100
Subject: [PATCH 6/6] Fix SonarCloud issues: accessibility, naming, and code
 smells

- Add aria-labels to icon-only anchors in NpcGroupManager
- Rename npcGroupServices to PascalCase (NpcGroupServices)
- Remove redundant try/catch blocks that only rethrow
- Replace nested ternary with if/return in visibleColumns
---
 src/components/npcs/NpcGroupManager.vue    | 10 ++---
 src/services/npc_groups.js                 | 36 +++++-------------
 src/store/modules/userContent/npcGroups.js | 44 +++++++---------------
 src/store/modules/userContent/npcs.js      |  9 +----
 src/views/UserContent/Npcs/Npcs.vue        | 17 +++++----
 5 files changed, 40 insertions(+), 76 deletions(-)

diff --git a/src/components/npcs/NpcGroupManager.vue b/src/components/npcs/NpcGroupManager.vue
index 1648e8b2d..4546d77cd 100644
--- a/src/components/npcs/NpcGroupManager.vue
+++ b/src/components/npcs/NpcGroupManager.vue
@@ -2,7 +2,7 @@
 	<hk-card class="npc-group-manager">
 		<div slot="header" class="card-header">
 			<template v-if="selectedGroup">
-				<a @click="selectedGroup = null" class="btn btn-sm bg-neutral-5 mr-2">
+				<a @click="selectedGroup = null" class="btn btn-sm bg-neutral-5 mr-2" aria-label="Back to groups">
 					<i aria-hidden="true" class="fas fa-arrow-left" />
 				</a>
 				<span>{{ selectedGroup.name ? selectedGroup.name.capitalizeEach() : "" }}</span>
@@ -64,7 +64,7 @@
 						class="member d-flex justify-content-between items-center"
 					>
 						<span>{{ npc.name ? npc.name.capitalizeEach() : npc.key }}</span>
-						<a class="btn btn-sm bg-neutral-5" @click="removeNpcFromGroup(npc.key)">
+						<a class="btn btn-sm bg-neutral-5" @click="removeNpcFromGroup(npc.key)" aria-label="Remove NPC from group">
 							<i aria-hidden="true" class="fas fa-times red" />
 						</a>
 					</div>
@@ -105,10 +105,10 @@
 							{{ group.name ? group.name.capitalizeEach() : group.key }}
 						</a>
 						<div class="d-flex">
-							<a class="btn btn-sm bg-neutral-5 mr-1" @click="selectGroup(group)">
+							<a class="btn btn-sm bg-neutral-5 mr-1" @click="selectGroup(group)" aria-label="Edit group">
 								<i aria-hidden="true" class="fas fa-pencil" />
 							</a>
-							<a class="btn btn-sm bg-neutral-5" @click="confirmDeleteGroup(group)">
+							<a class="btn btn-sm bg-neutral-5" @click="confirmDeleteGroup(group)" aria-label="Delete group">
 								<i aria-hidden="true" class="fas fa-trash-alt" />
 							</a>
 						</div>
@@ -128,7 +128,7 @@
 							<a @click="selectGroup(group)" class="group-name truncate">
 								{{ group.name ? group.name.capitalizeEach() : group.key }}
 							</a>
-							<a class="btn btn-sm bg-neutral-5" @click="selectGroup(group)">
+							<a class="btn btn-sm bg-neutral-5" @click="selectGroup(group)" aria-label="Edit campaign group">
 								<i aria-hidden="true" class="fas fa-pencil" />
 							</a>
 						</div>
diff --git a/src/services/npc_groups.js b/src/services/npc_groups.js
index d5f5e29d3..6c5ae51ed 100644
--- a/src/services/npc_groups.js
+++ b/src/services/npc_groups.js
@@ -6,7 +6,7 @@ const NPC_GROUPS_REF = db.ref("npc_groups");
  * NPC Groups Firebase Service
  * CRUD interface for NPC group management
  */
-export class npcGroupServices {
+export class NpcGroupServices {
 	/**
 	 * Get all NPC groups for a user
 	 *
@@ -14,12 +14,8 @@ export class npcGroupServices {
 	 * @returns All NPC groups for the user
 	 */
 	async getGroups(uid) {
-		try {
-			const groups = await NPC_GROUPS_REF.child(uid).once("value");
-			return groups.val();
-		} catch (error) {
-			throw error;
-		}
+		const groups = await NPC_GROUPS_REF.child(uid).once("value");
+		return groups.val();
 	}
 
 	/**
@@ -30,15 +26,11 @@ export class npcGroupServices {
 	 * @returns Key of the newly added group
 	 */
 	async addGroup(uid, group) {
-		try {
-			group.name = group.name.toLowerCase();
-			group.created = firebase.database.ServerValue.TIMESTAMP;
+		group.name = group.name.toLowerCase();
+		group.created = firebase.database.ServerValue.TIMESTAMP;
 
-			const newGroup = await NPC_GROUPS_REF.child(uid).push(group);
-			return newGroup.key;
-		} catch (error) {
-			throw error;
-		}
+		const newGroup = await NPC_GROUPS_REF.child(uid).push(group);
+		return newGroup.key;
 	}
 
 	/**
@@ -49,12 +41,8 @@ export class npcGroupServices {
 	 * @param {Object} group Updated group object
 	 */
 	async updateGroup(uid, id, group) {
-		try {
-			group.name = group.name.toLowerCase();
-			await NPC_GROUPS_REF.child(`${uid}/${id}`).update(group);
-		} catch (error) {
-			throw error;
-		}
+		group.name = group.name.toLowerCase();
+		await NPC_GROUPS_REF.child(`${uid}/${id}`).update(group);
 	}
 
 	/**
@@ -64,10 +52,6 @@ export class npcGroupServices {
 	 * @param {String} id Group ID
 	 */
 	async deleteGroup(uid, id) {
-		try {
-			await NPC_GROUPS_REF.child(`${uid}/${id}`).remove();
-		} catch (error) {
-			throw error;
-		}
+		await NPC_GROUPS_REF.child(`${uid}/${id}`).remove();
 	}
 }
diff --git a/src/store/modules/userContent/npcGroups.js b/src/store/modules/userContent/npcGroups.js
index 5897e20b0..1a5a62398 100644
--- a/src/store/modules/userContent/npcGroups.js
+++ b/src/store/modules/userContent/npcGroups.js
@@ -1,5 +1,5 @@
 import Vue from "vue";
-import { npcGroupServices } from "src/services/npc_groups";
+import { NpcGroupServices } from "src/services/npc_groups";
 import _ from "lodash";
 
 const npc_group_state = () => ({
@@ -26,7 +26,7 @@ const npc_group_getters = {
 const npc_group_actions = {
 	async get_npc_group_services({ getters, commit }) {
 		if (getters.npc_group_services === null || !Object.keys(getters.npc_group_services).length) {
-			commit("SET_NPC_GROUP_SERVICES", new npcGroupServices());
+			commit("SET_NPC_GROUP_SERVICES", new NpcGroupServices());
 		}
 		return getters.npc_group_services;
 	},
@@ -40,12 +40,8 @@ const npc_group_actions = {
 
 		if (!groups && uid) {
 			const services = await dispatch("get_npc_group_services");
-			try {
-				groups = await services.getGroups(uid);
-				commit("SET_NPC_GROUPS", groups || {});
-			} catch (error) {
-				throw error;
-			}
+			groups = await services.getGroups(uid);
+			commit("SET_NPC_GROUPS", groups || {});
 		}
 		return groups;
 	},
@@ -61,13 +57,9 @@ const npc_group_actions = {
 
 		if (uid) {
 			const services = await dispatch("get_npc_group_services");
-			try {
-				const id = await services.addGroup(uid, group);
-				commit("SET_NPC_GROUP", { id, group });
-				return id;
-			} catch (error) {
-				throw error;
-			}
+			const id = await services.addGroup(uid, group);
+			commit("SET_NPC_GROUP", { id, group });
+			return id;
 		}
 	},
 
@@ -82,13 +74,8 @@ const npc_group_actions = {
 
 		if (uid) {
 			const services = await dispatch("get_npc_group_services");
-			try {
-				await services.updateGroup(uid, id, group);
-				commit("SET_NPC_GROUP", { id, group });
-				return;
-			} catch (error) {
-				throw error;
-			}
+			await services.updateGroup(uid, id, group);
+			commit("SET_NPC_GROUP", { id, group });
 		}
 	},
 
@@ -102,16 +89,11 @@ const npc_group_actions = {
 
 		if (uid) {
 			const services = await dispatch("get_npc_group_services");
-			try {
-				await services.deleteGroup(uid, id);
-				commit("REMOVE_NPC_GROUP", id);
+			await services.deleteGroup(uid, id);
+			commit("REMOVE_NPC_GROUP", id);
 
-				// Remove group from all NPCs that reference it
-				await dispatch("npcs/remove_group_from_all_npcs", id, { root: true });
-				return;
-			} catch (error) {
-				throw error;
-			}
+			// Remove group from all NPCs that reference it
+			await dispatch("npcs/remove_group_from_all_npcs", id, { root: true });
 		}
 	},
 
diff --git a/src/store/modules/userContent/npcs.js b/src/store/modules/userContent/npcs.js
index fca98f6f6..6422e36f1 100644
--- a/src/store/modules/userContent/npcs.js
+++ b/src/store/modules/userContent/npcs.js
@@ -369,13 +369,8 @@ const npc_actions = {
 		const uid = rootGetters.user ? rootGetters.user.uid : undefined;
 		if (uid) {
 			const services = await dispatch("get_npc_services");
-			try {
-				await services.updateNpc(uid, id, "", { groups }, true);
-				commit("SET_NPC_PROP", { uid, id, property: "groups", value: groups, update_search: true });
-				return;
-			} catch (error) {
-				throw error;
-			}
+			await services.updateNpc(uid, id, "", { groups }, true);
+			commit("SET_NPC_PROP", { uid, id, property: "groups", value: groups, update_search: true });
 		}
 	},
 
diff --git a/src/views/UserContent/Npcs/Npcs.vue b/src/views/UserContent/Npcs/Npcs.vue
index f97207fec..b54e29dab 100644
--- a/src/views/UserContent/Npcs/Npcs.vue
+++ b/src/views/UserContent/Npcs/Npcs.vue
@@ -307,13 +307,16 @@ export default {
 		...mapGetters("campaigns", ["campaigns"]),
 		...mapGetters("npcGroups", { npc_groups: "npc_groups" }),
 		visibleColumns() {
-			return this.card_width > 800
-				? ["avatar", "name", "groups", "type", "challenge_rating", "actions"]
-				: this.card_width > 600
-					? ["avatar", "name", "type", "challenge_rating", "actions"]
-					: this.card_width > 450
-						? ["avatar", "name", "type", "actions"]
-						: ["avatar", "name", "actions"];
+			if (this.card_width > 800) {
+				return ["avatar", "name", "groups", "type", "challenge_rating", "actions"];
+			}
+			if (this.card_width > 600) {
+				return ["avatar", "name", "type", "challenge_rating", "actions"];
+			}
+			if (this.card_width > 450) {
+				return ["avatar", "name", "type", "actions"];
+			}
+			return ["avatar", "name", "actions"];
 		},
 		npcIds() {
 			return this.npcs.map((npc) => npc.key);