feat: Add multi-select functionality and improve folder view for media assets

  - Add bulk download/delete for multiple selected assets
  - Hide delete buttons in folder view
  - Activate keyboard shortcuts only when sidebar is open
  - Add activate/deactivate lifecycle methods to useAssetSelection

Author: viva-jinyi

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -58,6 +58,7 @@
               :selected="isSelected(item.id)"
               :show-output-count="shouldShowOutputCount(item)"
               :output-count="getOutputCount(item)"
+              :show-delete-button="!isInFolderView"
               @click="handleAssetSelect(item)"
               @zoom="handleZoomClick(item)"
               @output-count-click="enterFolderView(item)"
@@ -115,6 +116,7 @@
         </div>
         <div class="flex gap-2">
           <IconTextButton
+            v-if="!isInFolderView"
             :label="$t('mediaAsset.selection.deleteSelected')"
             type="secondary"
             icon-position="right"
@@ -147,7 +149,7 @@
 <script setup lang="ts">
 import ProgressSpinner from 'primevue/progressspinner'
 import { useToast } from 'primevue/usetoast'
-import { computed, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import TextButton from '@/components/button/TextButton.vue'
@@ -160,6 +162,7 @@ import { t } from '@/i18n'
 import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
 import { useMediaAssets } from '@/platform/assets/composables/media/useMediaAssets'
 import { useAssetSelection } from '@/platform/assets/composables/useAssetSelection'
+import { useMediaAssetActions } from '@/platform/assets/composables/useMediaAssetActions'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { ResultItemImpl } from '@/stores/queueStore'
@@ -202,11 +205,11 @@ const {
   selectedCount,
   clearSelection,
   getSelectedAssets,
-  reset: resetSelection
+  activate: activateSelection,
+  deactivate: deactivateSelection
 } = useAssetSelection()
 
-// Asset actions - will be used for individual assets later
-// const { downloadAsset, deleteAsset } = useMediaAssetActions()
+const { downloadMultipleAssets, deleteMultipleAssets } = useMediaAssetActions()
 
 // Hover state for selection count
 const isHoveringSelectionCount = ref(false)
@@ -347,9 +350,12 @@ const exitFolderView = () => {
   clearSelection()
 }
 
-// Clean up selection when component unmounts
+onMounted(() => {
+  activateSelection()
+})
+
 onUnmounted(() => {
-  resetSelection()
+  deactivateSelection()
 })
 
 const handleDeselectAll = () => {
@@ -380,15 +386,13 @@ const copyJobId = async () => {
 
 const handleDownloadSelected = () => {
   const selectedAssets = getSelectedAssets(displayAssets.value)
-  // TODO: Implement actual download logic
-  // eslint-disable-next-line no-console
-  console.log('Download selected assets:', selectedAssets)
+  downloadMultipleAssets(selectedAssets)
+  clearSelection()
 }
 
 const handleDeleteSelected = async () => {
   const selectedAssets = getSelectedAssets(displayAssets.value)
-  // TODO: Implement actual delete logic
-  // eslint-disable-next-line no-console
-  console.log('Delete selected assets:', selectedAssets)
+  await deleteMultipleAssets(selectedAssets)
+  clearSelection()
 }
 </script>

src/locales/en/main.json

@@ -1779,6 +1779,8 @@
   "mediaAsset": {
     "deleteAssetTitle": "Delete this asset?",
     "deleteAssetDescription": "This asset will be permanently removed.",
+    "deleteSelectedTitle": "Delete selected assets?",
+    "deleteSelectedDescription": "{count} asset(s) will be permanently removed.",
     "assetDeletedSuccessfully": "Asset deleted successfully",
     "deletingImportedFilesCloudOnly": "Deleting imported files is only supported in cloud version",
     "failedToDeleteAsset": "Failed to delete asset",
@@ -1793,7 +1795,10 @@
       "deselectAll": "Deselect all",
       "downloadSelected": "Download",
       "deleteSelected": "Delete",
-      "downloadStarted": "Downloading {count} files..."
+      "downloadStarted": "Downloading {count} files...",
+      "downloadsStarted": "Started downloading {count} file(s)",
+      "assetsDeletedSuccessfully": "{count} asset(s) deleted successfully",
+      "failedToDeleteAssets": "Failed to delete selected assets"
     }
   },
   "actionbar": {

src/platform/assets/components/MediaAssetActions.vue

@@ -1,6 +1,6 @@
 <template>
   <IconGroup>
-    <IconButton v-if="showDeleteButton" size="sm" @click="handleDelete">
+    <IconButton v-if="shouldShowDeleteButton" size="sm" @click="handleDelete">
       <i class="icon-[lucide--trash-2] size-4" />
     </IconButton>
     <IconButton size="sm" @click="handleDownload">
@@ -14,6 +14,7 @@
       <template #default="{ close }">
         <MediaAssetMoreMenu
           :close="close"
+          :show-delete-button="showDeleteButton"
           @inspect="emit('inspect')"
           @asset-deleted="emit('asset-deleted')"
         />
@@ -34,6 +35,10 @@ import { useMediaAssetActions } from '../composables/useMediaAssetActions'
 import { MediaAssetKey } from '../schemas/mediaAssetSchema'
 import MediaAssetMoreMenu from './MediaAssetMoreMenu.vue'
 
+const { showDeleteButton } = defineProps<{
+  showDeleteButton?: boolean
+}>()
+
 const emit = defineEmits<{
   menuStateChanged: [isOpen: boolean]
   inspect: []
@@ -47,10 +52,12 @@ const assetType = computed(() => {
   return context?.value?.type || asset.value?.tags?.[0] || 'output'
 })
 
-const showDeleteButton = computed(() => {
-  return (
+const shouldShowDeleteButton = computed(() => {
+  const propAllows = showDeleteButton ?? true
+  const typeAllows =
     assetType.value === 'output' || (assetType.value === 'input' && isCloud)
-  )
+
+  return propAllows && typeAllows
 })
 
 const handleDelete = async () => {

src/platform/assets/components/MediaAssetCard.vue

@@ -15,9 +15,6 @@
     variant="ghost"
     rounded="lg"
     :class="containerClasses"
-    @click="handleCardClick"
-    @keydown.enter="handleCardClick"
-    @keydown.space.prevent="handleCardClick"
   >
     <template #top>
       <CardTop
@@ -50,6 +47,7 @@
         <!-- Actions overlay (top-left) - show on hover or when menu is open -->
         <template v-if="showActionsOverlay" #top-left>
           <MediaAssetActions
+            :show-delete-button="showDeleteButton ?? true"
             @menu-state-changed="isMenuOpen = $event"
             @inspect="handleZoomClick"
             @asset-deleted="handleAssetDelete"
@@ -174,12 +172,20 @@ function getBottomComponent(kind: MediaKind) {
   return mediaComponents.bottom[kind] || mediaComponents.bottom.image
 }
 
-const { asset, loading, selected, showOutputCount, outputCount } = defineProps<{
+const {
+  asset,
+  loading,
+  selected,
+  showOutputCount,
+  outputCount,
+  showDeleteButton
+} = defineProps<{
   asset?: AssetItem
   loading?: boolean
   selected?: boolean
   showOutputCount?: boolean
   outputCount?: number
+  showDeleteButton?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -312,12 +318,6 @@ const showFileFormatChip = computed(
     (!isVideoPlaying.value || isCardOrOverlayHovered.value)
 )
 
-const handleCardClick = () => {
-  if (adaptedAsset.value) {
-    actions.selectAsset(adaptedAsset.value)
-  }
-}
-
 const handleOverlayMouseEnter = () => {
   isOverlayHovered.value = true
 }

src/platform/assets/components/MediaAssetMoreMenu.vue

@@ -75,10 +75,10 @@
       </template>
     </IconTextButton>
 
-    <MediaAssetButtonDivider v-if="showCopyJobId && showDeleteButton" />
+    <MediaAssetButtonDivider v-if="showCopyJobId && shouldShowDeleteButton" />
 
     <IconTextButton
-      v-if="showDeleteButton"
+      v-if="shouldShowDeleteButton"
       type="transparent"
       class="dark-theme:text-white"
       label="Delete"
@@ -101,8 +101,9 @@ import { useMediaAssetActions } from '../composables/useMediaAssetActions'
 import { MediaAssetKey } from '../schemas/mediaAssetSchema'
 import MediaAssetButtonDivider from './MediaAssetButtonDivider.vue'
 
-const { close } = defineProps<{
+const { close, showDeleteButton } = defineProps<{
   close: () => void
+  showDeleteButton?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -124,13 +125,12 @@ const showCopyJobId = computed(() => {
   return assetType.value !== 'input'
 })
 
-// Delete button should be shown for:
-// - All output files (can be deleted via history)
-// - Input files only in cloud environment
-const showDeleteButton = computed(() => {
-  return (
+const shouldShowDeleteButton = computed(() => {
+  const propAllows = showDeleteButton ?? true
+  const typeAllows =
     assetType.value === 'output' || (assetType.value === 'input' && isCloud)
-  )
+
+  return propAllows && typeAllows
 })
 
 const handleInspect = () => {

src/platform/assets/composables/useAssetSelection.ts

@@ -1,16 +1,24 @@
 import { useKeyModifier } from '@vueuse/core'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { useAssetSelectionStore } from '@/platform/assets/composables/useAssetSelectionStore'
 
 export function useAssetSelection() {
   const selectionStore = useAssetSelectionStore()
 
-  // Key modifiers
-  const shiftKey = useKeyModifier('Shift')
-  const ctrlKey = useKeyModifier('Control')
-  const metaKey = useKeyModifier('Meta')
+  // Track whether the asset selection is active (e.g., when sidebar is open)
+  const isActive = ref<boolean>(true)
+
+  // Key modifiers - raw values
+  const shiftKeyRaw = useKeyModifier('Shift')
+  const ctrlKeyRaw = useKeyModifier('Control')
+  const metaKeyRaw = useKeyModifier('Meta')
+
+  // Only respond to key modifiers when active
+  const shiftKey = computed(() => isActive.value && shiftKeyRaw.value)
+  const ctrlKey = computed(() => isActive.value && ctrlKeyRaw.value)
+  const metaKey = computed(() => isActive.value && metaKeyRaw.value)
   const cmdOrCtrlKey = computed(() => ctrlKey.value || metaKey.value)
 
   /**
@@ -80,6 +88,22 @@ export function useAssetSelection() {
     return allAssets.filter((asset) => selectionStore.isSelected(asset.id))
   }
 
+  /**
+   * Activate key event listeners (when sidebar opens)
+   */
+  function activate() {
+    isActive.value = true
+  }
+
+  /**
+   * Deactivate key event listeners (when sidebar closes)
+   */
+  function deactivate() {
+    isActive.value = false
+    // Reset selection state to ensure clean state when deactivated
+    selectionStore.reset()
+  }
+
   return {
     // Selection state
     selectedIds: computed(() => selectionStore.selectedAssetIds),
@@ -94,6 +118,10 @@ export function useAssetSelection() {
     getSelectedAssets,
     reset: () => selectionStore.reset(),
 
+    // Lifecycle management
+    activate,
+    deactivate,
+
     // Key states (for UI feedback)
     shiftKey,
     cmdOrCtrlKey