@salesforce/ui-bundle-template-app-angular-template-b2x 11.60.0 → 11.62.0

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/object-search/filters/search-filter.ts

@@ -6,6 +6,7 @@
 import {
 	ChangeDetectionStrategy,
 	Component,
+	computed,
 	DestroyRef,
 	effect,
 	inject,
@@ -15,37 +16,33 @@ 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 { SearchBarComponent } from "../search-bar/search-bar";
 import { ObjectSearchStateService } from "../object-search-state.service";
 import { FILTER_DEBOUNCE_MS } from "../utils/debounce";
 import type { FilterFieldConfig } from "../utils/filter-utils";
 import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
 
 /**
- * Multi-field search filter — a debounced input whose value is applied via
- * `like %value%` across every field named in `config.searchFields` (combined
- * with a top-level `or`, see {@link buildFilter}).
- *
- * Shape mirrors {@link TextFilterComponent} but emits a `type: 'search'`
- * {@link ActiveFilterValue} so `filter-utils` picks the multi-field path.
+ * Multi-field search filter — a debounced input applied via `like %value%`
+ * across every field named in `config.searchFields` (combined with a
+ * top-level `or`, see {@link buildFilter}).
  */
 @Component({
 	selector: "app-search-filter",
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [InputComponent, FilterFieldWrapperComponent],
+	imports: [SearchBarComponent, FilterFieldWrapperComponent],
 	templateUrl: "./search-filter.html",
 })
 export class SearchFilterComponent {
 	private readonly state = inject(ObjectSearchStateService);
 	private readonly destroyRef = inject(DestroyRef);
 
-	/** Field config: `field`, `label`, `placeholder`, `searchFields`, ... */
 	readonly config = input.required<FilterFieldConfig>();
 
+	// Ties the wrapper's <label for> to the search input.
+	protected readonly fieldId = computed(() => `filter-${this.config().field}`);
+
 	protected readonly localValue = signal<string>("");
-	protected readonly inputId = signal<string>("");
 	private readonly commit$ = new Subject<string>();
 
 	constructor() {
@@ -55,7 +52,6 @@ export class SearchFilterComponent {
 
 		effect(() => {
 			const cfg = this.config();
-			this.inputId.set(`filter-${cfg.field}`);
 			const external = this.state.filterFor(cfg.field)?.value ?? "";
 			this.localValue.set(external);
 		});

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/object-search/filters/select-filter.html

@@ -1,9 +1,6 @@
-<app-filter-field-wrapper
-	[label]="config().label"
-	[htmlFor]="inputId()"
-	[helpText]="config().helpText"
->
+<app-filter-field-wrapper [helpText]="config().helpText">
 	<app-select
+		[label]="config().label"
 		[placeholder]="'Select ' + config().label.toLowerCase()"
 		[options]="options()"
 		[value]="currentValue()"

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/features/object-search/filters/select-filter.ts

@@ -4,8 +4,6 @@
  * For full license text, see the LICENSE.txt file
  */
 import { ChangeDetectionStrategy, Component, computed, inject, input } from "@angular/core";
-// Base-app UI wrapper, inherited (not recreated) by this feature. Post-compose
-// it lands at uiBundles/<target>/src/app/components/ui/select/..., three levels up.
 import {
 	SelectComponent,
 	type AppSelectOption,
@@ -14,13 +12,7 @@ import { ObjectSearchStateService } from "../object-search-state.service";
 import type { FilterFieldConfig } from "../utils/filter-utils";
 import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
 
-/**
- * Single-value picklist filter — a select rendered from `config.options` with
- * a leading "All" entry (empty value) that clears the filter.
- *
- * Emits a `type: 'picklist'` filter which `buildSingleFilter` maps to
- * `{ [field]: { eq: value } }`.
- */
+// A leading "All" entry (empty value) clears the filter.
 const ALL_VALUE = "";
 
 @Component({
@@ -32,19 +24,13 @@ const ALL_VALUE = "";
 export class SelectFilterComponent {
 	private readonly state = inject(ObjectSearchStateService);
 
-	/** Field config: `field`, `label`, `options`, `helpText`, ... */
 	readonly config = input.required<FilterFieldConfig>();
 
-	/** DOM id shared by the wrapper label and the underlying control. */
-	protected readonly inputId = computed(() => `filter-${this.config().field}`);
-
-	/** Options rendered in the select, with an "All" (clear) sentinel prepended. */
 	protected readonly options = computed<readonly AppSelectOption[]>(() => [
 		{ value: ALL_VALUE, label: "All" },
 		...(this.config().options ?? []),
 	]);
 
-	/** Current selection, reading through to shared state so URL changes reflect. */
 	protected readonly currentValue = computed(
 		() => this.state.filterFor(this.config().field)?.value ?? ALL_VALUE,
 	);

package/dist/force-app/main/default/uiBundles/angularextapp/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/dist/force-app/main/default/uiBundles/angularextapp/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/dist/force-app/main/default/uiBundles/angularextapp/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/dist/force-app/main/default/uiBundles/angularextapp/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/dist/force-app/main/default/uiBundles/angularextapp/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/dist/force-app/main/default/uiBundles/angularextapp/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/dist/force-app/main/default/uiBundles/angularextapp/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/dist/force-app/main/default/uiBundles/angularextapp/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>