From b69b1f0fb35a164d1ec6cde223278bb35ec4dd63 Mon Sep 17 00:00:00 2001
From: alexma233 <admin@alexma.top>
Date: Sun, 25 Jan 2026 11:19:04 +0800
Subject: [PATCH] fix(frontend): stop gallery upload crashing in settings

---
 .../pages/[type]/[id]/settings/gallery.vue    | 431 ++++++++++--------
 1 file changed, 229 insertions(+), 202 deletions(-)

diff --git a/apps/frontend/src/pages/[type]/[id]/settings/gallery.vue b/apps/frontend/src/pages/[type]/[id]/settings/gallery.vue
index b97b3b85b8..575a89d102 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/gallery.vue
@@ -32,7 +32,7 @@
 						:src="
 							previewImage
 								? previewImage
-								: project.gallery[editIndex] && project.gallery[editIndex].url
+								: project.gallery?.[editIndex]?.url
 									? project.gallery[editIndex].url
 									: 'https://cdn.modrinth.com/placeholder-banner.svg'
 						"
@@ -95,7 +95,7 @@
 					Unfeature image
 				</button>
 				<div class="button-group">
-					<button class="iconified-button" @click="$refs.modal_edit_item.hide()">
+					<button class="iconified-button" @click="modalEditItem?.hide()">
 						<XIcon aria-hidden="true" />
 						Cancel
 					</button>
@@ -177,14 +177,14 @@
 								<ContractIcon v-else aria-hidden="true" />
 							</button>
 							<button
-								v-if="project.gallery.length > 1"
+								v-if="(project?.gallery?.length ?? 0) > 1"
 								class="previous circle-button"
 								@click="previousImage()"
 							>
 								<LeftArrowIcon aria-hidden="true" />
 							</button>
 							<button
-								v-if="project.gallery.length > 1"
+								v-if="(project?.gallery?.length ?? 0) > 1"
 								class="next circle-button"
 								@click="nextImage()"
 							>
@@ -217,7 +217,7 @@
 			/>
 		</div>
 		<div class="items">
-			<div v-for="(item, index) in project.gallery" :key="index" class="card gallery-item">
+			<div v-for="(item, index) in project.gallery ?? []" :key="index" class="card gallery-item">
 				<a class="gallery-thumbnail" @click="expandImage(item, index)">
 					<img
 						:src="item.url ? item.url : 'https://cdn.modrinth.com/placeholder-banner.svg'"
@@ -246,11 +246,11 @@
 								() => {
 									resetEdit()
 									editIndex = index
-									editTitle = item.title
-									editDescription = item.description
+									editTitle = item.title ?? ''
+									editDescription = item.description ?? ''
 									editFeatured = item.featured
 									editOrder = item.ordering
-									$refs.modal_edit_item.show()
+									modalEditItem?.show()
 								}
 							"
 						>
@@ -262,7 +262,7 @@
 							@click="
 								() => {
 									deleteIndex = index
-									$refs.modal_confirm.show()
+									modalConfirm?.show()
 								}
 							"
 						>
@@ -276,7 +276,7 @@
 	</div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {
 	CalendarIcon,
 	ContractIcon,
@@ -303,13 +303,23 @@ import {
 	injectProjectPageContext,
 	NewModal as Modal,
 } from '@modrinth/ui'
+import { useEventListener } from '@vueuse/core'
 
 import { isPermission } from '~/utils/permissions.ts'
 
-const { projectV2: project, currentMember } = injectProjectPageContext()
+// Single DI injection
+const { addNotification } = injectNotificationManager()
+const { projectV2: project, currentMember, refreshProject } = injectProjectPageContext()
 
-const title = `${project.value.title} - Gallery`
-const description = `View ${project.value.gallery?.length ?? 0} images of ${project.value.title} on Modrinth.`
+// Template refs
+const modalEditItem = useTemplateRef('modal_edit_item')
+const modalConfirm = useTemplateRef('modal_confirm')
+
+// SEO
+const title = computed(() => `${project.value.title} - Gallery`)
+const description = computed(
+	() => `View ${project.value.gallery?.length ?? 0} images of ${project.value.title} on Modrinth.`,
+)
 
 useSeoMeta({
 	title,
@@ -317,206 +327,223 @@ useSeoMeta({
 	ogTitle: title,
 	ogDescription: description,
 })
-</script>
 
-<script>
-export default defineNuxtComponent({
-	setup() {
-		const { addNotification } = injectNotificationManager()
-		const { projectV2: project, refreshProject } = injectProjectPageContext()
+// Gallery item type matching actual v2 API response (LegacyGalleryItem in labrinth)
+// raw_url is optional in TS types but present in API response
+interface GalleryItem {
+	url: string
+	raw_url?: string
+	featured: boolean
+	title?: string
+	description?: string
+	created: string
+	ordering: number
+}
 
-		return {
-			addNotification,
-			project,
-			refreshProject,
+// Expanded image modal state
+const expandedGalleryItem = ref<GalleryItem | null>(null)
+const expandedGalleryIndex = ref(0)
+const zoomedIn = ref(false)
+
+// Delete state
+const deleteIndex = ref(-1)
+
+// Edit state
+const editIndex = ref(-1)
+const editTitle = ref('')
+const editDescription = ref('')
+const editFeatured = ref(false)
+const editOrder = ref<number | null>(null)
+const editFile = ref<File | null>(null)
+const previewImage = ref<string | null>(null)
+
+// UI state
+const shouldPreventActions = ref(false)
+
+// Constant for accepted file types
+const acceptFileTypes = 'image/png,image/jpeg,image/gif,image/webp,.png,.jpeg,.gif,.webp'
+
+// Keyboard navigation for expanded image modal
+useEventListener(document, 'keydown', (e) => {
+	if (expandedGalleryItem.value) {
+		e.preventDefault()
+		if (e.key === 'Escape') {
+			expandedGalleryItem.value = null
+		} else if (e.key === 'ArrowLeft') {
+			e.stopPropagation()
+			previousImage()
+		} else if (e.key === 'ArrowRight') {
+			e.stopPropagation()
+			nextImage()
 		}
-	},
-	data() {
-		return {
-			expandedGalleryItem: null,
-			expandedGalleryIndex: 0,
-			zoomedIn: false,
-
-			deleteIndex: -1,
-
-			editIndex: -1,
-			editTitle: '',
-			editDescription: '',
-			editFeatured: false,
-			editOrder: null,
-			editFile: null,
-			previewImage: null,
-			shouldPreventActions: false,
+	}
+})
+
+function nextImage() {
+	expandedGalleryIndex.value++
+	if (expandedGalleryIndex.value >= project.value.gallery!.length) {
+		expandedGalleryIndex.value = 0
+	}
+	expandedGalleryItem.value = project.value.gallery![expandedGalleryIndex.value] as GalleryItem
+}
+
+function previousImage() {
+	expandedGalleryIndex.value--
+	if (expandedGalleryIndex.value < 0) {
+		expandedGalleryIndex.value = project.value.gallery!.length - 1
+	}
+	expandedGalleryItem.value = project.value.gallery![expandedGalleryIndex.value] as GalleryItem
+}
+
+function expandImage(item: GalleryItem, index: number) {
+	expandedGalleryItem.value = item
+	expandedGalleryIndex.value = index
+	zoomedIn.value = false
+}
+
+function resetEdit() {
+	editIndex.value = -1
+	editTitle.value = ''
+	editDescription.value = ''
+	editFeatured.value = false
+	editOrder.value = null
+	editFile.value = null
+	previewImage.value = null
+}
+
+function handleFiles(files: File[]) {
+	resetEdit()
+	editFile.value = files[0]
+
+	showPreviewImage()
+	modalEditItem.value?.show()
+}
+
+function showPreviewImage() {
+	const reader = new FileReader()
+	if (editFile.value instanceof Blob) {
+		reader.readAsDataURL(editFile.value)
+		reader.onload = (event) => {
+			previewImage.value = (event.target?.result as string | null) ?? null
 		}
-	},
-	computed: {
-		acceptFileTypes() {
-			return 'image/png,image/jpeg,image/gif,image/webp,.png,.jpeg,.gif,.webp'
-		},
-	},
-	mounted() {
-		this._keyListener = function (e) {
-			if (this.expandedGalleryItem) {
-				e.preventDefault()
-				if (e.key === 'Escape') {
-					this.expandedGalleryItem = null
-				} else if (e.key === 'ArrowLeft') {
-					e.stopPropagation()
-					this.previousImage()
-				} else if (e.key === 'ArrowRight') {
-					e.stopPropagation()
-					this.nextImage()
-				}
-			}
+	}
+}
+
+async function createGalleryItem() {
+	shouldPreventActions.value = true
+	startLoading()
+
+	try {
+		if (!project.value?.id) {
+			throw new Error('Project not loaded')
+		}
+		if (!editFile.value) {
+			addNotification({
+				title: 'No image selected',
+				text: 'Please select an image to upload.',
+				type: 'error',
+			})
+			return
 		}
 
-		document.addEventListener('keydown', this._keyListener.bind(this))
-	},
-	methods: {
-		nextImage() {
-			this.expandedGalleryIndex++
-			if (this.expandedGalleryIndex >= this.project.gallery.length) {
-				this.expandedGalleryIndex = 0
-			}
-			this.expandedGalleryItem = this.project.gallery[this.expandedGalleryIndex]
-		},
-		previousImage() {
-			this.expandedGalleryIndex--
-			if (this.expandedGalleryIndex < 0) {
-				this.expandedGalleryIndex = this.project.gallery.length - 1
-			}
-			this.expandedGalleryItem = this.project.gallery[this.expandedGalleryIndex]
-		},
-		expandImage(item, index) {
-			this.expandedGalleryItem = item
-			this.expandedGalleryIndex = index
-			this.zoomedIn = false
-		},
-		resetEdit() {
-			this.editIndex = -1
-			this.editTitle = ''
-			this.editDescription = ''
-			this.editFeatured = false
-			this.editOrder = null
-			this.editFile = null
-			this.previewImage = null
-		},
-		handleFiles(files) {
-			this.resetEdit()
-			this.editFile = files[0]
-
-			this.showPreviewImage()
-			this.$refs.modal_edit_item.show()
-		},
-		showPreviewImage() {
-			const reader = new FileReader()
-			if (this.editFile instanceof Blob) {
-				reader.readAsDataURL(this.editFile)
-				reader.onload = (event) => {
-					this.previewImage = event.target.result
-				}
-			}
-		},
-		async createGalleryItem() {
-			this.shouldPreventActions = true
-			startLoading()
-
-			try {
-				let url = `project/${this.project.id}/gallery?ext=${
-					this.editFile
-						? this.editFile.type.split('/')[this.editFile.type.split('/').length - 1]
-						: null
-				}&featured=${this.editFeatured}`
-
-				if (this.editTitle) {
-					url += `&title=${encodeURIComponent(this.editTitle)}`
-				}
-				if (this.editDescription) {
-					url += `&description=${encodeURIComponent(this.editDescription)}`
-				}
-				if (this.editOrder) {
-					url += `&ordering=${this.editOrder}`
-				}
+		let url = `project/${project.value.id}/gallery?ext=${
+			editFile.value
+				? editFile.value.type.split('/')[editFile.value.type.split('/').length - 1]
+				: null
+		}&featured=${editFeatured.value}`
 
-				await useBaseFetch(url, {
-					method: 'POST',
-					body: this.editFile,
-				})
-				await this.refreshProject()
-
-				this.$refs.modal_edit_item.hide()
-			} catch (err) {
-				this.addNotification({
-					title: 'An error occurred',
-					text: err.data ? err.data.description : err,
-					type: 'error',
-				})
-			}
+		if (editTitle.value) {
+			url += `&title=${encodeURIComponent(editTitle.value)}`
+		}
+		if (editDescription.value) {
+			url += `&description=${encodeURIComponent(editDescription.value)}`
+		}
+		if (editOrder.value) {
+			url += `&ordering=${editOrder.value}`
+		}
 
-			stopLoading()
-			this.shouldPreventActions = false
-		},
-		async editGalleryItem() {
-			this.shouldPreventActions = true
-			startLoading()
-			try {
-				let url = `project/${this.project.id}/gallery?url=${encodeURIComponent(
-					this.project.gallery[this.editIndex].url,
-				)}&featured=${this.editFeatured}`
-
-				if (this.editTitle) {
-					url += `&title=${encodeURIComponent(this.editTitle)}`
-				}
-				if (this.editDescription) {
-					url += `&description=${encodeURIComponent(this.editDescription)}`
-				}
-				if (this.editOrder) {
-					url += `&ordering=${this.editOrder}`
-				}
+		await useBaseFetch(url, {
+			method: 'POST',
+			body: editFile.value,
+		})
+		await refreshProject()
+
+		modalEditItem.value?.hide()
+	} catch (err: unknown) {
+		const error = err as { data?: { description?: string } }
+		addNotification({
+			title: 'An error occurred',
+			text: error.data?.description ?? String(err),
+			type: 'error',
+		})
+	} finally {
+		stopLoading()
+		shouldPreventActions.value = false
+	}
+}
 
-				await useBaseFetch(url, {
-					method: 'PATCH',
-				})
-
-				await this.refreshProject()
-				this.$refs.modal_edit_item.hide()
-			} catch (err) {
-				this.addNotification({
-					title: 'An error occurred',
-					text: err.data ? err.data.description : err,
-					type: 'error',
-				})
-			}
+async function editGalleryItem() {
+	shouldPreventActions.value = true
+	startLoading()
+	try {
+		let url = `project/${project.value.id}/gallery?url=${encodeURIComponent(
+			project.value!.gallery![editIndex.value].url,
+		)}&featured=${editFeatured.value}`
 
-			stopLoading()
-			this.shouldPreventActions = false
-		},
-		async deleteGalleryImage() {
-			startLoading()
-
-			try {
-				await useBaseFetch(
-					`project/${this.project.id}/gallery?url=${encodeURIComponent(
-						this.project.gallery[this.deleteIndex].url,
-					)}`,
-					{
-						method: 'DELETE',
-					},
-				)
-
-				await this.refreshProject()
-			} catch (err) {
-				this.addNotification({
-					title: 'An error occurred',
-					text: err.data ? err.data.description : err,
-					type: 'error',
-				})
-			}
+		if (editTitle.value) {
+			url += `&title=${encodeURIComponent(editTitle.value)}`
+		}
+		if (editDescription.value) {
+			url += `&description=${encodeURIComponent(editDescription.value)}`
+		}
+		if (editOrder.value) {
+			url += `&ordering=${editOrder.value}`
+		}
 
-			stopLoading()
-		},
-	},
-})
+		await useBaseFetch(url, {
+			method: 'PATCH',
+		})
+
+		await refreshProject()
+		modalEditItem.value?.hide()
+	} catch (err: unknown) {
+		const error = err as { data?: { description?: string } }
+		addNotification({
+			title: 'An error occurred',
+			text: error.data?.description ?? String(err),
+			type: 'error',
+		})
+	} finally {
+		stopLoading()
+		shouldPreventActions.value = false
+	}
+}
+
+async function deleteGalleryImage() {
+	startLoading()
+
+	try {
+		await useBaseFetch(
+			`project/${project.value.id}/gallery?url=${encodeURIComponent(
+				project.value!.gallery![deleteIndex.value].url!,
+			)}`,
+			{
+				method: 'DELETE',
+			},
+		)
+
+		await refreshProject()
+	} catch (err: unknown) {
+		const error = err as { data?: { description?: string } }
+		addNotification({
+			title: 'An error occurred',
+			text: error.data?.description ?? String(err),
+			type: 'error',
+		})
+	} finally {
+		stopLoading()
+	}
+}
 </script>
 
 <style lang="scss" scoped>