Upgraded dependencies, bumped to Node 24.

pages/admin/actors/+Page.vue

@@ -1,3 +1,75 @@
+<script setup>
+import { inject, onMounted, ref } from 'vue';
+
+import AddActor from '#/components/actors/add.vue';
+import MergeActors from '#/components/actors/merge.vue';
+import Admin from '#/components/admin/admin.vue';
+import Checkbox from '#/components/form/checkbox.vue';
+
+import getPath from '#/src/get-path.js';
+import navigate from '#/src/navigate.js';
+// import { get } from '#/src/api.js';
+
+const { pageProps, urlParsed } = inject('pageContext');
+
+const actors = ref(pageProps.actors);
+const selectedActors = ref(new Set([]));
+const activeActor = ref(null);
+const actorQuery = ref(urlParsed.search.q || null);
+const showAliased = ref(Object.hasOwn(urlParsed.search, 'alias'));
+
+const lastSelectedIndex = ref(null);
+const holdingShift = ref(false);
+const showMergeDialog = ref(false);
+const showAddDialog = ref(false);
+
+function selectActors(selectedActor, isChecked, index) {
+	const [start, end] = holdingShift.value
+		? [index, lastSelectedIndex.value].toSorted((indexA, indexB) => indexA - indexB)
+		: [index, index];
+
+	const actorIds = actors.value
+		.slice(start, end + 1)
+		.map((actor) => actor.id);
+
+	actorIds.forEach((actorId) => {
+		if (isChecked) {
+			selectedActors.value.add(actorId);
+		}
+		else {
+			selectedActors.value.delete(actorId);
+		}
+	});
+
+	lastSelectedIndex.value = index;
+}
+
+async function searchActors() {
+	navigate('/admin/actors', {
+		q: actorQuery.value || undefined,
+		alias: showAliased.value || undefined,
+	}, { redirect: true });
+}
+
+onMounted(() => {
+	window.addEventListener('keydown', (event) => {
+		if (event.key === 'Shift') {
+			holdingShift.value = true;
+		}
+	});
+
+	window.addEventListener('keyup', (event) => {
+		if (event.key === 'Shift') {
+			holdingShift.value = false;
+		}
+	});
+
+	window.addEventListener('blur', () => {
+		holdingShift.value = false;
+	});
+});
+</script>
+
 <template>
 	<Admin class="page">
 		<div class="header">
@@ -73,7 +145,7 @@
 					</td>
 
 					<td
-						v-tooltip="actor.alias ? `#${actor.alias.id} ${actor.alias.name}` : (actor.entity?.name || 'Global')"
+						v-tooltip="{ content: actor.alias ? `#${actor.alias.id} ${actor.alias.name}` : (actor.entity?.name || 'Global'), ariaId: `actor-entity-${actor.id}` }"
 						class="actor-entity ellipsis"
 					>
 						<Icon
@@ -125,14 +197,14 @@
 								target="_blank"
 							>
 								<Icon
-									v-tooltip="'Edit bio'"
+									v-tooltip="{ content: 'Edit bio', ariaId: `actor-edit-${actor.id}` }"
 									icon="pencil5"
 									class="actor-action action-merge"
 								/>
 							</a>
 
 							<Icon
-								v-tooltip="'Merge'"
+								v-tooltip="{ content: 'Merge', ariaId: `actor-merge-${actor.id}` }"
 								icon="make-group"
 								class="actor-action action-merge"
 								@click="activeActor = actor; showMergeDialog = true;"
@@ -164,77 +236,6 @@
 	</Admin>
 </template>
 
-<script setup>
-import { ref, inject, onMounted } from 'vue';
-
-import Admin from '#/components/admin/admin.vue';
-import Checkbox from '#/components/form/checkbox.vue';
-import MergeActors from '#/components/actors/merge.vue';
-import AddActor from '#/components/actors/add.vue';
-
-import getPath from '#/src/get-path.js';
-import navigate from '#/src/navigate.js';
-// import { get } from '#/src/api.js';
-
-const { pageProps, urlParsed } = inject('pageContext');
-
-const actors = ref(pageProps.actors);
-const selectedActors = ref(new Set([]));
-const activeActor = ref(null);
-const actorQuery = ref(urlParsed.search.q || null);
-const showAliased = ref(Object.hasOwn(urlParsed.search, 'alias'));
-
-const lastSelectedIndex = ref(null);
-const holdingShift = ref(false);
-const showMergeDialog = ref(false);
-const showAddDialog = ref(false);
-
-function selectActors(selectedActor, isChecked, index) {
-	const [start, end] = holdingShift.value
-		? [index, lastSelectedIndex.value].toSorted((indexA, indexB) => indexA - indexB)
-		: [index, index];
-
-	const actorIds = actors.value
-		.slice(start, end + 1)
-		.map((actor) => actor.id);
-
-	actorIds.forEach((actorId) => {
-		if (isChecked) {
-			selectedActors.value.add(actorId);
-		} else {
-			selectedActors.value.delete(actorId);
-		}
-	});
-
-	lastSelectedIndex.value = index;
-}
-
-async function searchActors() {
-	navigate('/admin/actors', {
-		q: actorQuery.value || undefined,
-		alias: showAliased.value || undefined,
-	}, { redirect: true });
-}
-
-onMounted(() => {
-	window.addEventListener('keydown', (event) => {
-		if (event.key === 'Shift') {
-			holdingShift.value = true;
-		}
-	});
-
-	window.addEventListener('keyup', (event) => {
-		if (event.key === 'Shift') {
-			holdingShift.value = false;
-		}
-	});
-
-	window.addEventListener('blur', () => {
-		holdingShift.value = false;
-	});
-});
-</script>
-
 <style scoped>
 .search {
 	display: flex;

pages/admin/actors/+onBeforeRender.js

@@ -1,4 +1,4 @@
-import { render } from 'vike/abort'; /* eslint-disable-line import/extensions */
+import { render } from 'vike/abort';
 
 import { fetchActors } from '#/src/actors.js';
 import { curateActorsQuery } from '#/src/web/actors.js';