Upgraded dependencies, bumped to Node 24.

components/user/api-keys.vue

@@ -1,3 +1,57 @@
+<script setup>
+import { format, formatDistanceStrict } from 'date-fns';
+import { inject, ref, useId } from 'vue';
+
+import { del, get, post } from '#/src/api.js';
+import events from '#/src/events.js';
+
+const pageContext = inject('pageContext');
+const now = pageContext.meta.now;
+const user = pageContext.user;
+const keys = ref(pageContext.pageProps.keys);
+const newKey = ref(null);
+const flushTooltipId = useId();
+
+async function createKey() {
+	const key = await post('/me/keys', null, {
+		appendErrorMessage: true,
+	});
+
+	newKey.value = key;
+	keys.value = await get('/me/keys');
+}
+
+async function removeKey(key) {
+	if (confirm(`Are you sure you want to remove API key '${key.identifier}'? It can not be restored.`)) { // eslint-disable-line no-alert
+		newKey.value = null;
+
+		await del(`/me/keys/${key.identifier}`);
+
+		keys.value = await get('/me/keys');
+	}
+}
+
+async function flushKeys() {
+	if (confirm('Are you sure you want to remove ALL your API keys? They can not be restored.')) { // eslint-disable-line no-alert
+		newKey.value = null;
+
+		await del('/me/keys');
+
+		keys.value = [];
+	}
+}
+
+function copyKey(event) {
+	event.target.select();
+	navigator.clipboard.writeText(newKey.value.key);
+
+	events.emit('feedback', {
+		type: 'success',
+		message: 'Key copied to clipboard',
+	});
+}
+</script>
+
 <template>
 	<section class="profile-section">
 		<div class="section-header">
@@ -5,7 +59,7 @@
 
 			<div class="keys-actions">
 				<Icon
-					v-tooltip="'Flush all keys'"
+					v-tooltip="{ content: 'Flush all keys', ariaId: flushTooltipId }"
 					icon="stack-cancel"
 					class="keys-flush"
 					@click="flushKeys"
@@ -63,7 +117,7 @@
 							<Icon icon="plus-circle" />
 
 							<time
-								v-tooltip="`Created ${format(key.createdAt, 'yyyy-MM-dd hh:mm:ss')}`"
+								v-tooltip="{ content: `Created ${format(key.createdAt, 'yyyy-MM-dd hh:mm:ss')}`, ariaId: `key-created-${key.id}` }"
 								:datetime="key.createdAt.toISOString()"
 							>{{ formatDistanceStrict(key.createdAt, now) }} ago</time>
 						</span>
@@ -73,7 +127,7 @@
 
 							<template v-if="key.lastUsedAt">
 								<time
-									v-tooltip="`Last used ${format(key.lastUsedAt, 'yyyy-MM-dd hh:mm:ss')} from IP ${key.lastUsedIp}`"
+									v-tooltip="{ content: `Last used ${format(key.lastUsedAt, 'yyyy-MM-dd hh:mm:ss')} from IP ${key.lastUsedIp}`, ariaId: `key-used-${key.id}` }"
 									:datetime="key.lastUsedAt.toISOString()"
 								>{{ formatDistanceStrict(key.lastUsedAt, now) }} ago</time>
 							</template>
@@ -99,59 +153,6 @@
 	</section>
 </template>
 
-<script setup>
-import { ref, inject } from 'vue';
-import { format, formatDistanceStrict } from 'date-fns';
-
-import { get, post, del } from '#/src/api.js';
-import events from '#/src/events.js';
-
-const pageContext = inject('pageContext');
-const now = pageContext.meta.now;
-const user = pageContext.user;
-const keys = ref(pageContext.pageProps.keys);
-const newKey = ref(null);
-
-async function createKey() {
-	const key = await post('/me/keys', null, {
-		appendErrorMessage: true,
-	});
-
-	newKey.value = key;
-	keys.value = await get('/me/keys');
-}
-
-async function removeKey(key) {
-	if (confirm(`Are you sure you want to remove API key '${key.identifier}'? It can not be restored.`)) { // eslint-disable-line no-restricted-globals, no-alert
-		newKey.value = null;
-
-		await del(`/me/keys/${key.identifier}`);
-
-		keys.value = await get('/me/keys');
-	}
-}
-
-async function flushKeys() {
-	if (confirm('Are you sure you want to remove ALL your API keys? They can not be restored.')) { // eslint-disable-line no-restricted-globals, no-alert
-		newKey.value = null;
-
-		await del('/me/keys');
-
-		keys.value = [];
-	}
-}
-
-function copyKey(event) {
-	event.target.select();
-	navigator.clipboard.writeText(newKey.value.key);
-
-	events.emit('feedback', {
-		type: 'success',
-		message: 'Key copied to clipboard',
-	});
-}
-</script>
-
 <style scoped>
 .keys-header {
 	display: flex;