feat: add queue view toggle stub

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -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)

src/locales/en/main.json

@@ -718,6 +718,8 @@
       "colonPercent": ": {percent}",
       "currentNode": "Current node:",
       "viewAllJobs": "View all jobs",
+      "viewList": "List view",
+      "viewGrid": "Grid view",
       "running": "running",
       "preview": "Preview",
       "interruptAll": "Interrupt all running jobs",
@@ -2449,4 +2451,4 @@
     "recentReleases": "Recent releases",
     "helpCenterMenu": "Help Center Menu"
   }
-}
+}

src/platform/assets/components/MediaAssetFilterBar.vue

@@ -31,12 +31,55 @@
         />
       </template>
     </AssetSortButton>
+    <div
+      class="inline-flex items-center gap-1 rounded-lg bg-secondary-background p-1"
+      role="group"
+    >
+      <Button
+        type="button"
+        variant="muted-textonly"
+        size="icon"
+        :aria-label="$t('sideToolbar.queueProgressOverlay.viewList')"
+        :aria-pressed="viewMode === 'list'"
+        :class="
+          cn(
+            'rounded-lg',
+            viewMode === 'list'
+              ? 'bg-secondary-background-selected text-text-primary hover:bg-secondary-background-selected'
+              : 'text-text-secondary hover:bg-secondary-background-hover'
+          )
+        "
+        @click="viewMode = 'list'"
+      >
+        <i class="icon-[lucide--table-of-contents] size-4" />
+      </Button>
+      <Button
+        type="button"
+        variant="muted-textonly"
+        size="icon"
+        :aria-label="$t('sideToolbar.queueProgressOverlay.viewGrid')"
+        :aria-pressed="viewMode === 'grid'"
+        :class="
+          cn(
+            'rounded-lg',
+            viewMode === 'grid'
+              ? 'bg-secondary-background-selected text-text-primary hover:bg-secondary-background-selected'
+              : 'text-text-secondary hover:bg-secondary-background-hover'
+          )
+        "
+        @click="viewMode = 'grid'"
+      >
+        <i class="icon-[lucide--layout-grid] size-4" />
+      </Button>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import SearchBox from '@/components/common/SearchBox.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { isCloud } from '@/platform/distribution/types'
+import { cn } from '@/utils/tailwindUtil'
 
 import MediaAssetFilterButton from './MediaAssetFilterButton.vue'
 import MediaAssetFilterMenu from './MediaAssetFilterMenu.vue'
@@ -56,6 +99,7 @@ const emit = defineEmits<{
 }>()
 
 const sortBy = defineModel<SortBy>('sortBy', { required: true })
+const viewMode = defineModel<'list' | 'grid'>('viewMode', { required: true })
 
 const handleSearchChange = (value: string | undefined) => {
   emit('update:searchQuery', value ?? '')