feat: stable key for mods list (#4876)

Author: IMB11

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