[feat] Add search functionality to Media Asset Panel (#6691)

## Summary

Add search functionality to the Media Asset Panel, allowing users to
search for assets by filename.

## Changes

### 1. Search Feature
- Added SearchBox component to AssetsSidebarTab header
- Implemented fuzzy search using Fuse.js
- Works in both Imported and Generated tabs
- Search also available in folder view

### 2. New Composable: `useMediaAssetFiltering`
- Location: `src/platform/assets/composables/useMediaAssetFiltering.ts`
- Encapsulates search logic in a reusable composable
- Extensible structure for future filter and sort features
- Debounced search (50ms)

### 3. UX Improvements
- Search query automatically clears when switching tabs
- Search query automatically clears when exiting folder view

## Testing

-  TypeScript type check passed
-  ESLint/Oxlint passed
-  Lint-staged pre-commit hooks passed

## Modified Files

- `src/components/sidebar/tabs/AssetsSidebarTab.vue` - Added SearchBox
- `src/platform/assets/composables/useMediaAssetFiltering.ts` - New file
- `src/locales/en/main.json` - Added i18n key
(`sideToolbar.searchAssets`)

## Future Plans

- Add filter functionality (file type, date, etc.)
- Add sort functionality
- Switch to server-side search for OSS/Cloud (after Asset API and Job
API release)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6691-feat-Add-search-functionality-to-Media-Asset-Panel-2ab6d73d3650817b8b95f3450179524f)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Jin Yi
2025-11-14 12:00:46 +09:00
committed by GitHub
parent bd6825a274
commit 1feee48284
4 changed files with 62 additions and 3 deletions

View File

@@ -0,0 +1,37 @@
import { refDebounced } from '@vueuse/core'
import Fuse from 'fuse.js'
import { computed, ref } from 'vue'
import type { Ref } from 'vue'
import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
/**
* Media Asset Filtering composable
* Manages search, filter, and sort for media assets
*/
export function useMediaAssetFiltering(assets: Ref<AssetItem[]>) {
const searchQuery = ref('')
const debouncedSearchQuery = refDebounced(searchQuery, 50)
const fuseOptions = {
keys: ['name'],
threshold: 0.4,
includeScore: true
}
const fuse = computed(() => new Fuse(assets.value, fuseOptions))
const filteredAssets = computed(() => {
if (!debouncedSearchQuery.value.trim()) {
return assets.value
}
const results = fuse.value.search(debouncedSearchQuery.value)
return results.map((result) => result.item)
})
return {
searchQuery,
filteredAssets
}
}