refactor: apply code review feedback for media asset sidebar

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -82,7 +82,7 @@
 </template>
 
 <script setup lang="ts">
-import { inject, ref } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import LoadingOverlay from '@/components/common/LoadingOverlay.vue'
@@ -92,10 +92,6 @@ import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
 import type { OutputStackListItem } from '@/platform/assets/composables/useOutputStacks'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import {
-  ShowAssetDetailsKey,
-  ShowAssetNamesKey
-} from '@/platform/assets/schemas/mediaAssetSchema'
 import { iconForMediaType } from '@/platform/assets/utils/mediaIconUtil'
 import { useAssetsStore } from '@/stores/assetsStore'
 import {
@@ -113,7 +109,9 @@ const {
   isStackExpanded,
   toggleStack,
   assetType = 'output',
-  groupByJob = true
+  groupByJob = true,
+  showAssetNames = true,
+  showAssetDetails = true
 } = defineProps<{
   assetItems: OutputStackListItem[]
   selectableAssets: AssetItem[]
@@ -122,11 +120,10 @@ const {
   toggleStack: (asset: AssetItem) => Promise<void>
   assetType?: 'input' | 'output'
   groupByJob?: boolean
+  showAssetNames?: boolean
+  showAssetDetails?: boolean
 }>()
 
-const showAssetNames = inject(ShowAssetNamesKey, ref(true))
-const showAssetDetails = inject(ShowAssetDetailsKey, ref(true))
-
 const assetsStore = useAssetsStore()
 
 const emit = defineEmits<{

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -95,13 +95,13 @@
             groupByJob ? listViewAssetItems : ungroupedListViewItems
           "
           :is-selected="isSelected"
-          :selectable-assets="
-            groupByJob ? listViewSelectableAssets : ungroupedAssets
-          "
+          :selectable-assets="listViewVisibleAssets"
           :is-stack-expanded="isListViewStackExpanded"
           :toggle-stack="toggleListViewStack"
           :asset-type="activeTab"
           :group-by-job="groupByJob"
+          :show-asset-names="showAssetNames"
+          :show-asset-details="showAssetDetails"
           @select-asset="handleAssetSelect"
           @preview-asset="handleZoomClick"
           @context-menu="handleAssetContextMenu"
@@ -437,9 +437,12 @@ const ungroupedListViewItems = computed<OutputStackListItem[]>(() =>
   }))
 )
 
+const listViewVisibleAssets = computed(() =>
+  groupByJob.value ? listViewSelectableAssets.value : ungroupedAssets.value
+)
+
 const visibleAssets = computed(() => {
-  if (!isListView.value) return ungroupedAssets.value
-  if (!groupByJob.value) return ungroupedAssets.value
+  if (!isListView.value || !groupByJob.value) return ungroupedAssets.value
   return listViewSelectableAssets.value
 })
 
@@ -460,16 +463,12 @@ const isFolderLoading = computed(
 )
 
 const showLoadingState = computed(() => {
-  if (
+  const isPrimaryLoading =
     (loading.value || isFolderLoading.value) &&
     filteredAssets.value.length === 0
-  ) {
-    return true
-  }
-  if (!groupByJob.value && isResolving.value) {
-    return ungroupedAssets.value.length === 0
-  }
-  return false
+  const isUngroupedResolvingEmpty =
+    !groupByJob.value && isResolving.value && ungroupedAssets.value.length === 0
+  return isPrimaryLoading || isUngroupedResolvingEmpty
 })
 
 const showEmptyState = computed(

src/platform/assets/components/MediaAssetSettingsMenu.vue

@@ -32,7 +32,12 @@
 
     <div class="border-b w-full border-border-subtle my-1" />
 
-    <Button variant="textonly" class="w-full" @click="groupByJob = !groupByJob">
+    <Button
+      variant="textonly"
+      class="w-full"
+      :aria-pressed="groupByJob"
+      @click="groupByJob = !groupByJob"
+    >
       <span>{{ $t('sideToolbar.mediaAssets.groupByJob') }}</span>
       <i
         class="icon-[lucide--check] ml-auto size-4"
@@ -45,6 +50,7 @@
     <Button
       variant="textonly"
       class="w-full"
+      :aria-pressed="showAssetNames"
       @click="showAssetNames = !showAssetNames"
     >
       <span>{{ $t('sideToolbar.mediaAssets.showAssetNames') }}</span>
@@ -57,6 +63,7 @@
     <Button
       variant="textonly"
       class="w-full"
+      :aria-pressed="showAssetDetails"
       @click="showAssetDetails = !showAssetDetails"
     >
       <span>{{ $t('sideToolbar.mediaAssets.showAssetDetails') }}</span>