[QPOv2] Add media assets viewmode toggle (#7729)

Adds a button to toggle the view mode of the media assets panel

<img width="530" height="326" alt="image"
src="https://github.com/user-attachments/assets/0946e87d-03b0-4606-9142-ac18aae89ecc"
/>

Part of the QPO v2 iteration, figma design can be found
[here](https://www.figma.com/design/LVilZgHGk5RwWOkVN6yCEK/Queue-Progress-Modal?node-id=3330-37286&m=dev).
This will be implemented in a series of stacked PRs that can be reviewed
and merged individually.

main <-- #7729, #7731, #7737, #7743, #7745

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7729-QPOv2-Add-media-assets-viewmode-toggle-2d16d73d365081e5b641efce5a5c1662)
by [Unito](https://www.unito.io)
This commit is contained in:
Benjamin Lu
2026-01-06 12:24:41 -08:00
committed by GitHub
parent 14d0ec73f6
commit 372890811d
8 changed files with 101 additions and 3 deletions

View File

@@ -47,6 +47,7 @@
<MediaAssetFilterBar
v-model:search-query="searchQuery"
v-model:sort-by="sortBy"
v-model:view-mode="viewMode"
v-model:media-type-filters="mediaTypeFilters"
class="pb-1 px-2 2xl:px-4"
:show-generation-time-sort="activeTab === 'output'"
@@ -198,6 +199,7 @@ const activeTab = ref<'input' | 'output'>('output')
const folderPromptId = ref<string | null>(null)
const folderExecutionTime = ref<number | undefined>(undefined)
const isInFolderView = computed(() => folderPromptId.value !== null)
const viewMode = ref<'list' | 'grid'>('grid')
// Track which asset's context menu is open (for single-instance context menu management)
const openContextMenuId = ref<string | null>(null)