From c3c0d6d2c179c83a1700d773c496ff7a44cce99c Mon Sep 17 00:00:00 2001
From: Nikita Kiselev <kiselev2008@gmail.com>
Date: Sat, 25 Oct 2025 18:48:47 +0300
Subject: [PATCH] feat(spa): show navbar with app logo and app name

---
 .../controller/extension/module/tgshop.php    | 10 +--
 .../template/extension/module/tgshop.twig     | 19 ++--
 .../src/Handlers/SettingsHandler.php          |  3 +-
 spa/src/App.vue                               | 49 ++++++++---
 spa/src/components/Dock.vue                   |  2 +-
 spa/src/components/Navbar.vue                 | 56 ++++++++++++
 spa/src/style.css                             | 15 +++-
 spa/src/views/Cart.vue                        | 10 ++-
 spa/src/views/Checkout.vue                    | 86 +++++++++----------
 9 files changed, 174 insertions(+), 76 deletions(-)
 create mode 100644 spa/src/components/Navbar.vue

diff --git a/module/oc_telegram_shop/upload/admin/controller/extension/module/tgshop.php b/module/oc_telegram_shop/upload/admin/controller/extension/module/tgshop.php
index 686f99d..e5bab9c 100755
--- a/module/oc_telegram_shop/upload/admin/controller/extension/module/tgshop.php
+++ b/module/oc_telegram_shop/upload/admin/controller/extension/module/tgshop.php
@@ -378,24 +378,22 @@ TEXT,
                 ],
 
                 'module_tgshop_app_name' => [
-                    'hidden' => true,
-                    'required' => true,
                     'type' => 'text',
-                    'placeholder' => 'Введите название Телеграм магазина',
+                    'placeholder' => 'Без названия',
                     'help' => <<<TEXT
                     Отображается в заголовке Telegram Mini App при запуске, а также используется как подпись
                     под иконкой, если пользователь добавит приложение на главный экран своего устройства.
                     Рекомендуется короткое и понятное название (до 20 символов).
+                    Если оставить пустым, то название выводиться не будет.
                 TEXT,
                 ],
 
                 'module_tgshop_app_icon' => [
-                    'hidden' => true,
                     'type' => 'image',
                     'help' => <<<TEXT
                     Изображение, которое будет отображаться в Telegram Mini App и на рабочем столе устройства,
-                    если пользователь добавит приложение как ярлык. Используйте квадратное изображение PNG или SVG, 
-                    размером не менее 192×192 пикселей, а лучше 512x512.
+                    если пользователь добавит приложение как ярлык. Рекомендуется использовать квадратное изображение PNG или SVG, 
+                    размером 32×32 пикселей.
                 TEXT,
                 ],
 
diff --git a/module/oc_telegram_shop/upload/admin/view/template/extension/module/tgshop.twig b/module/oc_telegram_shop/upload/admin/view/template/extension/module/tgshop.twig
index e2533e2..ed6dd6b 100755
--- a/module/oc_telegram_shop/upload/admin/view/template/extension/module/tgshop.twig
+++ b/module/oc_telegram_shop/upload/admin/view/template/extension/module/tgshop.twig
@@ -85,9 +85,9 @@
 
                                         {# Image #}
                                         {% elseif item['type'] == 'image' %}
-                                            <a href="" id="thumb-image" data-toggle="image" class="img-thumbnail">
+                                            <a href="" id="thumb-image-{{ settingKey }}" data-toggle="image" class="img-thumbnail">
                                                 <img src="{{ attribute(_context, settingKey) }}"
-                                                     data-placeholder="{{ attribute(_context, settingKey) }}"
+                                                     data-placeholder="https://placehold.co/100x100?text=Удалено"
                                                 />
                                             </a>
                                             <input type="hidden"
@@ -95,8 +95,7 @@
                                                    value="{{ attribute(_context, settingKey) }}"
                                                    id="{{ settingKey }}"
                                             />
-
-                                        {# Image #}
+                                        {# Textarea #}
                                         {% elseif item['type'] == 'textarea' %}
                                             <textarea name="{{ settingKey }}"
                                                       rows="{{ item['rows'] }}"
@@ -104,7 +103,6 @@
                                                       id="{{ settingKey }}"
                                                       class="form-control"
                                             >{{ attribute(_context, settingKey) }}</textarea>
-
                                         {# Products #}
                                         {% elseif item['type'] == 'products' %}
                                             <input type="text" value="" placeholder="Начните вводить название товара..." id="{{ settingKey }}-input" class="form-control"/>
@@ -450,4 +448,13 @@
         </div>
     </div>
 </div>
-{{ footer }}
\ No newline at end of file
+{{ footer }}
+
+<script>
+    const $element = $('#thumb-image-module_tgshop_app_icon');
+    $('#button-clear').on('click', function() {
+        $element.find('img').attr('src', $element.find('img').attr('data-placeholder'));
+        $element.parent().find('input').val('');
+        $element.popover('destroy');
+    });
+</script>
\ No newline at end of file
diff --git a/module/oc_telegram_shop/upload/oc_telegram_shop/src/Handlers/SettingsHandler.php b/module/oc_telegram_shop/upload/oc_telegram_shop/src/Handlers/SettingsHandler.php
index ff413b0..8d726ff 100755
--- a/module/oc_telegram_shop/upload/oc_telegram_shop/src/Handlers/SettingsHandler.php
+++ b/module/oc_telegram_shop/upload/oc_telegram_shop/src/Handlers/SettingsHandler.php
@@ -37,11 +37,12 @@ class SettingsHandler
             $icons['icon180'] = $this->imageTool->resize($appIcon, 180, 180, 'no_image.png', 'png'). '?_v=' . $hash;
             $icons['icon152'] = $this->imageTool->resize($appIcon, 152, 152, 'no_image.png', 'png'). '?_v=' . $hash;
             $icons['icon120'] = $this->imageTool->resize($appIcon, 120, 120, 'no_image.png', 'png'). '?_v=' . $hash;
+            $appIcon = $this->imageTool->resize($appIcon, 32, 32, 'no_image.png', 'png'). '?_v=' . $hash;
         }
 
         return new JsonResponse([
             'app_name' => $this->settings->get('app_name'),
-            'app_icon' => $appIcon ? $appIcon . '?_v=' . $hash : '',
+            'app_icon' => $appIcon ?? '',
             'app_icon192' => $icons['icon192'] ?? '',
             'app_icon180' => $icons['icon180'] ?? '',
             'app_icon152' => $icons['icon152'] ?? '',
diff --git a/spa/src/App.vue b/spa/src/App.vue
index 9f66333..154a097 100644
--- a/spa/src/App.vue
+++ b/spa/src/App.vue
@@ -1,18 +1,35 @@
 <template>
-  <div class="app-container h-full">
-    <header class="app-header w-full" v-if="platform === 'ios'"></header>
+  <div class="drawer h-full">
+    <input id="app-drawer" type="checkbox" class="drawer-toggle" v-model="drawerOpen" />
 
-    <section class="safe-top">
-      <FullscreenViewport v-if="platform === 'ios' || platform === 'android'"/>
-      <RouterView v-slot="{ Component, route }">
-        <KeepAlive include="Home" :key="filtersStore.paramsHashForRouter">
-          <component :is="Component" :key="route.fullPath"/>
-        </KeepAlive>
-      </RouterView>
+    <div class="drawer-content">
+      <div class="app-container h-full">
+        <header class="app-header w-full" v-if="platform === 'ios'"></header>
 
-      <CartButton v-if="settings.store_enabled"/>
-      <Dock v-if="isAppDockShown"/>
-    </section>
+        <Navbar @drawer="toggleDrawer"/>
+
+        <section class="telecart-main-section">
+          <FullscreenViewport v-if="platform === 'ios' || platform === 'android'" />
+          <RouterView v-slot="{ Component, route }">
+            <KeepAlive include="Home" :key="filtersStore.paramsHashForRouter">
+              <component :is="Component" :key="route.fullPath" />
+            </KeepAlive>
+          </RouterView>
+
+          <CartButton v-if="settings.store_enabled" />
+          <Dock v-if="isAppDockShown" />
+        </section>
+      </div>
+    </div>
+
+    <div class="drawer-side z-50 safe-top">
+      <label for="app-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
+      <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
+        <li><a href="#">🏠 Главная</a></li>
+        <li><a href="#">🛒 Корзина</a></li>
+        <li><a @click="drawerOpen = false">❌ Закрыть</a></li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -25,6 +42,7 @@ import {useSettingsStore} from "@/stores/SettingsStore.js";
 import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
 import CartButton from "@/components/CartButton.vue";
 import Dock from "@/components/Dock.vue";
+import Navbar from "@/components/Navbar.vue";
 
 const tg = useMiniApp();
 const platform = ref();
@@ -39,6 +57,7 @@ const settings = useSettingsStore();
 const filtersStore = useProductFiltersStore();
 const backButton = window.Telegram.WebApp.BackButton;
 const haptic = window.Telegram.WebApp.HapticFeedback;
+const drawerOpen = ref(false);
 
 const routesToHideAppDock = [
     'product.show',
@@ -56,6 +75,10 @@ function navigateBack() {
   router.back();
 }
 
+function toggleDrawer() {
+  drawerOpen.value = !drawerOpen.value
+}
+
 watch(
     () => route.name,
     () => {
@@ -71,7 +94,7 @@ watch(
 );
 
 function handleClickOutside(e) {
-  if (!e.target.closest('input')) {
+  if (!e.target.closest('input,select,textarea')) {
     document.activeElement?.blur();
   }
 }
diff --git a/spa/src/components/Dock.vue b/spa/src/components/Dock.vue
index a54398e..8a6fddb 100644
--- a/spa/src/components/Dock.vue
+++ b/spa/src/components/Dock.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="telecart-dock fixed bottom-0 w-full z-50 px-10">
     <div
-        class="telecart-dock-inner flex justify-between items-center bg-base-300/10 h-full backdrop-blur-md px-2 border-base-300/90 border">
+        class="telecart-dock-inner flex justify-around items-center bg-base-300/10 h-full backdrop-blur-md border-base-300/90 border">
       <RouterLink
           :to="{name: 'home'}"
           :class="{'active': route.name === 'home'}"
diff --git a/spa/src/components/Navbar.vue b/spa/src/components/Navbar.vue
new file mode 100644
index 0000000..dcd7eae
--- /dev/null
+++ b/spa/src/components/Navbar.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="telecart-navbar fixed navbar bg-primary text-primary-content z-50 shadow-md" :class="{'pb-0' : platform !== 'ios'}">
+    <div class="navbar-start">
+      <div v-if="false" class="dropdown">
+        <button class="btn btn-ghost btn-circle" @click="toggleDrawer">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" /> </svg>
+        </button>
+      </div>
+    </div>
+
+    <div class="navbar-center">
+      <RouterLink :to="{name: 'home'}" class="text-xl flex items-center">
+        <div class="avatar mr-2">
+          <div v-if="settings.app_icon" class="h-8 rounded-full bg-base-100">
+            <img :src="settings.app_icon" class="h-8" alt=""/>
+          </div>
+        </div>
+
+        {{ settings.app_name }}
+      </RouterLink>
+    </div>
+
+    <div class="navbar-end">
+      <button v-if="false" class="btn btn-ghost btn-circle">
+        <div class="indicator">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> </svg>
+          <span class="badge badge-xs badge-secondary indicator-item">1</span>
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {useSettingsStore} from "@/stores/SettingsStore.js";
+import {useMiniApp} from "vue-tg";
+import {ref} from "vue";
+
+const settings = useSettingsStore();
+const emits = defineEmits(['drawer']);
+
+const tg = useMiniApp();
+const platform = ref();
+platform.value = tg.platform;
+
+function toggleDrawer() {
+  emits('drawer');
+}
+</script>
+
+<style scoped>
+.telecart-navbar {
+  padding-top: calc(var(--tg-content-safe-area-inset-top) + var(--tg-safe-area-inset-top));
+  min-height: var(--tc-navbar-min-height);
+}
+</style>
\ No newline at end of file
diff --git a/spa/src/style.css b/spa/src/style.css
index 74587b0..82a1791 100644
--- a/spa/src/style.css
+++ b/spa/src/style.css
@@ -14,6 +14,7 @@ html {
     --swiper-pagination-bullet-inactive-color: var(--color-base-content);
     --swiper-pagination-fraction-color: var(--color-neutral-content);
     --product_list_title_max_lines: 1;
+    --tc-navbar-min-height: 3rem;
 }
 
 .swiper-pagination-bullets {
@@ -41,14 +42,22 @@ html {
 }
 
 .app-header {
-    z-index: 100;
+    z-index: 60;
     position: fixed;
     background: var(--color-primary);
-    padding-top: calc(var(--tg-content-safe-area-inset-top) + var(--tg-safe-area-inset-top));
+    height: calc(var(--tg-content-safe-area-inset-top) + var(--tg-safe-area-inset-top));
+    min-height: calc(var(--tg-content-safe-area-inset-top) + var(--tg-safe-area-inset-top));
+    max-height: calc(var(--tg-content-safe-area-inset-top) + var(--tg-safe-area-inset-top));
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    justify-content: end;
     align-items: center;
     color: white;
+    padding-bottom: 8px;
+}
+
+.telecart-main-section {
+    padding-top: calc(var(--tg-content-safe-area-inset-top) + var(--tg-safe-area-inset-top) + var(--tc-navbar-min-height));
 }
 
 .swiper-pagination-bullets > .swiper-pagination-bullet {
diff --git a/spa/src/views/Cart.vue b/spa/src/views/Cart.vue
index 6aa325a..6496011 100644
--- a/spa/src/views/Cart.vue
+++ b/spa/src/views/Cart.vue
@@ -109,7 +109,7 @@
         </div>
       </div>
 
-      <div class="fixed px-4 pt-4 bottom-25 left-0 w-full z-50 flex justify-end items-center gap-2">
+      <div class="btn-checkout fixed px-4 pt-4 left-0 w-full z-50 flex justify-end items-center gap-2">
         <button
             class="btn btn-primary select-none shadow-xl"
             :disabled="cart.canCheckout === false"
@@ -166,4 +166,10 @@ function removeItem(cartId) {
 function goToCheckout() {
   router.push({name: 'checkout'});
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.btn-checkout {
+  bottom: calc(var(--spacing) * 22 + var(--tg-safe-area-inset-bottom))
+}
+</style>
\ No newline at end of file
diff --git a/spa/src/views/Checkout.vue b/spa/src/views/Checkout.vue
index f34c381..c8eec85 100644
--- a/spa/src/views/Checkout.vue
+++ b/spa/src/views/Checkout.vue
@@ -1,55 +1,53 @@
 <template>
-  <div class="max-w-3xl mx-auto space-y-6 pb-30">
-    <h2 class="text-2xl text-center">
+  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-20">
+    <h2 class="text-2xl mb-5 text-center">
       Оформление заказа
     </h2>
 
-    <div class="card card-border bg-base-100 w-full">
-      <div class="card-body">
-        <TgInput
-            v-model="checkout.customer.firstName"
-            placeholder="Введите имя"
-            :error="checkout.validationErrors.firstName"
-            :maxlength="32"
-            @clearError="checkout.clearError('firstName')"
-        />
+    <div class="w-full">
+      <TgInput
+          v-model="checkout.customer.firstName"
+          placeholder="Введите имя"
+          :error="checkout.validationErrors.firstName"
+          :maxlength="32"
+          @clearError="checkout.clearError('firstName')"
+      />
 
-        <TgInput
-            v-model="checkout.customer.lastName"
-            placeholder="Введите фамилию"
-            :maxlength="32"
-            :error="checkout.validationErrors.lastName"
-            @clearError="checkout.clearError('lastName')"
-        />
+      <TgInput
+          v-model="checkout.customer.lastName"
+          placeholder="Введите фамилию"
+          :maxlength="32"
+          :error="checkout.validationErrors.lastName"
+          @clearError="checkout.clearError('lastName')"
+      />
 
-        <fieldset class="fieldset">
-          <IMaskComponent
-              v-model="checkout.customer.phone"
-              type="tel"
-              class="input input-lg w-full"
-              mask="+{7} (000) 000-00-00"
-              placeholder="Введите телефон"
-              :unmask="true"
-          />
-          <p v-if="error" class="label text-error">{{ checkout.validationErrors.phone }}</p>
-        </fieldset>
-
-        <TgInput
-            v-model="checkout.customer.email"
-            type="email"
-            placeholder="Введите email (опционально)"
-            :maxlength="96"
-            :error="checkout.validationErrors.email"
-            @clearError="checkout.clearError('email')"
+      <fieldset class="fieldset">
+        <IMaskComponent
+            v-model="checkout.customer.phone"
+            type="tel"
+            class="input input-lg w-full"
+            mask="+{7} (000) 000-00-00"
+            placeholder="Введите телефон"
+            :unmask="true"
         />
+        <p v-if="error" class="label text-error">{{ checkout.validationErrors.phone }}</p>
+      </fieldset>
 
-        <TgTextarea
-            v-model="checkout.customer.comment"
-            placeholder="Комментарий (опционально)"
-            :error="checkout.validationErrors.comment"
-            @clearError="checkout.clearError('comment')"
-        />
-      </div>
+      <TgInput
+          v-model="checkout.customer.email"
+          type="email"
+          placeholder="Введите email (опционально)"
+          :maxlength="96"
+          :error="checkout.validationErrors.email"
+          @clearError="checkout.clearError('email')"
+      />
+
+      <TgTextarea
+          v-model="checkout.customer.comment"
+          placeholder="Комментарий (опционально)"
+          :error="checkout.validationErrors.comment"
+          @clearError="checkout.clearError('comment')"
+      />
     </div>
 
     <div