compatible with stable

src/components/T/modal.client.vue

@@ -5,12 +5,12 @@ const emits = defineEmits<{
   (e: 'cancel', v: Event): void
   (e: 'closed'): void
   (e: 'shown'): void
+  (e: 'ready'): void
 }>()
 
 const { status, close, show, onNativeCancel: onNativeClose } = useZoomModal()
 
 const wrapper = shallowRef<HTMLDialogElement>()
-// const status = shallowRef(0)
 
 function showModal(cb?: Callback) {
   if (!wrapper.value) {
@@ -33,6 +33,12 @@ defineExpose({
   closeModal,
   wrapper,
 })
+
+onMounted(() => {
+  nextTick(() => {
+    emits('ready')
+  })
+})
 </script>
 
 <template>

src/components/T/responsive-modal.client.vue

@@ -14,9 +14,9 @@ defineExpose({
 </script>
 
 <template>
-  <t-modal ref="e" v-slot="{ closeModal }" v-bind="$props">
+  <t-modal ref="e" v-slot="props">
     <div response-modal class="h-[100dvh] md:h-auto flex items-end pb-8">
-      <slot v-bind="{ closeModal }" />
+      <slot v-bind="props" />
     </div>
   </t-modal>
 </template>

src/pages/me/settings.vue

@@ -23,9 +23,12 @@ const config = useAppConfig()
 const route = useRoute()
 
 const session = useSession()
+
 definePageMeta({
   middleware: ['auth'],
+  alias: ['/home/account/edit'],
 })
+
 useHead({
   titleTemplate: `Settings - ${config.title}`,
 })
@@ -78,6 +81,9 @@ const changePasswordForm = shallowReactive<{
 })
 const changePasswordError = shallowRef('')
 
+// compatible with stable client: change avatar
+const showChangeAvatar = route.hash === '#avatar'
+
 async function saveAvatar() {
   if (!croppedAvatar.value) {
     return
@@ -191,7 +197,12 @@ function resetAvatar() {
 
 <template>
   <section v-if="user" class="container mx-auto custom-container">
-    <t-responsive-modal ref="changeAvatar" v-slot="{ closeModal }" class="my-auto">
+    <t-responsive-modal
+      ref="changeAvatar"
+      v-slot="{ closeModal }"
+      class="my-auto"
+      @ready="() => /* compatible with stable client */ showChangeAvatar && changeAvatar?.showModal()"
+    >
       <div class="p-4 rounded-xl flex flex-col gap-2 shadow-xl bg-gbase-50">
         <div class="flex items-center justify-center w-full">
           <label v-if="!newAvatar" for="dropzone-file" class="dropzone">
@@ -358,9 +369,9 @@ function resetAvatar() {
         <div
           class="flex items-end justify-center p-3 overflow-hidden shadow-md gap-4 md:justify-start bg-gbase-200/30 dark:bg-gbase-700/40 sm:rounded-3xl lg:mr-4"
         >
-          <div class="relative z-10 mask mask-squircle hoverable w-100 self-center">
+          <div class="relative z-10 mask mask-squircle hoverable w-100 self-center [&>img]:hover:blur-lg [&>img]:hover:opacity-50 no-animation">
             <button
-              class="absolute top-0 z-20 w-full h-full btn btn-primary hover:bg-wewak-500/30 hover:active:border-wewak-500/30 no-animation"
+              class="absolute top-0 z-20 w-full h-full btn btn-primary hover:bg-primary/50 focus:active:bg-primary/50"
               type="button"
               @click="() => changeAvatar?.showModal()"
             >

src/pages/user/[handle].vue

@@ -16,6 +16,12 @@ useHead({
       `${page.user?.name} | ${page.switcher.mode} | ${page.switcher.ruleset} | ${page.switcher.rankingSystem}`
   ),
 })
+definePageMeta({
+  alias: [
+    // compatible with osu stable client
+    '/u/:handle',
+  ],
+})
 
 // directive is not working: yield error when navigate to other page
 const visible = reactive({