the first commit

src/app/pages/items-list/items-list.component.html

@@ -0,0 +1,136 @@
+<div class="items-list-container">
+  <mat-toolbar color="primary" class="list-toolbar">
+    <button mat-icon-button (click)="goBack()">
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+    <span class="toolbar-title">Items List</span>
+    <span class="toolbar-spacer"></span>
+    <button mat-mini-fab color="accent" (click)="addItem()">
+      <mat-icon>add</mat-icon>
+    </button>
+  </mat-toolbar>
+
+  <div class="filters-bar">
+    <mat-form-field appearance="outline" class="search-field">
+      <mat-label>Search items</mat-label>
+      <input 
+        matInput 
+        [(ngModel)]="searchQuery"
+        (keyup.enter)="onSearch()"
+        placeholder="Search by name...">
+      <button mat-icon-button matSuffix (click)="onSearch()">
+        <mat-icon>search</mat-icon>
+      </button>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="filter-field">
+      <mat-label>Visibility</mat-label>
+      <mat-select [(ngModel)]="visibilityFilter" (selectionChange)="onFilterChange()">
+        <mat-option [value]="undefined">All</mat-option>
+        <mat-option [value]="true">Visible</mat-option>
+        <mat-option [value]="false">Hidden</mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    @if (selectedItems().size > 0) {
+      <div class="bulk-actions">
+        <span class="selection-count">{{ selectedItems().size }} selected</span>
+        <button mat-raised-button (click)="bulkToggleVisibility(true)">
+          <mat-icon>visibility</mat-icon>
+          Show
+        </button>
+        <button mat-raised-button (click)="bulkToggleVisibility(false)">
+          <mat-icon>visibility_off</mat-icon>
+          Hide
+        </button>
+      </div>
+    }
+  </div>
+
+  <div class="items-header">
+    <mat-checkbox
+      [checked]="selectedItems().size === items().length && items().length > 0"
+      [indeterminate]="selectedItems().size > 0 && selectedItems().size < items().length"
+      (change)="toggleSelectAll()">
+    </mat-checkbox>
+    <span class="items-count">{{ items().length }} items</span>
+  </div>
+
+  <div class="items-grid">
+    @for (item of items(); track item.id) {
+      <div class="item-card" (click)="openItem(item.id)">
+        <div class="item-card-actions">
+          <mat-checkbox
+            [checked]="selectedItems().has(item.id)"
+            (change)="toggleSelection(item.id)"
+            (click)="$event.stopPropagation()">
+          </mat-checkbox>
+          <button 
+            mat-icon-button 
+            color="warn" 
+            (click)="deleteItem(item, $event)"
+            class="delete-btn">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </div>
+
+        <div class="item-image">
+          @if (item.imgs.length) {
+            <img [src]="item.imgs[0]" [alt]="item.name">
+          } @else {
+            <div class="no-image">
+              <mat-icon>image</mat-icon>
+            </div>
+          }
+        </div>
+
+        <div class="item-info">
+          <h3>{{ item.name }}</h3>
+          
+          <div class="item-details">
+            <span class="price">{{ item.price }} {{ item.currency }}</span>
+            <span class="quantity">Qty: {{ item.quantity }}</span>
+          </div>
+
+          <div class="item-meta">
+            <span class="priority">Priority: {{ item.priority }}</span>
+            <mat-icon [class.visible]="item.visible" [class.hidden]="!item.visible">
+              {{ item.visible ? 'visibility' : 'visibility_off' }}
+            </mat-icon>
+          </div>
+
+          @if (item.tags.length) {
+            <div class="item-tags">
+              @for (tag of item.tags.slice(0, 3); track tag) {
+                <mat-chip>{{ tag }}</mat-chip>
+              }
+              @if (item.tags.length > 3) {
+                <span class="more-tags">+{{ item.tags.length - 3 }}</span>
+              }
+            </div>
+          }
+        </div>
+      </div>
+    }
+  </div>
+
+  @if (loading()) {
+    <div class="loading-more">
+      <mat-spinner diameter="40"></mat-spinner>
+      <span>Loading more items...</span>
+    </div>
+  }
+
+  @if (!hasMore() && items().length > 0) {
+    <div class="end-message">
+      No more items to load
+    </div>
+  }
+
+  @if (!loading() && items().length === 0) {
+    <div class="empty-state">
+      <mat-icon>inventory_2</mat-icon>
+      <p>No items found</p>
+    </div>
+  }
+</div>