fix: fold the activity board picker and its actions into one dropdown

apps/web/src/views/ActivitiesView.vue

@@ -18,7 +18,6 @@ import {
   UiModal,
   UiPageHeader,
   UiPagination,
-  UiSelect,
 } from '@/components/ui';
 import UiIcon from '@/components/UiIcon.vue';
 import UiSegmented from '@/components/ui/UiSegmented.vue';
@@ -170,6 +169,7 @@ const board = computed<string>(() => {
   return defaultBoardId.value;
 });
 const currentBoard = computed(() => boards.value.find((b) => b.id === board.value) ?? null);
+const boardMenuOpen = ref(false);
 const boardModal = ref<{ mode: 'create' | 'edit'; name: string } | null>(null);
 const boardSaving = ref(false);
 const boardDeleteOpen = ref(false);
@@ -410,11 +410,6 @@ function setBoard(next: string) {
   });
 }
 
-const boardModel = computed<string>({
-  get: () => board.value,
-  set: (v) => setBoard(v),
-});
-
 function openCreateBoard() {
   boardModal.value = { mode: 'create', name: '' };
 }
@@ -998,32 +993,46 @@ onUnmounted(() => {
         </button>
       </div>
       <div class="view-row-end">
-        <div v-if="boards.length" class="board-picker" @click.stop>
-          <UiSelect v-model="boardModel" size="sm" aria-label="گروه فعالیت">
-            <option v-for="b in boards" :key="b.id" :value="b.id">{{ b.name }}</option>
-          </UiSelect>
-          <UiButton
-            v-if="canManageStages"
-            variant="ghost"
-            size="sm"
+        <UiDropdownMenu
+          v-if="boards.length"
+          :open="boardMenuOpen"
+          align="start"
+          @update:open="(v) => (boardMenuOpen = v)"
+        >
+          <template #trigger="{ toggle }">
+            <button
+              type="button"
+              class="board-trigger"
+              aria-label="گروه فعالیت"
+              :title="currentBoard?.name"
+              @click.stop="toggle"
+            >
+              <UiIcon name="layers" :size="14" />
+              <span>{{ currentBoard?.name ?? 'گروه' }}</span>
+              <UiIcon name="chevron" :size="13" class="board-chev" />
+            </button>
+          </template>
+          <button
+            v-for="b in boards"
+            :key="b.id"
             type="button"
-            aria-label="ویرایش گروه"
-            title="ویرایش گروه"
-            @click="openEditBoard"
+            :class="{ on: b.id === board }"
+            @click="setBoard(b.id)"
           >
-            <UiIcon name="pencil" :size="14" />
-          </UiButton>
-          <UiButton
-            v-if="canManageStages"
-            variant="ghost"
-            size="sm"
-            type="button"
-            @click="openCreateBoard"
-          >
-            <UiIcon name="plus" :size="14" />
-            گروه جدید
-          </UiButton>
-        </div>
+            {{ b.name }}
+          </button>
+          <template v-if="canManageStages">
+            <hr class="board-menu-sep" />
+            <button type="button" class="board-menu-action" @click="openCreateBoard">
+              <UiIcon name="plus" :size="14" />
+              گروه جدید
+            </button>
+            <button type="button" class="board-menu-action" @click="openEditBoard">
+              <UiIcon name="pencil" :size="14" />
+              ویرایش این گروه
+            </button>
+          </template>
+        </UiDropdownMenu>
         <UiButton
           v-if="canManageStages"
           variant="ghost"
@@ -1817,15 +1826,50 @@ h1 {
   margin-inline-start: auto;
 }
 
-.board-picker {
-  display: flex;
+.board-trigger {
+  display: inline-flex;
   align-items: center;
-  gap: 0.35rem;
+  gap: 0.4rem;
+  height: 30px;
+  max-width: 14rem;
+  padding: 0 0.6rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface, #fff);
+  color: var(--ink, #0f172a);
+  font: inherit;
+  font-size: 0.82rem;
+  font-weight: 700;
+  cursor: pointer;
 }
 
-.board-picker .ui-select {
-  width: auto;
-  min-width: 10rem;
+.board-trigger:hover {
+  border-color: var(--accent, #0d9488);
+}
+
+.board-trigger span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.board-chev {
+  color: var(--muted);
+  transform: rotate(-90deg);
+}
+
+.board-menu-sep {
+  margin: 0.25rem 0;
+  border: 0;
+  border-top: 1px solid var(--line, #e2e8f0);
+}
+
+.board-menu-action {
+  display: flex !important;
+  align-items: center;
+  gap: 0.4rem;
+  color: var(--accent-deep, #0f766e) !important;
 }
 
 .board-form {