From cfd2977c21d576ae9af7d429499c0d5d09901008 Mon Sep 17 00:00:00 2001
From: "Calum H." <contact@cal.engineer>
Date: Mon, 8 Dec 2025 18:50:55 +0000
Subject: [PATCH] feat: stable key for mods list (#4876)

---
 .../pages/hosting/manage/[id]/content/index.vue    | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/pages/hosting/manage/[id]/content/index.vue b/apps/frontend/src/pages/hosting/manage/[id]/content/index.vue
index bd69797d..bbcebd45 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/content/index.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/content/index.vue
@@ -127,7 +127,7 @@
 									width: '100%',
 								}"
 							>
-								<template v-for="mod in visibleItems.items" :key="mod.filename">
+								<template v-for="mod in visibleItems.items" :key="getStableModKey(mod)">
 									<div
 										class="relative mb-2 flex w-full items-center justify-between rounded-xl bg-bg-raised"
 										:class="mod.disabled ? 'bg-table-alternateRow text-secondary' : ''"
@@ -245,7 +245,7 @@
 											</div>
 
 											<input
-												:id="`toggle-${mod.filename}`"
+												:id="`toggle-${getStableModKey(mod)}`"
 												:checked="!mod.disabled"
 												:disabled="mod.changing"
 												class="switch stylized-toggle"
@@ -595,6 +595,16 @@ function friendlyModName(mod: ContentItem) {
 	return cleanName
 }
 
+function getStableModKey(mod: ContentItem): string {
+	if (mod.project_id) {
+		return `project-${mod.project_id}`
+	}
+
+	// external file
+	const baseFilename = mod.filename.endsWith('.disabled') ? mod.filename.slice(0, -9) : mod.filename
+	return `file-${baseFilename}`
+}
+
 async function toggleMod(mod: ContentItem) {
 	mod.changing = true