From fa11568deef780becfb4336f4782443cc848dae0 Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Fri, 14 Nov 2025 17:09:03 +0900
Subject: [PATCH 1/5] feat: Add media type filtering to Media Asset Panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

미디어 애셋 패널에 미디어 타입 필터링 기능을 추가했습니다.
- Image, Video, Audio, 3D 타입별로 멀티 선택 필터링 가능
- MediaAssetFilterButton 및 MediaAssetFilterMenu 컴포넌트 추가
- useMediaAssetFiltering composable에 타입 필터링 로직 구현
- 필터는 검색 및 정렬과 함께 동작

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../sidebar/tabs/AssetsSidebarTab.vue         |  3 +-
 src/locales/en/main.json                      |  7 +-
 .../assets/components/MediaAssetFilterBar.vue | 21 ++++++
 .../components/MediaAssetFilterButton.vue     | 66 +++++++++++++++++++
 .../components/MediaAssetFilterMenu.vue       | 60 +++++++++++++++++
 .../composables/useMediaAssetFiltering.ts     | 17 +++++
 .../assets/schemas/assetMetadataSchema.ts     |  3 +-
 7 files changed, 174 insertions(+), 3 deletions(-)
 create mode 100644 src/platform/assets/components/MediaAssetFilterButton.vue
 create mode 100644 src/platform/assets/components/MediaAssetFilterMenu.vue

diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index 8b8695a593..1f0c3bbef8 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -44,6 +44,7 @@
         v-model:search-query="searchQuery"
         v-model:sort-by="sortBy"
         :show-generation-time-sort="activeTab === 'output'"
+        v-model:media-type-filters="mediaTypeFilters"
       />
     </template>
     <template #body>
@@ -255,7 +256,7 @@ const baseAssets = computed(() => {
 })
 
 // Use media asset filtering composable
-const { searchQuery, sortBy, filteredAssets } =
+const { searchQuery, sortBy, mediaTypeFilters, filteredAssets } =
   useMediaAssetFiltering(baseAssets)
 
 const displayAssets = computed(() => {
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 92e1e08c19..63514a5711 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -623,7 +623,11 @@
       "sortNewestFirst": "Newest first",
       "sortOldestFirst": "Oldest first",
       "sortLongestFirst": "Generation time (longest first)",
-      "sortFastestFirst": "Generation time (fastest first)"
+      "sortFastestFirst": "Generation time (fastest first)",
+      "filterImage": "Image",
+      "filterVideo": "Video",
+      "filterAudio": "Audio",
+      "filter3D": "3D"
     },
     "backToAssets": "Back to all assets",
     "searchAssets": "Search assets...",
@@ -2009,6 +2013,7 @@
     "unknown": "Unknown",
     "fileFormats": "File formats",
     "baseModels": "Base models",
+    "filterBy": "Filter by",
     "sortBy": "Sort by",
     "sortAZ": "A-Z",
     "sortZA": "Z-A",
diff --git a/src/platform/assets/components/MediaAssetFilterBar.vue b/src/platform/assets/components/MediaAssetFilterBar.vue
index c3b5612029..9150162c37 100644
--- a/src/platform/assets/components/MediaAssetFilterBar.vue
+++ b/src/platform/assets/components/MediaAssetFilterBar.vue
@@ -6,6 +6,19 @@
       size="lg"
       @update:model-value="handleSearchChange"
     />
+    <MediaAssetFilterButton
+      v-if="isCloud"
+      v-tooltip.top="{ value: $t('assetBrowser.filterBy') }"
+      size="md"
+    >
+      <template #default="{ close }">
+        <MediaAssetFilterMenu
+          :media-type-filters="mediaTypeFilters"
+          :close="close"
+          @update:media-type-filters="handleMediaTypeFiltersChange"
+        />
+      </template>
+    </MediaAssetFilterButton>
     <AssetSortButton
       v-if="isCloud"
       v-tooltip.top="{ value: $t('assetBrowser.sortBy') }"
@@ -27,6 +40,8 @@
 import SearchBox from '@/components/input/SearchBox.vue'
 import { isCloud } from '@/platform/distribution/types'
 
+import MediaAssetFilterButton from './MediaAssetFilterButton.vue'
+import MediaAssetFilterMenu from './MediaAssetFilterMenu.vue'
 import AssetSortButton from './MediaAssetSortButton.vue'
 import MediaAssetSortMenu from './MediaAssetSortMenu.vue'
 
@@ -34,11 +49,13 @@ const { showGenerationTimeSort = false } = defineProps<{
   searchQuery: string
   sortBy: 'newest' | 'oldest' | 'longest' | 'fastest'
   showGenerationTimeSort?: boolean
+  mediaTypeFilters: string[]
 }>()
 
 const emit = defineEmits<{
   'update:searchQuery': [value: string]
   'update:sortBy': [value: 'newest' | 'oldest' | 'longest' | 'fastest']
+  'update:mediaTypeFilters': [value: string[]]
 }>()
 
 const handleSearchChange = (value: string | undefined) => {
@@ -50,4 +67,8 @@ const handleSortChange = (
 ) => {
   emit('update:sortBy', value)
 }
+
+const handleMediaTypeFiltersChange = (value: string[]) => {
+  emit('update:mediaTypeFilters', value)
+}
 </script>
diff --git a/src/platform/assets/components/MediaAssetFilterButton.vue b/src/platform/assets/components/MediaAssetFilterButton.vue
new file mode 100644
index 0000000000..4d0bcbea3c
--- /dev/null
+++ b/src/platform/assets/components/MediaAssetFilterButton.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="relative inline-flex items-center">
+    <IconButton :size="size" :type="type" @click="toggle">
+      <i class="icon-[lucide--list-filter] text-sm" />
+    </IconButton>
+
+    <Popover
+      ref="popover"
+      :append-to="'body'"
+      :auto-z-index="true"
+      :base-z-index="1000"
+      :dismissable="true"
+      :close-on-escape="true"
+      unstyled
+      :pt="pt"
+      @show="$emit('menuOpened')"
+      @hide="$emit('menuClosed')"
+    >
+      <div class="flex min-w-40 flex-col gap-2 p-2">
+        <slot :close="hide" />
+      </div>
+    </Popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Popover from 'primevue/popover'
+import { computed, ref } from 'vue'
+
+import IconButton from '@/components/button/IconButton.vue'
+import type { BaseButtonProps } from '@/types/buttonTypes'
+import { cn } from '@/utils/tailwindUtil'
+
+interface AssetFilterButtonProps extends BaseButtonProps {}
+
+const popover = ref<InstanceType<typeof Popover>>()
+
+const { size = 'md', type = 'secondary' } =
+  defineProps<AssetFilterButtonProps>()
+
+defineEmits<{
+  menuOpened: []
+  menuClosed: []
+}>()
+
+const toggle = (event: Event) => {
+  popover.value?.toggle(event)
+}
+
+const hide = () => {
+  popover.value?.hide()
+}
+
+const pt = computed(() => ({
+  root: {
+    class: cn('absolute z-50')
+  },
+  content: {
+    class: cn(
+      'mt-1 rounded-lg',
+      'bg-base-background text-base-foreground border border-border-default',
+      'shadow-lg'
+    )
+  }
+}))
+</script>
diff --git a/src/platform/assets/components/MediaAssetFilterMenu.vue b/src/platform/assets/components/MediaAssetFilterMenu.vue
new file mode 100644
index 0000000000..3fe915e0c0
--- /dev/null
+++ b/src/platform/assets/components/MediaAssetFilterMenu.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="flex flex-col gap-0 p-0 m-0">
+    <div
+      v-for="filter in filters"
+      :key="filter.type"
+      class="flex h-10 cursor-pointer items-center gap-2 rounded-lg px-2 hover:bg-neutral-100/50 dark-theme:hover:bg-zinc-700/50"
+      tabindex="0"
+      role="checkbox"
+      :aria-checked="mediaTypeFilters.includes(filter.type)"
+      @click="toggleMediaType(filter.type)"
+      @keydown.enter.prevent="toggleMediaType(filter.type)"
+      @keydown.space.prevent="toggleMediaType(filter.type)"
+    >
+      <div
+        class="flex h-4 w-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
+        :class="
+          mediaTypeFilters.includes(filter.type)
+            ? 'bg-blue-400 dark-theme:border-blue-500 dark-theme:bg-blue-500'
+            : 'bg-neutral-100 dark-theme:bg-zinc-700'
+        "
+      >
+        <i
+          v-if="mediaTypeFilters.includes(filter.type)"
+          class="icon-[lucide--check] text-xs font-bold text-white"
+        />
+      </div>
+      <span class="text-sm">{{ $t(filter.label) }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { mediaTypeFilters } = defineProps<{
+  mediaTypeFilters: string[]
+  close: () => void
+}>()
+
+const emit = defineEmits<{
+  'update:mediaTypeFilters': [value: string[]]
+}>()
+
+const filters = [
+  { type: 'image', label: 'sideToolbar.mediaAssets.filterImage' },
+  { type: 'video', label: 'sideToolbar.mediaAssets.filterVideo' },
+  { type: 'audio', label: 'sideToolbar.mediaAssets.filterAudio' },
+  { type: '3d', label: 'sideToolbar.mediaAssets.filter3D' }
+]
+
+const toggleMediaType = (type: string) => {
+  const isCurrentlySelected = mediaTypeFilters.includes(type)
+  if (isCurrentlySelected) {
+    emit(
+      'update:mediaTypeFilters',
+      mediaTypeFilters.filter((t) => t !== type)
+    )
+  } else {
+    emit('update:mediaTypeFilters', [...mediaTypeFilters, type])
+  }
+}
+</script>
diff --git a/src/platform/assets/composables/useMediaAssetFiltering.ts b/src/platform/assets/composables/useMediaAssetFiltering.ts
index c3f71b0f65..18186c20e4 100644
--- a/src/platform/assets/composables/useMediaAssetFiltering.ts
+++ b/src/platform/assets/composables/useMediaAssetFiltering.ts
@@ -5,6 +5,7 @@ import { computed, ref } from 'vue'
 import type { Ref } from 'vue'
 
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { getMediaTypeFromFilename } from '@/utils/formatUtil'
 
 type SortOption = 'newest' | 'oldest' | 'longest' | 'fastest'
 
@@ -33,6 +34,7 @@ export function useMediaAssetFiltering(assets: Ref<AssetItem[]>) {
   const searchQuery = ref('')
   const debouncedSearchQuery = refDebounced(searchQuery, 50)
   const sortBy = ref<SortOption>('newest')
+  const mediaTypeFilters = ref<string[]>([])
 
   const fuseOptions = {
     keys: ['name'],
@@ -51,6 +53,20 @@ export function useMediaAssetFiltering(assets: Ref<AssetItem[]>) {
     return results.map((result) => result.item)
   })
 
+  const typeFiltered = computed(() => {
+    // Apply media type filter
+    if (mediaTypeFilters.value.length === 0) {
+      return searchFiltered.value
+    }
+
+    return searchFiltered.value.filter((asset) => {
+      const mediaType = getMediaTypeFromFilename(asset.name)
+      // Convert '3D' to '3d' for comparison
+      const normalizedType = mediaType.toLowerCase()
+      return mediaTypeFilters.value.includes(normalizedType)
+    })
+  })
+
   const filteredAssets = computed(() => {
     // Sort by create_time (output assets) or created_at (input assets)
     switch (sortBy.value) {
@@ -77,6 +93,7 @@ export function useMediaAssetFiltering(assets: Ref<AssetItem[]>) {
   return {
     searchQuery,
     sortBy,
+    mediaTypeFilters,
     filteredAssets
   }
 }
diff --git a/src/platform/assets/schemas/assetMetadataSchema.ts b/src/platform/assets/schemas/assetMetadataSchema.ts
index 335e899082..1a9b02f820 100644
--- a/src/platform/assets/schemas/assetMetadataSchema.ts
+++ b/src/platform/assets/schemas/assetMetadataSchema.ts
@@ -1,3 +1,4 @@
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import type { ResultItemImpl } from '@/stores/queueStore'
 
 /**
@@ -10,7 +11,7 @@ export interface OutputAssetMetadata extends Record<string, unknown> {
   subfolder: string
   executionTimeInSeconds?: number
   format?: string
-  workflow?: unknown
+  workflow?: ComfyWorkflowJSON
   outputCount?: number
   allOutputs?: ResultItemImpl[]
 }

From 1f49500015e12c8f1a538780ad3cfc53492b6c81 Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Fri, 14 Nov 2025 17:48:08 +0900
Subject: [PATCH 2/5] fix: Use typeFiltered instead of searchFiltered in sort
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

미디어 타입 필터링이 작동하지 않던 버그 수정.
filteredAssets에서 typeFiltered 대신 searchFiltered를 사용하고 있었음.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../assets/composables/useMediaAssetFiltering.ts       | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/platform/assets/composables/useMediaAssetFiltering.ts b/src/platform/assets/composables/useMediaAssetFiltering.ts
index 18186c20e4..818d166f4b 100644
--- a/src/platform/assets/composables/useMediaAssetFiltering.ts
+++ b/src/platform/assets/composables/useMediaAssetFiltering.ts
@@ -72,21 +72,19 @@ export function useMediaAssetFiltering(assets: Ref<AssetItem[]>) {
     switch (sortBy.value) {
       case 'oldest':
         // Ascending order (oldest first)
-        return sortByUtil(searchFiltered.value, [getAssetTime])
+        return sortByUtil(typeFiltered.value, [getAssetTime])
       case 'longest':
         // Descending order (longest execution time first)
-        return sortByUtil(searchFiltered.value, [
+        return sortByUtil(typeFiltered.value, [
           (asset) => -getAssetExecutionTime(asset)
         ])
       case 'fastest':
         // Ascending order (fastest execution time first)
-        return sortByUtil(searchFiltered.value, [getAssetExecutionTime])
+        return sortByUtil(typeFiltered.value, [getAssetExecutionTime])
       case 'newest':
       default:
         // Descending order (newest first) - negate for descending
-        return sortByUtil(searchFiltered.value, [
-          (asset) => -getAssetTime(asset)
-        ])
+        return sortByUtil(typeFiltered.value, [(asset) => -getAssetTime(asset)])
     }
   })
 

From f25e321906932bbf9bbc91bbe67808d62f54a6fd Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Fri, 14 Nov 2025 17:51:00 +0900
Subject: [PATCH 3/5] docs: Add TODO for reusable Checkbox component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

추후 재사용 가능한 Checkbox 컴포넌트로 리팩토링 예정:
- 네이티브 checkbox를 숨기고 커스텀 스타일 적용
- 시맨틱 토큰 사용
- MediaAssetFilterMenu, MultiSelect, SingleSelect에서 사용

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../assets/components/MediaAssetFilterMenu.vue       | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/platform/assets/components/MediaAssetFilterMenu.vue b/src/platform/assets/components/MediaAssetFilterMenu.vue
index 3fe915e0c0..4127d56cf8 100644
--- a/src/platform/assets/components/MediaAssetFilterMenu.vue
+++ b/src/platform/assets/components/MediaAssetFilterMenu.vue
@@ -1,3 +1,15 @@
+<!--
+TODO: Extract checkbox pattern into reusable Checkbox component
+- Create src/components/input/Checkbox.vue with:
+  - Hidden native <input type="checkbox"> for accessibility
+  - Custom visual styling matching this implementation
+  - Semantic tokens (--primary-background, --input-surface, etc.)
+- Use this Checkbox component in:
+  - MediaAssetFilterMenu.vue (this file)
+  - MultiSelect.vue option template
+  - SingleSelect.vue if needed
+- Benefits: Consistent checkbox UI, better maintainability, reusable design system component
+-->
 <template>
   <div class="flex flex-col gap-0 p-0 m-0">
     <div

From 2827be546fd5f07a81c551481ecca4480832e81e Mon Sep 17 00:00:00 2001
From: GitHub Action <action@github.com>
Date: Sat, 15 Nov 2025 04:01:59 +0000
Subject: [PATCH 4/5] [automated] Apply ESLint and Prettier fixes

---
 src/components/sidebar/tabs/AssetsSidebarTab.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index 1f0c3bbef8..5ffc7cd01c 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -43,8 +43,8 @@
       <MediaAssetFilterBar
         v-model:search-query="searchQuery"
         v-model:sort-by="sortBy"
-        :show-generation-time-sort="activeTab === 'output'"
         v-model:media-type-filters="mediaTypeFilters"
+        :show-generation-time-sort="activeTab === 'output'"
       />
     </template>
     <template #body>

From f4e3801aba8cfd56ca77170d200877efadc06b1c Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Sat, 15 Nov 2025 14:09:32 +0900
Subject: [PATCH 5/5] refactor: color token

---
 .../assets/components/MediaAssetFilterButton.vue       | 10 +++++-----
 .../assets/components/MediaAssetFilterMenu.vue         |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/platform/assets/components/MediaAssetFilterButton.vue b/src/platform/assets/components/MediaAssetFilterButton.vue
index 4d0bcbea3c..f98e2eaf36 100644
--- a/src/platform/assets/components/MediaAssetFilterButton.vue
+++ b/src/platform/assets/components/MediaAssetFilterButton.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="relative inline-flex items-center">
-    <IconButton :size="size" :type="type" @click="toggle">
+    <IconButton :size :type @click="toggle">
       <i class="icon-[lucide--list-filter] text-sm" />
     </IconButton>
 
     <Popover
       ref="popover"
-      :append-to="'body'"
-      :auto-z-index="true"
+      append-to="#vue-app"
+      auto-z-index
       :base-z-index="1000"
-      :dismissable="true"
-      :close-on-escape="true"
+      dismissable
+      close-on-escape
       unstyled
       :pt="pt"
       @show="$emit('menuOpened')"
diff --git a/src/platform/assets/components/MediaAssetFilterMenu.vue b/src/platform/assets/components/MediaAssetFilterMenu.vue
index 4127d56cf8..290b13bd50 100644
--- a/src/platform/assets/components/MediaAssetFilterMenu.vue
+++ b/src/platform/assets/components/MediaAssetFilterMenu.vue
@@ -15,7 +15,7 @@ TODO: Extract checkbox pattern into reusable Checkbox component
     <div
       v-for="filter in filters"
       :key="filter.type"
-      class="flex h-10 cursor-pointer items-center gap-2 rounded-lg px-2 hover:bg-neutral-100/50 dark-theme:hover:bg-zinc-700/50"
+      class="flex h-10 cursor-pointer items-center gap-2 rounded-lg px-2 hover:bg-secondary-background-hover"
       tabindex="0"
       role="checkbox"
       :aria-checked="mediaTypeFilters.includes(filter.type)"
@@ -27,8 +27,8 @@ TODO: Extract checkbox pattern into reusable Checkbox component
         class="flex h-4 w-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
         :class="
           mediaTypeFilters.includes(filter.type)
-            ? 'bg-blue-400 dark-theme:border-blue-500 dark-theme:bg-blue-500'
-            : 'bg-neutral-100 dark-theme:bg-zinc-700'
+            ? 'bg-primary-background border-primary-background'
+            : 'bg-secondary-background'
         "
       >
         <i