Refining the speech-to-text conversion structure

apps/web/src/views/InvoicesView.vue

@@ -11,6 +11,7 @@ import {
 import JalaliDateInput from '@/components/JalaliDateInput.vue';
 import {
   UiButton,
+  UiDropdownMenu,
   UiModal,
   UiPageHeader,
   UiPagination,
@@ -522,12 +523,18 @@ onMounted(load);
                 <RouterLink class="icon-btn sm" :to="r.href" title="ویرایش">
                   <UiIcon name="pencil" :size="15" />
                 </RouterLink>
-                <button type="button" class="icon-btn sm" @click="menuId = menuId === r.id ? null : r.id">
-                  <UiIcon name="dots-v" :size="15" />
-                </button>
-                <div v-if="menuId === r.id" class="menu left">
+                <UiDropdownMenu
+                  :open="menuId === r.id"
+                  align="end"
+                  @update:open="(v) => (menuId = v ? r.id : null)"
+                >
+                  <template #trigger="{ toggle }">
+                    <button type="button" class="icon-btn sm" @click.stop="toggle">
+                      <UiIcon name="dots-v" :size="15" />
+                    </button>
+                  </template>
                   <RouterLink :to="r.href">باز کردن</RouterLink>
-                </div>
+                </UiDropdownMenu>
               </td>
             </tr>
           </tbody>
@@ -548,14 +555,20 @@ onMounted(load);
               {{ r.statusLabel }}
             </span>
             <div class="mob-aside">
-              <button type="button" class="icon-btn sm ghost" @click="menuId = menuId === r.id ? null : r.id">
-                <UiIcon name="dots-v" :size="16" />
-              </button>
+              <UiDropdownMenu
+                :open="menuId === r.id"
+                align="end"
+                @update:open="(v) => (menuId = v ? r.id : null)"
+              >
+                <template #trigger="{ toggle }">
+                  <button type="button" class="icon-btn sm ghost" @click.stop="toggle">
+                    <UiIcon name="dots-v" :size="16" />
+                  </button>
+                </template>
+                <RouterLink :to="r.href">باز کردن</RouterLink>
+              </UiDropdownMenu>
               <span class="avatar">{{ r.customerName.slice(0, 1) }}</span>
             </div>
-            <div v-if="menuId === r.id" class="menu left mob-menu">
-              <RouterLink :to="r.href">باز کردن</RouterLink>
-            </div>
           </div>
           <div class="mob-card-bottom">
             <em :class="{ neg: r.amount < 0 }">{{ money(r.amount, r.currency) }}</em>
@@ -835,7 +848,6 @@ tbody tr:nth-child(even) { background: #fcfdff; }
 .mob-info { text-decoration: none; color: inherit; display: grid; gap: 0.12rem; min-width: 0; }
 .mob-info .mono, .mob-info .muted { font-size: 0.8rem; color: var(--muted); }
 .mob-aside { display: grid; justify-items: center; gap: 0.35rem; }
-.mob-menu { top: 2.2rem; }
 .mob-card-bottom { display: flex; justify-content: flex-start; }
 .mob-card-bottom em { font-style: normal; font-weight: 600; font-size: 0.92rem; }