From 9bdf522f598cb164edcb7bc62df9da0531b3a4dc Mon Sep 17 00:00:00 2001
From: Andrey Kondratev <81143241+cockroach-eater@users.noreply.github.com>
Date: Fri, 29 Aug 2025 18:11:04 +0500
Subject: [PATCH] some visual fixes

---
 public/index.html |  4 ----
 public/script.ts  | 49 +++++++++++++++++++++++++++++------------------
 public/style.css  |  5 +----
 src/bot.ts        |  2 +-
 4 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/public/index.html b/public/index.html
index 5cd4dae..c061ac8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -46,10 +46,6 @@
                            placeholder="Название песни или исполнитель..." 
                            autocomplete="off">
                 </div>
-                
-                <button class="tg-button tg-button--primary tg-button--large" id="searchBtn">
-                    <span class="tg-button__text">Найти</span>
-                </button>
             </div>
         </div>
     </div>
diff --git a/public/script.ts b/public/script.ts
index e0bdbec..c152c62 100644
--- a/public/script.ts
+++ b/public/script.ts
@@ -45,6 +45,7 @@ class QuixoticApp {
     private results!: HTMLElement;
     private noResults!: HTMLElement;
     private welcomePlaceholder!: HTMLElement;
+    private searchTimeout?: NodeJS.Timeout;
 
     constructor() {
         this.tg = (window as WindowWithTelegram).Telegram?.WebApp;
@@ -76,17 +77,35 @@ class QuixoticApp {
     }
 
     private bindEvents(): void {
-        this.searchBtn.addEventListener('click', () => this.search());
-        this.searchInput.addEventListener('keypress', (e: KeyboardEvent) => {
-            if (e.key === 'Enter') {
-                this.search();
+        // Auto search with debounce timeout
+        this.searchInput.addEventListener('input', () => {
+            // Clear previous timeout
+            if (this.searchTimeout) {
+                clearTimeout(this.searchTimeout);
             }
+
+            const query = this.searchInput.value.trim();
+            
+            // If input is empty, reset to welcome state immediately
+            if (query === '') {
+                this.resetToWelcomeState();
+                return;
+            }
+
+            // Set new timeout for search (500ms delay)
+            this.searchTimeout = setTimeout(() => {
+                this.search();
+            }, 500);
         });
         
-        // Reset to welcome state when input is cleared
-        this.searchInput.addEventListener('input', () => {
-            if (this.searchInput.value.trim() === '') {
-                this.resetToWelcomeState();
+        // Still handle Enter key for immediate search
+        this.searchInput.addEventListener('keypress', (e: KeyboardEvent) => {
+            if (e.key === 'Enter') {
+                // Clear timeout and search immediately
+                if (this.searchTimeout) {
+                    clearTimeout(this.searchTimeout);
+                }
+                this.search();
             }
         });
     }
@@ -104,8 +123,7 @@ class QuixoticApp {
         this.noResults.classList.add('tg-hidden');
         this.noResults.style.display = 'none';
         
-        // Enable search button
-        this.searchBtn.disabled = false;
+
     }
 
     private async search(): Promise<void> {
@@ -159,7 +177,7 @@ class QuixoticApp {
         this.noResults.classList.add('tg-hidden');
         this.noResults.style.display = 'none';
         
-        this.searchBtn.disabled = true;
+
     }
 
     private hideLoading(): void {
@@ -272,13 +290,6 @@ class QuixoticApp {
             if (data.audioUrl) {
                 
                 if (this.tg) {
-                    // Try WebApp method first (might not work)
-                    const payload = {
-                        action: 'send_audio',
-                        audioUrl: data.audioUrl,
-                        title: title
-                    };
-                    
                     const userId = this.tg?.initDataUnsafe?.user?.id;
                     if (!userId) {
                         this.showMessage('❌ Ошибка: не удается определить пользователя', 'error');
@@ -302,7 +313,7 @@ class QuixoticApp {
                         } else {
                             this.showMessage('❌ Ошибка отправки в Telegram', 'error');
                         }
-                    } catch (directError) {
+                    } catch {
                         this.showMessage('❌ Ошибка соединения с ботом', 'error');
                     }
                 } else {
diff --git a/public/style.css b/public/style.css
index 5472c7a..4f03acd 100644
--- a/public/style.css
+++ b/public/style.css
@@ -67,7 +67,7 @@ body {
 .tg-content {
   flex: 1;
   padding: var(--tg-spacing-lg);
-  padding-bottom: 140px;
+  padding-bottom: 100px;
   display: flex;
   flex-direction: column;
   gap: var(--tg-spacing-xl);
@@ -79,9 +79,6 @@ body {
   bottom: 0;
   left: 0;
   right: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--tg-spacing-md);
   padding: var(--tg-spacing-lg);
   background: var(--tg-color-bg);
   border-top: 1px solid var(--tg-color-secondary-bg);
diff --git a/src/bot.ts b/src/bot.ts
index 7dcf02a..605bbb4 100644
--- a/src/bot.ts
+++ b/src/bot.ts
@@ -269,7 +269,7 @@ export class QuixoticBot {
                 console.log(`✅ Audio sent: ${title}`);
                 return;
                 
-            } catch (audioError: any) {
+            } catch {
                 // Fallback: try as document
                 try {
                     await this.bot.sendDocument(chatId, audioUrl, {