From d0ca53501cc460b488dd2dda9e75f7584218e68d Mon Sep 17 00:00:00 2001
From: archipelago <archipelago@localhost>
Date: Thu, 18 Jun 2026 09:40:16 -0400
Subject: [PATCH] feat(ui): cloud folder zoom transition on path change

Re-key FileGrid on the current folder path and wrap it in a cloud-zoom
Transition so the depth/zoom animation replays at every folder level; the
header + breadcrumb nav stay fixed.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 neode-ui/src/views/CloudFolder.vue | 65 +++++++++++++++++++++++++-----
 1 file changed, 55 insertions(+), 10 deletions(-)

diff --git a/neode-ui/src/views/CloudFolder.vue b/neode-ui/src/views/CloudFolder.vue
index 33716fb7..692caec2 100644
--- a/neode-ui/src/views/CloudFolder.vue
+++ b/neode-ui/src/views/CloudFolder.vue
@@ -93,16 +93,23 @@
         @upload="handleUpload"
         @update:view-mode="viewMode = $event"
       />
-      <FileGrid
-        :items="cloudStore.sortedItems"
-        :loading="cloudStore.loading"
-        :view-mode="viewMode"
-        @navigate="navigateCloudPath"
-        @delete="handleDelete"
-        @play="handlePlay"
-        @share="handleShare"
-        @preview="handlePreview"
-      />
+      <!-- Re-key on the current folder path so the depth/zoom animation replays
+           at every level (folder → subfolder → …), not just on first entry.
+           Only the file content zooms; the header + breadcrumb nav above stay
+           fixed in place. -->
+      <Transition name="cloud-zoom" mode="out-in">
+        <FileGrid
+          :key="cloudStore.currentPath"
+          :items="cloudStore.sortedItems"
+          :loading="cloudStore.loading"
+          :view-mode="viewMode"
+          @navigate="navigateCloudPath"
+          @delete="handleDelete"
+          @play="handlePlay"
+          @share="handleShare"
+          @preview="handlePreview"
+        />
+      </Transition>
 
       <!-- Audio player is now the global bottom bar (GlobalAudioPlayer in App.vue) -->
     </div>
@@ -386,3 +393,41 @@ function goBack() {
   router.push('/dashboard/cloud')
 }
 </script>
+
+<!-- Not scoped: the transition classes are applied to the FileGrid child's root
+     element, which lives outside this component's style scope. Matches the
+     `depth-forward` route transition feel (zoom in from depth + blur). -->
+<style>
+.cloud-zoom-enter-active,
+.cloud-zoom-leave-active {
+  transition:
+    opacity 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    filter 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transform-origin: center center;
+  will-change: opacity, transform, filter;
+}
+/* New folder zooms in from depth */
+.cloud-zoom-enter-from {
+  opacity: 0;
+  transform: scale(0.82);
+  filter: blur(4px);
+}
+/* Previous folder recedes forward as it leaves */
+.cloud-zoom-leave-to {
+  opacity: 0;
+  transform: scale(1.12);
+  filter: blur(6px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .cloud-zoom-enter-active,
+  .cloud-zoom-leave-active {
+    transition: opacity 0.2s ease;
+  }
+  .cloud-zoom-enter-from,
+  .cloud-zoom-leave-to {
+    transform: none;
+    filter: none;
+  }
+}
+</style>