- Remove annoying padding, Add search function

origin-dex/src/app/app.component.ts

@@ -77,7 +77,6 @@ import { MatListModule } from '@angular/material/list';
     }
 
     .content {
-      padding: 20px;
       height: 100%;
       overflow: auto;
     }

origin-dex/src/app/app.config.ts

@@ -9,7 +9,7 @@ import { provideClientHydration } from '@angular/platform-browser';
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes, withDebugTracing()),
+    provideRouter(routes),
     provideClientHydration(),
     provideHttpClient(
       withFetch(),

origin-dex/src/app/features/pokemon/pokemon-carousel/pokemon-carousel.component.ts

@@ -3,10 +3,21 @@ import { CommonModule } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { PokemonService } from '../../../core/services/pokemon.service';
 import { Pokemon } from '../../../core/models/pokemon.model';
 import { PokemonCellComponent } from '../pokemon-cell/pokemon-cell.component';
 import { PokemonDetailsComponent } from '../pokemon-details/pokemon-details.component';
+import { map, startWith } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+
+interface PokemonSearchResult {
+  pokemon: Pokemon;
+  boxNumber: number;
+}
 
 @Component({
   selector: 'app-pokemon-carousel',
@@ -16,10 +27,37 @@ import { PokemonDetailsComponent } from '../pokemon-details/pokemon-details.comp
     MatCardModule,
     MatIconModule,
     MatButtonModule,
+    MatAutocompleteModule,
+    MatInputModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
     PokemonCellComponent,
     PokemonDetailsComponent
   ],
   template: `
+    <div class="search-container">
+      <mat-form-field appearance="fill" class="search-field">
+        <mat-label>Search Pokémon</mat-label>
+        <input type="text"
+               matInput
+               [formControl]="searchControl"
+               [matAutocomplete]="auto">
+        <mat-autocomplete #auto="matAutocomplete" 
+                         (optionSelected)="onSearchSelect($event)"
+                         [displayWith]="displayFn">
+          <mat-option *ngFor="let result of filteredOptions | async" [value]="result">
+            {{ result.pokemon.Name }}
+            <span *ngIf="result.pokemon.Form">
+              ({{ result.pokemon.Form }})
+            </span>
+            <span *ngIf="result.boxNumber !== undefined">
+              (Box {{ result.boxNumber + 1 }})
+            </span>
+          </mat-option>
+        </mat-autocomplete>
+      </mat-form-field>
+    </div>
+
     <div class="carousel-container">
       <button mat-icon-button class="nav-button prev" 
               [disabled]="currentBoxIndex === 0"
@@ -60,13 +98,23 @@ import { PokemonDetailsComponent } from '../pokemon-details/pokemon-details.comp
     ></app-pokemon-details>
   `,
   styles: [`
+    .search-container {
+      display: flex;
+      justify-content: center;
+    }
+
+    .search-field {
+      width: 100%;
+      max-width: 400px;
+    }
     .carousel-container {
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 20px;
       position: relative;
-      height: calc(100vh - 200px);
+      //height: calc(100vh - 200px);
+      padding-top: 2em;
+      padding-bottom: 2em;
     }
 
     .pokemon-box-container {
@@ -125,6 +173,8 @@ export class PokemonCarouselComponent implements OnInit {
   currentBoxIndex = 0;
   selectedPokemon: Pokemon | null = null;
   caughtPokemon = new Set<string>();
+  searchControl = new FormControl('');
+  filteredOptions: Observable<PokemonSearchResult[]>;
 
   get currentGroup(): (Pokemon | null)[] {
     return this.pokemonGroups[this.currentBoxIndex] || [];
@@ -133,7 +183,12 @@ export class PokemonCarouselComponent implements OnInit {
   constructor(
     private pokemonService: PokemonService,
     private cdr: ChangeDetectorRef
-  ) {}
+  ) {
+    this.filteredOptions = this.searchControl.valueChanges.pipe(
+      startWith(''),
+      map(value => this.filterPokemon(value))
+    );
+  }
 
   ngOnInit() {
     this.loadPokemon();
@@ -183,4 +238,37 @@ export class PokemonCarouselComponent implements OnInit {
     this.selectedPokemon = pokemon;
     this.cdr.markForCheck();
   }
+
+  private filterPokemon(value: string | PokemonSearchResult | null): PokemonSearchResult[] {
+    if (!value) return [];
+    
+    const searchTerm = typeof value === 'string' ? value.toLowerCase() : '';
+    if (searchTerm.length < 2) return []; // Only search with 2 or more characters
+    
+    const results: PokemonSearchResult[] = [];
+    
+    this.pokemonGroups.forEach((group, boxIndex) => {
+      group.forEach(pokemon => {
+        if (pokemon && pokemon.Name.toLowerCase().includes(searchTerm)) {
+          results.push({
+            pokemon,
+            boxNumber: boxIndex
+          });
+        }
+      });
+    });
+    
+    return results.slice(0, 10); // Limit to 10 results
+  }
+
+  displayFn(result: PokemonSearchResult): string {
+    return result?.pokemon?.Name || '';
+  }
+
+  onSearchSelect(event: any) {
+    const result: PokemonSearchResult = event.option.value;
+    this.currentBoxIndex = result.boxNumber;
+    this.searchControl.setValue('');
+    this.cdr.markForCheck();
+  }
 }