From 1feee48284dd905bc497a1c4be383dc272637223 Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Fri, 14 Nov 2025 12:00:46 +0900
Subject: [PATCH] [feat] Add search functionality to Media Asset Panel (#6691)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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>
---
 .../sidebar/tabs/AssetSidebarTemplate.vue     |  2 +-
 .../sidebar/tabs/AssetsSidebarTab.vue         | 25 ++++++++++++-
 src/locales/en/main.json                      |  1 +
 .../composables/useMediaAssetFiltering.ts     | 37 +++++++++++++++++++
 4 files changed, 62 insertions(+), 3 deletions(-)
 create mode 100644 src/platform/assets/composables/useMediaAssetFiltering.ts

diff --git a/src/components/sidebar/tabs/AssetSidebarTemplate.vue b/src/components/sidebar/tabs/AssetSidebarTemplate.vue
index 6e139f7a6..97f75d13d 100644
--- a/src/components/sidebar/tabs/AssetSidebarTemplate.vue
+++ b/src/components/sidebar/tabs/AssetSidebarTemplate.vue
@@ -10,7 +10,7 @@
       >
         <slot name="top" />
       </div>
-      <div v-if="slots.header" class="px-4">
+      <div v-if="slots.header" class="px-4 pb-4">
         <slot name="header" />
       </div>
     </div>
diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index 5be48cbf3..23862e45d 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -39,6 +39,14 @@
         <Tab value="input">{{ $t('sideToolbar.labels.imported') }}</Tab>
         <Tab value="output">{{ $t('sideToolbar.labels.generated') }}</Tab>
       </TabList>
+      <!-- Search Bar -->
+      <div class="pt-2">
+        <SearchBox
+          v-model="searchQuery"
+          :placeholder="$t('sideToolbar.searchAssets')"
+          size="lg"
+        />
+      </div>
     </template>
     <template #body>
       <!-- Loading state -->
@@ -66,7 +74,7 @@
           :grid-style="{
             display: 'grid',
             gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
-            padding: '0.5rem',
+            padding: '0 0.5rem',
             gap: '0.5rem'
           }"
           @approach-end="handleApproachEnd"
@@ -157,6 +165,7 @@ import IconTextButton from '@/components/button/IconTextButton.vue'
 import TextButton from '@/components/button/TextButton.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
+import SearchBox from '@/components/input/SearchBox.vue'
 import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
 import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
@@ -165,6 +174,7 @@ import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
 import { useMediaAssets } from '@/platform/assets/composables/media/useMediaAssets'
 import { useAssetSelection } from '@/platform/assets/composables/useAssetSelection'
 import { useMediaAssetActions } from '@/platform/assets/composables/useMediaAssetActions'
+import { useMediaAssetFiltering } from '@/platform/assets/composables/useMediaAssetFiltering'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { ResultItemImpl } from '@/stores/queueStore'
@@ -228,13 +238,21 @@ const currentGalleryAssetId = ref<string | null>(null)
 
 const folderAssets = ref<AssetItem[]>([])
 
-const displayAssets = computed(() => {
+// Base assets before search filtering
+const baseAssets = computed(() => {
   if (isInFolderView.value) {
     return folderAssets.value
   }
   return mediaAssets.value
 })
 
+// Use media asset filtering composable
+const { searchQuery, filteredAssets } = useMediaAssetFiltering(baseAssets)
+
+const displayAssets = computed(() => {
+  return filteredAssets.value
+})
+
 watch(displayAssets, (newAssets) => {
   if (currentGalleryAssetId.value && galleryActiveIndex.value !== -1) {
     const newIndex = newAssets.findIndex(
@@ -293,6 +311,8 @@ watch(
   activeTab,
   () => {
     clearSelection()
+    // Clear search when switching tabs
+    searchQuery.value = ''
     // Reset pagination state when tab changes
     void refreshAssets()
   },
@@ -350,6 +370,7 @@ const exitFolderView = () => {
   folderPromptId.value = null
   folderExecutionTime.value = undefined
   folderAssets.value = []
+  searchQuery.value = ''
   clearSelection()
 }
 
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index d9f04ca4c..3e5f67f08 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -620,6 +620,7 @@
     "assets": "Assets",
     "mediaAssets": "Media Assets",
     "backToAssets": "Back to all assets",
+    "searchAssets": "Search assets...",
     "labels": {
       "queue": "Queue",
       "nodes": "Nodes",
diff --git a/src/platform/assets/composables/useMediaAssetFiltering.ts b/src/platform/assets/composables/useMediaAssetFiltering.ts
new file mode 100644
index 000000000..d15abe1ed
--- /dev/null
+++ b/src/platform/assets/composables/useMediaAssetFiltering.ts
@@ -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
+  }
+}