Refining the speech-to-text conversion structure

apps/web/src/views/MessageAutomationsView.vue

@@ -3,6 +3,7 @@ import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import axios from 'axios';
 import { api } from '@/lib/api';
 import UiIcon from '@/components/UiIcon.vue';
+import { UiDropdownMenu } from '@/components/ui';
 import { formatClockFa, formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
 import type {
   CreateMessageAutomationRuleRequest,
@@ -414,17 +415,23 @@ onUnmounted(() => {
         >
           <header>
             <div class="m-menu">
-              <button
-                type="button"
-                aria-label="عملیات"
-                @click="menuId = menuId === row.id ? null : row.id"
+              <UiDropdownMenu
+                :open="menuId === row.id"
+                align="end"
+                @update:open="(v) => (menuId = v ? row.id : null)"
               >
-                <UiIcon name="dots-v" :size="18" />
-              </button>
-              <div v-if="menuId === row.id" class="pop">
+                <template #trigger="{ toggle }">
+                  <button
+                    type="button"
+                    aria-label="عملیات"
+                    @click.stop="toggle"
+                  >
+                    <UiIcon name="dots-v" :size="18" />
+                  </button>
+                </template>
                 <button type="button" @click="openMobileEdit(row)">ویرایش</button>
                 <button type="button" class="danger" @click="askRemove(row)">حذف</button>
-              </div>
+              </UiDropdownMenu>
             </div>
             <div class="m-copy">
               <strong>{{ row.name }}</strong>
@@ -2144,7 +2151,7 @@ textarea {
   position: relative;
 }
 
-.m-menu > button,
+.m-menu :deep(button),
 .m-back {
   width: 2rem;
   height: 2rem;
@@ -2157,32 +2164,6 @@ textarea {
   padding: 0;
 }
 
-.m-menu .pop {
-  position: absolute;
-  inset-inline-start: 0;
-  top: 2.1rem;
-  z-index: 4;
-  min-width: 7.5rem;
-  display: grid;
-  padding: 0.35rem;
-  border-radius: 12px;
-  background: #fff;
-  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
-}
-
-.m-menu .pop button {
-  border: 0;
-  background: transparent;
-  text-align: start;
-  padding: 0.5rem 0.6rem;
-  font: inherit;
-  cursor: pointer;
-}
-
-.m-menu .pop .danger {
-  color: #b91c1c;
-}
-
 .m-card footer {
   display: flex;
   align-items: center;