From 9146b336598418cebb51a154023da8b712980977 Mon Sep 17 00:00:00 2001
From: Alexander Brown <448862+DrJKL@users.noreply.github.com>
Date: Fri, 16 Jan 2026 16:49:55 -0800
Subject: [PATCH] feat: add slide-in animation for right panel in
 BaseModalLayout

---
 .../widget/layout/BaseModalLayout.vue         | 70 ++++++++++++-------
 .../assets/components/AssetBrowserModal.vue   | 12 +++-
 2 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/src/components/widget/layout/BaseModalLayout.vue b/src/components/widget/layout/BaseModalLayout.vue
index 9dcd88d78..a2fc77b4b 100644
--- a/src/components/widget/layout/BaseModalLayout.vue
+++ b/src/components/widget/layout/BaseModalLayout.vue
@@ -14,7 +14,7 @@
         </nav>
       </Transition>
 
-      <div class="flex-1 flex bg-base-background">
+      <div class="flex-1 flex bg-base-background overflow-hidden">
         <div class="flex h-full w-full flex-col">
           <header
             v-if="$slots.header"
@@ -65,32 +65,35 @@
             </div>
           </main>
         </div>
-        <aside
-          v-if="hasRightPanel && isRightPanelOpen"
-          class="flex w-72 shrink-0 bg-modal-panel-background flex-col"
-        >
-          <header
-            data-component-id="RightPanelHeader"
-            class="flex h-16 shrink-0 items-center gap-2 px-4"
+        <Transition name="slide-panel-right">
+          <aside
+            v-if="hasRightPanel && isRightPanelOpen"
+            key="right-panel"
+            class="flex w-72 shrink-0 bg-modal-panel-background flex-col"
           >
-            <h2 v-if="rightPanelTitle" class="flex-1 text-lg font-semibold">
-              {{ rightPanelTitle }}
-            </h2>
-            <div v-else class="flex-1">
-              <slot name="rightPanelHeaderTitle" />
+            <header
+              data-component-id="RightPanelHeader"
+              class="flex h-16 shrink-0 items-center gap-2 px-4"
+            >
+              <h2 v-if="rightPanelTitle" class="flex-1 text-lg font-semibold">
+                {{ rightPanelTitle }}
+              </h2>
+              <div v-else class="flex-1">
+                <slot name="rightPanelHeaderTitle" />
+              </div>
+              <slot name="rightPanelHeaderActions" />
+              <Button size="icon" @click="toggleRightPanel">
+                <i class="icon-[lucide--panel-right-close] text-sm" />
+              </Button>
+              <Button size="icon" @click="closeDialog">
+                <i class="pi pi-times" />
+              </Button>
+            </header>
+            <div class="min-h-0 flex-1 overflow-y-auto">
+              <slot name="rightPanel" />
             </div>
-            <slot name="rightPanelHeaderActions" />
-            <Button size="icon" @click="toggleRightPanel">
-              <i class="icon-[lucide--panel-right-close] text-sm" />
-            </Button>
-            <Button size="icon" @click="closeDialog">
-              <i class="pi pi-times" />
-            </Button>
-          </header>
-          <div class="min-h-0 flex-1 overflow-y-auto">
-            <slot name="rightPanel" />
-          </div>
-        </aside>
+          </aside>
+        </Transition>
       </div>
     </div>
   </div>
@@ -201,4 +204,21 @@ const toggleRightPanel = () => {
 .slide-panel-leave-to {
   transform: translateX(-100%);
 }
+
+/* Slide transition for right panel */
+.slide-panel-right-enter-active,
+.slide-panel-right-leave-active {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+  backface-visibility: hidden;
+}
+
+.slide-panel-right-enter-from,
+.slide-panel-right-leave-to {
+  transform: translateX(100%);
+}
 </style>
diff --git a/src/platform/assets/components/AssetBrowserModal.vue b/src/platform/assets/components/AssetBrowserModal.vue
index 77e5284d4..83a132a76 100644
--- a/src/platform/assets/components/AssetBrowserModal.vue
+++ b/src/platform/assets/components/AssetBrowserModal.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseModalLayout
     :hide-right-panel-button="true"
-    :right-panel-open="!!focusedAsset"
+    :right-panel-open="isPanelOpen"
     data-component-id="AssetBrowserModal"
     class="size-full max-h-full max-w-full min-w-0"
     :content-title="displayTitle"
@@ -74,7 +74,7 @@
 </template>
 
 <script setup lang="ts">
-import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+import { breakpointsTailwind, refDebounced, useBreakpoints } from '@vueuse/core'
 import { computed, provide, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -168,6 +168,14 @@ const {
 
 const focusedAsset = ref<AssetDisplayItem | null>(null)
 
+// Debounce panel visibility to prevent flicker when switching between assets
+// (blur fires before focus when clicking a different card)
+const isPanelOpen = refDebounced(
+  computed(() => !!focusedAsset.value),
+  16,
+  { maxWait: 16 }
+)
+
 const primaryCategoryTag = computed(() => {
   const assets = fetchedAssets.value ?? []
   const tagFromAssets = assets