From de3ec4c39d75bb247969bd6291f6c76e25386a9c Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 29 Jan 2026 19:43:56 +0700
Subject: [PATCH] feat(orders): add slide-up animation for order detail bottom
 sheet

---
 app/pages/clientarea/orders/[id].vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/pages/clientarea/orders/[id].vue b/app/pages/clientarea/orders/[id].vue
index f59ab49..3ba3b52 100644
--- a/app/pages/clientarea/orders/[id].vue
+++ b/app/pages/clientarea/orders/[id].vue
@@ -10,8 +10,9 @@
       :hide-view-toggle="true"
     />
 
-    <!-- Bottom Sheet -->
-    <div class="fixed inset-x-0 bottom-0 z-50 flex flex-col" style="height: 70vh">
+    <!-- Bottom Sheet with slide-up animation -->
+    <Transition name="slide-up" appear>
+      <div class="fixed inset-x-0 bottom-0 z-50 flex flex-col" style="height: 70vh">
       <!-- Glass sheet -->
       <div class="relative flex-1 bg-black/40 backdrop-blur-xl rounded-t-2xl border-t border-white/20 shadow-2xl overflow-hidden">
         <!-- Drag handle -->
@@ -115,9 +116,22 @@
         </div>
       </div>
     </div>
+    </Transition>
   </div>
 </template>
 
+<style scoped>
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  transform: translateY(100%);
+}
+</style>
+
 <script setup lang="ts">
 import { GetOrderDocument, type GetOrderQueryResult } from '~/composables/graphql/team/orders-generated'
 import type { RouteStageItem } from '~/components/RouteStagesList.vue'