Using thumbnail width and height for release banner photos. Preventing user page from reloading when closing the add stash dialog without adding stash.

assets/components/releases/banner.vue

@@ -33,8 +33,8 @@
 					v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
 					:src="getPath(release.teaser, 'thumbnail', { original: true })"
 					:alt="release.title"
-					:width="release.teaser.width"
-					:height="release.teaser.height"
+					:width="release.teaser.thumbnailWidth"
+					:height="release.teaser.thumbnailHeight"
 					loading="lazy"
 					class="item trailer"
 				>
@@ -68,8 +68,8 @@
 					<img
 						:src="getPath(cover, 'thumbnail')"
 						:style="{ 'background-image': getBgPath(cover, 'lazy') }"
-						:width="cover.width"
-						:height="cover.height"
+						:width="cover.thumbnailWidth"
+						:height="cover.thumbnailHeight"
 						class="item cover"
 						loading="lazy"
 						@load="$emit('load', $event)"
@@ -93,8 +93,8 @@
 						:src="getPath(photo, 'thumbnail')"
 						:style="{ 'background-image': `url('${getPath(photo, 'lazy')}` }"
 						:alt="`Photo ${photo.index + 1}`"
-						:width="photo.width"
-						:height="photo.height"
+						:width="photo.thumbnailWidth"
+						:height="photo.thumbnailHeight"
 						loading="lazy"
 						class="item"
 						@load="$emit('load', $event)"

assets/components/stashes/add-stash.vue

@@ -1,7 +1,7 @@
 <template>
 	<Dialog
 		title="Add stash"
-		@close="$emit('close')"
+		@close="$emit('close', false)"
 	>
 		<form @submit.prevent="addStash">
 			<input
@@ -28,7 +28,7 @@ async function addStash() {
 		name: this.name,
 	});
 
-	this.$emit('close');
+	this.$emit('close', true);
 }
 
 function mounted() {
@@ -41,6 +41,7 @@ export default {
 			name: null,
 		};
 	},
+	emits: ['close'],
 	mounted,
 	methods: {
 		addStash,

assets/components/users/user.vue

@@ -37,7 +37,7 @@
 
 		<AddStash
 			v-if="showAddStash"
-			@close="fetchUser"
+			@close="closeAddStash"
 		/>
 	</div>
 </template>
@@ -50,10 +50,17 @@ async function fetchUser() {
 	this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
 	this.isMe = this.user.id === this.$store.state.auth.user?.id;
 
-	this.showAddStash = false;
 	this.pageTitle = this.user?.username;
 }
 
+async function closeAddStash(addedStash) {
+	this.showAddStash = false;
+
+	if (addedStash) {
+		await this.fetchUser();
+	}
+}
+
 async function mounted() {
 	await this.fetchUser();
 }
@@ -75,6 +82,7 @@ export default {
 	},
 	mounted,
 	methods: {
+		closeAddStash,
 		fetchUser,
 	},
 };