From 94884d7a7cc35413006e336efed3272dc9a03963 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 20 Dec 2025 14:15:02 -0800
Subject: [PATCH] feat: add queue view toggle stub

---
 .../sidebar/tabs/AssetsSidebarTab.vue         |  2 +
 src/locales/en/main.json                      |  4 +-
 .../assets/components/MediaAssetFilterBar.vue | 44 +++++++++++++++++++
 3 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index 827bd68516..8ed3734a9e 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/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)
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 1953cfb7e9..8aa56564b8 100644
--- a/src/locales/en/main.json
+++ b/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"
   }
-}
\ No newline at end of file
+}
diff --git a/src/platform/assets/components/MediaAssetFilterBar.vue b/src/platform/assets/components/MediaAssetFilterBar.vue
index 0eca412bd3..8d15e13a9b 100644
--- a/src/platform/assets/components/MediaAssetFilterBar.vue
+++ b/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 ?? '')