From 0c7eaac16ef2aa71121d7f9c3924725e26fc389f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Mon, 19 Jan 2026 17:26:27 +0100
Subject: [PATCH] feat(ui): add project filter/sort support (#8689)

---
 .../ui/client/components/FilterStatus.vue     |  19 ++-
 .../client/components/explorer/Explorer.vue   | 120 +++++++++++++++++-
 .../ui/client/composables/client/index.ts     |   2 +
 .../ui/client/composables/explorer/filter.ts  |  12 +-
 .../ui/client/composables/explorer/search.ts  |  59 ++++++++-
 .../ui/client/composables/explorer/state.ts   |  16 ++-
 .../ui/client/composables/explorer/types.ts   |   5 +
 .../ui/client/composables/explorer/utils.ts   |  23 +++-
 8 files changed, 236 insertions(+), 20 deletions(-)

diff --git a/packages/ui/client/components/FilterStatus.vue b/packages/ui/client/components/FilterStatus.vue
index 12ea58b12..da9d8a2a7 100644
--- a/packages/ui/client/components/FilterStatus.vue
+++ b/packages/ui/client/components/FilterStatus.vue
@@ -1,13 +1,25 @@
 <script setup lang="ts">
-defineProps<{ label: string }>()
+const { disabled = false } = defineProps<{
+  label: string
+  disabled?: boolean
+}>()
 const modelValue = defineModel<boolean | null>()
+
+function toggle() {
+  if (disabled) {
+    return
+  }
+
+  modelValue.value = !modelValue.value
+}
 </script>
 
 <template>
   <label
-    class="font-light text-sm checkbox flex items-center cursor-pointer py-1 text-sm w-full gap-y-1 mb-1px"
+    class="font-light text-sm checkbox flex items-center py-1 text-sm w-full gap-y-1 mb-1px"
+    :class="disabled ? 'cursor-not-allowed op50' : 'cursor-pointer'"
     v-bind="$attrs"
-    @click.prevent="modelValue = !modelValue"
+    @click.prevent="toggle"
   >
     <span
       :class="[
@@ -19,6 +31,7 @@ const modelValue = defineModel<boolean | null>()
     <input
       v-model="modelValue"
       type="checkbox"
+      :disabled="disabled"
       sr-only
     >
     <span flex-1 ms-2 select-none>{{ label }}</span>
diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index 15abf05d9..b415ec28a 100644
--- a/packages/ui/client/components/explorer/Explorer.vue
+++ b/packages/ui/client/components/explorer/Explorer.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
 import type { File, Task } from '@vitest/runner'
 import { useResizeObserver } from '@vueuse/core'
-
 import { hideAllPoppers } from 'floating-vue'
-
 import { computed, ref } from 'vue'
+
 // @ts-expect-error missing types
 import { RecycleScroller } from 'vue-virtual-scroller'
-
-import { config } from '~/composables/client'
-
+import { availableProjects, config } from '~/composables/client'
 import { useSearch } from '~/composables/explorer/search'
+import { ALL_PROJECTS, projectSort } from '~/composables/explorer/state'
 import { activeFileId } from '~/composables/params'
 import DetailsPanel from '../DetailsPanel.vue'
 import FilterStatus from '../FilterStatus.vue'
@@ -32,6 +30,8 @@ const emit = defineEmits<{
 const includeTaskLocation = computed(() => config.value.includeTaskLocation)
 
 const searchBox = ref<HTMLInputElement | undefined>()
+const selectProjectRef = ref<HTMLSelectElement | undefined>()
+const sortProjectRef = ref<HTMLSelectElement | undefined>()
 
 const {
   initialized,
@@ -47,7 +47,15 @@ const {
   filteredFiles,
   testsTotal,
   uiEntries,
-} = useSearch(searchBox)
+  enableProjects,
+  disableClearProjects,
+  currentProject,
+  currentProjectName,
+  clearProject,
+  disableProjectSort,
+  clearProjectSort,
+  disableClearProjectSort,
+} = useSearch(searchBox, selectProjectRef, sortProjectRef)
 
 const filterClass = ref<string>('grid-cols-2')
 const filterHeaderClass = ref<string>('grid-col-span-2')
@@ -71,6 +79,104 @@ useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
       <div p="2" h-10 flex="~ gap-2" items-center bg-header border="b base">
         <slot name="header" :filtered-files="isFiltered || isFilteredByStatus ? filteredFiles : undefined" />
       </div>
+      <div
+        v-if="enableProjects"
+        p="l3 y2 r2"
+        bg-header
+        border="b-2 base"
+        grid="~ cols-[auto_auto_minmax(0,1fr)_auto] gap-x-2 gap-y-1"
+        items-center
+      >
+        <!-- Row 1 -->
+        <div class="i-carbon:workspace" flex-shrink-0 />
+        <label for="project-select" text-sm>
+          Projects
+        </label>
+        <div class="relative flex-1">
+          <select
+            id="project-select"
+            ref="selectProjectRef"
+            v-model="currentProject"
+            w-full
+            appearance-none
+            bg-base
+            text-base
+            border="~ base rounded"
+            pl-2
+            pr-8
+            py-1
+            text-sm
+            cursor-pointer
+            hover:bg-active
+            class="outline-none"
+          >
+            <option :value="ALL_PROJECTS" class="text-base bg-base">
+              All Projects
+            </option>
+            <option
+              v-for="project in availableProjects"
+              :key="project"
+              :value="project"
+              class="text-base bg-base"
+            >
+              {{ project }}
+            </option>
+          </select>
+          <div class="i-carbon:chevron-down absolute right-2 top-1/2 op50 -translate-y-1/2 pointer-events-none" />
+        </div>
+
+        <IconButton
+          v-tooltip.bottom="'Clear project filter'"
+          :disabled="disableClearProjects"
+          title="Clear project filter"
+          icon="i-carbon:filter-remove"
+          @click.passive="clearProject(true)"
+        />
+
+        <!-- Row 2 -->
+        <div class="i-carbon:arrows-vertical" flex-shrink-0 />
+        <label for="project-sort" text-sm>
+          Sort by
+        </label>
+        <div class="relative flex-1" :class="{ 'op-50 cursor-not-allowed': disableProjectSort }">
+          <select
+            id="project-sort"
+            ref="sortProjectRef"
+            v-model="projectSort"
+            w-full
+            appearance-none
+            bg-base
+            text-base
+            border="~ base rounded"
+            pl-2
+            pr-8
+            py-1
+            text-sm
+            cursor-pointer
+            hover:bg-active
+            class="outline-none"
+            :disabled="disableProjectSort"
+          >
+            <option value="default" class="text-base bg-base">
+              Default
+            </option>
+            <option value="asc" class="text-base bg-base">
+              Project A-Z
+            </option>
+            <option value="desc" class="text-base bg-base">
+              Project Z-A
+            </option>
+          </select>
+          <div class="i-carbon:chevron-down absolute right-2 top-1/2 op50 -translate-y-1/2 pointer-events-none" />
+        </div>
+        <IconButton
+          v-tooltip.bottom="'Reset sort'"
+          :disabled="disableClearProjectSort"
+          title="Reset sort"
+          icon="i-carbon:filter-reset"
+          @click.passive="clearProjectSort(true)"
+        />
+      </div>
       <div
         p="l3 y2 r2"
         flex="~ gap-2"
@@ -149,7 +255,7 @@ useResizeObserver(() => testExplorerRef.value, ([{ contentRect }]) => {
           </div>
         </template>
         <!-- empty-state -->
-        <template v-if="(isFiltered || isFilteredByStatus) && uiEntries.length === 0">
+        <template v-if="(isFiltered || isFilteredByStatus || !!currentProjectName) && uiEntries.length === 0">
           <div v-if="initialized" flex="~ col" items-center p="x4 y4" font-light>
             <div op30>
               No matched test
diff --git a/packages/ui/client/composables/client/index.ts b/packages/ui/client/composables/client/index.ts
index 039bd6a22..365ccbbd9 100644
--- a/packages/ui/client/composables/client/index.ts
+++ b/packages/ui/client/composables/client/index.ts
@@ -69,6 +69,7 @@ export const client = (function createVitestClient() {
 
 export const config = shallowRef<SerializedConfig>({} as any)
 export const status = ref<WebSocketStatus>('CONNECTING')
+export const availableProjects = shallowRef<string[]>([])
 
 export const current = computed(() => {
   const currentFileId = activeFileId.value
@@ -184,6 +185,7 @@ watch(
           return file
         })
       }
+      availableProjects.value = projects.map(p => p.name)
       explorerTree.loadFiles(files, projects)
       client.state.collectFiles(files)
       explorerTree.startRun()
diff --git a/packages/ui/client/composables/explorer/filter.ts b/packages/ui/client/composables/explorer/filter.ts
index 06b920365..bfaf61d80 100644
--- a/packages/ui/client/composables/explorer/filter.ts
+++ b/packages/ui/client/composables/explorer/filter.ts
@@ -2,12 +2,12 @@ import type { Task } from '@vitest/runner'
 import type { FileTreeNode, Filter, FilterResult, ParentTreeNode, UITaskTreeNode } from '~/composables/explorer/types'
 import { client, findById } from '~/composables/client'
 import { explorerTree } from '~/composables/explorer/index'
-import { filteredFiles, uiEntries } from '~/composables/explorer/state'
+import { currentProjectName, filteredFiles, projectSort, uiEntries } from '~/composables/explorer/state'
 import {
+  getSortedRootTasks,
   isFileNode,
   isParentNode,
   isTestNode,
-  sortedRootTasks,
 } from '~/composables/explorer/utils'
 import { caseInsensitiveMatch } from '~/utils/task'
 
@@ -36,7 +36,13 @@ export function* filterAll(
   search: string,
   filter: Filter,
 ) {
-  for (const node of sortedRootTasks()) {
+  const project = currentProjectName.value
+  const tasks = getSortedRootTasks(projectSort.value)
+
+  for (const node of tasks) {
+    if (project && node.projectName !== project) {
+      continue
+    }
     yield* filterNode(node, search, filter)
   }
 }
diff --git a/packages/ui/client/composables/explorer/search.ts b/packages/ui/client/composables/explorer/search.ts
index 2fcff3f82..eea95717e 100644
--- a/packages/ui/client/composables/explorer/search.ts
+++ b/packages/ui/client/composables/explorer/search.ts
@@ -1,21 +1,32 @@
 import type { Ref } from 'vue'
+import type { ProjectSortUIType } from '~/composables/explorer/types'
 import { debouncedWatch } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import { explorerTree } from '~/composables/explorer'
 import {
+  ALL_PROJECTS,
+  currentProject,
+  currentProjectName,
+  disableClearProjects,
+  enableProjects,
   filter,
   filteredFiles,
   initialized,
   isFiltered,
   isFilteredByStatus,
   openedTreeItems,
+  projectSort,
   search,
   testsTotal,
   treeFilter,
   uiEntries,
 } from './state'
 
-export function useSearch(searchBox: Ref<HTMLDivElement | undefined>) {
+export function useSearch(
+  searchBox: Ref<HTMLInputElement | undefined>,
+  selectProject: Ref<HTMLSelectElement | undefined>,
+  sortProject: Ref<HTMLSelectElement | undefined>,
+) {
   const disableFilter = computed(() => {
     if (isFilteredByStatus.value) {
       return false
@@ -23,8 +34,11 @@ export function useSearch(searchBox: Ref<HTMLDivElement | undefined>) {
 
     return !filter.onlyTests
   })
+
   const disableClearSearch = computed(() => search.value === '')
   const debouncedSearch = ref(search.value)
+  const disableProjectSort = computed(() => currentProject.value !== ALL_PROJECTS)
+  const disableClearProjectSort = computed(() => disableProjectSort.value || projectSort.value === 'default')
 
   debouncedWatch(() => search.value, (value) => {
     debouncedSearch.value = value?.trim() ?? ''
@@ -47,9 +61,25 @@ export function useSearch(searchBox: Ref<HTMLDivElement | undefined>) {
     }
   }
 
+  function clearProject(focus: boolean) {
+    currentProject.value = ALL_PROJECTS
+    if (focus) {
+      selectProject.value?.focus()
+    }
+  }
+
+  function clearProjectSort(focus: boolean) {
+    projectSort.value = 'default'
+    if (focus) {
+      sortProject.value?.focus()
+    }
+  }
+
   function clearAll() {
     clearFilter(false)
     clearSearch(true)
+    clearProject(false)
+    clearProjectSort(false)
   }
 
   function updateFilterStorage(
@@ -58,6 +88,8 @@ export function useSearch(searchBox: Ref<HTMLDivElement | undefined>) {
     successValue: boolean,
     skippedValue: boolean,
     onlyTestsValue: boolean,
+    projectValue: string,
+    projectSortValue: ProjectSortUIType,
   ) {
     if (!initialized.value) {
       return
@@ -68,6 +100,8 @@ export function useSearch(searchBox: Ref<HTMLDivElement | undefined>) {
     treeFilter.value.success = successValue
     treeFilter.value.skipped = skippedValue
     treeFilter.value.onlyTests = onlyTestsValue
+    treeFilter.value.project = projectValue
+    treeFilter.value.projectSort = projectSortValue === 'default' ? undefined : projectSortValue
   }
 
   watch(
@@ -77,9 +111,19 @@ export function useSearch(searchBox: Ref<HTMLDivElement | undefined>) {
       filter.success,
       filter.skipped,
       filter.onlyTests,
+      currentProject.value,
+      projectSort.value,
     ] as const,
-    ([search, failed, success, skipped, onlyTests]) => {
-      updateFilterStorage(search, failed, success, skipped, onlyTests)
+    ([search, failed, success, skipped, onlyTests, project, projectSort]) => {
+      updateFilterStorage(
+        search,
+        failed,
+        success,
+        skipped,
+        onlyTests,
+        project,
+        projectSort,
+      )
       explorerTree.filterNodes()
     },
     { flush: 'post' },
@@ -105,5 +149,14 @@ export function useSearch(searchBox: Ref<HTMLDivElement | undefined>) {
     filteredFiles,
     testsTotal,
     uiEntries,
+    enableProjects,
+    disableClearProjects,
+    currentProject,
+    currentProjectName,
+    clearProject,
+    projectSort,
+    disableProjectSort,
+    clearProjectSort,
+    disableClearProjectSort,
   }
 }
diff --git a/packages/ui/client/composables/explorer/state.ts b/packages/ui/client/composables/explorer/state.ts
index c94d87e14..c3f2429f4 100644
--- a/packages/ui/client/composables/explorer/state.ts
+++ b/packages/ui/client/composables/explorer/state.ts
@@ -1,7 +1,8 @@
 import type { File } from '@vitest/runner'
-import type { FileTreeNode, Filter, FilteredTests, TreeFilterState, UITaskTreeNode } from './types'
+import type { FileTreeNode, Filter, FilteredTests, ProjectSortUIType, TreeFilterState, UITaskTreeNode } from './types'
 import { useLocalStorage } from '@vueuse/core'
 import { computed, reactive, ref, shallowRef } from 'vue'
+import { availableProjects } from '~/composables/client'
 import { explorerTree } from './index'
 
 export const uiFiles = shallowRef<FileTreeNode[]>([])
@@ -11,6 +12,7 @@ export const openedTreeItems = useLocalStorage<string[]>(
   [],
   { shallow: true },
 )
+export const ALL_PROJECTS = '__vitest_ui_all_projects__'
 export const openedTreeItemsSet = computed(() => new Set(openedTreeItems.value))
 export const treeFilter = useLocalStorage<TreeFilterState>(
   'vitest-ui_task-tree-filter',
@@ -21,8 +23,17 @@ export const treeFilter = useLocalStorage<TreeFilterState>(
     skipped: false,
     onlyTests: false,
     search: '',
+    project: ALL_PROJECTS,
+    projectSort: undefined,
   },
 )
+export const projectSort = ref<ProjectSortUIType>(treeFilter.value.projectSort || 'default')
+export const currentProject = shallowRef(treeFilter.value?.project || ALL_PROJECTS)
+export const enableProjects = computed(() => availableProjects.value.length > 1)
+export const disableClearProjects = computed(() => currentProject.value === ALL_PROJECTS)
+export const currentProjectName = computed(() => {
+  return !enableProjects.value || currentProject.value === ALL_PROJECTS ? undefined : currentProject.value
+})
 export const search = ref<string>(treeFilter.value.search)
 const htmlEntities: Record<string, string> = {
   '&': '&amp;',
@@ -75,6 +86,7 @@ export const shouldShowExpandAll = computed(() => {
 export const testsTotal = computed<FilteredTests>(() => {
   const filtered = isFiltered.value
   const filteredByStatus = isFilteredByStatus.value
+  const project = currentProjectName.value
   const onlyTests = filter.onlyTests
   const failed = explorerTree.summary.filesFailed
   const success = explorerTree.summary.filesSuccess
@@ -82,7 +94,7 @@ export const testsTotal = computed<FilteredTests>(() => {
   const running = explorerTree.summary.filesRunning
   const files = filteredFiles.value
   return explorerTree.collectTestsTotal(
-    filtered || filteredByStatus,
+    filtered || filteredByStatus || !!project,
     onlyTests,
     files,
     {
diff --git a/packages/ui/client/composables/explorer/types.ts b/packages/ui/client/composables/explorer/types.ts
index 0544676b9..f35a1acde 100644
--- a/packages/ui/client/composables/explorer/types.ts
+++ b/packages/ui/client/composables/explorer/types.ts
@@ -71,9 +71,14 @@ export interface Filter {
   onlyTests: boolean
 }
 
+export type ProjectSortType = 'asc' | 'desc'
+export type ProjectSortUIType = ProjectSortType | 'default'
+
 export interface TreeFilterState extends Filter {
   search: string
   expandAll?: boolean
+  project?: string
+  projectSort?: ProjectSortType
 }
 
 export interface CollectorInfo {
diff --git a/packages/ui/client/composables/explorer/utils.ts b/packages/ui/client/composables/explorer/utils.ts
index 1cf78a721..74373ebfe 100644
--- a/packages/ui/client/composables/explorer/utils.ts
+++ b/packages/ui/client/composables/explorer/utils.ts
@@ -2,6 +2,7 @@ import type { File, Task } from '@vitest/runner'
 import type {
   FileTreeNode,
   ParentTreeNode,
+  ProjectSortUIType,
   SuiteTreeNode,
   TestTreeNode,
   UITaskTreeNode,
@@ -32,10 +33,28 @@ export function isParentNode(node: UITaskTreeNode): node is FileTreeNode | Suite
   return node.type === 'file' || node.type === 'suite'
 }
 
-export function sortedRootTasks(tasks = explorerTree.root.tasks) {
-  return tasks.sort((a, b) => {
+export function getSortedRootTasks(sort: ProjectSortUIType, tasks = explorerTree.root.tasks) {
+  const sorted = [...tasks]
+
+  sorted.sort((a, b) => {
+    if (sort === 'asc' || sort === 'desc') {
+      const projectA = a.projectName || ''
+      const projectB = b.projectName || ''
+      if (projectA !== projectB) {
+        if (sort === 'asc') {
+          return projectA.localeCompare(projectB)
+        }
+        else {
+          return projectB.localeCompare(projectA)
+        }
+      }
+    }
+    // Default sort (by filepath, then project) is the fallback for project sort
+    // and the primary for default sort
     return `${a.filepath}:${a.projectName}`.localeCompare(`${b.filepath}:${b.projectName}`)
   })
+
+  return sorted
 }
 
 export function createOrUpdateFileNode(
-- 
2.51.2