Smart vs Dumb

// SMART (container): știe DE UNDE vin datele și CE se întâmplă la o acțiune.
@Component({
  selector: 'app-catalog-page',
  imports: [ProductFilters, ProductCard, CartSummary],
  providers: [CatalogStore], // store-ul trăiește cât pagina
  template: `
    <app-product-filters [categories]="categories" [(query)]="store.query" [(category)]="store.category" />

    @for (p of store.products.value(); track p.id) {
      <app-product-card [product]="p" (addToCart)="store.add($event)" />
    }

    <app-cart-summary
      [lines]="store.cart()" [count]="store.cartCount()" [total]="store.cartTotal()"
      (remove)="store.remove($event)" />
  `,
})
export class CatalogPage {
  protected readonly store = inject(CatalogStore);
  protected readonly categories: ProductCategory[] = ['laptop', 'phone', 'audio', 'accessory'];
}

features/catalog/
├── catalog.routes.ts
├── pages/
│   └── catalog-page.ts          ← SMART (rutată)
├── data-access/
│   ├── catalog-store.ts          ← stare + date
│   └── catalog-api.ts
├── ui/                           ← DUMB, specifice feature-ului
│   ├── product-card.ts
│   ├── product-filters.ts
│   └── cart-summary.ts
└── models/
    └── product.ts                ← Product + toProduct(dto)

shared/ui/                        ← DUMB, generice (fără domeniu)
├── button.ts
├── rating.ts
└── data-table.ts

// ✗ O componentă „dumb” care de fapt e smart deghizată
@Component({ selector: 'app-product-card', /* ... */ })
export class ProductCard {
  private readonly cart = inject(CartStore);   // ← dependență de stare globală
  private readonly http = inject(HttpClient);  // ← face request-uri
  private readonly router = inject(Router);    // ← decide navigarea

  readonly productId = input.required<number>();
  readonly product = httpResource<Product>(() => `/api/products/${this.productId()}`);

  add() {
    this.cart.add(this.product.value()!);
    this.router.navigate(['/cart']);
  }
}
// Consecințe: nu o poți refolosi în altă pagină (ex. în „recomandări” sau în admin),
// nu o poți testa fără mock-uri pentru HttpClient, Router și CartStore,
// iar o listă de 50 de carduri face 50 de request-uri.

// ✓ Stare locală de UI într-o componentă dumb — complet OK
export class Accordion {
  readonly items = input.required<Item[]>();
  protected readonly expanded = signal<number | null>(null); // doar despre afișare
}

// ✓ Injectări „de UI” într-o componentă dumb — OK
inject(ElementRef); inject(DestroyRef); inject(LOCALE_ID); inject(Dialog /* CDK */);