frontend/src/app/features/series-browser/components/series-browser/series-browser.component.ts (1)

113-113: Recommended: convert screenWidth and the size getters to signals/computed.

isMobile, cardWidth, cardHeight, and rowHeight are plain getters, and screenWidth is a plain field. The refreshViewportEffect and the gridColumns computed only reactively re-run because seriesScaleService.scaleFactor() happens to be read transitively — they do not track screenWidth at all. Today this works because onResize also calls scheduleViewportRefresh() and the resulting viewportWidth.set(...) change re-triggers downstream computeds, but that's an indirect coupling that's easy to break in a future change.

Promoting these to a signal / computed() chain makes the reactive graph explicit, lets the template's [itemSize]="rowHeight" participate properly in signal-based change detection, and removes one reason for onResize to manually poke the refresh pipeline.

♻️ Sketch of the refactor

-  screenWidth = window.innerWidth;
+  private readonly screenWidth = signal(window.innerWidth);
@@
-  `@HostListener`('window:resize')
-  onResize(): void {
-    this.screenWidth = window.innerWidth;
-    this.scheduleViewportRefresh();
-  }
+  `@HostListener`('window:resize')
+  onResize(): void {
+    this.screenWidth.set(window.innerWidth);
+    this.scheduleViewportRefresh();
+  }
@@
-  get isMobile(): boolean {
-    return this.screenWidth <= 767;
-  }
-
-  get cardWidth(): number {
-    const base = this.isMobile
-      ? SeriesBrowserComponent.MOBILE_BASE_WIDTH
-      : SeriesBrowserComponent.BASE_WIDTH;
-    return Math.round(base * this.seriesScaleService.scaleFactor());
-  }
-
-  get cardHeight(): number {
-    const base = this.isMobile
-      ? SeriesBrowserComponent.MOBILE_BASE_HEIGHT
-      : SeriesBrowserComponent.BASE_HEIGHT;
-    return Math.round(base * this.seriesScaleService.scaleFactor());
-  }
-
-  get rowHeight(): number {
-    return this.cardHeight + SeriesBrowserComponent.ROW_TOP_PADDING;
-  }
+  readonly isMobile = computed(() => this.screenWidth() <= 767);
+  readonly cardWidth = computed(() => {
+    const base = this.isMobile()
+      ? SeriesBrowserComponent.MOBILE_BASE_WIDTH
+      : SeriesBrowserComponent.BASE_WIDTH;
+    return Math.round(base * this.seriesScaleService.scaleFactor());
+  });
+  readonly cardHeight = computed(() => {
+    const base = this.isMobile()
+      ? SeriesBrowserComponent.MOBILE_BASE_HEIGHT
+      : SeriesBrowserComponent.BASE_HEIGHT;
+    return Math.round(base * this.seriesScaleService.scaleFactor());
+  });
+  readonly rowHeight = computed(() =>
+    this.cardHeight() + SeriesBrowserComponent.ROW_TOP_PADDING
+  );

Template/effect call sites become cardWidth(), cardHeight(), rowHeight(), isMobile().

Based on learnings: "Prefer Angular signals (e.g., signal, computed) over BehaviorSubject/Observable for state where signals/computed values fit the use case" (balazs-szucs, PR 385).

Also applies to: 123-143, 145-159

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@frontend/src/app/features/series-browser/components/series-browser/series-browser.component.ts`
at line 113, screenWidth is a plain field and the size getters (isMobile,
cardWidth, cardHeight, rowHeight) are plain getters so the reactive graph
doesn't explicitly track screen size; convert screenWidth into a signal (e.g.,
screenWidth = signal(window.innerWidth)) and convert the getters into computed
signals (computed(() => ...)) so refreshViewportEffect and gridColumns
explicitly depend on screenWidth (and seriesScaleService.scaleFactor() stays as
before); update template and any callers to use the computed call form (e.g.,
rowHeight()) and remove the need for onResize to manually poke
scheduleViewportRefresh/viewportWidth.set by updating the screenWidth signal in
onResize instead.