python

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> {