fix: Address code review feedback for multi-select

- Performance: Use batch operations for range selection instead of forEach
- Memory: Add reset function to clear selection on component unmount
- Security: Add input validation for asset operations
- Accessibility: Add keyboard support for selection count interaction
- Optimization: Prevent unnecessary re-renders in Set operations

Author: viva-jinyi

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -100,8 +100,13 @@
           />
           <span
             v-else
-            class="cursor-pointer px-3 text-sm"
+            role="button"
+            tabindex="0"
+            :aria-label="$t('mediaAsset.selection.deselectAll')"
+            class="cursor-pointer px-3 text-sm focus:ring-2 focus:ring-primary focus:outline-none"
             @mouseenter="isHoveringSelectionCount = true"
+            @keydown.enter="clearSelection"
+            @keydown.space.prevent="clearSelection"
           >
             {{
               $t('mediaAsset.selection.selectedCount', { count: selectedCount })
@@ -142,7 +147,7 @@
 <script setup lang="ts">
 import ProgressSpinner from 'primevue/progressspinner'
 import { useToast } from 'primevue/usetoast'
-import { computed, ref, watch } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import TextButton from '@/components/button/TextButton.vue'
@@ -196,7 +201,8 @@ const {
   hasSelection,
   selectedCount,
   clearSelection,
-  getSelectedAssets
+  getSelectedAssets,
+  reset: resetSelection
 } = useAssetSelection()
 
 // Asset actions - will be used for individual assets later
@@ -341,6 +347,11 @@ const exitFolderView = () => {
   clearSelection()
 }
 
+// Clean up selection when component unmounts
+onUnmounted(() => {
+  resetSelection()
+})
+
 const copyJobId = async () => {
   if (folderPromptId.value) {
     try {

src/platform/assets/composables/useAssetSelection.ts

@@ -24,18 +24,26 @@ export function useAssetSelection() {
     index: number,
     allAssets: AssetItem[]
   ) {
+    // Input validation
+    if (!asset?.id || index < 0 || index >= allAssets.length) {
+      console.warn('Invalid asset selection parameters')
+      return
+    }
+
     const assetId = asset.id
 
     // Shift + Click: Range selection
     if (shiftKey.value && selectionStore.lastSelectedIndex >= 0) {
       const start = Math.min(selectionStore.lastSelectedIndex, index)
       const end = Math.max(selectionStore.lastSelectedIndex, index)
 
-      // Get IDs of assets in range
+      // Batch operation for better performance
       const rangeIds = allAssets.slice(start, end + 1).map((a) => a.id)
+      const existingIds = Array.from(selectionStore.selectedAssetIds)
+      const combinedIds = [...new Set([...existingIds, ...rangeIds])]
 
-      // Add range to selection (keep existing selections)
-      rangeIds.forEach((id) => selectionStore.addToSelection(id))
+      // Single update instead of multiple forEach operations
+      selectionStore.setSelection(combinedIds)
 
       // Don't update lastSelectedIndex for shift selection
       return
@@ -84,6 +92,7 @@ export function useAssetSelection() {
     selectAll,
     clearSelection: () => selectionStore.clearSelection(),
     getSelectedAssets,
+    reset: () => selectionStore.reset(),
 
     // Key states (for UI feedback)
     shiftKey,

src/platform/assets/composables/useAssetSelectionStore.ts

@@ -21,7 +21,14 @@ export const useAssetSelectionStore = defineStore('assetSelection', () => {
   }
 
   function setSelection(assetIds: string[]) {
-    selectedAssetIds.value = new Set(assetIds)
+    // Only update if there's an actual change to prevent unnecessary re-renders
+    const newSet = new Set(assetIds)
+    if (
+      newSet.size !== selectedAssetIds.value.size ||
+      !assetIds.every((id) => selectedAssetIds.value.has(id))
+    ) {
+      selectedAssetIds.value = newSet
+    }
   }
 
   function clearSelection() {
@@ -45,6 +52,12 @@ export const useAssetSelectionStore = defineStore('assetSelection', () => {
     lastSelectedIndex.value = index
   }
 
+  // Reset function for cleanup
+  function reset() {
+    selectedAssetIds.value.clear()
+    lastSelectedIndex.value = -1
+  }
+
   return {
     // State
     selectedAssetIds: computed(() => selectedAssetIds.value),
@@ -62,6 +75,7 @@ export const useAssetSelectionStore = defineStore('assetSelection', () => {
     clearSelection,
     toggleSelection,
     isSelected,
-    setLastSelectedIndex
+    setLastSelectedIndex,
+    reset
   }
 })