Merge branch 'dev' into feat/password-editing

src/components/MdLink.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+function fixFragmentLinks(e: MouseEvent) {
+	const targetEl = e.target as HTMLAnchorElement;
+	const to = targetEl?.getAttribute('href');
+
+	if (targetEl?.tagName !== 'A' || !to?.startsWith('#')) {
+		return;
+	}
+
+	e.preventDefault();
+	document.getElementById(to.slice(1))?.scrollIntoView();
+}
+</script>
+
+<template>
+  <NuxtLink @click="fixFragmentLinks">
+    <slot />
+  </NuxtLink>
+</template>

src/components/UpdateEmailModal.vue

@@ -5,6 +5,16 @@ import type { ApiAccountEmailUpdateRequest, GetApiAuthMe } from '~~/shared/api-t
 const toasts = useToasts();
 const open = defineModel<boolean>();
 
+const updateOpen = ref(false);
+const verifyOpen = ref(false);
+
+watch(updateOpen, () => {
+	open.value = updateOpen.value;
+});
+watch(verifyOpen, () => {
+	open.value = verifyOpen.value;
+});
+
 const newEmail = ref('');
 
 const { profile } = defineProps<{
@@ -47,8 +57,7 @@ const {
 
 <template>
   <Dialog.Root
-    v-if="profile.emailValidated"
-    v-model:open="open"
+    v-model:open="updateOpen"
   >
     <Dialog.Portal :to="dialogContainer ?? undefined">
       <Dialog.Overlay />
@@ -106,8 +115,8 @@ const {
   </Dialog.Root>
 
   <Dialog.Root
-    v-else
-    v-model:open="open"
+    v-if="!profile.emailValidated"
+    v-model:open="verifyOpen"
   >
     <Dialog.Portal :to="dialogContainer ?? undefined">
       <Dialog.Overlay />
@@ -137,9 +146,12 @@ const {
                 email: profile.emailAddress
               })"
             >
-              {{
-                $t("account.settings.unverifiedEmailModal.resend")
-              }}
+              <Loader v-if="isLoadingUpdateEmail" />
+              <span v-else>
+                {{
+                  $t("account.settings.unverifiedEmailModal.resend")
+                }}
+              </span>
             </button>
           </p>
         </Dialog.Description>
@@ -153,9 +165,14 @@ const {
           </Dialog.Close>
         </div>
       </Dialog.Content>
-    </Dialog.Portal><Dialog.Trigger class="unverified">
-      {{ $t('account.settings.verify_email') }}
-    </Dialog.Trigger>
+    </Dialog.Portal>
+    <p class="notice">
+      {{ $t('account.settings.verify_email_notice') }}
+      <br>
+      <Dialog.Trigger class="unverified">
+        {{ $t('account.settings.verify_email_button') }}
+      </Dialog.Trigger>
+    </p>
   </Dialog.Root>
 </template>
 <style>
@@ -185,4 +202,9 @@ fieldset {
 	gap: .25rem;
 	border: none;
 }
+
+.notice {
+	font-size: .9em;
+	margin-top: 1rem !important;
+}
 </style>