Asset Browser Design Review + Filters (#5737)

## Summary

Fixed design feedback and wired up the filter controls.

## Review Focus

Design Feedback:
-
[4872888](48728881af)
-
[9a0b63e](9a0b63edce)

Filters Hookup:
-
[07f22f8](07f22f8074)

Misc (can focus less on):
- claude guidance:
[23e6fa9](23e6fa9723)
- test helpers:
[7801ed9](7801ed9e28)

## Screenshots (if applicable)
<img width="1534" height="1175" alt="Screenshot 2025-09-23 at 1 03
12 PM"
src="https://github.com/user-attachments/assets/d82088e4-7d72-4c6f-904e-5180774d64a5"
/>

<img width="1794" height="793" alt="Screenshot 2025-09-23 at 1 03 22 PM"
src="https://github.com/user-attachments/assets/56eac2ba-5ecc-4a20-843f-ce683dea668c"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5737-Asset-Browser-Design-Review-Filters-2776d73d3650813e890bd16fa6a0433f)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: GitHub Action <action@github.com>
This commit is contained in:
Arjan Singh
2025-09-25 11:17:26 -07:00
committed by GitHub
parent a0c06bd723
commit 13ce23399c
17 changed files with 473 additions and 130 deletions

View File

@@ -224,9 +224,9 @@ describe('useAssetBrowser', () => {
createApiAsset({ name: 'beta.safetensors' })
]
const { sortBy, filteredAssets } = useAssetBrowser(assets)
const { updateFilters, filteredAssets } = useAssetBrowser(assets)
sortBy.value = 'name'
updateFilters({ sortBy: 'name', fileFormats: [], baseModels: [] })
await nextTick()
const names = filteredAssets.value.map((asset) => asset.name)
@@ -244,9 +244,9 @@ describe('useAssetBrowser', () => {
createApiAsset({ created_at: '2024-02-01T00:00:00Z' })
]
const { sortBy, filteredAssets } = useAssetBrowser(assets)
const { updateFilters, filteredAssets } = useAssetBrowser(assets)
sortBy.value = 'date'
updateFilters({ sortBy: 'recent', fileFormats: [], baseModels: [] })
await nextTick()
const dates = filteredAssets.value.map((asset) => asset.created_at)