[refactor] Merge sort button into view settings popover (#9143)

src/platform/assets/components/MediaAssetFilterBar.vue

@@ -20,23 +20,16 @@
           />
         </template>
       </MediaAssetFilterButton>
-      <AssetSortButton
-        v-if="isCloud"
-        v-tooltip.top="{ value: $t('assetBrowser.sortBy') }"
-      >
-        <template #default="{ close }">
-          <MediaAssetSortMenu
-            v-model:sort-by="sortBy"
-            :show-generation-time-sort
-            :close
-          />
-        </template>
-      </AssetSortButton>
       <MediaAssetSettingsButton
         v-tooltip.top="{ value: $t('sideToolbar.mediaAssets.viewSettings') }"
       >
-        <template #default="{ close }">
-          <MediaAssetSettingsMenu v-model:view-mode="viewMode" :close />
+        <template #default>
+          <MediaAssetSettingsMenu
+            v-model:view-mode="viewMode"
+            v-model:sort-by="sortBy"
+            :show-sort-options="isCloud"
+            :show-generation-time-sort
+          />
         </template>
       </MediaAssetSettingsButton>
     </div>
@@ -49,11 +42,9 @@ 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'
-import type { SortBy } from './MediaAssetSortMenu.vue'
 import MediaAssetSettingsButton from './MediaAssetSettingsButton.vue'
 import MediaAssetSettingsMenu from './MediaAssetSettingsMenu.vue'
+import type { SortBy } from './MediaAssetSettingsMenu.vue'
 
 const { showGenerationTimeSort = false } = defineProps<{
   searchQuery: string

src/platform/assets/components/MediaAssetSettingsMenu.vue

@@ -29,20 +29,82 @@
         :class="viewMode !== 'grid' && 'opacity-0'"
       />
     </Button>
+
+    <template v-if="showSortOptions">
+      <div class="border-b w-full border-border-subtle my-1" />
+
+      <Button
+        variant="textonly"
+        class="w-full"
+        @click="handleSortChange('newest')"
+      >
+        <span>{{ $t('sideToolbar.mediaAssets.sortNewestFirst') }}</span>
+        <i
+          class="icon-[lucide--check] ml-auto size-4"
+          :class="sortBy !== 'newest' && 'opacity-0'"
+        />
+      </Button>
+
+      <Button
+        variant="textonly"
+        class="w-full"
+        @click="handleSortChange('oldest')"
+      >
+        <span>{{ $t('sideToolbar.mediaAssets.sortOldestFirst') }}</span>
+        <i
+          class="icon-[lucide--check] ml-auto size-4"
+          :class="sortBy !== 'oldest' && 'opacity-0'"
+        />
+      </Button>
+
+      <template v-if="showGenerationTimeSort">
+        <Button
+          variant="textonly"
+          class="w-full"
+          @click="handleSortChange('longest')"
+        >
+          <span>{{ $t('sideToolbar.mediaAssets.sortLongestFirst') }}</span>
+          <i
+            class="icon-[lucide--check] ml-auto size-4"
+            :class="sortBy !== 'longest' && 'opacity-0'"
+          />
+        </Button>
+
+        <Button
+          variant="textonly"
+          class="w-full"
+          @click="handleSortChange('fastest')"
+        >
+          <span>{{ $t('sideToolbar.mediaAssets.sortFastestFirst') }}</span>
+          <i
+            class="icon-[lucide--check] ml-auto size-4"
+            :class="sortBy !== 'fastest' && 'opacity-0'"
+          />
+        </Button>
+      </template>
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
 import Button from '@/components/ui/button/Button.vue'
 
-const { close } = defineProps<{
-  close: () => void
-}>()
+export type SortBy = 'newest' | 'oldest' | 'longest' | 'fastest'
+
+const { showSortOptions = false, showGenerationTimeSort = false } =
+  defineProps<{
+    showSortOptions?: boolean
+    showGenerationTimeSort?: boolean
+  }>()
 
 const viewMode = defineModel<'list' | 'grid'>('viewMode', { required: true })
+const sortBy = defineModel<SortBy>('sortBy', { required: true })
 
 function handleViewModeChange(value: 'list' | 'grid') {
   viewMode.value = value
-  close()
+}
+
+function handleSortChange(value: SortBy) {
+  sortBy.value = value
 }
 </script>

src/platform/assets/components/MediaAssetSortButton.vue

@@ -1,19 +0,0 @@
-<template>
-  <div class="inline-flex items-center">
-    <Popover>
-      <template #button>
-        <Button variant="secondary" size="icon">
-          <i class="icon-[lucide--arrow-up-down]" />
-        </Button>
-      </template>
-      <template #default="{ close }">
-        <slot :close />
-      </template>
-    </Popover>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
-import Popover from '@/components/ui/Popover.vue'
-</script>

src/platform/assets/components/MediaAssetSortMenu.vue

@@ -1,71 +0,0 @@
-<template>
-  <div class="flex flex-col">
-    <Button
-      variant="textonly"
-      class="w-full"
-      @click="handleSortChange('newest')"
-    >
-      <span>{{ $t('sideToolbar.mediaAssets.sortNewestFirst') }}</span>
-      <i
-        class="icon-[lucide--check] ml-auto size-4"
-        :class="sortBy !== 'newest' && 'opacity-0'"
-      />
-    </Button>
-
-    <Button
-      variant="textonly"
-      class="w-full"
-      @click="handleSortChange('oldest')"
-    >
-      <span>{{ $t('sideToolbar.mediaAssets.sortOldestFirst') }}</span>
-      <i
-        class="icon-[lucide--check] ml-auto size-4"
-        :class="sortBy !== 'oldest' && 'opacity-0'"
-      />
-    </Button>
-
-    <template v-if="showGenerationTimeSort">
-      <Button
-        variant="textonly"
-        class="w-full"
-        @click="handleSortChange('longest')"
-      >
-        <span>{{ $t('sideToolbar.mediaAssets.sortLongestFirst') }}</span>
-        <i
-          class="icon-[lucide--check] ml-auto size-4"
-          :class="sortBy !== 'longest' && 'opacity-0'"
-        />
-      </Button>
-
-      <Button
-        variant="textonly"
-        class="w-full"
-        @click="handleSortChange('fastest')"
-      >
-        <span>{{ $t('sideToolbar.mediaAssets.sortFastestFirst') }}</span>
-        <i
-          class="icon-[lucide--check] ml-auto size-4"
-          :class="sortBy !== 'fastest' && 'opacity-0'"
-        />
-      </Button>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue'
-
-export type SortBy = 'newest' | 'oldest' | 'longest' | 'fastest'
-
-const { close, showGenerationTimeSort = false } = defineProps<{
-  close: () => void
-  showGenerationTimeSort?: boolean
-}>()
-
-const sortBy = defineModel<SortBy>('sortBy', { required: true })
-
-const handleSortChange = (value: SortBy) => {
-  sortBy.value = value
-  close()
-}
-</script>