From 679a7186fb03830c5ad30303daeff83ca53b69d4 Mon Sep 17 00:00:00 2001
From: wucm667 <stevenwucongmin@gmail.com>
Date: Sun, 4 Oct 2026 08:43:47 +0800
Subject: [PATCH] feat(accounts): compact account search and filters

---
 .../admin/account/AccountTableFilters.vue     |  51 ++++--
 .../__tests__/AccountTableFilters.spec.ts     | 149 ++++++++++++++++++
 .../src/i18n/locales/en/admin/accounts.ts     |   2 +
 .../src/i18n/locales/zh/admin/accounts.ts     |   2 +
 frontend/src/views/admin/AccountsView.vue     |   1 +
 5 files changed, 191 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/components/admin/account/__tests__/AccountTableFilters.spec.ts

diff --git a/frontend/src/components/admin/account/AccountTableFilters.vue b/frontend/src/components/admin/account/AccountTableFilters.vue
index 9e48be822b..ea3d01e282 100644
--- a/frontend/src/components/admin/account/AccountTableFilters.vue
+++ b/frontend/src/components/admin/account/AccountTableFilters.vue
@@ -1,26 +1,49 @@
 <template>
-  <div class="flex flex-wrap items-center gap-3">
-    <SearchInput
-      :model-value="searchQuery"
-      :placeholder="t('admin.accounts.searchAccounts')"
-      class="w-full sm:w-64"
-      @update:model-value="$emit('update:searchQuery', $event)"
-      @search="$emit('change')"
-    />
-    <Select :model-value="filters.platform" class="w-40" :options="pOpts" @update:model-value="updatePlatform" @change="$emit('change')" />
-    <Select :model-value="filters.type" class="w-40" :options="tOpts" @update:model-value="updateType" @change="$emit('change')" />
-    <Select :model-value="filters.status" class="w-40" :options="sOpts" @update:model-value="updateStatus" @change="$emit('change')" />
-    <Select :model-value="filters.privacy_mode" class="w-40" :options="privacyOpts" @update:model-value="updatePrivacyMode" @change="$emit('change')" />
-    <Select :model-value="filters.group" class="w-40" :options="gOpts" @update:model-value="updateGroup" @change="$emit('change')" />
+  <div class="min-w-0 w-full space-y-2">
+    <div class="grid grid-cols-2 items-center gap-2 sm:flex sm:flex-wrap">
+      <SearchInput
+        :model-value="searchQuery"
+        :placeholder="t('admin.accounts.searchAccounts')"
+        class="col-span-2 min-w-0 w-full sm:w-56"
+        @update:model-value="$emit('update:searchQuery', $event)"
+        @search="$emit('change')"
+      />
+      <Select :model-value="filters.platform" :aria-label="t('admin.accounts.allPlatforms')" class="min-w-0 w-full sm:w-36" :options="pOpts" @update:model-value="updatePlatform" @change="$emit('change')" />
+      <Select :model-value="filters.status" :aria-label="t('admin.accounts.allStatus')" class="min-w-0 w-full sm:w-36" :options="sOpts" @update:model-value="updateStatus" @change="$emit('change')" />
+      <button
+        type="button"
+        class="btn btn-secondary col-span-2 min-w-0 w-full sm:w-auto"
+        :aria-expanded="moreFiltersOpen"
+        :aria-controls="moreFiltersId"
+        :aria-label="activeSecondaryCount ? t('admin.accounts.moreFiltersActive', { count: activeSecondaryCount }) : t('admin.accounts.moreFilters')"
+        @click="moreFiltersOpen = !moreFiltersOpen"
+      >
+        {{ t('admin.accounts.moreFilters') }}
+        <span v-if="activeSecondaryCount" aria-hidden="true" class="rounded-full bg-primary-100 px-2 text-xs font-medium text-primary-700 dark:bg-primary-900/40 dark:text-primary-300">{{ activeSecondaryCount }}</span>
+      </button>
+    </div>
+    <div v-show="moreFiltersOpen" :id="moreFiltersId" class="grid min-w-0 grid-cols-1 gap-2 sm:grid-cols-3">
+      <Select :model-value="filters.type" :aria-label="t('admin.accounts.allTypes')" class="min-w-0 w-full" :options="tOpts" @update:model-value="updateType" @change="$emit('change')" />
+      <Select :model-value="filters.privacy_mode" :aria-label="t('admin.accounts.allPrivacyModes')" class="min-w-0 w-full" :options="privacyOpts" @update:model-value="updatePrivacyMode" @change="$emit('change')" />
+      <Select :model-value="filters.group" :aria-label="t('admin.accounts.allGroups')" class="min-w-0 w-full" :options="gOpts" @update:model-value="updateGroup" @change="$emit('change')" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'; import { useI18n } from 'vue-i18n'; import Select from '@/components/common/Select.vue'; import SearchInput from '@/components/common/SearchInput.vue'
+import { computed, ref, useId } from 'vue'; import { useI18n } from 'vue-i18n'; import Select from '@/components/common/Select.vue'; import SearchInput from '@/components/common/SearchInput.vue'
 import type { AdminGroup } from '@/types'
 import { CONCRETE_PLATFORM_OPTIONS } from '@/constants/platforms'
 const props = defineProps<{ searchQuery: string; filters: Record<string, any>; groups?: AdminGroup[] }>()
 const emit = defineEmits(['update:searchQuery', 'update:filters', 'change']); const { t } = useI18n()
+const moreFiltersOpen = ref(false)
+const moreFiltersId = useId()
+const activeSecondaryCount = computed(() =>
+  ['type', 'privacy_mode', 'group'].filter(key => {
+    const value = props.filters[key]
+    return value !== '' && value !== null && value !== undefined
+  }).length
+)
 const updatePlatform = (value: string | number | boolean | null) => { emit('update:filters', { ...props.filters, platform: value }) }
 const updateType = (value: string | number | boolean | null) => { emit('update:filters', { ...props.filters, type: value }) }
 const updateStatus = (value: string | number | boolean | null) => { emit('update:filters', { ...props.filters, status: value }) }
diff --git a/frontend/src/components/admin/account/__tests__/AccountTableFilters.spec.ts b/frontend/src/components/admin/account/__tests__/AccountTableFilters.spec.ts
new file mode 100644
index 0000000000..40bac359b6
--- /dev/null
+++ b/frontend/src/components/admin/account/__tests__/AccountTableFilters.spec.ts
@@ -0,0 +1,149 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { enableAutoUnmount, mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import AccountTableFilters from '../AccountTableFilters.vue'
+import Select from '@/components/common/Select.vue'
+import SearchInput from '@/components/common/SearchInput.vue'
+import { CONCRETE_PLATFORM_OPTIONS } from '@/constants/platforms'
+import type { AdminGroup } from '@/types'
+
+vi.mock('vue-i18n', async () => {
+  const actual = await vi.importActual<typeof import('vue-i18n')>('vue-i18n')
+  return {
+    ...actual,
+    useI18n: () => ({
+      t: (key: string, params?: { count: number }) => params ? `${key} (${params.count})` : key
+    })
+  }
+})
+
+const defaultFilters = () => ({
+  platform: '', type: '', status: '', privacy_mode: '', group: '',
+  search: 'existing search', lite: '1', sort_by: 'priority', sort_order: 'asc'
+})
+
+function mountFilters(filters: Record<string, unknown> = defaultFilters()) {
+  return mount(AccountTableFilters, {
+    attachTo: document.body,
+    props: {
+      searchQuery: 'existing search', filters,
+      groups: [{ id: 42, name: 'A very long group name' } as AdminGroup]
+    },
+    global: { stubs: { Teleport: true } }
+  })
+}
+
+enableAutoUnmount(afterEach)
+afterEach(() => {
+  vi.useRealTimers()
+  document.body.innerHTML = ''
+})
+
+describe('AccountTableFilters', () => {
+  it('toggles an accessible secondary panel without emitting changes or clearing filters', async () => {
+    const filters = { ...defaultFilters(), type: 'bedrock', privacy_mode: '__unset__', group: 'ungrouped' }
+    const wrapper = mountFilters(filters)
+    const toggle = wrapper.get('button[aria-controls]')
+    const panel = wrapper.get(`[id="${toggle.attributes('aria-controls')}"]`)
+
+    expect(toggle.attributes('type')).toBe('button')
+    expect(toggle.attributes('aria-expanded')).toBe('false')
+    expect(panel.isVisible()).toBe(false)
+    expect(wrapper.findAllComponents(Select).filter(select => select.isVisible())).toHaveLength(2)
+    await toggle.trigger('click')
+    expect(toggle.attributes('aria-expanded')).toBe('true')
+    expect(panel.isVisible()).toBe(true)
+    expect(wrapper.findAllComponents(Select).every(select => select.isVisible())).toBe(true)
+    await toggle.trigger('click')
+    expect(panel.isVisible()).toBe(false)
+    await toggle.trigger('click')
+    expect(wrapper.props('filters')).toEqual(filters)
+    expect(wrapper.emitted('update:filters')).toBeUndefined()
+    expect(wrapper.emitted('change')).toBeUndefined()
+    wrapper.unmount()
+  })
+
+  it('indicates active secondary filters while collapsed and reacts to external resets', async () => {
+    const wrapper = mountFilters({ ...defaultFilters(), platform: 'openai', status: 'active' })
+    const toggle = wrapper.get('button[aria-controls]')
+    expect(toggle.find('span').exists()).toBe(false)
+    for (const [filters, count] of [
+      [{ type: 'oauth', privacy_mode: '', group: '' }, 1],
+      [{ type: 'setup-token', privacy_mode: '__unset__', group: 'ungrouped' }, 3],
+      [{ type: '', privacy_mode: 'training_off', group: '42' }, 2]
+    ] as const) {
+      await wrapper.setProps({ filters: { ...defaultFilters(), ...filters } })
+      expect(toggle.get('span').text()).toBe(String(count))
+      expect(toggle.attributes('aria-label')).toBe(`admin.accounts.moreFiltersActive (${count})`)
+      expect(toggle.attributes('aria-expanded')).toBe('false')
+    }
+    await wrapper.setProps({ filters: { type: null, privacy_mode: undefined, group: '' } })
+    expect(toggle.find('span').exists()).toBe(false)
+    expect(toggle.attributes('aria-label')).toBe('admin.accounts.moreFilters')
+    wrapper.unmount()
+  })
+
+  it('preserves every option and emits a merged filter snapshot plus change for every selection', async () => {
+    const filters = { ...defaultFilters(), platform: 'openai', type: 'oauth', status: 'active', privacy_mode: '__unset__', group: '42' }
+    const wrapper = mountFilters(filters)
+    await wrapper.get('button[aria-controls]').trigger('click')
+    const expectedOptions = [
+      ['platform', ['', ...CONCRETE_PLATFORM_OPTIONS.map(option => option.value)]],
+      ['status', ['', 'active', 'inactive', 'error', 'rate_limited', 'temp_unschedulable', 'unschedulable']],
+      ['type', ['', 'oauth', 'setup-token', 'apikey', 'bedrock']],
+      ['privacy_mode', ['', '__unset__', 'training_off', 'training_set_cf_blocked', 'training_set_failed']],
+      ['group', ['', 'ungrouped', '42']]
+    ] as const
+    let changes = 0
+    for (const [index, [key, values]] of expectedOptions.entries()) {
+      const select = wrapper.findAllComponents(Select)[index]
+      expect(select.props('options').map(option => option.value)).toEqual(values)
+      expect(select.props('modelValue')).toBe(filters[key])
+      expect(select.get('button').attributes('aria-label')).not.toBe('Select option')
+      for (const [optionIndex, value] of values.entries()) {
+        await select.get('button').trigger('click')
+        await select.findAll('[role="option"]')[optionIndex].trigger('click')
+        changes += 1
+        expect(wrapper.emitted('update:filters')?.at(-1)).toEqual([{ ...filters, [key]: value }])
+        expect(wrapper.emitted('change')).toHaveLength(changes)
+        expect(wrapper.props('filters')).toEqual(filters)
+      }
+    }
+    expect(wrapper.findAllComponents(Select)[4].props('options')[2].label).toBe('A very long group name')
+    wrapper.unmount()
+  })
+
+  it('preserves immediate search updates and the debounced search change event', async () => {
+    vi.useFakeTimers()
+    const wrapper = mountFilters()
+    const search = wrapper.getComponent(SearchInput)
+    expect(search.props('modelValue')).toBe('existing search')
+    expect(search.props('placeholder')).toBe('admin.accounts.searchAccounts')
+    await search.get('input').setValue('new search')
+    expect(wrapper.emitted('update:searchQuery')).toEqual([['new search']])
+    expect(wrapper.emitted('change')).toBeUndefined()
+    await vi.advanceTimersByTimeAsync(300)
+    expect(wrapper.emitted('change')).toEqual([[]])
+    expect(wrapper.emitted('update:filters')).toBeUndefined()
+    wrapper.unmount()
+  })
+
+  it('uses shrinkable, wrapping controls and unique panel IDs for multiple instances', () => {
+    const wrapper = mountFilters()
+    expect(wrapper.classes()).toContain('min-w-0')
+    expect(wrapper.get('.grid').classes()).toEqual(expect.arrayContaining(['grid-cols-2', 'sm:flex-wrap']))
+    for (const select of wrapper.findAllComponents(Select)) {
+      expect(select.classes()).toEqual(expect.arrayContaining(['min-w-0', 'w-full']))
+      expect(select.classes()).not.toContain('w-40')
+    }
+    const pair = mount(defineComponent({
+      components: { AccountTableFilters },
+      setup: () => ({ filters: defaultFilters() }),
+      template: '<div><AccountTableFilters search-query="" :filters="filters" /><AccountTableFilters search-query="" :filters="filters" /></div>'
+    }))
+    const toggles = pair.findAll('button[aria-controls]')
+    expect(toggles[0].attributes('aria-controls')).not.toBe(toggles[1].attributes('aria-controls'))
+    wrapper.unmount()
+    pair.unmount()
+  })
+})
diff --git a/frontend/src/i18n/locales/en/admin/accounts.ts b/frontend/src/i18n/locales/en/admin/accounts.ts
index d11d7a9e7f..9f19d1f402 100644
--- a/frontend/src/i18n/locales/en/admin/accounts.ts
+++ b/frontend/src/i18n/locales/en/admin/accounts.ts
@@ -79,6 +79,8 @@ export default {
       editAccount: 'Edit Account',
       deleteAccount: 'Delete Account',
       searchAccounts: 'Search accounts...',
+      moreFilters: 'More filters',
+      moreFiltersActive: 'More filters ({count} active)',
       notes: 'Notes',
       notesPlaceholder: 'Enter notes',
       notesHint: 'Notes are optional',
diff --git a/frontend/src/i18n/locales/zh/admin/accounts.ts b/frontend/src/i18n/locales/zh/admin/accounts.ts
index b002e5d54b..dcdf49c5dc 100644
--- a/frontend/src/i18n/locales/zh/admin/accounts.ts
+++ b/frontend/src/i18n/locales/zh/admin/accounts.ts
@@ -78,6 +78,8 @@ export default {
       editAccount: '编辑账号',
       deleteAccount: '删除账号',
       searchAccounts: '搜索账号...',
+      moreFilters: '更多筛选',
+      moreFiltersActive: '更多筛选（已启用 {count} 项）',
       notes: '备注',
       notesPlaceholder: '请输入备注',
       notesHint: '备注可选',
diff --git a/frontend/src/views/admin/AccountsView.vue b/frontend/src/views/admin/AccountsView.vue
index 2502f2db8c..9b9a4b59a1 100644
--- a/frontend/src/views/admin/AccountsView.vue
+++ b/frontend/src/views/admin/AccountsView.vue
@@ -4,6 +4,7 @@
       <template #filters>
         <div class="flex flex-wrap-reverse items-start justify-between gap-3">
           <AccountTableFilters
+            class="lg:w-auto lg:flex-1"
             v-model:searchQuery="params.search"
             :filters="params"
             :groups="groups"