From bb2e9fbf790f05462587ff41e8b369e9965e0ca1 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Sat, 24 Jan 2026 07:28:14 -0800
Subject: [PATCH] Don't clear selected on view switch

---
 .../tabs/AssetsSidebarListView.stories.ts     | 23 +++++++++++++--
 .../sidebar/tabs/AssetsSidebarListView.vue    | 29 +++++++------------
 .../sidebar/tabs/AssetsSidebarTab.vue         | 27 ++++++++++-------
 3 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/src/components/sidebar/tabs/AssetsSidebarListView.stories.ts b/src/components/sidebar/tabs/AssetsSidebarListView.stories.ts
index 2c50cab17..19305df01 100644
--- a/src/components/sidebar/tabs/AssetsSidebarListView.stories.ts
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.stories.ts
@@ -1,7 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { computed } from 'vue'
 
 import type { JobAction } from '@/composables/queue/useJobActions'
 import type { JobListItem } from '@/composables/queue/useJobList'
+import { useOutputStacks } from '@/platform/assets/composables/useOutputStacks'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { setMockJobActions } from '@/storybook/mocks/useJobActions'
 import { setMockJobItems } from '@/storybook/mocks/useJobList'
@@ -138,16 +140,33 @@ function renderAssetsSidebarListView(args: StoryArgs) {
     setup() {
       setMockJobItems(args.jobs)
       setMockJobActions(args.actionsByJobId ?? {})
+      const { assetItems, selectableAssets, isStackExpanded, toggleStack } =
+        useOutputStacks({
+          assets: computed(() => args.assets)
+        })
       const selectedIds = new Set(args.selectedAssetIds ?? [])
       function isSelected(assetId: string) {
         return selectedIds.has(assetId)
       }
 
-      return { args, isSelected }
+      return {
+        args,
+        assetItems,
+        selectableAssets,
+        isSelected,
+        isStackExpanded,
+        toggleStack
+      }
     },
     template: `
       <div class="h-[520px] w-[320px] overflow-hidden rounded-lg border border-panel-border">
-        <AssetsSidebarListView :assets="args.assets" :is-selected="isSelected" />
+        <AssetsSidebarListView
+          :asset-items="assetItems"
+          :selectable-assets="selectableAssets"
+          :is-selected="isSelected"
+          :is-stack-expanded="isStackExpanded"
+          :toggle-stack="toggleStack"
+        />
       </div>
     `
   }
diff --git a/src/components/sidebar/tabs/AssetsSidebarListView.vue b/src/components/sidebar/tabs/AssetsSidebarListView.vue
index 962042f39..b8373cda0 100644
--- a/src/components/sidebar/tabs/AssetsSidebarListView.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.vue
@@ -40,7 +40,7 @@
     </div>
 
     <div
-      v-if="assets.length"
+      v-if="assetItems.length"
       :class="cn('px-2', activeJobItems.length && 'mt-2')"
     >
       <div
@@ -111,7 +111,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
@@ -120,7 +120,6 @@ import { useJobActions } from '@/composables/queue/useJobActions'
 import type { JobListItem } from '@/composables/queue/useJobList'
 import { useJobList } from '@/composables/queue/useJobList'
 import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
-import { useOutputStacks } from '@/platform/assets/composables/useOutputStacks'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { iconForMediaType } from '@/platform/assets/utils/mediaIconUtil'
@@ -135,12 +134,18 @@ import { iconForJobState } from '@/utils/queueDisplay'
 import { cn } from '@/utils/tailwindUtil'
 
 const {
-  assets,
+  assetItems,
+  selectableAssets,
   isSelected,
+  isStackExpanded,
+  toggleStack,
   assetType = 'output'
 } = defineProps<{
-  assets: AssetItem[]
+  assetItems: { key: string; asset: AssetItem; isChild?: boolean }[]
+  selectableAssets: AssetItem[]
   isSelected: (assetId: string) => boolean
+  isStackExpanded: (asset: AssetItem) => boolean
+  toggleStack: (asset: AssetItem) => void
   assetType?: 'input' | 'output'
 }>()
 
@@ -148,18 +153,12 @@ const emit = defineEmits<{
   (e: 'select-asset', asset: AssetItem, assets?: AssetItem[]): void
   (e: 'context-menu', event: MouseEvent, asset: AssetItem): void
   (e: 'approach-end'): void
-  (e: 'assets-change', assets: AssetItem[]): void
 }>()
 
 const { t } = useI18n()
 const { jobItems } = useJobList()
 const hoveredJobId = ref<string | null>(null)
 const hoveredAssetId = ref<string | null>(null)
-const { assetItems, selectableAssets, isStackExpanded, toggleStack } =
-  useOutputStacks({
-    assets: computed(() => assets)
-  })
-
 const activeJobItems = computed(() =>
   jobItems.value.filter((item) => isActiveJobState(item.state))
 )
@@ -171,14 +170,6 @@ const hoveredJob = computed(() =>
 )
 const { cancelAction, canCancelJob, runCancelJob } = useJobActions(hoveredJob)
 
-watch(
-  selectableAssets,
-  (nextAssets) => {
-    emit('assets-change', nextAssets)
-  },
-  { immediate: true }
-)
-
 const listGridStyle = {
   display: 'grid',
   gridTemplateColumns: 'minmax(0, 1fr)',
diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index 0acf2473f..76e70480c 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -98,11 +98,13 @@
       <div v-else class="relative size-full" @click="handleEmptySpaceClick">
         <AssetsSidebarListView
           v-if="isListView"
-          :assets="displayAssets"
+          :asset-items="listViewAssetItems"
           :is-selected="isSelected"
+          :selectable-assets="listViewSelectableAssets"
+          :is-stack-expanded="isListViewStackExpanded"
+          :toggle-stack="toggleListViewStack"
           :asset-type="activeTab"
           @select-asset="handleAssetSelect"
-          @assets-change="handleListViewAssetsChange"
           @context-menu="handleAssetContextMenu"
           @approach-end="handleApproachEnd"
         />
@@ -226,6 +228,7 @@ import { useMediaAssets } from '@/platform/assets/composables/media/useMediaAsse
 import { useAssetSelection } from '@/platform/assets/composables/useAssetSelection'
 import { useMediaAssetActions } from '@/platform/assets/composables/useMediaAssetActions'
 import { useMediaAssetFiltering } from '@/platform/assets/composables/useMediaAssetFiltering'
+import { useOutputStacks } from '@/platform/assets/composables/useOutputStacks'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import type { MediaKind } from '@/platform/assets/schemas/mediaAssetSchema'
@@ -380,11 +383,19 @@ const displayAssets = computed(() => {
   return filteredAssets.value
 })
 
-const listViewAssets = ref<AssetItem[]>([])
+const {
+  assetItems: listViewAssetItems,
+  selectableAssets: listViewSelectableAssets,
+  isStackExpanded: isListViewStackExpanded,
+  toggleStack: toggleListViewStack
+} = useOutputStacks({
+  assets: computed(() => displayAssets.value)
+})
 
-const visibleAssets = computed(() =>
-  isListView.value ? listViewAssets.value : displayAssets.value
-)
+const visibleAssets = computed(() => {
+  if (!isListView.value) return displayAssets.value
+  return listViewSelectableAssets.value
+})
 
 const selectedAssets = computed(() => getSelectedAssets(visibleAssets.value))
 
@@ -473,10 +484,6 @@ const handleAssetSelect = (asset: AssetItem, assets?: AssetItem[]) => {
   handleAssetClick(asset, index, assetList)
 }
 
-const handleListViewAssetsChange = (assets: AssetItem[]) => {
-  listViewAssets.value = assets
-}
-
 function handleAssetContextMenu(event: MouseEvent, asset: AssetItem) {
   contextMenuAsset.value = asset
   void nextTick(() => {