Design: Model management (#7190)

## Summary

Assorted updates to the components involved in uploading personal
models.

## Changes

- Standardize Import buttons
- Let the images fill the space on the card
- Order by recent by default
- Nicer display on the model select popover

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7190-Design-Model-management-2c06d73d365081e7b9fed7a83b730c0f)
by [Unito](https://www.unito.io)

src/platform/assets/components/AssetBrowserModal.vue

@@ -39,7 +39,7 @@
           :on-click="showUploadDialog"
         >
           <template #icon>
-            <i class="icon-[lucide--package-plus]" />
+            <i class="icon-[lucide--folder-input]" />
           </template>
         </IconTextButton>
       </div>

src/platform/assets/components/AssetCard.vue

@@ -26,7 +26,7 @@
         v-else
         :src="asset.preview_url"
         :alt="displayName"
-        class="size-full object-contain cursor-pointer"
+        class="size-full object-cover cursor-pointer"
         role="button"
         @click.self="interactive && $emit('select', asset)"
       />

src/platform/assets/components/AssetFilterBar.vue

@@ -1,12 +1,18 @@
 <template>
-  <div :class="containerClasses" data-component-id="asset-filter-bar">
-    <div :class="leftSideClasses" data-component-id="asset-filter-bar-left">
+  <div
+    class="flex gap-4 items-center justify-between px-6 pt-2 pb-6"
+    data-component-id="asset-filter-bar"
+  >
+    <div
+      class="flex gap-4 items-center"
+      data-component-id="asset-filter-bar-left"
+    >
       <MultiSelect
         v-if="availableFileFormats.length > 0"
         v-model="fileFormats"
         :label="$t('assetBrowser.fileFormats')"
         :options="availableFileFormats"
-        :class="selectClasses"
+        class="min-w-32"
         data-component-id="asset-filter-file-formats"
         @update:model-value="handleFilterChange"
       />
@@ -16,18 +22,18 @@
         v-model="baseModels"
         :label="$t('assetBrowser.baseModels')"
         :options="availableBaseModels"
-        :class="selectClasses"
+        class="min-w-32"
         data-component-id="asset-filter-base-models"
         @update:model-value="handleFilterChange"
       />
     </div>
 
-    <div :class="rightSideClasses" data-component-id="asset-filter-bar-right">
+    <div class="flex items-center" data-component-id="asset-filter-bar-right">
       <SingleSelect
         v-model="sortBy"
         :label="$t('assetBrowser.sortBy')"
         :options="sortOptions"
-        :class="selectClasses"
+        class="min-w-32"
         data-component-id="asset-filter-sort"
         @update:model-value="handleFilterChange"
       >
@@ -48,7 +54,6 @@ import type { SelectOption } from '@/components/input/types'
 import { t } from '@/i18n'
 import { useAssetFilterOptions } from '@/platform/assets/composables/useAssetFilterOptions'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import { cn } from '@/utils/tailwindUtil'
 
 export interface FilterState {
   fileFormats: string[]
@@ -56,35 +61,31 @@ export interface FilterState {
   sortBy: string
 }
 
+const SORT_OPTIONS = [
+  { name: t('assetBrowser.sortRecent'), value: 'recent' },
+  { name: t('assetBrowser.sortAZ'), value: 'name-asc' },
+  { name: t('assetBrowser.sortZA'), value: 'name-desc' }
+] as const
+
+type SortOption = (typeof SORT_OPTIONS)[number]['value']
+
+const sortOptions = [...SORT_OPTIONS]
+
 const { assets = [] } = defineProps<{
   assets?: AssetItem[]
 }>()
 
 const fileFormats = ref<SelectOption[]>([])
 const baseModels = ref<SelectOption[]>([])
-const sortBy = ref('name-asc')
+const sortBy = ref<SortOption>('recent')
 
 const { availableFileFormats, availableBaseModels } =
   useAssetFilterOptions(assets)
 
-const sortOptions = [
-  { name: t('assetBrowser.sortAZ'), value: 'name-asc' },
-  { name: t('assetBrowser.sortZA'), value: 'name-desc' },
-  { name: t('assetBrowser.sortRecent'), value: 'recent' }
-]
-
 const emit = defineEmits<{
   filterChange: [filters: FilterState]
 }>()
 
-const containerClasses = cn(
-  'flex gap-4 items-center justify-between',
-  'px-6 pt-2 pb-6'
-)
-const leftSideClasses = cn('flex gap-4 items-center')
-const rightSideClasses = cn('flex items-center')
-const selectClasses = cn('min-w-32')
-
 function handleFilterChange() {
   emit('filterChange', {
     fileFormats: fileFormats.value.map((option: SelectOption) => option.value),