Refining the speech-to-text conversion structure

apps/web/src/views/TeamSettingsView.vue

@@ -5,7 +5,7 @@ import axios from 'axios';
 import { api } from '@/lib/api';
 import { useAuthStore } from '@/stores/auth';
 import UiIcon from '@/components/UiIcon.vue';
-import UiModal from '@/components/ui/UiModal.vue';
+import { UiDropdownMenu, UiModal } from '@/components/ui';
 import {
   ROLE_PERMISSION_ITEMS,
   type InviteUserRequest,
@@ -754,16 +754,20 @@ onUnmounted(() => {
                 </td>
                 <td class="muted">{{ formatLastLogin(user.lastLoginAt) }}</td>
                 <td class="ops" @click.stop>
-                  <div class="kebab">
-                    <button type="button" class="ghost-ico" aria-label="عملیات" @click.stop="menuUserId = menuUserId === user.id ? null : user.id">
-                      <UiIcon name="dots-v" :size="16" />
-                    </button>
-                    <div v-if="menuUserId === user.id" class="menu" @click.stop>
-                      <button type="button" @click="toggleStatus(user)">
-                        {{ user.isActive === false ? 'فعال کردن' : 'غیرفعال کردن' }}
+                  <UiDropdownMenu
+                    :open="menuUserId === user.id"
+                    align="end"
+                    @update:open="(v) => (menuUserId = v ? user.id : null)"
+                  >
+                    <template #trigger="{ toggle }">
+                      <button type="button" class="ghost-ico" aria-label="عملیات" @click.stop="toggle">
+                        <UiIcon name="dots-v" :size="16" />
                       </button>
-                    </div>
-                  </div>
+                    </template>
+                    <button type="button" @click="toggleStatus(user)">
+                      {{ user.isActive === false ? 'فعال کردن' : 'غیرفعال کردن' }}
+                    </button>
+                  </UiDropdownMenu>
                 </td>
               </tr>
               <tr v-if="!loading && !pagedUsers.length">
@@ -1218,39 +1222,6 @@ tbody tr + tr td {
   color: #94a3b8;
 }
 
-.kebab {
-  position: relative;
-}
-
-.menu {
-  position: absolute;
-  inset-inline-start: 0;
-  top: 100%;
-  z-index: 5;
-  min-width: 9rem;
-  background: #fff;
-  border: 1px solid #e2e8f0;
-  border-radius: 12px;
-  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
-  padding: 0.35rem;
-}
-
-.menu button {
-  width: 100%;
-  appearance: none;
-  background: none;
-  border: 0;
-  text-align: right;
-  padding: 0.45rem 0.55rem;
-  border-radius: 8px;
-  font: inherit;
-  cursor: pointer;
-}
-
-.menu button:hover {
-  background: #f8fafc;
-}
-
 .ghost-ico {
   width: 32px;
   height: 32px;