very first commit

src/app/pages/search/search.component.html

@@ -0,0 +1,113 @@
+<div class="search-container">
+  <div class="search-header">
+    <h1>Поиск товаров</h1>
+    <div class="search-box">
+      <input 
+        type="text" 
+        [(ngModel)]="searchQuery"
+        (input)="onSearchInput(searchQuery)"
+        placeholder="Введите название товара..."
+        class="search-input"
+        autofocus
+      />
+      <span class="search-icon">🔍</span>
+    </div>
+  </div>
+
+  @if (searchQuery && items().length > 0) {
+    <div class="results-count">
+      Найдено товаров: {{ items().length }}@if (totalResults() > items().length) { из {{ totalResults() }} }
+    </div>
+  }
+
+  @if (loading() && items().length === 0) {
+    <div class="loading-initial">
+      <div class="spinner"></div>
+      <p>Поиск...</p>
+    </div>
+  }
+
+  @if (error()) {
+    <div class="error">
+      <p>{{ error() }}</p>
+      <button (click)="performSearch(searchQuery)">Попробовать снова</button>
+    </div>
+  }
+
+  @if (!loading() && searchQuery && items().length === 0 && !error()) {
+    <div class="no-results">
+      <div class="no-results-icon">🔍</div>
+      <h2>Ничего не найдено</h2>
+      <p>По запросу "{{ searchQuery }}" товары не найдены</p>
+      <p class="hint">Попробуйте изменить запрос или используйте другие ключевые слова</p>
+    </div>
+  }
+
+  @if (items().length > 0) {
+    <div class="items-grid">
+      @for (item of items(); track trackByItemId($index, item)) {
+        <div class="item-card">
+          <a [routerLink]="['/item', item.itemID]" class="item-link">
+            <div class="item-image">
+              <img [src]="getMainImage(item)" [alt]="item.name" loading="lazy" decoding="async" width="300" height="300" />
+              @if (item.discount > 0) {
+                <div class="discount-badge">-{{ item.discount }}%</div>
+              }
+            </div>
+            
+            <div class="item-details">
+              <h3 class="item-name">{{ item.name }}</h3>
+              
+              <div class="item-rating">
+                <span class="rating-stars">⭐ {{ item.rating }}</span>
+                <span class="rating-count">({{ item.callbacks?.length || 0 }})</span>
+              </div>
+              
+              <div class="item-price">
+                @if (item.discount > 0) {
+                  <span class="original-price">{{ item.price }} {{ item.currency }}</span>
+                  <span class="discounted-price">{{ getDiscountedPrice(item) | number:'1.2-2' }} {{ item.currency }}</span>
+                } @else {
+                  <span class="current-price">{{ item.price }} {{ item.currency }}</span>
+                }
+              </div>
+              
+              @if (item.remainings) {
+                <div class="item-stock">
+                  <div class="stock-bar">
+                    <span class="bar-segment" [class.filled]="item.remainings === 'high' || item.remainings === 'medium' || item.remainings === 'low'" [class.high]="item.remainings === 'high'" [class.medium]="item.remainings === 'medium'" [class.low]="item.remainings === 'low'"></span>
+                    <span class="bar-segment" [class.filled]="item.remainings === 'high' || item.remainings === 'medium'" [class.high]="item.remainings === 'high'" [class.medium]="item.remainings === 'medium'"></span>
+                    <span class="bar-segment" [class.filled]="item.remainings === 'high'" [class.high]="item.remainings === 'high'"></span>
+                  </div>
+                </div>
+              }
+            </div>
+          </a>
+          
+          <button class="add-to-cart-btn" (click)="addToCart(item.itemID, $event)">
+            В корзину
+          </button>
+        </div>
+      }
+    </div>
+
+    @if (loading() && items().length > 0) {
+      <div class="loading-more">
+        <div class="spinner"></div>
+        <p>Загрузка...</p>
+      </div>
+    }
+
+    @if (!hasMore() && items().length > 0) {
+      <div class="no-more">
+        <p>Все результаты загружены</p>
+      </div>
+    }
+  }
+
+  @if (!searchQuery) {
+    <div class="empty-state">
+      <p>Введите запрос для поиска товаров</p>
+    </div>
+  }
+</div>