python

public/index.html

@@ -45,6 +45,7 @@
                            id="searchInput" 
                            placeholder="Название песни или исполнитель..." 
                            autocomplete="off">
+                    <button class="tg-input-clear" id="clearButton" style="display: none;" type="button">✕</button>
                 </div>
             </div>
         </div>

public/script.ts

@@ -40,6 +40,7 @@ interface ConvertResponse {
 class QuixoticApp {
     private tg?: TelegramWebApp;
     private searchInput!: HTMLInputElement;
+    private clearButton!: HTMLButtonElement;
     private loading!: HTMLElement;
     private results!: HTMLElement;
     private noResults!: HTMLElement;
@@ -66,6 +67,7 @@ class QuixoticApp {
         }
 
         this.searchInput = document.getElementById('searchInput') as HTMLInputElement;
+        this.clearButton = document.getElementById('clearButton') as HTMLButtonElement;
         this.loading = document.getElementById('loading') as HTMLElement;
         this.results = document.getElementById('results') as HTMLElement;
         this.noResults = document.getElementById('noResults') as HTMLElement;
@@ -73,6 +75,11 @@ class QuixoticApp {
         
         // Initialize proper state - only welcome should be visible
         this.resetToWelcomeState();
+        
+        // Auto-focus search input to activate keyboard
+        setTimeout(() => {
+            this.searchInput.focus();
+        }, 100);
     }
 
     private bindEvents(): void {
@@ -85,6 +92,9 @@ class QuixoticApp {
 
             const query = this.searchInput.value.trim();
             
+            // Show/hide clear button based on input content
+            this.updateClearButtonVisibility();
+            
             // If input is empty, reset to welcome state immediately
             if (query === '') {
                 this.resetToWelcomeState();
@@ -107,6 +117,11 @@ class QuixoticApp {
                 this.search();
             }
         });
+
+        // Clear button functionality
+        this.clearButton.addEventListener('click', () => {
+            this.clearSearch();
+        });
     }
 
     private resetToWelcomeState(): void {
@@ -122,7 +137,29 @@ class QuixoticApp {
         this.noResults.classList.add('tg-hidden');
         this.noResults.style.display = 'none';
         
+        // Update clear button visibility
+        this.updateClearButtonVisibility();
+    }
 
+    private clearSearch(): void {
+        // Clear the input
+        this.searchInput.value = '';
+        
+        // Clear any pending search timeout
+        if (this.searchTimeout) {
+            clearTimeout(this.searchTimeout);
+        }
+        
+        // Reset to welcome state
+        this.resetToWelcomeState();
+        
+        // Focus back to input
+        this.searchInput.focus();
+    }
+
+    private updateClearButtonVisibility(): void {
+        const hasText = this.searchInput.value.trim().length > 0;
+        this.clearButton.style.display = hasText ? 'flex' : 'none';
     }
 
     private async search(): Promise<void> {

public/style.css

@@ -111,6 +111,35 @@ body {
   background: var(--tg-color-bg);
 }
 
+.tg-input-clear {
+  position: absolute;
+  right: var(--tg-spacing-sm);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 32px;
+  height: 32px;
+  background: var(--tg-color-hint);
+  border: none;
+  border-radius: 50%;
+  color: var(--tg-color-bg);
+  font-size: var(--tg-font-size-sm);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.6;
+}
+
+.tg-input-clear:hover {
+  background: var(--tg-color-destructive);
+  opacity: 1;
+}
+
+.tg-input-clear:active {
+  transform: translateY(-50%) scale(0.95);
+}
+
 /* Button components */
 .tg-button {
   position: relative;