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">
-
-
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 {
@@ -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, {