Update app.py

app.py

@@ -394,7 +394,6 @@ TMA_DASHBOARD_HTML_TEMPLATE = '''
 <div class="app-header">
     <div class="user-info">{{ display_name }}</div>
     <div class="view-toggle">
-        <button id="install-app-btn" title="Установить приложение" style="display: none;"><i class="fa-solid fa-arrow-down-to-bracket"></i></button>
         <button id="reminders-btn" title="Напоминания"><i class="fa-solid fa-bell"></i></button>
         <button id="grid-view-btn" title="Сетка"><i class="fa fa-th-large"></i></button>
         <button id="list-view-btn" title="Список"><i class="fa fa-bars"></i></button>
@@ -404,6 +403,9 @@ TMA_DASHBOARD_HTML_TEMPLATE = '''
 {% with messages = get_flashed_messages(with_categories=true) %}{% if messages %}
     {% for category, message in messages %}<div class="flash {{ category }}">{{ message }}</div>{% endfor %}
 {% endif %}{% endwith %}
+<div id="install-banner" class="flash" style="cursor: pointer; background: var(--accent); color: white; display: none; align-items: center; justify-content: center; gap: 10px;">
+    <i class="fa-solid fa-download"></i><span>Установить приложение</span>
+</div>
 <div class="breadcrumbs">
     {% for crumb in breadcrumbs %}
         {% if crumb.is_link %}<a href="{{ url_for('tma_dashboard', folder_id=crumb.id) }}">{{ crumb.name if crumb.id != 'root' else 'Главная' }}</a>
@@ -518,6 +520,21 @@ TMA_DASHBOARD_HTML_TEMPLATE = '''
 
 <div class="fab-container"><button id="fab" class="fab"><i class="fa-solid fa-plus"></i></button></div>
 
+<div class="modal" id="install-instructions-modal"><div class="modal-content" style="padding: 20px; max-width: 400px; text-align: center;">
+    <h4>Как добавить на главный экран</h4>
+    <p style="text-align: left; margin: 15px 0;">
+        <strong>На Android:</strong><br>
+        1. Нажмите на три точки (⋮) в правом верхнем углу.<br>
+        2. Выберите "Добавить ярлык".
+    </p>
+    <p style="text-align: left; margin: 15px 0;">
+        <strong>На iOS:</strong><br>
+        1. Нажмите на имя бота вверху.<br>
+        2. Выберите "Добавить на главный экран".
+    </p>
+    <button class="btn" style="background: var(--accent); width: 100%; margin-top: 20px;" onclick="dismissInstallBanner()">Понятно</button>
+</div></div>
+
 <script>
     window.Telegram.WebApp.ready();
     window.Telegram.WebApp.expand();
@@ -756,6 +773,12 @@ TMA_DASHBOARD_HTML_TEMPLATE = '''
             }
         });
     }
+    function dismissInstallBanner() {
+        haptic.impactOccurred('light');
+        document.getElementById('install-instructions-modal').style.display = 'none';
+        localStorage.setItem('appShortcutAdded', 'true');
+        document.getElementById('install-banner').style.display = 'none';
+    }
     document.getElementById('reminders-btn').addEventListener('click', openRemindersModal);
     const gridViewBtn = document.getElementById('grid-view-btn');
     const listViewBtn = document.getElementById('list-view-btn');
@@ -783,24 +806,19 @@ TMA_DASHBOARD_HTML_TEMPLATE = '''
             backButton.show();
             backButton.onClick(() => { haptic.impactOccurred('light'); window.location.href = `{{ url_for('tma_dashboard') }}?folder_id=${parentFolderId}`; });
         } else { window.Telegram.WebApp.BackButton.hide(); }
-        const installBtn = document.getElementById('install-app-btn');
-        if (installBtn) {
-            const checkAndShowInstallButton = () => {
-                if (Telegram.WebApp.isVersionAtLeast('6.9') && !Telegram.WebApp.isAddedToAttachmentMenu) {
-                    installBtn.style.display = 'inline-block';
-                } else {
-                    installBtn.style.display = 'none';
-                }
-            };
-            installBtn.addEventListener('click', () => {
+        const installBanner = document.getElementById('install-banner');
+        if (!localStorage.getItem('appShortcutAdded') && (window.Telegram.WebApp.platform !== 'tdesktop')) {
+            installBanner.style.display = 'flex';
+            installBanner.addEventListener('click', () => {
                 haptic.impactOccurred('light');
-                Telegram.WebApp.addToAttachmentMenu();
-            });
-            Telegram.WebApp.onEvent('addedToAttachmentMenu', () => {
-                installBtn.style.display = 'none';
+                document.getElementById('install-instructions-modal').style.display = 'flex';
             });
-            checkAndShowInstallButton();
         }
+        document.getElementById('install-instructions-modal').addEventListener('click', e => {
+            if (e.target.id === 'install-instructions-modal') {
+                dismissInstallBanner();
+            }
+        });
     });
 </script></body></html>
 '''