@salesforce/templates 66.13.6 → 66.13.8

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/filters/text-filter.html

@@ -1,10 +1,7 @@
-<app-filter-field-wrapper
-	[label]="config().label"
-	[htmlFor]="inputId()"
-	[helpText]="config().helpText"
->
+<app-filter-field-wrapper [helpText]="config().helpText">
 	<app-input
 		type="text"
+		[label]="config().label"
 		[placeholder]="config().placeholder ?? 'Filter by ' + config().label.toLowerCase() + '...'"
 		[value]="localValue()"
 		(valueChange)="onValueChange($event)"

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/filters/text-filter.ts

@@ -15,8 +15,6 @@ import {
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { Subject } from "rxjs";
 import { debounceTime } from "rxjs/operators";
-// Base-app UI wrapper, inherited (not recreated) by this feature. Post-compose
-// it lands at uiBundles/<target>/src/app/components/ui/input/..., three levels up.
 import { InputComponent } from "../../../components/ui/input/input";
 import { ObjectSearchStateService } from "../object-search-state.service";
 import { FILTER_DEBOUNCE_MS } from "../utils/debounce";
@@ -26,11 +24,8 @@ import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
 /**
  * Text filter — free-text input that writes a `like %value%` clause via
  * {@link ObjectSearchStateService.setFilter}. Keystrokes update the local
- * signal immediately (for a responsive UI) and flush to shared state on a
- * {@link FILTER_DEBOUNCE_MS}ms trailing debounce (to avoid a query per key).
- *
- * Reads the current value from `state.filterFor(config.field)` so URL /
- * reset-all changes reflect back into the input.
+ * signal immediately and flush to shared state on a
+ * {@link FILTER_DEBOUNCE_MS}ms trailing debounce.
  */
 @Component({
 	selector: "app-text-filter",
@@ -42,16 +37,9 @@ export class TextFilterComponent {
 	private readonly state = inject(ObjectSearchStateService);
 	private readonly destroyRef = inject(DestroyRef);
 
-	/** Field config: `field`, `label`, `placeholder`, `helpText`, ... */
 	readonly config = input.required<FilterFieldConfig>();
 
-	/** Local (uncommitted) value that drives the input while the user is typing. */
 	protected readonly localValue = signal<string>("");
-
-	/** DOM id shared by the wrapper label and the underlying input. */
-	protected readonly inputId = signal<string>("");
-
-	/** Coalesces rapid keystrokes into one shared-state write. */
 	private readonly commit$ = new Subject<string>();
 
 	constructor() {
@@ -59,11 +47,9 @@ export class TextFilterComponent {
 			.pipe(debounceTime(FILTER_DEBOUNCE_MS), takeUntilDestroyed(this.destroyRef))
 			.subscribe((v) => this.commit(v));
 
-		// Sync the input with the shared state (URL restore, reset-all, ...).
-		// Mirrors the React "reset local when external changes" pattern.
+		// Sync the input with shared state (URL restore, reset-all, ...).
 		effect(() => {
 			const cfg = this.config();
-			this.inputId.set(`filter-${cfg.field}`);
 			const external = this.state.filterFor(cfg.field)?.value ?? "";
 			this.localValue.set(external);
 		});

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/pagination/pagination.ts

@@ -4,20 +4,14 @@
  * For full license text, see the LICENSE.txt file
  */
 import { ChangeDetectionStrategy, Component, inject, input } from "@angular/core";
-import type { PageEvent } from "@angular/material/paginator";
 import { PaginatorComponent } from "../../../components/ui/paginator/paginator";
+import type { PageEvent } from "../../../components/ui/paginator/types";
 import { ObjectSearchStateService } from "../object-search-state.service";
 
 /**
- * Cursor-pagination bridge. Feeds the shared cursor state into the presentational
- * {@link PaginatorComponent} (`app-paginator`) and translates its offset-style
- * `(page)` event back into the cursor walk the state service understands.
- *
- * State comes from the shared {@link ObjectSearchStateService} (`pageIndex`,
- * `pageSize`); the hosting page supplies the cursor-derived inputs
- * (`totalCount`, `hasNextPage`, `endCursor`) after each fetch. A next-page step
- * needs the current `endCursor`; a previous step and page-size changes are
- * handled entirely by the state service's cursor stack.
+ * Cursor-pagination bridge. Feeds shared cursor state into {@link PaginatorComponent}
+ * and translates its offset-style `(page)` event back into the cursor walk the
+ * state service understands.
  */
 @Component({
 	selector: "app-pagination-controls",
@@ -26,26 +20,16 @@ import { ObjectSearchStateService } from "../object-search-state.service";
 	templateUrl: "./pagination.html",
 })
 export class PaginationControlsComponent {
-	/** Total row count from the latest fetch; drives the paginator's range label. */
 	readonly totalCount = input<number | undefined>(undefined);
-	/** Whether the API reports another page after the current one. */
 	readonly hasNextPage = input<boolean>(false);
-	/** `endCursor` from the latest page-info; forwarded to `goToNextPage`. */
 	readonly endCursor = input<string | undefined>(undefined);
-	/** Allowed page-size choices. */
 	readonly pageSizeOptions = input.required<readonly number[]>();
-	/** Disable navigation and the size select (e.g. while loading). */
 	readonly disabled = input<boolean>(false);
 
 	private readonly state = inject(ObjectSearchStateService);
 	protected readonly pageIndex = this.state.pageIndex;
 	protected readonly pageSize = this.state.pageSize;
 
-	/**
-	 * Route Material's offset-style page event onto the cursor model: a page-size
-	 * change resets pagination; a forward step walks the `endCursor`; a backward
-	 * step pops the cursor stack.
-	 */
 	protected onPage(event: PageEvent): void {
 		if (event.pageSize !== this.pageSize()) {
 			this.state.setPageSize(event.pageSize);

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/search-bar/search-bar.html

@@ -1,59 +1,10 @@
-<div class="flex items-center gap-2 w-full">
-	<div class="relative flex-1">
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-10"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-			aria-hidden="true"
-		>
-			<circle cx="11" cy="11" r="8" />
-			<path d="m21 21-4.3-4.3" />
-		</svg>
-		<app-input
-			class="pl-9 block"
-			type="text"
-			[placeholder]="searchConfig().placeholder ?? ''"
-			[label]="searchConfig().label"
-			[(value)]="term"
-		/>
-	</div>
-	<app-popover [(open)]="popoverOpen" align="end">
-		<app-button
-			trigger
-			appearance="outlined"
-			[attr.aria-expanded]="popoverOpen()"
-			aria-label="Toggle filters"
-			class="gap-2"
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-4 w-4"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				aria-hidden="true"
-			>
-				<path d="M3 6h18M7 12h10M10 18h4" />
-			</svg>
-			<span>Filters</span>
-			@if (nonSearchFilterCount() > 0) {
-			<span
-				class="inline-flex items-center justify-center h-5 min-w-5 rounded-full bg-primary text-primary-foreground text-xs px-1"
-			>
-				{{ nonSearchFilterCount() }}
-			</span>
-			}
-		</app-button>
-		<div class="p-3 min-w-72 max-w-96 space-y-3">
-			<ng-content select="[filters]" />
-		</div>
-	</app-popover>
-</div>
+<app-input
+	class="block"
+	type="search"
+	icon="search"
+	[label]="label()"
+	[placeholder]="placeholder()"
+	[ariaLabel]="ariaLabel()"
+	[id]="inputId()"
+	[(value)]="value"
+/>

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/search-bar/search-bar.ts

@@ -3,106 +3,26 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
-import {
-	ChangeDetectionStrategy,
-	Component,
-	computed,
-	DestroyRef,
-	inject,
-	input,
-	type OnInit,
-	signal,
-} from "@angular/core";
-import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
-import { debounceTime } from "rxjs/operators";
-import { ButtonComponent } from "../../../components/ui/button/button";
+import { ChangeDetectionStrategy, Component, input, model } from "@angular/core";
 import { InputComponent } from "../../../components/ui/input/input";
-import { PopoverComponent } from "../../../components/ui/popover/popover";
-import { ObjectSearchStateService } from "../object-search-state.service";
-import type { FilterFieldConfig } from "../utils/filter-utils";
-
-/** How long to wait after the last keystroke before writing to state. */
-const SEARCH_DEBOUNCE_MS = 300;
 
 /**
- * Search-bar header for an object-search page: a debounced text input bound to
- * the `search` filter, plus an optional filter popover that content-projects
- * the sibling filter components (owned by the filters wave).
- *
- * Mirrors the React `SearchBar`, with the composed additions from the ground-
- * truth example page (filter panel toggle). Filter components are NOT imported
- * here — the hosting page projects them via the `[filters]` slot so the
- * feature can pick which filters it renders.
- *
- * ## Usage
- * ```html
- * <app-search-bar [searchConfig]="searchCfg" [filterConfigs]="filterCfgs">
- *   <div filters>
- *     <app-text-filter .../>
- *     <app-select-filter .../>
- *   </div>
- * </app-search-bar>
- * ```
+ * Presentational search box: a text input with a leading search icon inside
+ * its border, purely controlled via `value` with no search state of its own.
+ * Reused by the Home landing form and by `app-search-filter` (which adds the
+ * debounce + shared-state wiring around it).
  */
 @Component({
 	selector: "app-search-bar",
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [ButtonComponent, InputComponent, PopoverComponent],
+	imports: [InputComponent],
+	host: { class: "flex-1 block" },
 	templateUrl: "./search-bar.html",
 })
-export class SearchBarComponent implements OnInit {
-	/** Config for the multi-field search filter (its label, placeholder, etc.). */
-	readonly searchConfig = input.required<FilterFieldConfig>();
-	/**
-	 * Configs for the filters projected into the popover. Not consumed directly
-	 * here — surfaced so the hosting page and this component agree on which
-	 * filters exist, and reserved for a future filter-count badge.
-	 */
-	readonly filterConfigs = input<FilterFieldConfig[]>([]);
-
-	private readonly state = inject(ObjectSearchStateService);
-	private readonly destroyRef = inject(DestroyRef);
-
-	/** Local, debounced mirror of the search filter's `value`. */
-	protected readonly term = signal<string>("");
-	protected readonly popoverOpen = signal<boolean>(false);
-
-	/** Count of currently active filters minus the search itself (for the badge). */
-	protected readonly nonSearchFilterCount = computed(
-		() => this.state.filters().filter((f) => f.type !== "search").length,
-	);
-
-	constructor() {
-		// Required inputs are not yet resolved in the constructor, so the search
-		// config is read lazily inside the subscription (which emits after init).
-		toObservable(this.term)
-			.pipe(debounceTime(SEARCH_DEBOUNCE_MS), takeUntilDestroyed(this.destroyRef))
-			.subscribe((value) => {
-				const cfg = this.searchConfig();
-				if (value) {
-					this.state.setFilter(cfg.field, {
-						field: cfg.field,
-						label: cfg.label,
-						type: cfg.type,
-						value,
-					});
-				} else {
-					this.state.removeFilter(cfg.field);
-				}
-			});
-	}
-
-	ngOnInit(): void {
-		// Seed the local term from any existing search filter (deep-link support).
-		// Done here (not the constructor) so the required `searchConfig` input is
-		// resolved before it is read.
-		const existing = this.state.filterFor(this.searchConfig().field);
-		if (existing?.value) {
-			this.term.set(existing.value);
-		}
-	}
-
-	protected togglePopover(): void {
-		this.popoverOpen.set(!this.popoverOpen());
-	}
+export class SearchBarComponent {
+	readonly value = model<string>("");
+	readonly placeholder = input<string>("");
+	readonly label = input<string>("");
+	readonly ariaLabel = input<string>("");
+	readonly inputId = input<string>("");
 }

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/sort-control/sort-control.html

@@ -11,39 +11,13 @@
 	<app-button
 		appearance="text"
 		size="icon-sm"
-		[attr.aria-label]="'Sort ' + (active.direction === 'ASC' ? 'descending' : 'ascending')"
+		[ariaLabel]="'Sort ' + (active.direction === 'ASC' ? 'descending' : 'ascending')"
 		(clicked)="toggleDirection()"
 	>
 		@if (active.direction === "ASC") {
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			class="h-4 w-4"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-			aria-hidden="true"
-		>
-			<path d="m5 12 7-7 7 7" />
-			<path d="M12 19V5" />
-		</svg>
+		<app-icon name="arrowUp" />
 		} @else {
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			class="h-4 w-4"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-			aria-hidden="true"
-		>
-			<path d="M12 5v14" />
-			<path d="m19 12-7 7-7-7" />
-		</svg>
+		<app-icon name="arrowDown" />
 		}
 	</app-button>
 	}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/sort-control/sort-control.ts

@@ -5,6 +5,7 @@
  */
 import { ChangeDetectionStrategy, Component, computed, inject, input } from "@angular/core";
 import { ButtonComponent } from "../../../components/ui/button/button";
+import { IconComponent } from "../../../components/ui/icon/icon";
 import {
 	SelectComponent,
 	type AppSelectOption,
@@ -16,36 +17,28 @@ import type { SortFieldConfig, SortState } from "../utils/sort-utils";
 const NONE_VALUE = "__none__";
 
 /**
- * Sort field + direction toggle. Mirrors the React `SortControl`.
- *
- * Reads `sort()` from the {@link ObjectSearchStateService} and drives changes
- * via `setSort`. Choosing a field applies ASC by default; the direction button
- * flips ASC/DESC and only appears while a sort is active. Selecting `Default`
- * clears the sort (`setSort(null)`).
+ * Sort field + direction toggle. Choosing a field applies ASC by default; the
+ * direction button flips ASC/DESC and only appears while a sort is active.
+ * Selecting `Default` clears the sort (`setSort(null)`).
  */
 @Component({
 	selector: "app-sort-control",
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [ButtonComponent, SelectComponent],
+	imports: [ButtonComponent, IconComponent, SelectComponent],
 	templateUrl: "./sort-control.html",
 })
 export class SortControlComponent {
-	/** Sortable fields to expose in the select. */
 	readonly sortFields = input.required<SortFieldConfig[]>();
-	/** Override for the leading label (default `Sort by`). */
 	readonly label = input<string>("Sort by");
 
 	private readonly state = inject(ObjectSearchStateService);
-	/** Current sort state from the shared state service. */
 	protected readonly sort = this.state.sort;
 
-	/** Select options — the `Default` sentinel plus one per sortable field. */
 	protected readonly options = computed<AppSelectOption[]>(() => [
 		{ value: NONE_VALUE, label: "Default" },
 		...this.sortFields().map((c) => ({ value: c.field, label: c.label })),
 	]);
 
-	/** Value shown in the select — either the current field or the sentinel. */
 	protected readonly selectedValue = computed(() => this.sort()?.field ?? NONE_VALUE);
 
 	protected onFieldChange(field: string): void {

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/pages/account-detail/account-detail-page.html

@@ -7,7 +7,6 @@
 	/>
 
 	@if (loading()) {
-	<!-- Loading state -->
 	<app-skeleton class="h-8 w-56 mb-4" />
 	<app-card>
 		<app-card-content class="space-y-8">
@@ -36,7 +35,6 @@
 		</app-card-content>
 	</app-card>
 	} @else if (error()) {
-	<!-- Error state -->
 	<app-alert
 		variant="destructive"
 		icon="error"
@@ -48,25 +46,9 @@
 		<app-button appearance="outlined" (clicked)="reload()">Retry</app-button>
 	</div>
 	} @else if (notFound()) {
-	<!-- Not found state -->
 	<app-card>
 		<app-card-content class="flex flex-col items-center justify-center py-16 text-center">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="size-12 text-muted-foreground mb-4"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				aria-hidden="true"
-			>
-				<path d="M12 17h.01" />
-				<path d="M10.1 9a2.4 2.4 0 0 1 3.9 1.9c0 1.5-2 2-2 3" />
-				<path d="M14.5 4.5 20 10l-2 2" />
-				<path d="M4 4h9l7 7v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z" />
-			</svg>
+			<app-icon name="notFound" size="3rem" class="text-muted-foreground mb-4" />
 			<h2 class="text-lg font-semibold mb-1">Account not found</h2>
 			<p class="text-sm text-muted-foreground mb-6">
 				The account you're looking for doesn't exist or may have been deleted.
@@ -75,7 +57,6 @@
 		</app-card-content>
 	</app-card>
 	} @else if (account()) {
-	<!-- Content -->
 	<h1 class="text-2xl font-bold mb-4">Account: {{ title() }}</h1>
 
 	<app-card>
@@ -100,7 +81,6 @@
 
 			<app-separator />
 
-			<!-- Additional Information -->
 			<app-collapsible title="Additional Information" [(open)]="additionalOpen">
 				<div class="space-y-4">
 					@for (row of additionalRows(); track $index) {
@@ -122,7 +102,6 @@
 			<div class="space-y-4"></div>
 			<app-separator />
 
-			<!-- Address Information -->
 			<app-collapsible title="Address Information" [(open)]="addressOpen">
 				<div class="grid grid-cols-2 gap-x-8 gap-y-4">
 					<div>
@@ -145,7 +124,6 @@
 			</app-collapsible>
 			<div class="space-y-4"></div>
 			<app-separator />
-			<!-- System Information -->
 			<app-collapsible title="System Information" [(open)]="systemOpen">
 				<div class="grid grid-cols-2 gap-x-8 gap-y-4">
 					<div>

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/pages/account-detail/account-detail-page.ts

@@ -7,16 +7,13 @@ import { ChangeDetectionStrategy, Component, computed, inject, signal } from "@a
 import { ActivatedRoute, Router } from "@angular/router";
 import { toSignal } from "@angular/core/rxjs-interop";
 import { map } from "rxjs/operators";
-// Base-app UI wrappers, inherited (not recreated) by this feature. Post-compose
-// they land at uiBundles/<target>/src/app/components/ui/..., three levels up from this
-// page folder (app/features/account-search/ -> app/components/ui/).
 import { AlertComponent } from "../../components/ui/alert/alert";
+import { IconComponent } from "../../components/ui/icon/icon";
 import { ButtonComponent } from "../../components/ui/button/button";
 import { CardComponent, CardContentComponent } from "../../components/ui/card/card";
 import { CollapsibleComponent } from "../../components/ui/collapsible/collapsible";
 import { SeparatorComponent } from "../../components/ui/separator/separator";
 import { SkeletonComponent } from "../../components/ui/skeleton/skeleton";
-// Object-search feature building blocks (Waves 1-2), two levels up.
 import { ObjectBreadcrumbComponent } from "../../features/object-search/breadcrumb/breadcrumb";
 import { createAsyncData } from "../../utils/async-data";
 import {
@@ -26,13 +23,11 @@ import {
 } from "../../features/object-search/utils/field-utils";
 import { AccountSearchService } from "../../api/account/account-search.service";
 
-/** `Intl` options for the created / last-modified timestamps (matches React). */
 const DATE_TIME_OPTIONS: Intl.DateTimeFormatOptions = {
 	dateStyle: "medium",
 	timeStyle: "short",
 };
 
-/** A `{ label, value }` pair rendered in a field grid. */
 interface Field {
 	label: string;
 	value: string | null;
@@ -40,21 +35,12 @@ interface Field {
 	telephone?: boolean;
 }
 
-/**
- * Account detail page. The Angular analogue of the React
- * `AccountObjectDetailPage`: a breadcrumb plus a card of collapsible sections
- * (top fields, Additional / Address / System information), with loading,
- * error, and not-found states.
- *
- * The record id comes from the `:recordId` route param (reactively, so a
- * client-side nav between two detail routes refetches). Data flows through
- * {@link createAsyncData} for latest-wins fetching.
- */
 @Component({
 	selector: "app-account-detail-page",
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [
 		AlertComponent,
+		IconComponent,
 		ButtonComponent,
 		CardComponent,
 		CardContentComponent,
@@ -64,14 +50,13 @@ interface Field {
 		ObjectBreadcrumbComponent,
 	],
 	templateUrl: "./account-detail-page.html",
-	styleUrl: "./account-detail-page.scss",
 })
 export class AccountDetailPageComponent {
 	private readonly service = inject(AccountSearchService);
 	private readonly route = inject(ActivatedRoute);
 	private readonly router = inject(Router);
 
-	/** Reactive `:recordId` param — drives (and re-drives) the fetch. */
+	// Reactive param so a client-side nav between two detail routes refetches.
 	private readonly recordId = toSignal(
 		this.route.paramMap.pipe(map((p) => p.get("recordId") ?? "")),
 		{ initialValue: this.route.snapshot.paramMap.get("recordId") ?? "" },
@@ -84,15 +69,12 @@ export class AccountDetailPageComponent {
 	protected readonly account = this.result.data;
 	protected readonly loading = this.result.loading;
 	protected readonly error = this.result.error;
-	/** True once a resolved fetch returned no record (distinct from loading). */
 	protected readonly notFound = computed(() => !this.loading() && !this.error() && !this.account());
 
-	/** Per-section collapsible open state (all default open, matching React). */
 	protected readonly additionalOpen = signal<boolean>(true);
 	protected readonly addressOpen = signal<boolean>(true);
 	protected readonly systemOpen = signal<boolean>(true);
 
-	/** Placeholder rows for skeleton field grids. */
 	protected readonly skeletonRows = [0, 1, 2];
 
 	// -- Breadcrumb leaf label -------------------------------------------------
@@ -184,12 +166,10 @@ export class AccountDetailPageComponent {
 		return [fieldValue(name ?? null), formatted].filter(Boolean).join(" ") || null;
 	}
 
-	/** Navigate back to the previous view (mirrors the React `navigate(-1)`). */
 	protected goBack(): void {
 		void this.router.navigate(["/accounts"]);
 	}
 
-	/** Full page reload retry, matching the React "Retry" affordance. */
 	protected reload(): void {
 		window.location.reload();
 	}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/pages/account-search/account-search-page.html

@@ -4,7 +4,6 @@
 	<h1 class="text-2xl font-bold mb-4">Search Accounts</h1>
 
 	<div class="flex flex-col lg:flex-row gap-6">
-		<!-- Sidebar — Filter Panel -->
 		<aside class="w-full lg:w-80 shrink-0">
 			<app-collapsible title="Filters" [(open)]="filtersOpen">
 				<div class="space-y-1">
@@ -19,7 +18,6 @@
 			</app-collapsible>
 		</aside>
 
-		<!-- Main area — Sort + Results -->
 		<div class="flex-1 min-w-0">
 			<div class="flex flex-wrap items-center gap-2 mb-4">
 				<app-sort-control [sortFields]="sortConfigs" />
@@ -74,22 +72,7 @@
 				</ul>
 				} @else {
 				<div class="flex flex-col items-center justify-center py-16 text-center">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="size-12 text-muted-foreground mb-4"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						aria-hidden="true"
-					>
-						<path d="m13.5 8.5-5 5" />
-						<path d="m8.5 8.5 5 5" />
-						<circle cx="11" cy="11" r="8" />
-						<path d="m21 21-4.3-4.3" />
-					</svg>
+					<app-icon name="noResults" size="3rem" class="text-muted-foreground mb-4" />
 					<h2 class="text-lg font-semibold mb-1">No accounts found</h2>
 					<p class="text-sm text-muted-foreground">
 						Try adjusting your filters or search criteria.
@@ -98,7 +81,6 @@
 				}
 			</div>
 
-			<!-- Pagination — always visible, disabled while loading or on error -->
 			<app-pagination-controls
 				[totalCount]="totalCount()"
 				[hasNextPage]="hasNextPage()"