From ad6dda443509c54304498523e296eb25c49f4aad Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Fri, 14 Nov 2025 16:09:32 +0900
Subject: [PATCH] feat: Add generation time sort options to Media Asset Panel
 (#6698)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
Add generation time-based sorting options to the Media Asset Panel

## Changes
- **New sorting options**:
  - Generation time (longest first) - Sort by longest execution time
  - Generation time (fastest first) - Sort by shortest execution time

- **Show only in Generated tab**:
- Generation time sorting is only meaningful for output assets with
`executionTimeInSeconds` metadata
  - Implemented conditional rendering via `showGenerationTimeSort` prop

## Technical Details
- `useMediaAssetFiltering.ts`:
  - Added `'longest'` and `'fastest'` to `SortOption` type
  - Added `getAssetExecutionTime` helper function
  - Implemented sorting logic using switch-case pattern

- `MediaAssetSortMenu.vue`:
  - Added `showGenerationTimeSort` prop
- Generation time sort buttons placed inside `<template
v-if="showGenerationTimeSort">`

- `MediaAssetFilterBar.vue`:
- Receives `showGenerationTimeSort` prop and passes it to
`MediaAssetSortMenu`

- `AssetsSidebarTab.vue`:
- Passes `showGenerationTimeSort` prop based on `activeTab === 'output'`

- `src/locales/en/main.json`:
  - Added `sortLongestFirst`: "Generation time (longest first)"
  - Added `sortFastestFirst`: "Generation time (fastest first)"

🤖 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                      |  4 +-
 .../assets/components/MediaAssetFilterBar.vue | 16 ++++----
 .../assets/components/MediaAssetSortMenu.vue  | 39 +++++++++++++++++--
 .../composables/useMediaAssetFiltering.ts     | 33 ++++++++++++----
 5 files changed, 75 insertions(+), 20 deletions(-)

diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index 126b915c41..a934537367 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -36,13 +36,14 @@
       </div>
       <!-- Normal Tab View -->
       <TabList v-else v-model="activeTab" class="pt-4 pb-1">
-        <Tab value="input">{{ $t('sideToolbar.labels.imported') }}</Tab>
         <Tab value="output">{{ $t('sideToolbar.labels.generated') }}</Tab>
+        <Tab value="input">{{ $t('sideToolbar.labels.imported') }}</Tab>
       </TabList>
       <!-- Filter Bar -->
       <MediaAssetFilterBar
         v-model:search-query="searchQuery"
         v-model:sort-by="sortBy"
+        :show-generation-time-sort="activeTab === 'output'"
       />
     </template>
     <template #body>
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 28b56bb2ca..92e1e08c19 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -621,7 +621,9 @@
     "mediaAssets": {
       "title": "Media Assets",
       "sortNewestFirst": "Newest first",
-      "sortOldestFirst": "Oldest first"
+      "sortOldestFirst": "Oldest first",
+      "sortLongestFirst": "Generation time (longest first)",
+      "sortFastestFirst": "Generation time (fastest first)"
     },
     "backToAssets": "Back to all assets",
     "searchAssets": "Search assets...",
diff --git a/src/platform/assets/components/MediaAssetFilterBar.vue b/src/platform/assets/components/MediaAssetFilterBar.vue
index 30729318b9..c3b5612029 100644
--- a/src/platform/assets/components/MediaAssetFilterBar.vue
+++ b/src/platform/assets/components/MediaAssetFilterBar.vue
@@ -14,6 +14,7 @@
       <template #default="{ close }">
         <MediaAssetSortMenu
           :sort-by="sortBy"
+          :show-generation-time-sort
           :close="close"
           @update:sort-by="handleSortChange"
         />
@@ -29,23 +30,24 @@ import { isCloud } from '@/platform/distribution/types'
 import AssetSortButton from './MediaAssetSortButton.vue'
 import MediaAssetSortMenu from './MediaAssetSortMenu.vue'
 
-interface MediaAssetSearchBarProps {
+const { showGenerationTimeSort = false } = defineProps<{
   searchQuery: string
-  sortBy: 'newest' | 'oldest'
-}
-
-defineProps<MediaAssetSearchBarProps>()
+  sortBy: 'newest' | 'oldest' | 'longest' | 'fastest'
+  showGenerationTimeSort?: boolean
+}>()
 
 const emit = defineEmits<{
   'update:searchQuery': [value: string]
-  'update:sortBy': [value: 'newest' | 'oldest']
+  'update:sortBy': [value: 'newest' | 'oldest' | 'longest' | 'fastest']
 }>()
 
 const handleSearchChange = (value: string | undefined) => {
   emit('update:searchQuery', value ?? '')
 }
 
-const handleSortChange = (value: 'newest' | 'oldest') => {
+const handleSortChange = (
+  value: 'newest' | 'oldest' | 'longest' | 'fastest'
+) => {
   emit('update:sortBy', value)
 }
 </script>
diff --git a/src/platform/assets/components/MediaAssetSortMenu.vue b/src/platform/assets/components/MediaAssetSortMenu.vue
index 4fa1b17e02..522a7622f1 100644
--- a/src/platform/assets/components/MediaAssetSortMenu.vue
+++ b/src/platform/assets/components/MediaAssetSortMenu.vue
@@ -21,22 +21,53 @@
         <i v-if="sortBy === 'oldest'" class="icon-[lucide--check] size-4" />
       </template>
     </IconTextButton>
+
+    <template v-if="showGenerationTimeSort">
+      <IconTextButton
+        type="transparent"
+        icon-position="right"
+        :label="$t('sideToolbar.mediaAssets.sortLongestFirst')"
+        @click="handleSortChange('longest')"
+      >
+        <template #icon>
+          <i v-if="sortBy === 'longest'" class="icon-[lucide--check] size-4" />
+        </template>
+      </IconTextButton>
+
+      <IconTextButton
+        type="transparent"
+        icon-position="right"
+        :label="$t('sideToolbar.mediaAssets.sortFastestFirst')"
+        @click="handleSortChange('fastest')"
+      >
+        <template #icon>
+          <i v-if="sortBy === 'fastest'" class="icon-[lucide--check] size-4" />
+        </template>
+      </IconTextButton>
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
 import IconTextButton from '@/components/button/IconTextButton.vue'
 
-const { sortBy, close } = defineProps<{
-  sortBy: 'newest' | 'oldest'
+const {
+  sortBy,
+  close,
+  showGenerationTimeSort = false
+} = defineProps<{
+  sortBy: 'newest' | 'oldest' | 'longest' | 'fastest'
   close: () => void
+  showGenerationTimeSort?: boolean
 }>()
 
 const emit = defineEmits<{
-  'update:sortBy': [value: 'newest' | 'oldest']
+  'update:sortBy': [value: 'newest' | 'oldest' | 'longest' | 'fastest']
 }>()
 
-const handleSortChange = (value: 'newest' | 'oldest') => {
+const handleSortChange = (
+  value: 'newest' | 'oldest' | 'longest' | 'fastest'
+) => {
   emit('update:sortBy', value)
   close()
 }
diff --git a/src/platform/assets/composables/useMediaAssetFiltering.ts b/src/platform/assets/composables/useMediaAssetFiltering.ts
index 615d60703b..c3f71b0f65 100644
--- a/src/platform/assets/composables/useMediaAssetFiltering.ts
+++ b/src/platform/assets/composables/useMediaAssetFiltering.ts
@@ -6,7 +6,7 @@ import type { Ref } from 'vue'
 
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 
-type SortOption = 'newest' | 'oldest'
+type SortOption = 'newest' | 'oldest' | 'longest' | 'fastest'
 
 /**
  * Get timestamp from asset (either create_time or created_at)
@@ -18,6 +18,13 @@ const getAssetTime = (asset: AssetItem): number => {
   )
 }
 
+/**
+ * Get execution time from asset user_metadata
+ */
+const getAssetExecutionTime = (asset: AssetItem): number => {
+  return (asset.user_metadata?.executionTimeInSeconds as number) ?? 0
+}
+
 /**
  * Media Asset Filtering composable
  * Manages search, filter, and sort for media assets
@@ -46,12 +53,24 @@ export function useMediaAssetFiltering(assets: Ref<AssetItem[]>) {
 
   const filteredAssets = computed(() => {
     // Sort by create_time (output assets) or created_at (input assets)
-    if (sortBy.value === 'oldest') {
-      // Ascending order (oldest first)
-      return sortByUtil(searchFiltered.value, [getAssetTime])
-    } else {
-      // Descending order (newest first) - negate for descending
-      return sortByUtil(searchFiltered.value, [(asset) => -getAssetTime(asset)])
+    switch (sortBy.value) {
+      case 'oldest':
+        // Ascending order (oldest first)
+        return sortByUtil(searchFiltered.value, [getAssetTime])
+      case 'longest':
+        // Descending order (longest execution time first)
+        return sortByUtil(searchFiltered.value, [
+          (asset) => -getAssetExecutionTime(asset)
+        ])
+      case 'fastest':
+        // Ascending order (fastest execution time first)
+        return sortByUtil(searchFiltered.value, [getAssetExecutionTime])
+      case 'newest':
+      default:
+        // Descending order (newest first) - negate for descending
+        return sortByUtil(searchFiltered.value, [
+          (asset) => -getAssetTime(asset)
+        ])
     }
   })