From ce2ea9dea1fcd24d70ea66345d761a739d25f9d1 Mon Sep 17 00:00:00 2001
From: Nikita Kiselev <kiselev2008@gmail.com>
Date: Thu, 25 Dec 2025 22:02:17 +0300
Subject: [PATCH] feat: increase dock icons size and add click animation

- Increase icon sizes from 1.2em to 1.5em for home, search, and cart icons
- Increase catalog icon from size-6 to size-7
- Increase profile avatar and icon from w-6 h-6 to w-7 h-7
- Add dock-icon class to all icons for consistent styling
- Implement bounce animation on icon click with scale effect (1.15x)
- Animation duration set to 200ms for subtle feedback
- Update onDockItemClick handler to trigger animation on click
---
 frontend/spa/src/components/Dock.vue | 46 +++++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 8 deletions(-)

diff --git a/frontend/spa/src/components/Dock.vue b/frontend/spa/src/components/Dock.vue
index 6d15f03..da6f57f 100644
--- a/frontend/spa/src/components/Dock.vue
+++ b/frontend/spa/src/components/Dock.vue
@@ -5,7 +5,7 @@
         :class="{'dock-active': route.name === 'home'}"
         @click="onDockItemClick"
     >
-      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <svg class="dock-icon size-[1.5em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt">
           <polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10"
                     stroke-width="2"></polyline>
@@ -24,7 +24,7 @@
         @click="onDockItemClick"
     >
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-           class="size-6">
+           class="dock-icon size-7">
         <path stroke-linecap="round" stroke-linejoin="round"
               d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"/>
       </svg>
@@ -36,7 +36,7 @@
         :class="{'dock-active': route.name === 'search'}"
         @click="onDockItemClick"
     >
-      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+      <svg class="dock-icon size-[1.5em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round"
               d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
@@ -52,7 +52,7 @@
     >
       <div class="indicator">
         <span class="indicator-item indicator-end badge badge-secondary badge-xs">{{ cart.productsCount }}</span>
-        <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+        <svg class="dock-icon size-[1.5em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
              stroke-width="1.5" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round"
                 d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/>
@@ -66,11 +66,11 @@
         :class="{'dock-active': route.name === 'account'}"
         @click="onDockItemClick"
     >
-      <div v-if="tgData?.user?.photo_url" class="w-6 h-6 rounded-full overflow-hidden">
+      <div v-if="tgData?.user?.photo_url" class="dock-icon w-7 h-7 rounded-full overflow-hidden">
         <img :src="tgData?.user?.photo_url" alt="avatar" class="w-full h-full object-cover"/>
       </div>
-      <div v-else class="bg-primary text-primary-content w-6 h-6 rounded-full flex items-center justify-center">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+      <div v-else class="dock-icon bg-primary text-primary-content w-7 h-7 rounded-full flex items-center justify-center">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
           <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
         </svg>
       </div>
@@ -91,8 +91,17 @@ const settings = useSettingsStore();
 const tgData = useTgData();
 const haptic = window.Telegram.WebApp.HapticFeedback;
 
-function onDockItemClick() {
+function onDockItemClick(event) {
   haptic.selectionChanged();
+  
+  // Находим иконку в кликнутом элементе
+  const icon = event.currentTarget.querySelector('.dock-icon');
+  if (icon) {
+    icon.classList.add('dock-icon-clicked');
+    setTimeout(() => {
+      icon.classList.remove('dock-icon-clicked');
+    }, 200);
+  }
 }
 </script>
 
@@ -116,4 +125,25 @@ function onDockItemClick() {
   background: var(--color-base-100);
   z-index: 50;
 }
+
+.dock-icon {
+  transition: transform 0.2s ease-out;
+  transform-origin: center;
+}
+
+.dock-icon-clicked {
+  animation: dock-icon-bounce 0.2s ease-out;
+}
+
+@keyframes dock-icon-bounce {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.15);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
 </style>
\ No newline at end of file