feat(ui): add escape key handling and smooth overlay animations

Author: xcutiboo

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, signal } from '@angular/core';
+import { Component, signal, HostListener } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ConfigStoreService } from '../services/config-store.service';
 import { CategoryNavigationComponent } from '../components/category-navigation/category-navigation.component';
@@ -26,29 +26,30 @@ import { AboutModalComponent } from '../components/about-modal/about-modal.compo
       }
 
       <div class="flex flex-1 overflow-hidden relative">
-        <!-- Mobile overlay backdrop -->
+        <!-- Mobile overlay backdrop with fade animation -->
         @if (configStore.sidebarOpen()) {
           <div
-            class="fixed inset-0 bg-black/50 z-30 lg:hidden"
+            class="fixed inset-0 bg-black/50 z-30 lg:hidden animate-fade-in"
             (click)="configStore.setSidebarOpen(false)"
           ></div>
         }
 
-        <!-- Sidebar navigation -->
+        <!-- Sidebar navigation with enhanced animation -->
         <app-category-navigation
-          class="absolute lg:relative z-40 h-full w-72 flex-shrink-0 transform transition-transform duration-300 ease-out lg:translate-x-0"
+          class="absolute lg:relative z-40 h-full w-72 flex-shrink-0 transform transition-all duration-300 ease-out lg:translate-x-0 shadow-2xl lg:shadow-none"
           [class.-translate-x-full]="!configStore.sidebarOpen()"
+          [class.opacity-0]="!configStore.sidebarOpen()"
         />
 
         <!-- Main content area -->
         <main class="flex-1 overflow-hidden flex flex-col lg:flex-row min-w-0">
           <!-- Config editor -->
           <app-config-editor class="flex-1 overflow-y-auto min-w-0" />
 
-          <!-- Preview panel - full screen on mobile when visible, side panel on desktop -->
+          <!-- Preview panel with slide-in animation on mobile -->
           @if (configStore.previewVisible()) {
             <app-live-preview
-              class="fixed inset-0 z-50 lg:static lg:z-auto lg:w-2/5 lg:flex-shrink-0 lg:border-l lg:border-kitty-border bg-kitty-darker"
+              class="fixed inset-0 z-50 lg:static lg:z-auto lg:w-2/5 lg:flex-shrink-0 lg:border-l lg:border-kitty-border bg-kitty-darker animate-slide-in-right lg:animate-none"
             />
           }
         </main>
@@ -79,13 +80,40 @@ import { AboutModalComponent } from '../components/about-modal/about-modal.compo
     :host {
       display: block;
     }
+    @keyframes fade-in {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+    @keyframes slide-in-right {
+      from { transform: translateX(100%); opacity: 0; }
+      to { transform: translateX(0); opacity: 1; }
+    }
+    .animate-fade-in {
+      animation: fade-in 0.2s ease-out;
+    }
+    .animate-slide-in-right {
+      animation: slide-in-right 0.25s ease-out;
+    }
   `]
 })
 export class AppComponent {
   readonly showAbout = signal(false);
 
   constructor(public configStore: ConfigStoreService) {}
 
+  @HostListener('window:keydown.escape')
+  onEscape(): void {
+    if (this.configStore.sidebarOpen()) {
+      this.configStore.setSidebarOpen(false);
+    }
+    if (this.configStore.previewVisible()) {
+      this.configStore.setPreviewVisible(false);
+    }
+    if (this.showAbout()) {
+      this.showAbout.set(false);
+    }
+  }
+
   openKofi(): void {
     globalThis.open('https://ko-fi.com/xcutiboo', '_blank', 'noopener,noreferrer');
   }

src/components/header/header.component.ts

@@ -1,9 +1,10 @@
-import { Component, EventEmitter, Output, signal } from '@angular/core';
+import { Component, EventEmitter, Output, signal, effect, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ConfigStoreService } from '../../services/config-store.service';
 import { KittyGeneratorService } from '../../services/kitty-generator.service';
 import { KittyParserService } from '../../services/kitty-parser.service';
 import { ThemeService } from '../../services/theme.service';
+import { SearchService } from '../../services/search.service';
 import { SearchBarComponent } from '../search-bar/search-bar.component';
 
 @Component({
@@ -162,8 +163,17 @@ export class HeaderComponent {
     public readonly configStore: ConfigStoreService,
     public readonly themeService: ThemeService,
     private readonly generator: KittyGeneratorService,
-    private readonly parser: KittyParserService
-  ) {}
+    private readonly parser: KittyParserService,
+    private readonly searchService: SearchService
+  ) {
+    effect(() => {
+      const hasResults = this.searchService.results().length > 0;
+      const wasOpen = this.mobileSearchOpen();
+      if (wasOpen && !hasResults) {
+        this.mobileSearchOpen.set(false);
+      }
+    });
+  }
 
   handleImport(): void {
     const input = document.createElement('input');