some visual fixes

This commit is contained in:
Andrey Kondratev
2025-08-29 18:11:04 +05:00
parent 8e3c927cf1
commit 9bdf522f59
4 changed files with 32 additions and 28 deletions

View File

@@ -46,10 +46,6 @@
placeholder="Название песни или исполнитель..." placeholder="Название песни или исполнитель..."
autocomplete="off"> autocomplete="off">
</div> </div>
<button class="tg-button tg-button--primary tg-button--large" id="searchBtn">
<span class="tg-button__text">Найти</span>
</button>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -45,6 +45,7 @@ class QuixoticApp {
private results!: HTMLElement; private results!: HTMLElement;
private noResults!: HTMLElement; private noResults!: HTMLElement;
private welcomePlaceholder!: HTMLElement; private welcomePlaceholder!: HTMLElement;
private searchTimeout?: NodeJS.Timeout;
constructor() { constructor() {
this.tg = (window as WindowWithTelegram).Telegram?.WebApp; this.tg = (window as WindowWithTelegram).Telegram?.WebApp;
@@ -76,17 +77,35 @@ class QuixoticApp {
} }
private bindEvents(): void { private bindEvents(): void {
this.searchBtn.addEventListener('click', () => this.search()); // Auto search with debounce timeout
this.searchInput.addEventListener('keypress', (e: KeyboardEvent) => { this.searchInput.addEventListener('input', () => {
if (e.key === 'Enter') { // Clear previous timeout
this.search(); 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 // Still handle Enter key for immediate search
this.searchInput.addEventListener('input', () => { this.searchInput.addEventListener('keypress', (e: KeyboardEvent) => {
if (this.searchInput.value.trim() === '') { if (e.key === 'Enter') {
this.resetToWelcomeState(); // 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.classList.add('tg-hidden');
this.noResults.style.display = 'none'; this.noResults.style.display = 'none';
// Enable search button
this.searchBtn.disabled = false;
} }
private async search(): Promise<void> { private async search(): Promise<void> {
@@ -159,7 +177,7 @@ class QuixoticApp {
this.noResults.classList.add('tg-hidden'); this.noResults.classList.add('tg-hidden');
this.noResults.style.display = 'none'; this.noResults.style.display = 'none';
this.searchBtn.disabled = true;
} }
private hideLoading(): void { private hideLoading(): void {
@@ -272,13 +290,6 @@ class QuixoticApp {
if (data.audioUrl) { if (data.audioUrl) {
if (this.tg) { 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; const userId = this.tg?.initDataUnsafe?.user?.id;
if (!userId) { if (!userId) {
this.showMessage('❌ Ошибка: не удается определить пользователя', 'error'); this.showMessage('❌ Ошибка: не удается определить пользователя', 'error');
@@ -302,7 +313,7 @@ class QuixoticApp {
} else { } else {
this.showMessage('❌ Ошибка отправки в Telegram', 'error'); this.showMessage('❌ Ошибка отправки в Telegram', 'error');
} }
} catch (directError) { } catch {
this.showMessage('❌ Ошибка соединения с ботом', 'error'); this.showMessage('❌ Ошибка соединения с ботом', 'error');
} }
} else { } else {

View File

@@ -67,7 +67,7 @@ body {
.tg-content { .tg-content {
flex: 1; flex: 1;
padding: var(--tg-spacing-lg); padding: var(--tg-spacing-lg);
padding-bottom: 140px; padding-bottom: 100px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--tg-spacing-xl); gap: var(--tg-spacing-xl);
@@ -79,9 +79,6 @@ body {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
display: flex;
flex-direction: column;
gap: var(--tg-spacing-md);
padding: var(--tg-spacing-lg); padding: var(--tg-spacing-lg);
background: var(--tg-color-bg); background: var(--tg-color-bg);
border-top: 1px solid var(--tg-color-secondary-bg); border-top: 1px solid var(--tg-color-secondary-bg);

View File

@@ -269,7 +269,7 @@ export class QuixoticBot {
console.log(`✅ Audio sent: ${title}`); console.log(`✅ Audio sent: ${title}`);
return; return;
} catch (audioError: any) { } catch {
// Fallback: try as document // Fallback: try as document
try { try {
await this.bot.sendDocument(chatId, audioUrl, { await this.bot.sendDocument(chatId, audioUrl, {