Added e-mail alert settings, saveable but not integrated yet.

components/alerts/alerts.vue

@@ -128,8 +128,6 @@ function toggleFilterCombined() {
 <template>
 	<section class="profile-section">
 		<div class="section-header">
-			<h3 class="heading">Alerts</h3>
-
 			<button
 				class="button"
 				@click="showAlertDialog = true"
@@ -377,6 +375,10 @@ function toggleFilterCombined() {
 </template>
 
 <style scoped>
+.profile-section .section-header {
+	justify-content: center;
+}
+
 .alerts {
 	width: 100%;
 	margin-bottom: 1rem;

components/form/checkbox.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { useId } from 'vue';
+
 defineProps({
 	checked: {
 		type: Boolean,
@@ -16,7 +18,7 @@ defineProps({
 
 defineEmits(['change']);
 
-const uid = String(Math.random()).slice(2);
+const uid = useId();
 </script>
 
 <template>

components/stashes/stashes.vue

@@ -23,8 +23,6 @@ async function reloadStashes() {
 <template>
 	<section class="profile-section">
 		<div class="section-header">
-			<h3 class="heading">Stashes</h3>
-
 			<button
 				v-if="profile.id === user?.id"
 				class="button"
@@ -57,6 +55,12 @@ async function reloadStashes() {
 </template>
 
 <style scoped>
+.profile-section .section-header {
+	display: flex;
+	justify-content: center;
+	margin-bottom: .5rem;
+}
+
 .stashes {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));

components/user/api-keys.vue

@@ -55,16 +55,7 @@ function copyKey(event) {
 <template>
 	<section class="profile-section">
 		<div class="section-header">
-			<h3 class="heading">API Keys</h3>
-
 			<div class="keys-actions">
-				<Icon
-					v-tooltip="{ content: 'Flush all keys', ariaId: flushTooltipId }"
-					icon="stack-cancel"
-					class="keys-flush"
-					@click="flushKeys"
-				/>
-
 				<button
 					class="button"
 					@click="createKey"
@@ -72,6 +63,13 @@ function copyKey(event) {
 					<Icon icon="key" />
 					<span class="button-label">New key</span>
 				</button>
+
+				<Icon
+					v-tooltip="{ content: 'Flush all keys', ariaId: flushTooltipId }"
+					icon="stack-cancel"
+					class="keys-flush"
+					@click="flushKeys"
+				/>
 			</div>
 		</div>
 
@@ -154,6 +152,11 @@ function copyKey(event) {
 </template>
 
 <style scoped>
+.profile-section .section-header {
+	justify-content: center;
+	margin-bottom: 1rem;
+}
+
 .keys-header {
 	display: flex;
 	justify-content: space-between;
@@ -164,6 +167,7 @@ function copyKey(event) {
 .keys-actions {
 	display: flex;
 	align-items: center;
+	gap: 1rem;
 
 	> .icon {
 		padding: .5rem 1rem;