Upgraded dependencies, bumped to Node 24.

components/stashes/tile.vue

@@ -1,3 +1,98 @@
+<script setup>
+import { inject, ref, useId } from 'vue';
+
+import Dialog from '#/components/dialog/dialog.vue';
+import { del, patch } from '#/src/api.js';
+
+import abbreviateNumber from '#/src/utils/abbreviate-number.js';
+
+const props = defineProps({
+	stash: {
+		type: Object,
+		default: null,
+	},
+	profile: {
+		type: Object,
+		default: null,
+	},
+});
+
+const emit = defineEmits(['reload']);
+
+const pageContext = inject('pageContext');
+const user = pageContext.user;
+
+const stashName = ref(props.stash.name);
+const stashNameInput = ref(null);
+const showRenameDialog = ref(false);
+const done = ref(true);
+const privateTooltipId = useId();
+const menuDropdownId = useId();
+
+const domainCounts = {
+	scenes: props.stash.stashedScenes,
+	actors: props.stash.stashedActors,
+	movies: props.stash.stashedMovies,
+};
+
+const primaryDomain = Object.entries(domainCounts).toSorted((domainA, domainB) => domainB[1] - domainA[1])[0][0];
+
+async function setPublic(isPublic) {
+	if (done.value === false) {
+		return;
+	}
+
+	done.value = false;
+
+	await patch(`/stashes/${props.stash.id}`, { isPublic }, {
+		undoFeedback: !isPublic && `Stash '${props.stash.name}' set to private`,
+		successFeedback: isPublic && `Stash '${props.stash.name}' set to public`,
+		errorFeedback: 'Failed to update stash',
+		appendErrorMessage: true,
+	}).finally(() => { done.value = true; });
+
+	emit('reload');
+}
+
+async function remove() {
+	if (done.value === false) {
+		return;
+	}
+
+	if (!confirm(`Are you sure you want to remove the stash '${props.stash.name}' and all its scenes, movies and actors? This is permament, it cannot be undone by you or staff!`)) { // eslint-disable-line no-alert
+		return;
+	}
+
+	done.value = false;
+
+	await del(`/stashes/${props.stash.id}`, {
+		undoFeedback: `Stash '${props.stash.name}' removed`,
+		errorFeedback: 'Failed to remove stash',
+		appendErrorMessage: true,
+	}).finally(() => { done.value = true; });
+
+	emit('reload');
+}
+
+async function rename() {
+	if (done.value === false) {
+		return;
+	}
+
+	done.value = false;
+
+	await patch(`/stashes/${props.stash.id}`, { name: stashName.value }, {
+		successFeedback: `Stash renamed to ${stashName.value}`,
+		errorFeedback: 'Failed to rename stash',
+		appendErrorMessage: true,
+	}).finally(() => { done.value = true; });
+
+	emit('reload');
+
+	showRenameDialog.value = false;
+}
+</script>
+
 <template>
 	<div class="stash">
 		<div class="stash-header">
@@ -16,12 +111,12 @@
 
 			<Icon
 				v-if="!stash.isPublic"
-				v-tooltip="'This stash is private'"
+				v-tooltip="{ content: 'This stash is private', ariaId: privateTooltipId }"
 				icon="eye-blocked"
 				class="private noselect"
 			/>
 
-			<VDropdown>
+			<VDropdown :aria-id="menuDropdownId">
 				<Icon
 					v-if="profile.id === user?.id"
 					icon="more2"
@@ -122,99 +217,6 @@
 	</div>
 </template>
 
-<script setup>
-import { ref, inject } from 'vue';
-
-import { del, patch } from '#/src/api.js';
-import abbreviateNumber from '#/src/utils/abbreviate-number.js';
-
-import Dialog from '#/components/dialog/dialog.vue';
-
-const props = defineProps({
-	stash: {
-		type: Object,
-		default: null,
-	},
-	profile: {
-		type: Object,
-		default: null,
-	},
-});
-
-const emit = defineEmits(['reload']);
-
-const pageContext = inject('pageContext');
-const user = pageContext.user;
-
-const stashName = ref(props.stash.name);
-const stashNameInput = ref(null);
-const showRenameDialog = ref(false);
-const done = ref(true);
-
-const domainCounts = {
-	scenes: props.stash.stashedScenes,
-	actors: props.stash.stashedActors,
-	movies: props.stash.stashedMovies,
-};
-
-const primaryDomain = Object.entries(domainCounts).toSorted((domainA, domainB) => domainB[1] - domainA[1])[0][0];
-
-async function setPublic(isPublic) {
-	if (done.value === false) {
-		return;
-	}
-
-	done.value = false;
-
-	await patch(`/stashes/${props.stash.id}`, { isPublic }, {
-		undoFeedback: !isPublic && `Stash '${props.stash.name}' set to private`,
-		successFeedback: isPublic && `Stash '${props.stash.name}' set to public`,
-		errorFeedback: 'Failed to update stash',
-		appendErrorMessage: true,
-	}).finally(() => { done.value = true; });
-
-	emit('reload');
-}
-
-async function remove() {
-	if (done.value === false) {
-		return;
-	}
-
-	if (!confirm(`Are you sure you want to remove the stash '${props.stash.name}' and all its scenes, movies and actors? This is permament, it cannot be undone by you or staff!`)) { // eslint-disable-line no-restricted-globals, no-alert
-		return;
-	}
-
-	done.value = false;
-
-	await del(`/stashes/${props.stash.id}`, {
-		undoFeedback: `Stash '${props.stash.name}' removed`,
-		errorFeedback: 'Failed to remove stash',
-		appendErrorMessage: true,
-	}).finally(() => { done.value = true; });
-
-	emit('reload');
-}
-
-async function rename() {
-	if (done.value === false) {
-		return;
-	}
-
-	done.value = false;
-
-	await patch(`/stashes/${props.stash.id}`, { name: stashName.value }, {
-		successFeedback: `Stash renamed to ${stashName.value}`,
-		errorFeedback: 'Failed to rename stash',
-		appendErrorMessage: true,
-	}).finally(() => { done.value = true; });
-
-	emit('reload');
-
-	showRenameDialog.value = false;
-}
-</script>
-
 <style scoped>
 .stash {
 	width: 100%;