From 50bdb8601c04799a4ecdb1b854ee1151a02f00f1 Mon Sep 17 00:00:00 2001
From: Nikita Kiselev <kiselev2008@gmail.com>
Date: Wed, 3 Dec 2025 01:30:21 +0300
Subject: [PATCH] feat: visualize swipe back

---
 frontend/spa/src/App.vue                     | 47 +++++++++++++++++++-
 frontend/spa/src/composables/useSwipeBack.js |  3 +-
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/frontend/spa/src/App.vue b/frontend/spa/src/App.vue
index 271c724..e03b531 100644
--- a/frontend/spa/src/App.vue
+++ b/frontend/spa/src/App.vue
@@ -21,6 +21,45 @@
 
           <CartButton v-if="settings.store_enabled"/>
           <Dock v-if="isAppDockShown"/>
+
+          <div
+              v-if="swiperBack.isActive.value"
+              class="fixed top-1/2 left-0 z-50
+         w-16
+         -translate-y-1/2
+         -translate-x-12
+         text-primary-content
+         flex items-center justify-end
+         shadow-xl
+         border-r
+         border-t
+         border-b
+         rounded-br-lg
+         rounded-tr-lg
+         py-2
+        "
+              :class="{
+                'bg-primary': swiperBack.deltaX.value < swiperBack.ACTIVATION_THRESHOLD,
+                'bg-accent': swiperBack.deltaX.value >= swiperBack.ACTIVATION_THRESHOLD,
+              }"
+              :style="{ transform: `translate(${easeOut(swiperBack.deltaX.value/10, 30)}px, -50%)` }"
+
+          >
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-8 h-8"
+            >
+              <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15"
+              />
+            </svg>
+          </div>
         </section>
       </div>
     </div>
@@ -66,7 +105,7 @@ const haptic = window.Telegram.WebApp.HapticFeedback;
 const drawerOpen = ref(false);
 
 // Инициализация жеста Swipe Back (без визуального индикатора)
-useSwipeBack();
+const swiperBack = useSwipeBack();
 
 const routesToHideAppDock = [
   'product.show',
@@ -75,6 +114,12 @@ const routesToHideAppDock = [
   'filters',
 ];
 
+function easeOut(value, max) {
+  const x = Math.min(Math.abs(value) / max, 1)
+  const eased = 1 - (1 - x) ** 3
+  return Math.sign(value) * eased * max
+}
+
 const isAppDockShown = computed(() => {
   if (routesToHideAppDock.indexOf(route.name) === -1) {
     // Скрываем Dock, если клавиатура открыта на странице поиска
diff --git a/frontend/spa/src/composables/useSwipeBack.js b/frontend/spa/src/composables/useSwipeBack.js
index 45e6861..961f095 100644
--- a/frontend/spa/src/composables/useSwipeBack.js
+++ b/frontend/spa/src/composables/useSwipeBack.js
@@ -20,7 +20,7 @@ export function useSwipeBack() {
 
   // Конфигурация
   const EDGE_THRESHOLD = 20; // Расстояние от левого края для активации (px)
-  const ACTIVATION_THRESHOLD = 40; // Пороговое расстояние для активации (px)
+  const ACTIVATION_THRESHOLD = 80; // Пороговое расстояние для активации (px)
   const MAX_DELTA = 80; // Максимальное расстояние для расчета прогресса (px)
 
   let touchStartX = 0;
@@ -198,6 +198,7 @@ export function useSwipeBack() {
   });
 
   return {
+    isTracking,
     isActive,
     deltaX,
     progress,