fix: address review feedback for folder loading state

- Gate folderLoading by isInFolderView so it only affects UI in folder view
- Surface useAsyncState errors via toast and exit folder on failure
- Use design token (bg-secondary-background) in Skeleton component
- Add i18n keys for folder view error messages

Amp-Thread-ID: https://ampcode.com/threads/T-019c71fd-6654-7410-a3e1-e6e9915c9a88
Co-authored-by: Amp <amp@ampcode.com>

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -406,6 +406,7 @@ const skeletonCount = computed(() =>
 const {
   state: folderAssets,
   isLoading: folderLoading,
+  error: folderError,
   execute: loadFolderAssets
 } = useAsyncState(
   (metadata: OutputAssetMetadata, options: { createdAt?: string } = {}) =>
@@ -450,9 +451,13 @@ const isBulkMode = computed(
   () => hasSelection.value && selectedAssets.value.length > 1
 )
 
+const isFolderLoading = computed(
+  () => isInFolderView.value && folderLoading.value
+)
+
 const showLoadingState = computed(
   () =>
-    (loading.value || folderLoading.value) &&
+    (loading.value || isFolderLoading.value) &&
     displayAssets.value.length === 0 &&
     activeJobsCount.value === 0
 )
@@ -460,7 +465,7 @@ const showLoadingState = computed(
 const showEmptyState = computed(
   () =>
     !loading.value &&
-    !folderLoading.value &&
+    !isFolderLoading.value &&
     displayAssets.value.length === 0 &&
     activeJobsCount.value === 0
 )
@@ -639,6 +644,16 @@ const enterFolderView = async (asset: AssetItem) => {
   expectedFolderCount.value = metadata.outputCount ?? 0
 
   await loadFolderAssets(0, metadata, { createdAt: asset.created_at })
+
+  if (folderError.value) {
+    toast.add({
+      severity: 'error',
+      summary: t('sideToolbar.folderView.errorSummary'),
+      detail: t('sideToolbar.folderView.errorDetail'),
+      life: 5000
+    })
+    exitFolderView()
+  }
 }
 
 const exitFolderView = () => {

src/components/ui/skeleton/Skeleton.vue

@@ -9,5 +9,7 @@ const { class: className } = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('animate-pulse rounded-md bg-primary/10', className)" />
+  <div
+    :class="cn('animate-pulse rounded-md bg-secondary-background', className)"
+  />
 </template>

src/locales/en/main.json

@@ -743,6 +743,10 @@
       "filterText": "Text"
     },
     "backToAssets": "Back to all assets",
+    "folderView": {
+      "errorSummary": "Failed to load outputs",
+      "errorDetail": "Could not retrieve outputs for this job. Please try again."
+    },
     "searchAssets": "Search Assets",
     "labels": {
       "queue": "Queue",