slightly improve contribution modal code

index.html

@@ -152,11 +152,7 @@
 
 				<span class="monochrome-logo mx-2 d-flex noselect">
 					<a href="https://faithfulpack.net" title="Return to main site">
-						<img
-							:src="monochromeLogo"
-							width="30"
-							alt="logo"
-						/>
+						<img :src="monochromeLogo" width="30" alt="logo" />
 					</a>
 				</span>
 			</v-app-bar>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "faithful-web-app",
-	"version": "1.0.0",
+	"version": "2.0.0",
 	"description": "The official web application for the Faithful website.",
 	"main": "index.js",
 	"type": "module",
@@ -27,12 +27,12 @@
 		"d3": "7.9.0",
 		"dompurify": "^3.2.3",
 		"dotenv": "^16.4.7",
-		"marked": "~15.0.4",
+		"marked": "~15.0.6",
 		"moment": "^2.30.1",
 		"pinia": "^2.3.0",
 		"prettier": "^3.4.2",
 		"prismjs": "~1.29.0",
-		"vite": "^6.0.6",
+		"vite": "^6.0.7",
 		"vue": "^2.7.16",
 		"vue-calendar-heatmap": "0.8.4",
 		"vue-graph": "0.8.7",

pages/contribution/contribution-form.vue

@@ -45,24 +45,10 @@
 						min="0"
 						v-model="content.texture"
 					/>
-					<v-btn
-						icon
-						@click="
-							() => {
-								content.texture = String(Number.parseInt(content.texture, 10) + 1);
-							}
-						"
-					>
+					<v-btn icon @click="incrementTextureID">
 						<v-icon>mdi-chevron-up</v-icon>
 					</v-btn>
-					<v-btn
-						icon
-						@click="
-							() => {
-								content.texture = String(Math.max(Number.parseInt(content.texture - 1, 10), 0));
-							}
-						"
-					>
+					<v-btn icon @click="decrementTextureID">
 						<v-icon>mdi-chevron-down</v-icon>
 					</v-btn>
 				</div>
@@ -123,6 +109,17 @@ export default {
 			months: moment.monthsShort(),
 		};
 	},
+	methods: {
+		incrementTextureID() {
+			const incremented = Number(this.content.texture) + 1;
+			this.content.texture = String(incremented);
+		},
+		decrementTextureID() {
+			const decremented = Number(this.content.texture) - 1;
+			// min zero
+			this.content.texture = String(Math.max(decremented, 0));
+		},
+	},
 	watch: {
 		value: {
 			handler(n, o) {

pages/contribution/contribution-modal.vue

@@ -58,8 +58,8 @@
 										<v-chip
 											class="mr-1 px-2"
 											x-small
-											v-for="(range, range_i) in form.texture"
-											:key="`item-${form.formId}-chip-${String(range).replace(',', '-')}+${range_i}`"
+											v-for="range in form.texture"
+											:key="Array.isArray(range) ? range.join() : String(range)"
 										>
 											{{ "#" + (Array.isArray(range) ? range.join(" — #") : String(range)) }}
 										</v-chip>
@@ -148,34 +148,6 @@ export default {
 			openedFormId: undefined,
 		};
 	},
-	computed: {
-		activeForm() {
-			if (this.openedFormId === undefined) return undefined;
-
-			const formObj = this.formRecords[this.openedFormId];
-			if (formObj === undefined) return undefined;
-
-			const res = JSON.parse(JSON.stringify(formObj));
-			return res;
-		},
-		formRecordsList() {
-			return Object.values(this.formRecords);
-		},
-		formRecordsLength() {
-			return this.formRecordsList.length;
-		},
-		panelLabels() {
-			return Object.entries(this.formRecords)
-				.map(([formID, form]) => [
-					formID,
-					`${this.formatPack(form.pack)} • ${moment(new Date(form.date)).format("ll")}`,
-				])
-				.reduce((acc, [formID, formLabel]) => {
-					acc[formID] = formLabel;
-					return acc;
-				}, {});
-		},
-	},
 	methods: {
 		addNewForm() {
 			// create new form
@@ -224,7 +196,7 @@ export default {
 			if (!authorIds || authorIds.length === 0) return "";
 
 			const contributorNames = this.contributors
-				.filter((c) => authorIds.indexOf(c.id) !== -1)
+				.filter((c) => authorIds.includes(c.id))
 				.map((c) => c.username);
 
 			const total = contributorNames.length;
@@ -314,5 +286,31 @@ export default {
 			this.$set(this, "formRecords", newFormRecords); // affect
 		},
 	},
+	computed: {
+		activeForm() {
+			if (this.openedFormId === undefined) return undefined;
+
+			const formObj = this.formRecords[this.openedFormId];
+			if (formObj === undefined) return undefined;
+
+			const res = JSON.parse(JSON.stringify(formObj));
+			return res;
+		},
+		formRecordsList() {
+			return Object.values(this.formRecords);
+		},
+		formRecordsLength() {
+			return this.formRecordsList.length;
+		},
+		panelLabels() {
+			// faster than using Object.entries + reduce
+			const acc = {};
+			for (const formID of Object.keys(this.formRecords)) {
+				const form = this.formRecords[formID];
+				acc[formID] = `${this.formatPack(form.pack)} • ${moment(new Date(form.date)).format("ll")}`;
+			}
+			return acc;
+		},
+	},
 };
 </script>

pages/post/post-grid.vue

@@ -8,7 +8,14 @@
 			{{ error || $root.lang().global.no_results }}
 		</div>
 		<div v-else class="my-2 text-h5">
-			<card-grid :items="posts" :getImage="(post) => post.header_img || 'https://database.faithfulpack.net/images/website/posts/placeholder.jpg'">
+			<card-grid
+				:items="posts"
+				:getImage="
+					(post) =>
+						post.header_img ||
+						'https://database.faithfulpack.net/images/website/posts/placeholder.jpg'
+				"
+			>
 				<template #title="{ title, permalink }">
 					<v-card-title style="word-break: break-word">{{ title }}</v-card-title>
 					<v-card-subtitle>{{ permalink }}</v-card-subtitle>