Merge remote-tracking branch 'origin/main' into bl-stacked-assets

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -63,48 +63,56 @@
       @approach-end="emit('approach-end')"
     >
       <template #item="{ item }">
-        <AssetsListItem
-          role="button"
-          tabindex="0"
-          :aria-label="
-            t('assetBrowser.ariaLabel.assetCard', {
-              name: item.asset.name,
-              type: getMediaTypeFromFilename(item.asset.name)
-            })
-          "
-          :class="
-            cn(
-              getAssetCardClass(isSelected(item.asset.id)),
-              item.isChild && 'pl-6'
-            )
-          "
-          :preview-url="item.asset.preview_url"
-          :preview-alt="item.asset.name"
-          :icon-name="
-            iconForMediaType(getMediaTypeFromFilename(item.asset.name))
-          "
-          :primary-text="getAssetPrimaryText(item.asset)"
-          :secondary-text="getAssetSecondaryText(item.asset)"
-          :stack-count="getStackCount(item.asset)"
-          :stack-indicator-label="t('mediaAsset.actions.seeMoreOutputs')"
-          :stack-expanded="isStackExpanded(item.asset)"
-          @mouseenter="onAssetEnter(item.asset.id)"
-          @mouseleave="onAssetLeave(item.asset.id)"
-          @contextmenu.prevent.stop="emit('context-menu', $event, item.asset)"
-          @click.stop="emit('select-asset', item.asset, selectableAssets)"
-          @stack-toggle="toggleStack(item.asset)"
-        >
-          <template v-if="hoveredAssetId === item.asset.id" #actions>
-            <Button
-              variant="secondary"
-              size="icon"
-              :aria-label="t('mediaAsset.actions.moreOptions')"
-              @click.stop="emit('context-menu', $event, item.asset)"
-            >
-              <i class="icon-[lucide--ellipsis] size-4" />
-            </Button>
-          </template>
-        </AssetsListItem>
+        <div class="relative">
+          <LoadingOverlay
+            :loading="assetsStore.isAssetDeleting(item.asset.id)"
+            size="sm"
+          >
+            <i class="pi pi-trash text-xs" />
+          </LoadingOverlay>
+          <AssetsListItem
+            role="button"
+            tabindex="0"
+            :aria-label="
+              t('assetBrowser.ariaLabel.assetCard', {
+                name: item.asset.name,
+                type: getMediaTypeFromFilename(item.asset.name)
+              })
+            "
+            :class="
+              cn(
+                getAssetCardClass(isSelected(item.asset.id)),
+                item.isChild && 'pl-6'
+              )
+            "
+            :preview-url="item.asset.preview_url"
+            :preview-alt="item.asset.name"
+            :icon-name="
+              iconForMediaType(getMediaTypeFromFilename(item.asset.name))
+            "
+            :primary-text="getAssetPrimaryText(item.asset)"
+            :secondary-text="getAssetSecondaryText(item.asset)"
+            :stack-count="getStackCount(item.asset)"
+            :stack-indicator-label="t('mediaAsset.actions.seeMoreOutputs')"
+            :stack-expanded="isStackExpanded(item.asset)"
+            @mouseenter="onAssetEnter(item.asset.id)"
+            @mouseleave="onAssetLeave(item.asset.id)"
+            @contextmenu.prevent.stop="emit('context-menu', $event, item.asset)"
+            @click.stop="emit('select-asset', item.asset, selectableAssets)"
+            @stack-toggle="toggleStack(item.asset)"
+          >
+            <template v-if="hoveredAssetId === item.asset.id" #actions>
+              <Button
+                variant="secondary"
+                size="icon"
+                :aria-label="t('mediaAsset.actions.moreOptions')"
+                @click.stop="emit('context-menu', $event, item.asset)"
+              >
+                <i class="icon-[lucide--ellipsis] size-4" />
+              </Button>
+            </template>
+          </AssetsListItem>
+        </div>
       </template>
     </VirtualGrid>
   </div>
@@ -114,6 +122,7 @@
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import LoadingOverlay from '@/components/common/LoadingOverlay.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useJobActions } from '@/composables/queue/useJobActions'
@@ -124,6 +133,7 @@ import type { OutputStackListItem } from '@/platform/assets/composables/useOutpu
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { iconForMediaType } from '@/platform/assets/utils/mediaIconUtil'
+import { useAssetsStore } from '@/stores/assetsStore'
 import { isActiveJobState } from '@/utils/queueUtil'
 import {
   formatDuration,
@@ -150,6 +160,8 @@ const {
   assetType?: 'input' | 'output'
 }>()
 
+const assetsStore = useAssetsStore()
+
 const emit = defineEmits<{
   (e: 'select-asset', asset: AssetItem, assets?: AssetItem[]): void
   (e: 'context-menu', event: MouseEvent, asset: AssetItem): void