feat(search): enforce minimum character limit for search input and display error message

src/app/features/store/pages/search-page/search-page.component.spec.ts

@@ -105,4 +105,20 @@ describe('SearchPageComponent', () => {
       'Se muestran 1 de 10 resultados.',
     );
   });
+
+  it('does not search when the query has fewer than three characters', () => {
+    TestBed.overrideProvider(ActivatedRoute, {
+      useValue: {
+        queryParamMap: of(convertToParamMap({ q: 'ab', page: '1' })),
+      },
+    });
+
+    const fixture = TestBed.createComponent(SearchPageComponent);
+    fixture.detectChanges();
+
+    expect(searchCatalog).not.toHaveBeenCalled();
+    expect((fixture.nativeElement as HTMLElement).textContent).toContain(
+      'Ingresá al menos 3 caracteres para buscar.',
+    );
+  });
 });

src/app/features/store/pages/search-page/search-page.component.ts

@@ -41,6 +41,7 @@ interface SearchRouteState {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SearchPageComponent {
+  private readonly minSearchLength = 3;
   private readonly cartService = inject(CartService);
   private readonly catalogService = inject(CatalogService);
   private readonly destroyRef = inject(DestroyRef);
@@ -94,11 +95,15 @@ export class SearchPageComponent {
         tap(({ query }) => {
           this.query.set(query);
           this.results.set(null);
-          this.error.set(query.length >= 2 ? null : 'Ingresá al menos 2 caracteres para buscar.');
-          this.loading.set(query.length >= 2);
+          this.error.set(
+            query.length >= this.minSearchLength
+              ? null
+              : `Ingresá al menos ${this.minSearchLength} caracteres para buscar.`,
+          );
+          this.loading.set(query.length >= this.minSearchLength);
         }),
         switchMap(({ query, page }) => {
-          if (query.length < 2) {
+          if (query.length < this.minSearchLength) {
             return of(null);
           }