From 0e8055faeb7f0172e419690f789e1a97c76e391f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Cea=20Fontenla?= <ivancea96@outlook.com>
Date: Wed, 8 Jul 2026 22:33:09 +0200
Subject: [PATCH 1/9] [assets] Add field sort to asset list

---
 src/components/lists/AssetList.vue | 81 +++++++++++++++++++++++++++---
 src/lib/sorting.js                 | 15 +++++-
 2 files changed, 88 insertions(+), 8 deletions(-)

diff --git a/src/components/lists/AssetList.vue b/src/components/lists/AssetList.vue
index e31d8f36c5..8ba433b97e 100644
--- a/src/components/lists/AssetList.vue
+++ b/src/components/lists/AssetList.vue
@@ -25,6 +25,13 @@
         @toggle-stick="metadataStickColumnClicked($event)"
       />
 
+      <table-metadata-header-menu
+        ref="headerFieldMenu"
+        :is-edit-allowed="false"
+        :show-stick="false"
+        @sort-by-clicked="onSortByFieldClicked()"
+      />
+
       <table
         class="datatable multi-section"
         :class="{ 'expand-task-types': displaySettings.fullTaskTypeNames }"
@@ -44,6 +51,16 @@
                 <span class="flexrow-item">
                   {{ $t('assets.fields.name') }}
                 </span>
+                <span
+                  class="metadata-menu-button header-icon pointer"
+                  role="button"
+                  tabindex="0"
+                  @click="showFieldHeaderMenu('name', $event)"
+                  @keydown.enter.prevent="showFieldHeaderMenu('name', $event)"
+                  @keydown.space.prevent="showFieldHeaderMenu('name', $event)"
+                >
+                  <chevron-down-icon :size="14" />
+                </span>
                 <button-simple
                   class="is-small flexrow-item"
                   icon="plus"
@@ -129,7 +146,25 @@
                 isAssetDescription
               "
             >
-              {{ $t('assets.fields.description') }}
+              <div class="flexrow field-header">
+                <span class="flexrow-item">
+                  {{ $t('assets.fields.description') }}
+                </span>
+                <span
+                  class="metadata-menu-button header-icon pointer"
+                  role="button"
+                  tabindex="0"
+                  @click="showFieldHeaderMenu('description', $event)"
+                  @keydown.enter.prevent="
+                    showFieldHeaderMenu('description', $event)
+                  "
+                  @keydown.space.prevent="
+                    showFieldHeaderMenu('description', $event)
+                  "
+                >
+                  <chevron-down-icon :size="14" />
+                </span>
+              </div>
             </th>
 
             <th
@@ -580,6 +615,7 @@
 </template>
 
 <script>
+import { ChevronDownIcon } from 'lucide-vue-next'
 import { mapGetters, mapActions } from 'vuex'
 
 import { descriptorMixin } from '@/components/mixins/descriptors'
@@ -592,20 +628,20 @@ import preferences from '@/lib/preferences'
 import { sortTaskTypes } from '@/lib/sorting'
 import { range } from '@/lib/time'
 
-import AssetListNumbers from '@/components/widgets/AssetListNumbers.vue'
-import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
-import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
 import DescriptionCell from '@/components/cells/DescriptionCell.vue'
-import EntityThumbnail from '@/components/widgets/EntityThumbnail.vue'
 import MetadataHeader from '@/components/cells/MetadataHeader.vue'
 import MetadataInput from '@/components/cells/MetadataInput.vue'
 import RowActionsCell from '@/components/cells/RowActionsCell.vue'
+import ValidationCell from '@/components/cells/ValidationCell.vue'
+import ValidationHeader from '@/components/cells/ValidationHeader.vue'
+import AssetListNumbers from '@/components/widgets/AssetListNumbers.vue'
+import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
+import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
+import EntityThumbnail from '@/components/widgets/EntityThumbnail.vue'
 import TableHeaderMenu from '@/components/widgets/TableHeaderMenu.vue'
 import TableInfo from '@/components/widgets/TableInfo.vue'
 import TableMetadataHeaderMenu from '@/components/widgets/TableMetadataHeaderMenu.vue'
 import TableMetadataSelectorMenu from '@/components/widgets/TableMetadataSelectorMenu.vue'
-import ValidationCell from '@/components/cells/ValidationCell.vue'
-import ValidationHeader from '@/components/cells/ValidationHeader.vue'
 
 import assetStore from '@/store/modules/assets'
 import assetTypeStore from '@/store/modules/assettypes'
@@ -626,6 +662,7 @@ export default {
   components: {
     AssetListNumbers,
     ButtonSimple,
+    ChevronDownIcon,
     ComboboxTaskType,
     DescriptionCell,
     EntityThumbnail,
@@ -674,6 +711,7 @@ export default {
   emits: [
     'asset-changed',
     'asset-type-clicked',
+    'change-sort',
     'create-tasks',
     'delete-clicked',
     'edit-clicked',
@@ -690,6 +728,7 @@ export default {
       hiddenColumns: {},
       isSelectableMap: {},
       lastSelection: null,
+      lastFieldHeaderMenuDisplayed: null,
       lastHeaderMenuDisplayed: null,
       lastMetadataHeaderMenuDisplayed: null,
       lastHeaderMenuDisplayedIndexInGrid: null,
@@ -1058,6 +1097,34 @@ export default {
       this.showHeaderMenu()
     },
 
+    showFieldHeaderMenu(fieldName, event) {
+      const headerMenuEl = this.$refs.headerFieldMenu.$el
+      if (headerMenuEl.className === 'header-menu') {
+        headerMenuEl.className = 'header-menu hidden'
+      } else {
+        headerMenuEl.className = 'header-menu'
+        const headerElement = event.currentTarget.closest('th')
+        const headerBox = headerElement.getBoundingClientRect()
+        const left = headerBox.left - 3
+        const top = headerBox.bottom + 11
+        const width = Math.max(100, headerBox.width - 1)
+        headerMenuEl.style.left = `${left}px`
+        headerMenuEl.style.top = `${top}px`
+        headerMenuEl.style.width = `${width}px`
+      }
+      this.lastFieldHeaderMenuDisplayed = fieldName
+    },
+
+    onSortByFieldClicked() {
+      const fieldName = this.lastFieldHeaderMenuDisplayed
+      this.$emit('change-sort', {
+        type: 'field',
+        column: fieldName,
+        name: this.$t(`assets.fields.${fieldName}`)
+      })
+      this.showFieldHeaderMenu(fieldName)
+    },
+
     metadataStickColumnClicked(event) {
       this.toggleStickedColumns(this.lastMetadataHeaderMenuDisplayed)
       this.showMetadataHeaderMenu(this.lastMetadataHeaderMenuDisplayed, event)
diff --git a/src/lib/sorting.js b/src/lib/sorting.js
index 238b2aa563..f18f4c8bfd 100644
--- a/src/lib/sorting.js
+++ b/src/lib/sorting.js
@@ -288,6 +288,17 @@ export const sortValidationColumns = (
 const compareByName = (a, b) =>
   a.name.localeCompare(b.name, undefined, { numeric: true })
 
+const sortByField = sortInfo => (a, b) => {
+  const dataA = a[sortInfo.column] || ''
+  const dataB = b[sortInfo.column] || ''
+  if (dataA === dataB) return 0
+  if (!dataB) return -1
+  if (!dataA) return 1
+  return String(dataA).localeCompare(String(dataB), undefined, {
+    numeric: true
+  })
+}
+
 const sortEntityResult = (
   result,
   sorting,
@@ -300,7 +311,9 @@ const sortEntityResult = (
     const sortEntities =
       sortInfo.type === 'metadata'
         ? sortByMetadata(sortInfo)
-        : sortByTaskType(taskMap, sortInfo)
+        : sortInfo.type === 'field'
+          ? sortByField(sortInfo)
+          : sortByTaskType(taskMap, sortInfo)
     let sorter = firstBy('canceled').thenBy(sortEntities)
     for (const step of thenBySteps) {
       sorter = sorter.thenBy(step)

From a16edd61358cceed48031cf19aa85166ba66760b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Cea=20Fontenla?= <ivancea96@outlook.com>
Date: Wed, 8 Jul 2026 22:49:52 +0200
Subject: [PATCH 2/9] [assets] Show field sort controls

---
 src/components/lists/AssetList.vue | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/lists/AssetList.vue b/src/components/lists/AssetList.vue
index 8ba433b97e..43173cddc4 100644
--- a/src/components/lists/AssetList.vue
+++ b/src/components/lists/AssetList.vue
@@ -47,12 +47,12 @@
               }"
               scope="col"
             >
-              <div class="flexrow">
+              <div class="flexrow field-header">
                 <span class="flexrow-item">
                   {{ $t('assets.fields.name') }}
                 </span>
                 <span
-                  class="metadata-menu-button header-icon pointer"
+                  class="asset-field-menu-button header-icon pointer"
                   role="button"
                   tabindex="0"
                   @click="showFieldHeaderMenu('name', $event)"
@@ -151,7 +151,7 @@
                   {{ $t('assets.fields.description') }}
                 </span>
                 <span
-                  class="metadata-menu-button header-icon pointer"
+                  class="asset-field-menu-button header-icon pointer"
                   role="button"
                   tabindex="0"
                   @click="showFieldHeaderMenu('description', $event)"
@@ -1262,6 +1262,23 @@ td.ready-for {
   width: 200px;
 }
 
+.field-header {
+  position: relative;
+}
+
+.asset-field-menu-button {
+  align-items: center;
+  background: var(--background-alt);
+  border-radius: 50%;
+  display: inline-flex;
+  flex: 0 0 16px;
+  height: 16px;
+  justify-content: center;
+  margin-left: 0.3em;
+  padding: 1px;
+  width: 16px;
+}
+
 .validation-cell {
   min-width: 150px;
   max-width: 150px;

From 76f122a90f0f152ba9f6abaf37e85a6e14534665 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Cea=20Fontenla?= <ivancea96@outlook.com>
Date: Wed, 8 Jul 2026 22:58:58 +0200
Subject: [PATCH 3/9] [assets] Align field sort controls

---
 src/components/lists/AssetList.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/lists/AssetList.vue b/src/components/lists/AssetList.vue
index 43173cddc4..c7ba05ba1c 100644
--- a/src/components/lists/AssetList.vue
+++ b/src/components/lists/AssetList.vue
@@ -62,7 +62,7 @@
                   <chevron-down-icon :size="14" />
                 </span>
                 <button-simple
-                  class="is-small flexrow-item"
+                  class="is-small flexrow-item add-metadata-button"
                   icon="plus"
                   :text="''"
                   @click="onAddMetadataClicked"
@@ -1266,6 +1266,11 @@ td.ready-for {
   position: relative;
 }
 
+.field-header .flexrow-item:first-child {
+  flex: 1;
+  margin-right: 20px;
+}
+
 .asset-field-menu-button {
   align-items: center;
   background: var(--background-alt);
@@ -1274,11 +1279,16 @@ td.ready-for {
   flex: 0 0 16px;
   height: 16px;
   justify-content: center;
-  margin-left: 0.3em;
   padding: 1px;
+  position: absolute;
+  right: 0;
   width: 16px;
 }
 
+.add-metadata-button {
+  margin-left: 0.3em;
+}
+
 .validation-cell {
   min-width: 150px;
   max-width: 150px;

From 518f71445f4efb62bdf1ac82c644a8197d6edf71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Cea=20Fontenla?= <ivancea96@outlook.com>
Date: Wed, 8 Jul 2026 23:03:31 +0200
Subject: [PATCH 4/9] [assets] Reserve space for field sort controls

---
 src/components/lists/AssetList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/lists/AssetList.vue b/src/components/lists/AssetList.vue
index c7ba05ba1c..d00aad2f05 100644
--- a/src/components/lists/AssetList.vue
+++ b/src/components/lists/AssetList.vue
@@ -1263,12 +1263,12 @@ td.ready-for {
 }
 
 .field-header {
+  padding-right: 20px;
   position: relative;
 }
 
 .field-header .flexrow-item:first-child {
   flex: 1;
-  margin-right: 20px;
 }
 
 .asset-field-menu-button {

From 862c9e70cf8294806f1005bfd130bc585b589a24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Cea=20Fontenla?= <ivancea96@outlook.com>
Date: Wed, 8 Jul 2026 23:08:47 +0200
Subject: [PATCH 5/9] [assets] Close asset header menus

---
 src/components/lists/AssetList.vue | 90 +++++++++++++++++++++++++-----
 1 file changed, 76 insertions(+), 14 deletions(-)

diff --git a/src/components/lists/AssetList.vue b/src/components/lists/AssetList.vue
index d00aad2f05..b6901fc420 100644
--- a/src/components/lists/AssetList.vue
+++ b/src/components/lists/AssetList.vue
@@ -740,6 +740,8 @@ export default {
       },
       stickedColumns: {},
       domEvents: [
+        ['click', this.onDocumentClick],
+        ['keydown', this.onDocumentKeyDown],
         ['mousemove', this.onMouseMove],
         ['touchmove', this.onMouseMove],
         ['mouseup', this.stopBrowsing],
@@ -1097,24 +1099,84 @@ export default {
       this.showHeaderMenu()
     },
 
-    showFieldHeaderMenu(fieldName, event) {
-      const headerMenuEl = this.$refs.headerFieldMenu.$el
-      if (headerMenuEl.className === 'header-menu') {
-        headerMenuEl.className = 'header-menu hidden'
-      } else {
-        headerMenuEl.className = 'header-menu'
-        const headerElement = event.currentTarget.closest('th')
-        const headerBox = headerElement.getBoundingClientRect()
-        const left = headerBox.left - 3
-        const top = headerBox.bottom + 11
-        const width = Math.max(100, headerBox.width - 1)
-        headerMenuEl.style.left = `${left}px`
-        headerMenuEl.style.top = `${top}px`
-        headerMenuEl.style.width = `${width}px`
+    hideHeaderMenu(refName) {
+      this.$refs[refName]?.$el?.classList.add('hidden')
+    },
+
+    hideHeaderMenus(exceptRefName = null) {
+      ;['headerMenu', 'headerMetadataMenu', 'headerFieldMenu']
+        .filter(refName => refName !== exceptRefName)
+        .forEach(refName => this.hideHeaderMenu(refName))
+    },
+
+    showHeaderMenuAt(refName, event, getHeaderElement, offset = {}) {
+      const headerMenuEl = this.$refs[refName].$el
+      if (!event || !headerMenuEl.classList.contains('hidden')) {
+        headerMenuEl.classList.add('hidden')
+        return
       }
+
+      this.hideHeaderMenus(refName)
+      headerMenuEl.classList.remove('hidden')
+
+      const headerElement = getHeaderElement(event)
+      const headerBox = headerElement.getBoundingClientRect()
+      const left = headerBox.left + (offset.left || 0)
+      const top = headerBox.bottom + (offset.top || 0)
+      const width = Math.max(100, headerBox.width - 1)
+      headerMenuEl.style.left = `${left}px`
+      headerMenuEl.style.top = `${top}px`
+      headerMenuEl.style.width = `${width}px`
+    },
+
+    showHeaderMenu(columnId, columnIndexInGrid, event) {
+      this.showHeaderMenuAt('headerMenu', event, event => {
+        let headerElement = event.srcElement.parentNode.parentNode
+        if (headerElement.tagName !== 'TH') {
+          headerElement = headerElement.parentNode
+        }
+        return headerElement
+      })
+      this.lastHeaderMenuDisplayed = columnId
+      this.lastHeaderMenuDisplayedIndexInGrid = columnIndexInGrid
+    },
+
+    showMetadataHeaderMenu(columnId, event) {
+      this.showHeaderMenuAt(
+        'headerMetadataMenu',
+        event,
+        event => event.srcElement.parentNode.parentNode,
+        { left: -3, top: 11 }
+      )
+      this.lastMetadataHeaderMenuDisplayed = columnId
+    },
+
+    showFieldHeaderMenu(fieldName, event) {
+      this.showHeaderMenuAt(
+        'headerFieldMenu',
+        event,
+        event => event.currentTarget.closest('th'),
+        { left: -3, top: 11 }
+      )
       this.lastFieldHeaderMenuDisplayed = fieldName
     },
 
+    onDocumentClick(event) {
+      if (
+        event.target.closest('.header-menu') ||
+        event.target.closest('.header-icon')
+      ) {
+        return
+      }
+      this.hideHeaderMenus()
+    },
+
+    onDocumentKeyDown(event) {
+      if (event.key === 'Escape') {
+        this.hideHeaderMenus()
+      }
+    },
+
     onSortByFieldClicked() {
       const fieldName = this.lastFieldHeaderMenuDisplayed
       this.$emit('change-sort', {

From 290633dc59ec8e84a75efe2ec75987bb79c8d519 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Cea=20Fontenla?= <ivancea96@outlook.com>
Date: Wed, 8 Jul 2026 23:15:50 +0200
Subject: [PATCH 6/9] [assets] Sort ready for column

---
 src/components/lists/AssetList.vue | 20 +++++++++++++++++++-
 src/lib/sorting.js                 | 30 +++++++++++++++++++++++++-----
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/src/components/lists/AssetList.vue b/src/components/lists/AssetList.vue
index b6901fc420..e215632c59 100644
--- a/src/components/lists/AssetList.vue
+++ b/src/components/lists/AssetList.vue
@@ -133,7 +133,25 @@
                 metadataDisplayHeaders.readyFor
               "
             >
-              {{ $t('assets.fields.ready_for') }}
+              <div class="flexrow field-header">
+                <span class="flexrow-item">
+                  {{ $t('assets.fields.ready_for') }}
+                </span>
+                <span
+                  class="asset-field-menu-button header-icon pointer"
+                  role="button"
+                  tabindex="0"
+                  @click="showFieldHeaderMenu('ready_for', $event)"
+                  @keydown.enter.prevent="
+                    showFieldHeaderMenu('ready_for', $event)
+                  "
+                  @keydown.space.prevent="
+                    showFieldHeaderMenu('ready_for', $event)
+                  "
+                >
+                  <chevron-down-icon :size="14" />
+                </span>
+              </div>
             </th>
 
             <th
diff --git a/src/lib/sorting.js b/src/lib/sorting.js
index f18f4c8bfd..7ffa644677 100644
--- a/src/lib/sorting.js
+++ b/src/lib/sorting.js
@@ -288,9 +288,17 @@ export const sortValidationColumns = (
 const compareByName = (a, b) =>
   a.name.localeCompare(b.name, undefined, { numeric: true })
 
-const sortByField = sortInfo => (a, b) => {
-  const dataA = a[sortInfo.column] || ''
-  const dataB = b[sortInfo.column] || ''
+const getFieldValue = (entry, sortInfo, taskTypeMap) => {
+  const value = entry[sortInfo.column]
+  if (sortInfo.column === 'ready_for') {
+    return taskTypeMap.get(value)?.name || ''
+  }
+  return value || ''
+}
+
+const sortByField = (sortInfo, taskTypeMap) => (a, b) => {
+  const dataA = getFieldValue(a, sortInfo, taskTypeMap)
+  const dataB = getFieldValue(b, sortInfo, taskTypeMap)
   if (dataA === dataB) return 0
   if (!dataB) return -1
   if (!dataA) return 1
@@ -302,6 +310,7 @@ const sortByField = sortInfo => (a, b) => {
 const sortEntityResult = (
   result,
   sorting,
+  taskTypeMap,
   taskMap,
   thenBySteps,
   defaultSort
@@ -312,7 +321,7 @@ const sortEntityResult = (
       sortInfo.type === 'metadata'
         ? sortByMetadata(sortInfo)
         : sortInfo.type === 'field'
-          ? sortByField(sortInfo)
+          ? sortByField(sortInfo, taskTypeMap)
           : sortByTaskType(taskMap, sortInfo)
     let sorter = firstBy('canceled').thenBy(sortEntities)
     for (const step of thenBySteps) {
@@ -329,6 +338,7 @@ export const sortAssetResult = (result, sorting, taskTypeMap, taskMap) => {
   return sortEntityResult(
     result,
     sorting,
+    taskTypeMap,
     taskMap,
     [
       (a, b) =>
@@ -345,6 +355,7 @@ export const sortShotResult = (result, sorting, taskTypeMap, taskMap) => {
   return sortEntityResult(
     result,
     sorting,
+    taskTypeMap,
     taskMap,
     [
       sortByEpisode,
@@ -362,6 +373,7 @@ export const sortSequenceResult = (result, sorting, taskTypeMap, taskMap) => {
   return sortEntityResult(
     result,
     sorting,
+    taskTypeMap,
     taskMap,
     [sortByEpisode, compareByName],
     sortByName
@@ -369,13 +381,21 @@ export const sortSequenceResult = (result, sorting, taskTypeMap, taskMap) => {
 }
 
 export const sortEpisodeResult = (result, sorting, taskTypeMap, taskMap) => {
-  return sortEntityResult(result, sorting, taskMap, [compareByName], sortByName)
+  return sortEntityResult(
+    result,
+    sorting,
+    taskTypeMap,
+    taskMap,
+    [compareByName],
+    sortByName
+  )
 }
 
 export const sortEditResult = (result, sorting, taskTypeMap, taskMap) => {
   return sortEntityResult(
     result,
     sorting,
+    taskTypeMap,
     taskMap,
     [sortByEpisode, compareByName],
     sortEdits

From 32f03b901a1eb2f28a3722b417d79285600034c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Cea=20Fontenla?= <ivancea96@outlook.com>
Date: Wed, 8 Jul 2026 23:23:34 +0200
Subject: [PATCH 7/9] [assets] Sort remaining asset info columns

---
 src/components/lists/AssetList.vue | 89 ++++++++++++++++++++++++++++--
 src/lib/sorting.js                 | 33 +++++++++--
 src/store/modules/assets.js        |  8 ++-
 3 files changed, 118 insertions(+), 12 deletions(-)

diff --git a/src/components/lists/AssetList.vue b/src/components/lists/AssetList.vue
index e215632c59..c62894553a 100644
--- a/src/components/lists/AssetList.vue
+++ b/src/components/lists/AssetList.vue
@@ -81,7 +81,25 @@
               :style="{ left: `${nameWidth}px` }"
               v-if="hasStickyEpisode"
             >
-              {{ $t('assets.fields.episode') }}
+              <div class="flexrow field-header">
+                <span class="flexrow-item">
+                  {{ $t('assets.fields.episode') }}
+                </span>
+                <span
+                  class="asset-field-menu-button header-icon pointer"
+                  role="button"
+                  tabindex="0"
+                  @click="showFieldHeaderMenu('episode_id', $event)"
+                  @keydown.enter.prevent="
+                    showFieldHeaderMenu('episode_id', $event)
+                  "
+                  @keydown.space.prevent="
+                    showFieldHeaderMenu('episode_id', $event)
+                  "
+                >
+                  <chevron-down-icon :size="14" />
+                </span>
+              </div>
             </th>
 
             <metadata-header
@@ -196,7 +214,25 @@
                 metadataDisplayHeaders.timeSpent
               "
             >
-              {{ $t('assets.fields.time_spent') }}
+              <div class="flexrow field-header">
+                <span class="flexrow-item">
+                  {{ $t('assets.fields.time_spent') }}
+                </span>
+                <span
+                  class="asset-field-menu-button header-icon pointer"
+                  role="button"
+                  tabindex="0"
+                  @click="showFieldHeaderMenu('timeSpent', $event)"
+                  @keydown.enter.prevent="
+                    showFieldHeaderMenu('timeSpent', $event)
+                  "
+                  @keydown.space.prevent="
+                    showFieldHeaderMenu('timeSpent', $event)
+                  "
+                >
+                  <chevron-down-icon :size="14" />
+                </span>
+              </div>
             </th>
 
             <th
@@ -211,7 +247,25 @@
                 metadataDisplayHeaders.estimation
               "
             >
-              {{ $t('main.estimation_short') }}
+              <div class="flexrow field-header">
+                <span class="flexrow-item">
+                  {{ $t('main.estimation_short') }}
+                </span>
+                <span
+                  class="asset-field-menu-button header-icon pointer"
+                  role="button"
+                  tabindex="0"
+                  @click="showFieldHeaderMenu('estimation', $event)"
+                  @keydown.enter.prevent="
+                    showFieldHeaderMenu('estimation', $event)
+                  "
+                  @keydown.space.prevent="
+                    showFieldHeaderMenu('estimation', $event)
+                  "
+                >
+                  <chevron-down-icon :size="14" />
+                </span>
+              </div>
             </th>
 
             <th
@@ -223,7 +277,25 @@
                 metadataDisplayHeaders.resolution
               "
             >
-              {{ $t('shots.fields.resolution') }}
+              <div class="flexrow field-header">
+                <span class="flexrow-item">
+                  {{ $t('shots.fields.resolution') }}
+                </span>
+                <span
+                  class="asset-field-menu-button header-icon pointer"
+                  role="button"
+                  tabindex="0"
+                  @click="showFieldHeaderMenu('resolution', $event)"
+                  @keydown.enter.prevent="
+                    showFieldHeaderMenu('resolution', $event)
+                  "
+                  @keydown.space.prevent="
+                    showFieldHeaderMenu('resolution', $event)
+                  "
+                >
+                  <chevron-down-icon :size="14" />
+                </span>
+              </div>
             </th>
 
             <template v-if="displaySettings.showInfos">
@@ -1197,10 +1269,17 @@ export default {
 
     onSortByFieldClicked() {
       const fieldName = this.lastFieldHeaderMenuDisplayed
+      const fieldLabels = {
+        episode_id: this.$t('assets.fields.episode'),
+        estimation: this.$t('main.estimation_short'),
+        ready_for: this.$t('assets.fields.ready_for'),
+        resolution: this.$t('shots.fields.resolution'),
+        timeSpent: this.$t('assets.fields.time_spent')
+      }
       this.$emit('change-sort', {
         type: 'field',
         column: fieldName,
-        name: this.$t(`assets.fields.${fieldName}`)
+        name: fieldLabels[fieldName] || this.$t(`assets.fields.${fieldName}`)
       })
       this.showFieldHeaderMenu(fieldName)
     },
diff --git a/src/lib/sorting.js b/src/lib/sorting.js
index 7ffa644677..9da2b09cce 100644
--- a/src/lib/sorting.js
+++ b/src/lib/sorting.js
@@ -288,18 +288,27 @@ export const sortValidationColumns = (
 const compareByName = (a, b) =>
   a.name.localeCompare(b.name, undefined, { numeric: true })
 
-const getFieldValue = (entry, sortInfo, taskTypeMap) => {
+const NUMERIC_FIELDS = new Set(['estimation', 'timeSpent'])
+
+const getFieldValue = (entry, sortInfo, taskTypeMap, episodeMap) => {
   const value = entry[sortInfo.column]
+  if (sortInfo.column === 'episode_id') {
+    return episodeMap.get(value)?.name || ''
+  }
   if (sortInfo.column === 'ready_for') {
     return taskTypeMap.get(value)?.name || ''
   }
+  if (sortInfo.column === 'resolution') {
+    return entry.data?.resolution || ''
+  }
   return value || ''
 }
 
-const sortByField = (sortInfo, taskTypeMap) => (a, b) => {
-  const dataA = getFieldValue(a, sortInfo, taskTypeMap)
-  const dataB = getFieldValue(b, sortInfo, taskTypeMap)
+const sortByField = (sortInfo, taskTypeMap, episodeMap) => (a, b) => {
+  const dataA = getFieldValue(a, sortInfo, taskTypeMap, episodeMap)
+  const dataB = getFieldValue(b, sortInfo, taskTypeMap, episodeMap)
   if (dataA === dataB) return 0
+  if (NUMERIC_FIELDS.has(sortInfo.column)) return dataA - dataB
   if (!dataB) return -1
   if (!dataA) return 1
   return String(dataA).localeCompare(String(dataB), undefined, {
@@ -311,6 +320,7 @@ const sortEntityResult = (
   result,
   sorting,
   taskTypeMap,
+  episodeMap,
   taskMap,
   thenBySteps,
   defaultSort
@@ -321,7 +331,7 @@ const sortEntityResult = (
       sortInfo.type === 'metadata'
         ? sortByMetadata(sortInfo)
         : sortInfo.type === 'field'
-          ? sortByField(sortInfo, taskTypeMap)
+          ? sortByField(sortInfo, taskTypeMap, episodeMap)
           : sortByTaskType(taskMap, sortInfo)
     let sorter = firstBy('canceled').thenBy(sortEntities)
     for (const step of thenBySteps) {
@@ -334,11 +344,18 @@ const sortEntityResult = (
   return result
 }
 
-export const sortAssetResult = (result, sorting, taskTypeMap, taskMap) => {
+export const sortAssetResult = (
+  result,
+  sorting,
+  taskTypeMap,
+  taskMap,
+  episodeMap
+) => {
   return sortEntityResult(
     result,
     sorting,
     taskTypeMap,
+    episodeMap,
     taskMap,
     [
       (a, b) =>
@@ -356,6 +373,7 @@ export const sortShotResult = (result, sorting, taskTypeMap, taskMap) => {
     result,
     sorting,
     taskTypeMap,
+    new Map(),
     taskMap,
     [
       sortByEpisode,
@@ -374,6 +392,7 @@ export const sortSequenceResult = (result, sorting, taskTypeMap, taskMap) => {
     result,
     sorting,
     taskTypeMap,
+    new Map(),
     taskMap,
     [sortByEpisode, compareByName],
     sortByName
@@ -385,6 +404,7 @@ export const sortEpisodeResult = (result, sorting, taskTypeMap, taskMap) => {
     result,
     sorting,
     taskTypeMap,
+    new Map(),
     taskMap,
     [compareByName],
     sortByName
@@ -396,6 +416,7 @@ export const sortEditResult = (result, sorting, taskTypeMap, taskMap) => {
     result,
     sorting,
     taskTypeMap,
+    new Map(),
     taskMap,
     [sortByEpisode, compareByName],
     sortEdits
diff --git a/src/store/modules/assets.js b/src/store/modules/assets.js
index c0eaef066e..69af9d12ec 100644
--- a/src/store/modules/assets.js
+++ b/src/store/modules/assets.js
@@ -247,7 +247,13 @@ const helpers = {
     })
     let result = indexSearch(cache.assetIndex, keywords) || cache.assets
     result = applyFilters(result, filters, taskMap)
-    result = sortAssetResult(result, sorting, taskTypeMap, taskMap)
+    result = sortAssetResult(
+      result,
+      sorting,
+      taskTypeMap,
+      taskMap,
+      episodeStore.cache.episodeMap
+    )
     cache.result = result
 
     const limit =

From e69f32e09513eb3d56695ab3e0fbf84fcc8da05f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Cea=20Fontenla?= <ivancea96@outlook.com>
Date: Wed, 8 Jul 2026 23:35:21 +0200
Subject: [PATCH 8/9] [lists] Sort static entity fields

---
 src/App.vue                           | 27 ++++++++
 src/components/lists/AssetList.vue    | 80 ------------------------
 src/components/lists/EpisodeList.vue  | 42 ++++++++++++-
 src/components/lists/SequenceList.vue | 42 ++++++++++++-
 src/components/lists/ShotList.vue     | 42 ++++++++++++-
 src/components/mixins/descriptors.js  | 33 ++++++----
 src/components/mixins/entity_list.js  | 88 +++++++++++++++++++++++----
 7 files changed, 243 insertions(+), 111 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 85099d8fac..487df18943 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1730,6 +1730,33 @@ tbody:last-child .empty-line:last-child {
   }
 }
 
+.datatable th .field-header {
+  padding-right: 20px;
+  position: relative;
+}
+
+.datatable th .field-header .flexrow-item:first-child {
+  flex: 1;
+}
+
+.datatable th .asset-field-menu-button {
+  align-items: center;
+  background: var(--background-alt);
+  border-radius: 50%;
+  display: inline-flex;
+  flex: 0 0 16px;
+  height: 16px;
+  justify-content: center;
+  padding: 1px;
+  position: absolute;
+  right: 0;
+  width: 16px;
+}
+
+.datatable th .add-metadata-button {
+  margin-left: 0.3em;
+}
+
 // width: 0 + flex: 1 forces the link to size from flex space (not content), so the column can be resized smaller than the longest name.
 // :not(.thumbnail-wrapper, .avatar) excludes the EntityThumbnail anchor and PeopleAvatar which are also direct children of .flexrow.
 .datatable th.name .flexrow > a:not(.thumbnail-wrapper, .avatar),
diff --git a/src/components/lists/AssetList.vue b/src/components/lists/AssetList.vue
index c62894553a..cc502080e2 100644
--- a/src/components/lists/AssetList.vue
+++ b/src/components/lists/AssetList.vue
@@ -830,8 +830,6 @@ export default {
       },
       stickedColumns: {},
       domEvents: [
-        ['click', this.onDocumentClick],
-        ['keydown', this.onDocumentKeyDown],
         ['mousemove', this.onMouseMove],
         ['touchmove', this.onMouseMove],
         ['mouseup', this.stopBrowsing],
@@ -1189,84 +1187,6 @@ export default {
       this.showHeaderMenu()
     },
 
-    hideHeaderMenu(refName) {
-      this.$refs[refName]?.$el?.classList.add('hidden')
-    },
-
-    hideHeaderMenus(exceptRefName = null) {
-      ;['headerMenu', 'headerMetadataMenu', 'headerFieldMenu']
-        .filter(refName => refName !== exceptRefName)
-        .forEach(refName => this.hideHeaderMenu(refName))
-    },
-
-    showHeaderMenuAt(refName, event, getHeaderElement, offset = {}) {
-      const headerMenuEl = this.$refs[refName].$el
-      if (!event || !headerMenuEl.classList.contains('hidden')) {
-        headerMenuEl.classList.add('hidden')
-        return
-      }
-
-      this.hideHeaderMenus(refName)
-      headerMenuEl.classList.remove('hidden')
-
-      const headerElement = getHeaderElement(event)
-      const headerBox = headerElement.getBoundingClientRect()
-      const left = headerBox.left + (offset.left || 0)
-      const top = headerBox.bottom + (offset.top || 0)
-      const width = Math.max(100, headerBox.width - 1)
-      headerMenuEl.style.left = `${left}px`
-      headerMenuEl.style.top = `${top}px`
-      headerMenuEl.style.width = `${width}px`
-    },
-
-    showHeaderMenu(columnId, columnIndexInGrid, event) {
-      this.showHeaderMenuAt('headerMenu', event, event => {
-        let headerElement = event.srcElement.parentNode.parentNode
-        if (headerElement.tagName !== 'TH') {
-          headerElement = headerElement.parentNode
-        }
-        return headerElement
-      })
-      this.lastHeaderMenuDisplayed = columnId
-      this.lastHeaderMenuDisplayedIndexInGrid = columnIndexInGrid
-    },
-
-    showMetadataHeaderMenu(columnId, event) {
-      this.showHeaderMenuAt(
-        'headerMetadataMenu',
-        event,
-        event => event.srcElement.parentNode.parentNode,
-        { left: -3, top: 11 }
-      )
-      this.lastMetadataHeaderMenuDisplayed = columnId
-    },
-
-    showFieldHeaderMenu(fieldName, event) {
-      this.showHeaderMenuAt(
-        'headerFieldMenu',
-        event,
-        event => event.currentTarget.closest('th'),
-        { left: -3, top: 11 }
-      )
-      this.lastFieldHeaderMenuDisplayed = fieldName
-    },
-
-    onDocumentClick(event) {
-      if (
-        event.target.closest('.header-menu') ||
-        event.target.closest('.header-icon')
-      ) {
-        return
-      }
-      this.hideHeaderMenus()
-    },
-
-    onDocumentKeyDown(event) {
-      if (event.key === 'Escape') {
-        this.hideHeaderMenus()
-      }
-    },
-
     onSortByFieldClicked() {
       const fieldName = this.lastFieldHeaderMenuDisplayed
       const fieldLabels = {
diff --git a/src/components/lists/EpisodeList.vue b/src/components/lists/EpisodeList.vue
index 19a7599088..71ce24a9be 100644
--- a/src/components/lists/EpisodeList.vue
+++ b/src/components/lists/EpisodeList.vue
@@ -25,6 +25,13 @@
         @toggle-stick="metadataStickColumnClicked($event)"
       />
 
+      <table-metadata-header-menu
+        ref="headerFieldMenu"
+        :is-edit-allowed="false"
+        :show-stick="false"
+        @sort-by-clicked="onSortByFieldClicked()"
+      />
+
       <table
         class="datatable"
         :class="{ 'expand-task-types': displaySettings.fullTaskTypeNames }"
@@ -40,10 +47,20 @@
               class="name episode-name datatable-row-header"
               ref="th-episode"
             >
-              <div class="flexrow">
+              <div class="flexrow field-header">
                 <span class="flexrow-item">
                   {{ $t('episodes.fields.name') }}
                 </span>
+                <span
+                  class="asset-field-menu-button header-icon pointer"
+                  role="button"
+                  tabindex="0"
+                  @click="showFieldHeaderMenu('name', $event)"
+                  @keydown.enter.prevent="showFieldHeaderMenu('name', $event)"
+                  @keydown.space.prevent="showFieldHeaderMenu('name', $event)"
+                >
+                  <chevron-down-icon :size="14" />
+                </span>
                 <button-simple
                   class="is-small flexrow-item"
                   icon="plus"
@@ -104,7 +121,25 @@
                 isEpisodeDescription
               "
             >
-              {{ $t('episodes.fields.description') }}
+              <div class="flexrow field-header">
+                <span class="flexrow-item">
+                  {{ $t('episodes.fields.description') }}
+                </span>
+                <span
+                  class="asset-field-menu-button header-icon pointer"
+                  role="button"
+                  tabindex="0"
+                  @click="showFieldHeaderMenu('description', $event)"
+                  @keydown.enter.prevent="
+                    showFieldHeaderMenu('description', $event)
+                  "
+                  @keydown.space.prevent="
+                    showFieldHeaderMenu('description', $event)
+                  "
+                >
+                  <chevron-down-icon :size="14" />
+                </span>
+              </div>
             </th>
 
             <template v-if="displaySettings.showInfos">
@@ -532,6 +567,7 @@
 </template>
 
 <script>
+import { ChevronDownIcon } from 'lucide-vue-next'
 import { mapGetters, mapActions } from 'vuex'
 
 import { descriptorMixin } from '@/components/mixins/descriptors'
@@ -607,6 +643,7 @@ export default {
     return {
       type: 'episode',
       hiddenColumns: {},
+      lastFieldHeaderMenuDisplayed: null,
       lastHeaderMenuDisplayed: null,
       lastMetadataHeaderMenuDisplayed: null,
       lastHeaderMenuDisplayedIndexInGrid: null,
@@ -630,6 +667,7 @@ export default {
 
   components: {
     ButtonSimple,
+    ChevronDownIcon,
     DescriptionCell,
     EntityThumbnail,
     MetadataHeader,
diff --git a/src/components/lists/SequenceList.vue b/src/components/lists/SequenceList.vue
index 0cbd61504e..de3ec77b4d 100644
--- a/src/components/lists/SequenceList.vue
+++ b/src/components/lists/SequenceList.vue
@@ -23,6 +23,13 @@
         @toggle-stick="metadataStickColumnClicked($event)"
       />
 
+      <table-metadata-header-menu
+        ref="headerFieldMenu"
+        :is-edit-allowed="false"
+        :show-stick="false"
+        @sort-by-clicked="onSortByFieldClicked()"
+      />
+
       <table
         class="datatable"
         :class="{ 'expand-task-types': displaySettings.fullTaskTypeNames }"
@@ -38,10 +45,20 @@
               class="name sequence-name datatable-row-header"
               ref="th-sequence"
             >
-              <div class="flexrow">
+              <div class="flexrow field-header">
                 <span class="flexrow-item">
                   {{ $t('sequences.fields.name') }}
                 </span>
+                <span
+                  class="asset-field-menu-button header-icon pointer"
+                  role="button"
+                  tabindex="0"
+                  @click="showFieldHeaderMenu('name', $event)"
+                  @keydown.enter.prevent="showFieldHeaderMenu('name', $event)"
+                  @keydown.space.prevent="showFieldHeaderMenu('name', $event)"
+                >
+                  <chevron-down-icon :size="14" />
+                </span>
                 <button-simple
                   class="is-small flexrow-item"
                   icon="plus"
@@ -99,7 +116,25 @@
                 isSequenceDescription
               "
             >
-              {{ $t('sequences.fields.description') }}
+              <div class="flexrow field-header">
+                <span class="flexrow-item">
+                  {{ $t('sequences.fields.description') }}
+                </span>
+                <span
+                  class="asset-field-menu-button header-icon pointer"
+                  role="button"
+                  tabindex="0"
+                  @click="showFieldHeaderMenu('description', $event)"
+                  @keydown.enter.prevent="
+                    showFieldHeaderMenu('description', $event)
+                  "
+                  @keydown.space.prevent="
+                    showFieldHeaderMenu('description', $event)
+                  "
+                >
+                  <chevron-down-icon :size="14" />
+                </span>
+              </div>
             </th>
 
             <th
@@ -499,6 +534,7 @@
 </template>
 
 <script>
+import { ChevronDownIcon } from 'lucide-vue-next'
 import { mapGetters, mapActions } from 'vuex'
 
 import { getEntityPath } from '@/lib/path'
@@ -565,6 +601,7 @@ export default {
     return {
       type: 'sequence',
       hiddenColumns: {},
+      lastFieldHeaderMenuDisplayed: null,
       lastHeaderMenuDisplayed: null,
       lastMetadataHeaderMenuDisplayed: null,
       lastHeaderMenuDisplayedIndexInGrid: null,
@@ -590,6 +627,7 @@ export default {
 
   components: {
     ButtonSimple,
+    ChevronDownIcon,
     DescriptionCell,
     EntityThumbnail,
     MetadataHeader,
diff --git a/src/components/lists/ShotList.vue b/src/components/lists/ShotList.vue
index 3085a3026a..25cf25087a 100644
--- a/src/components/lists/ShotList.vue
+++ b/src/components/lists/ShotList.vue
@@ -25,6 +25,13 @@
         @toggle-stick="metadataStickColumnClicked($event)"
       />
 
+      <table-metadata-header-menu
+        ref="headerFieldMenu"
+        :is-edit-allowed="false"
+        :show-stick="false"
+        @sort-by-clicked="onSortByFieldClicked()"
+      />
+
       <table
         class="datatable multi-section"
         :class="{ 'expand-task-types': displaySettings.fullTaskTypeNames }"
@@ -36,10 +43,20 @@
               class="name shot-name datatable-row-header"
               ref="th-shot"
             >
-              <div class="flexrow">
+              <div class="flexrow field-header">
                 <span class="flexrow-item">
                   {{ $t('shots.fields.name') }}
                 </span>
+                <span
+                  class="asset-field-menu-button header-icon pointer"
+                  role="button"
+                  tabindex="0"
+                  @click="showFieldHeaderMenu('name', $event)"
+                  @keydown.enter.prevent="showFieldHeaderMenu('name', $event)"
+                  @keydown.space.prevent="showFieldHeaderMenu('name', $event)"
+                >
+                  <chevron-down-icon :size="14" />
+                </span>
                 <button-simple
                   class="is-small flexrow"
                   icon="plus"
@@ -100,7 +117,25 @@
                 isShotDescription
               "
             >
-              {{ $t('shots.fields.description') }}
+              <div class="flexrow field-header">
+                <span class="flexrow-item">
+                  {{ $t('shots.fields.description') }}
+                </span>
+                <span
+                  class="asset-field-menu-button header-icon pointer"
+                  role="button"
+                  tabindex="0"
+                  @click="showFieldHeaderMenu('description', $event)"
+                  @keydown.enter.prevent="
+                    showFieldHeaderMenu('description', $event)
+                  "
+                  @keydown.space.prevent="
+                    showFieldHeaderMenu('description', $event)
+                  "
+                >
+                  <chevron-down-icon :size="14" />
+                </span>
+              </div>
             </th>
 
             <th
@@ -826,6 +861,7 @@
 </template>
 
 <script>
+import { ChevronDownIcon } from 'lucide-vue-next'
 import { mapGetters, mapActions } from 'vuex'
 
 import preferences from '@/lib/preferences'
@@ -864,6 +900,7 @@ export default {
 
   components: {
     ButtonSimple,
+    ChevronDownIcon,
     DescriptionCell,
     EntityThumbnail,
     MetadataHeader,
@@ -921,6 +958,7 @@ export default {
     return {
       type: 'shot',
       hiddenColumns: {},
+      lastFieldHeaderMenuDisplayed: null,
       lastHeaderMenuDisplayed: null,
       lastMetadataHeaderMenuDisplayed: null,
       lastHeaderMenuDisplayedIndexInGrid: null,
diff --git a/src/components/mixins/descriptors.js b/src/components/mixins/descriptors.js
index 62ba1c218f..34212e3b56 100644
--- a/src/components/mixins/descriptors.js
+++ b/src/components/mixins/descriptors.js
@@ -150,19 +150,28 @@ export const descriptorMixin = {
     },
 
     showMetadataHeaderMenu(columnId, event) {
-      const headerMenuEl = this.$refs.headerMetadataMenu.$el
-      if (headerMenuEl.className === 'header-menu') {
-        headerMenuEl.className = 'header-menu hidden'
+      if (this.showHeaderMenuAt) {
+        this.showHeaderMenuAt(
+          'headerMetadataMenu',
+          event,
+          event => event.srcElement.parentNode.parentNode,
+          { left: -3, top: 11 }
+        )
       } else {
-        headerMenuEl.className = 'header-menu'
-        const headerElement = event.srcElement.parentNode.parentNode
-        const headerBox = headerElement.getBoundingClientRect()
-        const left = headerBox.left - 3
-        const top = headerBox.bottom + 11
-        const width = Math.max(100, headerBox.width - 1)
-        headerMenuEl.style.left = left + 'px'
-        headerMenuEl.style.top = top + 'px'
-        headerMenuEl.style.width = width + 'px'
+        const headerMenuEl = this.$refs.headerMetadataMenu.$el
+        if (headerMenuEl.className === 'header-menu') {
+          headerMenuEl.className = 'header-menu hidden'
+        } else {
+          headerMenuEl.className = 'header-menu'
+          const headerElement = event.srcElement.parentNode.parentNode
+          const headerBox = headerElement.getBoundingClientRect()
+          const left = headerBox.left - 3
+          const top = headerBox.bottom + 11
+          const width = Math.max(100, headerBox.width - 1)
+          headerMenuEl.style.left = left + 'px'
+          headerMenuEl.style.top = top + 'px'
+          headerMenuEl.style.width = width + 'px'
+        }
       }
       this.lastMetadataHeaderMenuDisplayed = columnId
     },
diff --git a/src/components/mixins/entity_list.js b/src/components/mixins/entity_list.js
index 0fec467e7c..6fab6dd453 100644
--- a/src/components/mixins/entity_list.js
+++ b/src/components/mixins/entity_list.js
@@ -25,6 +25,8 @@ export const entityListMixin = {
     if (this.resizeHeaders) this.resizeHeaders()
     window.addEventListener('keydown', this.onKeyDown, false)
     window.addEventListener('keyup', this.onKeyUp, false)
+    document.addEventListener('click', this.onHeaderMenuDocumentClick)
+    document.addEventListener('keydown', this.onHeaderMenuDocumentKeyDown)
     this.stickedColumns =
       preferences.getObjectPreference(this.localStorageStickKey) || {}
     if (this.domEvents) this.addEvents(this.domEvents)
@@ -33,6 +35,8 @@ export const entityListMixin = {
   beforeUnmount() {
     window.removeEventListener('keydown', this.onKeyDown)
     window.removeEventListener('keyup', this.onKeyUp)
+    document.removeEventListener('click', this.onHeaderMenuDocumentClick)
+    document.removeEventListener('keydown', this.onHeaderMenuDocumentKeyDown)
     if (this.domEvents) {
       this.removeEvents(this.domEvents)
       document.body.style.cursor = 'default'
@@ -279,28 +283,86 @@ export const entityListMixin = {
       this.updateTaskInQuery()
     },
 
+    hideHeaderMenu(refName) {
+      this.$refs[refName]?.$el?.classList.add('hidden')
+    },
+
+    hideHeaderMenus(exceptRefName = null) {
+      ;['headerMenu', 'headerMetadataMenu', 'headerFieldMenu']
+        .filter(refName => refName !== exceptRefName)
+        .forEach(refName => this.hideHeaderMenu(refName))
+    },
+
+    showHeaderMenuAt(refName, event, getHeaderElement, offset = {}) {
+      const headerMenuEl = this.$refs[refName]?.$el
+      if (!headerMenuEl) return
+      if (!event || !headerMenuEl.classList.contains('hidden')) {
+        headerMenuEl.classList.add('hidden')
+        return
+      }
+
+      this.hideHeaderMenus(refName)
+      headerMenuEl.classList.remove('hidden')
+
+      const headerElement = getHeaderElement(event)
+      const headerBox = headerElement.getBoundingClientRect()
+      const left = headerBox.left + (offset.left || 0)
+      const top = headerBox.bottom + (offset.top || 0)
+      const width = Math.max(100, headerBox.width - 1)
+      headerMenuEl.style.left = `${left}px`
+      headerMenuEl.style.top = `${top}px`
+      headerMenuEl.style.width = `${width}px`
+    },
+
     showHeaderMenu(columnId, columnIndexInGrid, event) {
-      const headerMenuEl = this.$refs.headerMenu.$el
-      if (headerMenuEl.className === 'header-menu') {
-        headerMenuEl.className = 'header-menu hidden'
-      } else {
-        headerMenuEl.className = 'header-menu'
+      this.showHeaderMenuAt('headerMenu', event, event => {
         let headerElement = event.srcElement.parentNode.parentNode
         if (headerElement.tagName !== 'TH') {
           headerElement = headerElement.parentNode
         }
-        const headerBox = headerElement.getBoundingClientRect()
-        const left = headerBox.left
-        const top = headerBox.bottom
-        const width = Math.max(100, headerBox.width - 1)
-        headerMenuEl.style.left = `${left}px`
-        headerMenuEl.style.top = `${top}px`
-        headerMenuEl.style.width = `${width}px`
-      }
+        return headerElement
+      })
       this.lastHeaderMenuDisplayed = columnId
       this.lastHeaderMenuDisplayedIndexInGrid = columnIndexInGrid
     },
 
+    showFieldHeaderMenu(fieldName, event) {
+      this.showHeaderMenuAt(
+        'headerFieldMenu',
+        event,
+        event => event.currentTarget.closest('th'),
+        { left: -3, top: 11 }
+      )
+      this.lastFieldHeaderMenuDisplayed = fieldName
+    },
+
+    onHeaderMenuDocumentClick(event) {
+      if (
+        event.target.closest('.header-menu') ||
+        event.target.closest('.header-icon')
+      ) {
+        return
+      }
+      this.hideHeaderMenus()
+    },
+
+    onHeaderMenuDocumentKeyDown(event) {
+      if (event.key === 'Escape') {
+        this.hideHeaderMenus()
+      }
+    },
+
+    onSortByFieldClicked() {
+      const fieldName = this.lastFieldHeaderMenuDisplayed
+      const namespace = this.type === 'sequence' ? 'sequences' : `${this.type}s`
+      this.$emit('change-sort', {
+        type: 'field',
+        column: fieldName,
+        name: this.$t(`${namespace}.fields.${fieldName}`)
+      })
+      this.showFieldHeaderMenu(fieldName)
+    },
+
     onMinimizeColumnToggled() {
       this.hideColumn(this.lastHeaderMenuDisplayed)
       this.showHeaderMenu()

From ff2b63062792b03f73640653c1de25faca17463b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Cea=20Fontenla?= <ivancea96@outlook.com>
Date: Wed, 8 Jul 2026 23:44:40 +0200
Subject: [PATCH 9/9] [lists] Reuse sortable field header

---
 src/components/lists/AssetList.vue            | 218 ++++--------------
 src/components/lists/EpisodeList.vue          |  71 ++----
 src/components/lists/SequenceList.vue         |  71 ++----
 src/components/lists/ShotList.vue             |  71 ++----
 .../widgets/SortableFieldHeader.vue           |  33 +++
 5 files changed, 158 insertions(+), 306 deletions(-)
 create mode 100644 src/components/widgets/SortableFieldHeader.vue

diff --git a/src/components/lists/AssetList.vue b/src/components/lists/AssetList.vue
index cc502080e2..febbf4051e 100644
--- a/src/components/lists/AssetList.vue
+++ b/src/components/lists/AssetList.vue
@@ -47,31 +47,24 @@
               }"
               scope="col"
             >
-              <div class="flexrow field-header">
-                <span class="flexrow-item">
-                  {{ $t('assets.fields.name') }}
-                </span>
-                <span
-                  class="asset-field-menu-button header-icon pointer"
-                  role="button"
-                  tabindex="0"
-                  @click="showFieldHeaderMenu('name', $event)"
-                  @keydown.enter.prevent="showFieldHeaderMenu('name', $event)"
-                  @keydown.space.prevent="showFieldHeaderMenu('name', $event)"
-                >
-                  <chevron-down-icon :size="14" />
-                </span>
-                <button-simple
-                  class="is-small flexrow-item add-metadata-button"
-                  icon="plus"
-                  :text="''"
-                  @click="onAddMetadataClicked"
-                  v-if="
-                    (isCurrentUserManager || isCurrentUserSupervisor) &&
-                    !isLoading
-                  "
-                />
-              </div>
+              <sortable-field-header
+                field-name="name"
+                :label="$t('assets.fields.name')"
+                @show-menu="showFieldHeaderMenu"
+              >
+                <template #actions>
+                  <button-simple
+                    class="is-small flexrow-item add-metadata-button"
+                    icon="plus"
+                    :text="''"
+                    @click="onAddMetadataClicked"
+                    v-if="
+                      (isCurrentUserManager || isCurrentUserSupervisor) &&
+                      !isLoading
+                    "
+                  />
+                </template>
+              </sortable-field-header>
             </th>
 
             <th
@@ -81,25 +74,11 @@
               :style="{ left: `${nameWidth}px` }"
               v-if="hasStickyEpisode"
             >
-              <div class="flexrow field-header">
-                <span class="flexrow-item">
-                  {{ $t('assets.fields.episode') }}
-                </span>
-                <span
-                  class="asset-field-menu-button header-icon pointer"
-                  role="button"
-                  tabindex="0"
-                  @click="showFieldHeaderMenu('episode_id', $event)"
-                  @keydown.enter.prevent="
-                    showFieldHeaderMenu('episode_id', $event)
-                  "
-                  @keydown.space.prevent="
-                    showFieldHeaderMenu('episode_id', $event)
-                  "
-                >
-                  <chevron-down-icon :size="14" />
-                </span>
-              </div>
+              <sortable-field-header
+                field-name="episode_id"
+                :label="$t('assets.fields.episode')"
+                @show-menu="showFieldHeaderMenu"
+              />
             </th>
 
             <metadata-header
@@ -151,25 +130,11 @@
                 metadataDisplayHeaders.readyFor
               "
             >
-              <div class="flexrow field-header">
-                <span class="flexrow-item">
-                  {{ $t('assets.fields.ready_for') }}
-                </span>
-                <span
-                  class="asset-field-menu-button header-icon pointer"
-                  role="button"
-                  tabindex="0"
-                  @click="showFieldHeaderMenu('ready_for', $event)"
-                  @keydown.enter.prevent="
-                    showFieldHeaderMenu('ready_for', $event)
-                  "
-                  @keydown.space.prevent="
-                    showFieldHeaderMenu('ready_for', $event)
-                  "
-                >
-                  <chevron-down-icon :size="14" />
-                </span>
-              </div>
+              <sortable-field-header
+                field-name="ready_for"
+                :label="$t('assets.fields.ready_for')"
+                @show-menu="showFieldHeaderMenu"
+              />
             </th>
 
             <th
@@ -182,25 +147,11 @@
                 isAssetDescription
               "
             >
-              <div class="flexrow field-header">
-                <span class="flexrow-item">
-                  {{ $t('assets.fields.description') }}
-                </span>
-                <span
-                  class="asset-field-menu-button header-icon pointer"
-                  role="button"
-                  tabindex="0"
-                  @click="showFieldHeaderMenu('description', $event)"
-                  @keydown.enter.prevent="
-                    showFieldHeaderMenu('description', $event)
-                  "
-                  @keydown.space.prevent="
-                    showFieldHeaderMenu('description', $event)
-                  "
-                >
-                  <chevron-down-icon :size="14" />
-                </span>
-              </div>
+              <sortable-field-header
+                field-name="description"
+                :label="$t('assets.fields.description')"
+                @show-menu="showFieldHeaderMenu"
+              />
             </th>
 
             <th
@@ -214,25 +165,11 @@
                 metadataDisplayHeaders.timeSpent
               "
             >
-              <div class="flexrow field-header">
-                <span class="flexrow-item">
-                  {{ $t('assets.fields.time_spent') }}
-                </span>
-                <span
-                  class="asset-field-menu-button header-icon pointer"
-                  role="button"
-                  tabindex="0"
-                  @click="showFieldHeaderMenu('timeSpent', $event)"
-                  @keydown.enter.prevent="
-                    showFieldHeaderMenu('timeSpent', $event)
-                  "
-                  @keydown.space.prevent="
-                    showFieldHeaderMenu('timeSpent', $event)
-                  "
-                >
-                  <chevron-down-icon :size="14" />
-                </span>
-              </div>
+              <sortable-field-header
+                field-name="timeSpent"
+                :label="$t('assets.fields.time_spent')"
+                @show-menu="showFieldHeaderMenu"
+              />
             </th>
 
             <th
@@ -247,25 +184,11 @@
                 metadataDisplayHeaders.estimation
               "
             >
-              <div class="flexrow field-header">
-                <span class="flexrow-item">
-                  {{ $t('main.estimation_short') }}
-                </span>
-                <span
-                  class="asset-field-menu-button header-icon pointer"
-                  role="button"
-                  tabindex="0"
-                  @click="showFieldHeaderMenu('estimation', $event)"
-                  @keydown.enter.prevent="
-                    showFieldHeaderMenu('estimation', $event)
-                  "
-                  @keydown.space.prevent="
-                    showFieldHeaderMenu('estimation', $event)
-                  "
-                >
-                  <chevron-down-icon :size="14" />
-                </span>
-              </div>
+              <sortable-field-header
+                field-name="estimation"
+                :label="$t('main.estimation_short')"
+                @show-menu="showFieldHeaderMenu"
+              />
             </th>
 
             <th
@@ -277,25 +200,11 @@
                 metadataDisplayHeaders.resolution
               "
             >
-              <div class="flexrow field-header">
-                <span class="flexrow-item">
-                  {{ $t('shots.fields.resolution') }}
-                </span>
-                <span
-                  class="asset-field-menu-button header-icon pointer"
-                  role="button"
-                  tabindex="0"
-                  @click="showFieldHeaderMenu('resolution', $event)"
-                  @keydown.enter.prevent="
-                    showFieldHeaderMenu('resolution', $event)
-                  "
-                  @keydown.space.prevent="
-                    showFieldHeaderMenu('resolution', $event)
-                  "
-                >
-                  <chevron-down-icon :size="14" />
-                </span>
-              </div>
+              <sortable-field-header
+                field-name="resolution"
+                :label="$t('shots.fields.resolution')"
+                @show-menu="showFieldHeaderMenu"
+              />
             </th>
 
             <template v-if="displaySettings.showInfos">
@@ -705,7 +614,6 @@
 </template>
 
 <script>
-import { ChevronDownIcon } from 'lucide-vue-next'
 import { mapGetters, mapActions } from 'vuex'
 
 import { descriptorMixin } from '@/components/mixins/descriptors'
@@ -728,6 +636,7 @@ import AssetListNumbers from '@/components/widgets/AssetListNumbers.vue'
 import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
 import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
 import EntityThumbnail from '@/components/widgets/EntityThumbnail.vue'
+import SortableFieldHeader from '@/components/widgets/SortableFieldHeader.vue'
 import TableHeaderMenu from '@/components/widgets/TableHeaderMenu.vue'
 import TableInfo from '@/components/widgets/TableInfo.vue'
 import TableMetadataHeaderMenu from '@/components/widgets/TableMetadataHeaderMenu.vue'
@@ -752,13 +661,13 @@ export default {
   components: {
     AssetListNumbers,
     ButtonSimple,
-    ChevronDownIcon,
     ComboboxTaskType,
     DescriptionCell,
     EntityThumbnail,
     MetadataInput,
     MetadataHeader,
     RowActionsCell,
+    SortableFieldHeader,
     TableInfo,
     TableHeaderMenu,
     TableMetadataHeaderMenu,
@@ -1341,33 +1250,6 @@ td.ready-for {
   width: 200px;
 }
 
-.field-header {
-  padding-right: 20px;
-  position: relative;
-}
-
-.field-header .flexrow-item:first-child {
-  flex: 1;
-}
-
-.asset-field-menu-button {
-  align-items: center;
-  background: var(--background-alt);
-  border-radius: 50%;
-  display: inline-flex;
-  flex: 0 0 16px;
-  height: 16px;
-  justify-content: center;
-  padding: 1px;
-  position: absolute;
-  right: 0;
-  width: 16px;
-}
-
-.add-metadata-button {
-  margin-left: 0.3em;
-}
-
 .validation-cell {
   min-width: 150px;
   max-width: 150px;
diff --git a/src/components/lists/EpisodeList.vue b/src/components/lists/EpisodeList.vue
index 71ce24a9be..b6c30d4abf 100644
--- a/src/components/lists/EpisodeList.vue
+++ b/src/components/lists/EpisodeList.vue
@@ -47,31 +47,24 @@
               class="name episode-name datatable-row-header"
               ref="th-episode"
             >
-              <div class="flexrow field-header">
-                <span class="flexrow-item">
-                  {{ $t('episodes.fields.name') }}
-                </span>
-                <span
-                  class="asset-field-menu-button header-icon pointer"
-                  role="button"
-                  tabindex="0"
-                  @click="showFieldHeaderMenu('name', $event)"
-                  @keydown.enter.prevent="showFieldHeaderMenu('name', $event)"
-                  @keydown.space.prevent="showFieldHeaderMenu('name', $event)"
-                >
-                  <chevron-down-icon :size="14" />
-                </span>
-                <button-simple
-                  class="is-small flexrow-item"
-                  icon="plus"
-                  :text="''"
-                  @click="onAddMetadataClicked"
-                  v-if="
-                    (isCurrentUserManager || isCurrentUserSupervisor) &&
-                    !isLoading
-                  "
-                />
-              </div>
+              <sortable-field-header
+                field-name="name"
+                :label="$t('episodes.fields.name')"
+                @show-menu="showFieldHeaderMenu"
+              >
+                <template #actions>
+                  <button-simple
+                    class="is-small flexrow-item"
+                    icon="plus"
+                    :text="''"
+                    @click="onAddMetadataClicked"
+                    v-if="
+                      (isCurrentUserManager || isCurrentUserSupervisor) &&
+                      !isLoading
+                    "
+                  />
+                </template>
+              </sortable-field-header>
             </th>
 
             <template v-if="displaySettings.showInfos">
@@ -121,25 +114,11 @@
                 isEpisodeDescription
               "
             >
-              <div class="flexrow field-header">
-                <span class="flexrow-item">
-                  {{ $t('episodes.fields.description') }}
-                </span>
-                <span
-                  class="asset-field-menu-button header-icon pointer"
-                  role="button"
-                  tabindex="0"
-                  @click="showFieldHeaderMenu('description', $event)"
-                  @keydown.enter.prevent="
-                    showFieldHeaderMenu('description', $event)
-                  "
-                  @keydown.space.prevent="
-                    showFieldHeaderMenu('description', $event)
-                  "
-                >
-                  <chevron-down-icon :size="14" />
-                </span>
-              </div>
+              <sortable-field-header
+                field-name="description"
+                :label="$t('episodes.fields.description')"
+                @show-menu="showFieldHeaderMenu"
+              />
             </th>
 
             <template v-if="displaySettings.showInfos">
@@ -567,7 +546,6 @@
 </template>
 
 <script>
-import { ChevronDownIcon } from 'lucide-vue-next'
 import { mapGetters, mapActions } from 'vuex'
 
 import { descriptorMixin } from '@/components/mixins/descriptors'
@@ -582,6 +560,7 @@ import EntityThumbnail from '@/components/widgets/EntityThumbnail.vue'
 import MetadataHeader from '@/components/cells/MetadataHeader.vue'
 import MetadataInput from '@/components/cells/MetadataInput.vue'
 import RowActionsCell from '@/components/cells/RowActionsCell.vue'
+import SortableFieldHeader from '@/components/widgets/SortableFieldHeader.vue'
 import TableMetadataHeaderMenu from '@/components/widgets/TableMetadataHeaderMenu.vue'
 import TableMetadataSelectorMenu from '@/components/widgets/TableMetadataSelectorMenu.vue'
 import TableHeaderMenu from '@/components/widgets/TableHeaderMenu.vue'
@@ -667,12 +646,12 @@ export default {
 
   components: {
     ButtonSimple,
-    ChevronDownIcon,
     DescriptionCell,
     EntityThumbnail,
     MetadataHeader,
     MetadataInput,
     RowActionsCell,
+    SortableFieldHeader,
     TableHeaderMenu,
     TableMetadataHeaderMenu,
     TableMetadataSelectorMenu,
diff --git a/src/components/lists/SequenceList.vue b/src/components/lists/SequenceList.vue
index de3ec77b4d..0988dd7fbe 100644
--- a/src/components/lists/SequenceList.vue
+++ b/src/components/lists/SequenceList.vue
@@ -45,31 +45,24 @@
               class="name sequence-name datatable-row-header"
               ref="th-sequence"
             >
-              <div class="flexrow field-header">
-                <span class="flexrow-item">
-                  {{ $t('sequences.fields.name') }}
-                </span>
-                <span
-                  class="asset-field-menu-button header-icon pointer"
-                  role="button"
-                  tabindex="0"
-                  @click="showFieldHeaderMenu('name', $event)"
-                  @keydown.enter.prevent="showFieldHeaderMenu('name', $event)"
-                  @keydown.space.prevent="showFieldHeaderMenu('name', $event)"
-                >
-                  <chevron-down-icon :size="14" />
-                </span>
-                <button-simple
-                  class="is-small flexrow-item"
-                  icon="plus"
-                  :text="''"
-                  @click="onAddMetadataClicked"
-                  v-if="
-                    (isCurrentUserManager || isCurrentUserSupervisor) &&
-                    !isLoading
-                  "
-                />
-              </div>
+              <sortable-field-header
+                field-name="name"
+                :label="$t('sequences.fields.name')"
+                @show-menu="showFieldHeaderMenu"
+              >
+                <template #actions>
+                  <button-simple
+                    class="is-small flexrow-item"
+                    icon="plus"
+                    :text="''"
+                    @click="onAddMetadataClicked"
+                    v-if="
+                      (isCurrentUserManager || isCurrentUserSupervisor) &&
+                      !isLoading
+                    "
+                  />
+                </template>
+              </sortable-field-header>
             </th>
             <template v-if="displaySettings.showInfos">
               <metadata-header
@@ -116,25 +109,11 @@
                 isSequenceDescription
               "
             >
-              <div class="flexrow field-header">
-                <span class="flexrow-item">
-                  {{ $t('sequences.fields.description') }}
-                </span>
-                <span
-                  class="asset-field-menu-button header-icon pointer"
-                  role="button"
-                  tabindex="0"
-                  @click="showFieldHeaderMenu('description', $event)"
-                  @keydown.enter.prevent="
-                    showFieldHeaderMenu('description', $event)
-                  "
-                  @keydown.space.prevent="
-                    showFieldHeaderMenu('description', $event)
-                  "
-                >
-                  <chevron-down-icon :size="14" />
-                </span>
-              </div>
+              <sortable-field-header
+                field-name="description"
+                :label="$t('sequences.fields.description')"
+                @show-menu="showFieldHeaderMenu"
+              />
             </th>
 
             <th
@@ -534,7 +513,6 @@
 </template>
 
 <script>
-import { ChevronDownIcon } from 'lucide-vue-next'
 import { mapGetters, mapActions } from 'vuex'
 
 import { getEntityPath } from '@/lib/path'
@@ -550,6 +528,7 @@ import EntityThumbnail from '@/components/widgets/EntityThumbnail.vue'
 import MetadataHeader from '@/components/cells/MetadataHeader.vue'
 import MetadataInput from '@/components/cells/MetadataInput.vue'
 import RowActionsCell from '@/components/cells/RowActionsCell.vue'
+import SortableFieldHeader from '@/components/widgets/SortableFieldHeader.vue'
 import TableMetadataHeaderMenu from '@/components/widgets/TableMetadataHeaderMenu.vue'
 import TableMetadataSelectorMenu from '@/components/widgets/TableMetadataSelectorMenu.vue'
 import TableHeaderMenu from '@/components/widgets/TableHeaderMenu.vue'
@@ -627,12 +606,12 @@ export default {
 
   components: {
     ButtonSimple,
-    ChevronDownIcon,
     DescriptionCell,
     EntityThumbnail,
     MetadataHeader,
     MetadataInput,
     RowActionsCell,
+    SortableFieldHeader,
     TableHeaderMenu,
     TableMetadataHeaderMenu,
     TableMetadataSelectorMenu,
diff --git a/src/components/lists/ShotList.vue b/src/components/lists/ShotList.vue
index 25cf25087a..f34b97448b 100644
--- a/src/components/lists/ShotList.vue
+++ b/src/components/lists/ShotList.vue
@@ -43,31 +43,24 @@
               class="name shot-name datatable-row-header"
               ref="th-shot"
             >
-              <div class="flexrow field-header">
-                <span class="flexrow-item">
-                  {{ $t('shots.fields.name') }}
-                </span>
-                <span
-                  class="asset-field-menu-button header-icon pointer"
-                  role="button"
-                  tabindex="0"
-                  @click="showFieldHeaderMenu('name', $event)"
-                  @keydown.enter.prevent="showFieldHeaderMenu('name', $event)"
-                  @keydown.space.prevent="showFieldHeaderMenu('name', $event)"
-                >
-                  <chevron-down-icon :size="14" />
-                </span>
-                <button-simple
-                  class="is-small flexrow"
-                  icon="plus"
-                  :text="''"
-                  @click="onAddMetadataClicked"
-                  v-if="
-                    (isCurrentUserManager || isCurrentUserSupervisor) &&
-                    !isLoading
-                  "
-                />
-              </div>
+              <sortable-field-header
+                field-name="name"
+                :label="$t('shots.fields.name')"
+                @show-menu="showFieldHeaderMenu"
+              >
+                <template #actions>
+                  <button-simple
+                    class="is-small flexrow"
+                    icon="plus"
+                    :text="''"
+                    @click="onAddMetadataClicked"
+                    v-if="
+                      (isCurrentUserManager || isCurrentUserSupervisor) &&
+                      !isLoading
+                    "
+                  />
+                </template>
+              </sortable-field-header>
             </th>
 
             <metadata-header
@@ -117,25 +110,11 @@
                 isShotDescription
               "
             >
-              <div class="flexrow field-header">
-                <span class="flexrow-item">
-                  {{ $t('shots.fields.description') }}
-                </span>
-                <span
-                  class="asset-field-menu-button header-icon pointer"
-                  role="button"
-                  tabindex="0"
-                  @click="showFieldHeaderMenu('description', $event)"
-                  @keydown.enter.prevent="
-                    showFieldHeaderMenu('description', $event)
-                  "
-                  @keydown.space.prevent="
-                    showFieldHeaderMenu('description', $event)
-                  "
-                >
-                  <chevron-down-icon :size="14" />
-                </span>
-              </div>
+              <sortable-field-header
+                field-name="description"
+                :label="$t('shots.fields.description')"
+                @show-menu="showFieldHeaderMenu"
+              />
             </th>
 
             <th
@@ -861,7 +840,6 @@
 </template>
 
 <script>
-import { ChevronDownIcon } from 'lucide-vue-next'
 import { mapGetters, mapActions } from 'vuex'
 
 import preferences from '@/lib/preferences'
@@ -880,6 +858,7 @@ import EntityThumbnail from '@/components/widgets/EntityThumbnail.vue'
 import MetadataHeader from '@/components/cells/MetadataHeader.vue'
 import MetadataInput from '@/components/cells/MetadataInput.vue'
 import RowActionsCell from '@/components/cells/RowActionsCell.vue'
+import SortableFieldHeader from '@/components/widgets/SortableFieldHeader.vue'
 import TableMetadataHeaderMenu from '@/components/widgets/TableMetadataHeaderMenu.vue'
 import TableMetadataSelectorMenu from '@/components/widgets/TableMetadataSelectorMenu.vue'
 import TableHeaderMenu from '@/components/widgets/TableHeaderMenu.vue'
@@ -900,12 +879,12 @@ export default {
 
   components: {
     ButtonSimple,
-    ChevronDownIcon,
     DescriptionCell,
     EntityThumbnail,
     MetadataHeader,
     MetadataInput,
     RowActionsCell,
+    SortableFieldHeader,
     TableHeaderMenu,
     TableMetadataHeaderMenu,
     TableMetadataSelectorMenu,
diff --git a/src/components/widgets/SortableFieldHeader.vue b/src/components/widgets/SortableFieldHeader.vue
new file mode 100644
index 0000000000..540417b39f
--- /dev/null
+++ b/src/components/widgets/SortableFieldHeader.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="flexrow field-header">
+    <span class="flexrow-item">
+      <slot>{{ label }}</slot>
+    </span>
+    <span
+      class="asset-field-menu-button header-icon pointer"
+      role="button"
+      tabindex="0"
+      @click="showMenu"
+      @keydown.enter.prevent="showMenu"
+      @keydown.space.prevent="showMenu"
+    >
+      <chevron-down-icon :size="14" />
+    </span>
+    <slot name="actions" />
+  </div>
+</template>
+
+<script setup>
+import { ChevronDownIcon } from 'lucide-vue-next'
+
+const props = defineProps({
+  fieldName: { type: String, required: true },
+  label: { type: String, default: '' }
+})
+
+const emit = defineEmits(['show-menu'])
+
+const showMenu = event => {
+  emit('show-menu', props.fieldName, event)
+}
+</script>