@sinequa/atomic-angular 2.6.0 → 2.8.0

package/fesm2022/sinequa-atomic-angular.mjs

@@ -2,11 +2,11 @@ import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DOCUMENT, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostBinding, HostListener, Inject, Injectable, InjectionToken, Injector, LOCALE_ID, Optional, Pipe, Service, TemplateRef, ViewEncapsulation, afterNextRender, afterRenderEffect, assertInInjectionContext, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideEnvironmentInitializer, resource, runInInjectionContext, signal, untracked, viewChild, viewChildren } from "@angular/core";
 import { BehaviorSubject, EMPTY, Subject, Subscription, catchError, debounceTime, filter, firstValueFrom, from, fromEvent, map, of, scan, shareReplay, switchMap, tap, throwError } from "rxjs";
 import { TranslocoPipe, TranslocoService, provideTranslocoScope } from "@jsverse/transloco";
-import { ArrowDownIcon, ArrowDownZaIcon, ArrowLeftIcon, ArrowRightFromBracketIcon, ArrowRightIcon, ArrowUpAzIcon, ArrowUpIcon, ArrowUpRightFromSquareIcon, ArrowsMaximizeIcon, AutocompleteComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BarsIcon, BellIcon, BookmarkIcon, BreakpointObserverService, ButtonComponent, CalendarDayIcon, CheckIcon, CheckboxComponent, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, CircleCheckIcon, CommentIcon, CommentsIcon, DIALOG_REF, DesktopIcon, DialogBodyComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, DropdownDirective, EditIcon, EllipsisIcon, EllipsisVerticalIcon, EyeIcon, EyeSlashIcon, FileHTMLIcon, FileIcon, FileOutputIcon, FileSpreadsheetIcon, FileTextIcon, FilterIcon, FilterXIcon, FlagEnglishIcon, FlagFrenchIcon, FlagGermanIcon, FlashlightIcon, FolderIcon, FolderOpenIcon, FrownIcon, GearIcon, GitForkIcon, GlobeIcon, HighlighterIcon, HistoryIcon, HomeIcon, ImageIcon, InboxIcon, InfoCircleIcon, InputComponent, InputControlDirective, InputIconRightDirective, KbdComponent, KbdGroupComponent, KeyIcon, KeyboardIcon, LanguageIcon, LightbulbIcon, LightbulbSlashIcon, LinkComponent, ListComponent, ListFilterIcon, ListItemActionComponent, ListItemAvatarDirective, ListItemComponent, ListItemLeftDirective, ListItemTextComponent, LoadingCircleIcon, MagnifyingGlassIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, MenuComponent, MenuContentComponent, MenuItemComponent, MenuTriggerDirective, MoonIcon, PaletteIcon, PaperclipIcon, PenToSquareIcon, PlusIcon, PopoverDirective, PresentationIcon, QuestionCircleIcon, RadioComponent, RobotIcon, SaveIcon, SearchBarComponent, SearchInputComponent, SelectComponent, SelectTriggerDirective, SendIcon, SheetBodyComponent, SheetComponent, SheetHeaderComponent, SlashIcon, SlidersIcon, SparklesIcon, SpinnerIcon, SquareCheckIcon, SquareIcon, SquareMinusIcon, StarIcon, SunBrightIcon, SwitchComponent, SyncIcon, TabComponent, TabListComponent, TabPanelComponent, TabsComponent, TagComponent, TagIcon, TagsIcon, TextareaComponent, TextareaControlDirective, ThumbsDownIcon, ThumbsUpIcon, ToggleComponent, ToggleGroupComponent, ToggleItemComponent, ToggleLeftIcon, ToggleRightIcon, TooltipDirective, TrashCanIcon, TrashIcon, TreeComponent, TreeItemComponent, TreeItemExpanderComponent, TreeItemGroupComponent, TriangleAlertIcon, UndoIcon, UserIcon, UserSecretIcon, VideoIcon, XMarkIcon, createCallable, injectCallRef, isApplePlatform } from "@sinequa/galactik";
+import { ArrowDownIcon, ArrowDownZaIcon, ArrowLeftIcon, ArrowRightFromBracketIcon, ArrowRightIcon, ArrowUpAzIcon, ArrowUpIcon, ArrowUpRightFromSquareIcon, ArrowsMaximizeIcon, AutocompleteComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BarsIcon, BellIcon, BellSlashIcon, BookmarkIcon, BreakpointObserverService, ButtonComponent, CalendarDayIcon, CheckIcon, CheckboxComponent, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, CircleCheckIcon, CommentIcon, CommentsIcon, DIALOG_REF, DesktopIcon, DialogBodyComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, DropdownDirective, EditIcon, EllipsisIcon, EllipsisVerticalIcon, EyeIcon, EyeSlashIcon, FileHTMLIcon, FileIcon, FileOutputIcon, FileSpreadsheetIcon, FileTextIcon, FilterIcon, FilterXIcon, FlagEnglishIcon, FlagFrenchIcon, FlagGermanIcon, FlashlightIcon, FolderIcon, FolderOpenIcon, FrownIcon, GearIcon, GitForkIcon, GlobeIcon, GripVerticalIcon, HighlighterIcon, HistoryIcon, HomeIcon, ImageIcon, InboxIcon, InfoCircleIcon, InputComponent, InputControlDirective, InputIconRightDirective, KbdComponent, KbdGroupComponent, KeyIcon, KeyboardIcon, LanguageIcon, LightbulbIcon, LightbulbSlashIcon, LinkComponent, ListComponent, ListFilterIcon, ListItemActionComponent, ListItemAvatarDirective, ListItemComponent, ListItemLeftDirective, ListItemTextComponent, LoadingCircleIcon, LockIcon, MagnifyingGlassIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, MenuComponent, MenuContentComponent, MenuItemComponent, MenuTriggerDirective, MoonIcon, PaletteIcon, PaperclipIcon, PenToSquareIcon, PlusIcon, PopoverDirective, PresentationIcon, QuestionCircleIcon, RadioComponent, RobotIcon, SaveIcon, SearchBarComponent, SearchIcon, SearchInputComponent, SelectComponent, SelectTriggerDirective, SendIcon, SheetBodyComponent, SheetComponent, SheetHeaderComponent, SidebarInsetDirective, SlashIcon, SlidersIcon, SortableDirective, SortableItemDirective, SparklesIcon, SpinnerIcon, SquareCheckIcon, SquareIcon, SquareMinusIcon, StarIcon, SunBrightIcon, SwitchComponent, SyncIcon, TabComponent, TabListComponent, TabPanelComponent, TabsComponent, TagComponent, TagIcon, TagInputComponent, TagsIcon, TextareaComponent, TextareaControlDirective, ThumbsDownIcon, ThumbsUpIcon, ToggleComponent, ToggleGroupComponent, ToggleItemComponent, ToggleLeftIcon, ToggleRightIcon, TooltipDirective, TrashCanIcon, TrashIcon, TreeComponent, TreeItemComponent, TreeItemExpanderComponent, TreeItemGroupComponent, TriangleAlertIcon, TruncatedDirective, UndoIcon, UserIcon, UserSecretIcon, VideoIcon, XMarkIcon, createCallable, injectCallRef, isApplePlatform } from "@sinequa/galactik";
 import { withDevtools } from "@angular-architects/ngrx-toolkit";
 import { getState, patchState, signalStore, signalStoreFeature, withComputed, withMethods, withState } from "@ngrx/signals";
 import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterModule } from "@angular/router";
-import { Audit, AuditEventType, EngineType, addAuditAdditionalInfo, addConcepts, aggItemRegex, bisect, buildPathsAndLevels, createAtomicClient, createHeaders, debug, error, escapeExpr, expiresSoon, extraColumns, filter as filter$1, flattenLegacyFilterValues, getDefaultClient, getMetadata, getQueryParamsFromUrl, getRelativeDate, getToken, getUrlParamsFromQueryParams, globalConfig, info, isExpired, isExternalAuthMode, isJsonable, isNotInputEvent, isObject, notify, parseValueAndOperatorFromItem, queryParamsFromUrl, resolveBearerToken, resolveOAuthProvider, resolveSAMLProvider, resultPages, setToken, suggestionsToTreeAggregationNodes, sysLang, translateAggregationToDateOptions, warn } from "@sinequa/atomic";
+import { Audit, AuditEventType, EngineType, addAuditAdditionalInfo, addConcepts, aggItemRegex, bisect, buildPathsAndLevels, createAtomicClient, createHeaders, debug, error, escapeExpr, expiresSoon, extraColumns, filter as filter$1, flattenLegacyFilterValues, getDefaultClient, getMetadata, getQueryParamsFromUrl, getRelativeDate, getToken, getUrlParamsFromQueryParams, globalConfig, info, isExpired, isExternalAuthMode, isJsonable, isNotInputEvent, isObject, notify, parseValueAndOperatorFromItem, resolveBearerToken, resolveOAuthProvider, resolveSAMLProvider, resultPages, setToken, suggestionsToTreeAggregationNodes, sysLang, translateAggregationToDateOptions, warn } from "@sinequa/atomic";
 import { DomSanitizer, Title } from "@angular/platform-browser";
 import MarkdownIt from "markdown-it";
 import { DATE_PIPE_DEFAULT_OPTIONS, DATE_PIPE_DEFAULT_TIMEZONE, DatePipe, Location, NgComponentOutlet, NgStyle, NgTemplateOutlet } from "@angular/common";
@@ -18,8 +18,6 @@ import { FormField, FormRoot, applyEach, form, readonly, required, schema, submi
 import { injectVirtualizer } from "@tanstack/angular-virtual";
 import { catchError as catchError$1, filter as filter$2, map as map$1, switchMap as switchMap$1 } from "rxjs/operators";
 import { Tab } from "@angular/aria/tabs";
-import * as i1 from "@angular/cdk/drag-drop";
-import { DragDropModule } from "@angular/cdk/drag-drop";
 import { A11yModule } from "@angular/cdk/a11y";
 import { Calendar, months } from "vanilla-calendar-pro";
 import { getDate, getDateString } from "vanilla-calendar-pro/utils";
@@ -296,8 +294,9 @@ function withAppFeatures() {
 				};
 			},
 			getQueryByName(name) {
+				if (!name) return void 0;
 				const queries = store.queries();
-				return Object.values(queries).find((query) => query.name.toLowerCase() === name.toLowerCase());
+				return Object.values(queries).find((query) => query.name?.toLowerCase() === name.toLowerCase());
 			},
 			getQueryByIndex(index) {
 				const queries = store.queries();
@@ -805,6 +804,9 @@ var QueryService = class QueryService {
 	result = signal({}, ...ngDevMode ? [{ debugName: "result" }] : /* istanbul ignore next */ []);
 	failure = computed(() => this.result().$error, ...ngDevMode ? [{ debugName: "failure" }] : /* istanbul ignore next */ []);
 	audit;
+	warnEmptySearch() {
+		firstValueFrom(this.transloco.selectTranslate("emptySearch", {}, "searches")).catch(() => "Please enter a search query.").then((message) => notify.warning(message));
+	}
 	search(q, includeQueryParams = true, audit) {
 		const $auditRecord = { auditEvents: [audit ?? this.audit ?? {
 			type: "Search_Text",
@@ -820,7 +822,7 @@ var QueryService = class QueryService {
 		if (!((this.queryParamsStore.filters?.() || []).length > 0) && !query.basket && query.action !== "open") {
 			if (this.appStore.allowEmptySearch(query?.name || "") === false && query?.text === "") {
 				warn("QueryService.search: Empty search query is not allowed. Returning empty result.");
-				notify.warning(this.transloco.translate("searches.emptySearch"));
+				this.warnEmptySearch();
 				const emptyResult = { records: [] };
 				this.result.set(emptyResult);
 				return of(emptyResult);
@@ -1370,9 +1372,8 @@ function withAlertsFeatures() {
 				});
 			},
 			async updateAlert(alert, index) {
-				const alerts = store.alerts();
-				if (index < 0 || index >= alerts.length) return;
-				alerts.splice(index, 1, alert);
+				if (index < 0 || index >= store.alerts().length) return;
+				const alerts = store.alerts().with(index, alert);
 				await patch({ alerts }, {
 					type: "Alert_Update",
 					detail: { alert: alert.name }
@@ -1386,8 +1387,8 @@ function withAlertsFeatures() {
 			},
 			async updateAlerts(alerts) {
 				await patch({ alerts }, {
-					type: "Alert_Update",
-					detail: { alert: alert.name }
+					type: "Alerts_Update",
+					detail: { alerts: alerts.map((a) => a.name).join(", ") }
 				});
 				patchState(store, (state) => {
 					return {
@@ -3243,11 +3244,13 @@ i0.ɵɵngDeclareClassMetadata({
 });
 var UserProfileService = class UserProfileService {
 	client = inject(ATOMIC_CLIENT);
+	injector = inject(Injector);
 	resources = /* @__PURE__ */ new WeakMap();
 	getUserProfile(userId) {
 		let resourceRef = this.resources.get(userId);
 		if (!resourceRef) {
 			resourceRef = resource({
+				injector: this.injector,
 				params: () => {
 					const id = userId();
 					return id ? { id } : void 0;
@@ -3426,17 +3429,61 @@ const QUERY_PARAMS_DEFAULTS = {
 	neuralSearch: void 0,
 	aggregation_overrides: void 0
 };
+function parseHref(href) {
+	let url;
+	try {
+		url = new URL(href, window.location.origin);
+	} catch {
+		return {
+			path: "",
+			params: new URLSearchParams()
+		};
+	}
+	if (url.hash.startsWith("#/")) {
+		const route = url.hash.slice(1);
+		const queryIndex = route.indexOf("?");
+		const path = queryIndex === -1 ? route : route.slice(0, queryIndex);
+		const search = queryIndex === -1 ? "" : route.slice(queryIndex + 1);
+		return {
+			path,
+			params: new URLSearchParams(search)
+		};
+	}
+	return {
+		path: "",
+		params: url.searchParams
+	};
+}
+function parseFilters(raw) {
+	if (!raw) return [];
+	const candidates = [raw];
+	try {
+		const decoded = decodeURIComponent(raw);
+		if (decoded !== raw) candidates.push(decoded);
+	} catch {}
+	for (const candidate of candidates) try {
+		const parsed = JSON.parse(candidate);
+		if (Array.isArray(parsed)) return parsed;
+	} catch {}
+	return [];
+}
 const QueryParamsStore = signalStore({ providedIn: "root" }, withDevtools("QueryParams"), withQueryParamsFeatures());
 function withQueryParamsFeatures() {
 	return signalStoreFeature(withState(QUERY_PARAMS_DEFAULTS), withMethods((store, injector = inject(Injector), router = inject(Router), route = inject(ActivatedRoute), appStore = inject(AppStore)) => ({
 		setFromUrl(href) {
 			if (!href) return;
-			const path = new URL(href, window.location.origin).hash.split("?")[0].replace(/^#/, "");
-			const { q: text, f, id, p, s: sort, c, t: tab, basket, n: name } = queryParamsFromUrl(href);
-			const filters = f ? JSON.parse(decodeURIComponent(f)) : [];
-			const spellingCorrectionMode = c;
-			let page;
-			if (p) page = parseInt(p, 10);
+			const { path, params } = parseHref(href);
+			const text = params.get("q") ?? "";
+			const filters = parseFilters(params.get("f"));
+			const id = params.get("id") ?? "";
+			const sort = params.get("s") ?? "";
+			const tab = params.get("t") ?? "";
+			const basket = params.get("b") ?? "";
+			const name = params.get("n") ?? "";
+			const spellingCorrectionMode = params.get("c") || void 0;
+			const p = params.get("p");
+			const parsedPage = p ? parseInt(p, 10) : NaN;
+			const page = Number.isNaN(parsedPage) ? void 0 : parsedPage;
 			patchState(store, (state) => {
 				return {
 					...state,
@@ -4934,14 +4981,15 @@ var LoadingComponent = class LoadingComponent {
 				clearTimeout(timeout);
 				setTimeout(() => {
 					const url = this.route.snapshot.queryParams["returnUrl"] || null;
-					if (!url) {
-						this.router.navigateByUrl(url);
+					if (url) {
 						this.queryParamsStore.setFromUrl(url);
+						this.router.navigateByUrl(url);
 					} else this.router.navigate(["/"]);
 				}, 700);
 			}
 		});
-		if (!this.client.auth.isAuthenticated()) {
+		if (this.client.auth.isAuthenticated()) this.application.updateReadyState(true);
+		else {
 			this.application.updateReadyState(false);
 			this.client.auth.login().then(() => {
 				this.application.updateReadyState(true);
@@ -5694,6 +5742,86 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}] }
 });
+const COLOR_CLASSES = {
+	yellow: "bg-(--bg-yellow-base-alt) text-(--font-yellow-muted)",
+	blue: "bg-(--bg-info-base-alt) text-(--font-info-muted)",
+	pink: "bg-(--bg-accent-base-alt) text-(--font-accent-muted)",
+	indigo: "bg-(--bg-indigo-base-alt) text-(--font-indigo-muted)",
+	green: "bg-(--bg-success-base-alt) text-(--font-success-muted)",
+	orange: "bg-(--bg-warning-base-alt) text-(--font-warning-muted)"
+};
+var ListPanelEmptyComponent = class ListPanelEmptyComponent {
+	color = input("blue", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	tileClasses = computed(() => `inline-flex size-12 shrink-0 items-center justify-center rounded-(--radius-md) [&_svg]:size-6 [&_svg]:opacity-80 ${COLOR_CLASSES[this.color()]}`, ...ngDevMode ? [{ debugName: "tileClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ListPanelEmptyComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: ListPanelEmptyComponent,
+		isStandalone: true,
+		selector: "list-panel-empty, ListPanelEmpty",
+		inputs: { color: {
+			classPropertyName: "color",
+			publicName: "color",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { classAttribute: "flex flex-col items-center gap-(--spacing-xs) py-(--spacing-xs) text-center [&>[listPanelEmptyHint]]:m-0 [&>[listPanelEmptyHint]]:-mt-(--spacing-2xs) [&>[listPanelEmptyHint]]:max-w-prose [&>[listPanelEmptyHint]]:text-(length:--size-sm) [&>[listPanelEmptyHint]]:leading-(--line-height-2) [&>[listPanelEmptyHint]]:text-(--font-neutral-muted)" },
+		ngImport: i0,
+		template: `
+    <span [class]="tileClasses()" aria-hidden="true">
+      <ng-content select="[listPanelEmptyIcon]" />
+    </span>
+    <p class="m-0 text-(length:--size-base) leading-(--line-height-3) font-semibold text-(--font-neutral-base)">
+      <ng-content />
+    </p>
+    <ng-content select="[listPanelEmptyHint]" />
+    <ng-content select="[listPanelEmptyAction]" />
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ListPanelEmptyComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "list-panel-empty, ListPanelEmpty",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "flex flex-col items-center gap-(--spacing-xs) py-(--spacing-xs) text-center [&>[listPanelEmptyHint]]:m-0 [&>[listPanelEmptyHint]]:-mt-(--spacing-2xs) [&>[listPanelEmptyHint]]:max-w-prose [&>[listPanelEmptyHint]]:text-(length:--size-sm) [&>[listPanelEmptyHint]]:leading-(--line-height-2) [&>[listPanelEmptyHint]]:text-(--font-neutral-muted)" },
+			template: `
+    <span [class]="tileClasses()" aria-hidden="true">
+      <ng-content select="[listPanelEmptyIcon]" />
+    </span>
+    <p class="m-0 text-(length:--size-base) leading-(--line-height-3) font-semibold text-(--font-neutral-base)">
+      <ng-content />
+    </p>
+    <ng-content select="[listPanelEmptyHint]" />
+    <ng-content select="[listPanelEmptyAction]" />
+  `
+		}]
+	}],
+	propDecorators: { color: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "color",
+			required: false
+		}]
+	}] }
+});
 var CollectionsDialog = class CollectionsDialog {
 	call = injectCallRef();
 	createInputElement = viewChild("createInput", ...ngDevMode ? [{ debugName: "createInputElement" }] : /* istanbul ignore next */ []);
@@ -5869,9 +5997,21 @@ var CollectionsDialog = class CollectionsDialog {
                   }
                 </div>
               } @else {
-                <p class="py-4 text-center text-neutral-500">
-                  {{ (searchText().trim() ? 'collections.noMatch' : 'collections.noCollections') | transloco }}
-                </p>
+                <!-- One ListPanelEmpty per branch: an @if holding the icon and the text would be projected as a
+                     whole into the default slot, and the icon would not reach the tile. -->
+                @if (searchText().trim()) {
+                  <ListPanelEmpty color="indigo">
+                    <search-icon listPanelEmptyIcon />
+                    {{ 'collections.noMatch' | transloco }}
+                    <p listPanelEmptyHint>{{ 'collections.noMatchHint' | transloco }}</p>
+                  </ListPanelEmpty>
+                } @else {
+                  <ListPanelEmpty color="indigo">
+                    <inbox-icon listPanelEmptyIcon />
+                    {{ 'collections.noCollections' | transloco }}
+                    <p listPanelEmptyHint>{{ 'collections.noCollectionsDialogHint' | transloco }}</p>
+                  </ListPanelEmpty>
+                }
               }
             </div>
           } @else {
@@ -6008,6 +6148,24 @@ var CollectionsDialog = class CollectionsDialog {
 				],
 				outputs: ["checkedChange"]
 			},
+			{
+				kind: "component",
+				type: ListPanelEmptyComponent,
+				selector: "list-panel-empty, ListPanelEmpty",
+				inputs: ["color"]
+			},
+			{
+				kind: "component",
+				type: InboxIcon,
+				selector: "inbox, inbox-icon, Inbox, InboxIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: SearchIcon,
+				selector: "search, search-icon, Search, SearchIcon",
+				inputs: ["class"]
+			},
 			{
 				kind: "pipe",
 				type: TranslocoPipe,
@@ -6037,7 +6195,10 @@ i0.ɵɵngDeclareClassMetadata({
 				DialogFooterComponent,
 				InputComponent,
 				InputControlDirective,
-				CheckboxComponent
+				CheckboxComponent,
+				ListPanelEmptyComponent,
+				InboxIcon,
+				SearchIcon
 			],
 			providers: [provideTranslocoScope("collections")],
 			template: `
@@ -6086,9 +6247,21 @@ i0.ɵɵngDeclareClassMetadata({
                   }
                 </div>
               } @else {
-                <p class="py-4 text-center text-neutral-500">
-                  {{ (searchText().trim() ? 'collections.noMatch' : 'collections.noCollections') | transloco }}
-                </p>
+                <!-- One ListPanelEmpty per branch: an @if holding the icon and the text would be projected as a
+                     whole into the default slot, and the icon would not reach the tile. -->
+                @if (searchText().trim()) {
+                  <ListPanelEmpty color="indigo">
+                    <search-icon listPanelEmptyIcon />
+                    {{ 'collections.noMatch' | transloco }}
+                    <p listPanelEmptyHint>{{ 'collections.noMatchHint' | transloco }}</p>
+                  </ListPanelEmpty>
+                } @else {
+                  <ListPanelEmpty color="indigo">
+                    <inbox-icon listPanelEmptyIcon />
+                    {{ 'collections.noCollections' | transloco }}
+                    <p listPanelEmptyHint>{{ 'collections.noCollectionsDialogHint' | transloco }}</p>
+                  </ListPanelEmpty>
+                }
               }
             </div>
           } @else {
@@ -7203,17 +7376,18 @@ var InfinityScrollDirective = class InfinityScrollDirective {
 		alias: "scroll-options"
 	});
 	onScroll = output();
-	observer = new IntersectionObserver(([entry]) => {
-		if (entry.isIntersecting) this.onScroll.emit();
-	}, this.options());
+	observer;
 	el = inject(ElementRef);
 	constructor() {
 		afterNextRender(() => {
+			this.observer = new IntersectionObserver(([entry]) => {
+				if (entry.isIntersecting) this.onScroll.emit();
+			}, this.options());
 			this.observer.observe(this.el.nativeElement);
 		});
 	}
 	ngOnDestroy() {
-		this.observer.disconnect();
+		this.observer?.disconnect();
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -16044,6 +16218,70 @@ var Alert;
 	})(Alert.Days || (Alert.Days = {}));
 })(Alert || (Alert = {}));
 const COMPONENTS_FOR_DOCUMENT_TYPE = new InjectionToken("COMPONENTS_FOR_DOCUMENT_TYPE");
+const WEEKDAY_FLAGS = [
+	Alert.Days.Monday,
+	Alert.Days.Tuesday,
+	Alert.Days.Wednesday,
+	Alert.Days.Thursday,
+	Alert.Days.Friday,
+	Alert.Days.Saturday,
+	Alert.Days.Sunday
+];
+const TIMED_FREQUENCIES = [
+	Alert.Frequency.Daily,
+	Alert.Frequency.Weekly,
+	Alert.Frequency.Monthly
+];
+function weekdayNames(lang) {
+	const format = new Intl.DateTimeFormat(lang, { weekday: "short" });
+	return WEEKDAY_FLAGS.map((_, offset) => format.format(new Date(2024, 0, 1 + offset)));
+}
+function formatDays(days, lang) {
+	const names = weekdayNames(lang);
+	const selected = WEEKDAY_FLAGS.map((flag) => (days & flag) !== 0);
+	const parts = [];
+	let start = 0;
+	while (start < selected.length) {
+		if (!selected[start]) {
+			start++;
+			continue;
+		}
+		let end = start;
+		while (end + 1 < selected.length && selected[end + 1]) end++;
+		if (end - start >= 2) parts.push(`${names[start]}–${names[end]}`);
+		else for (let i = start; i <= end; i++) parts.push(names[i]);
+		start = end + 1;
+	}
+	return parts.join(", ");
+}
+function alertSummary(lang, alert) {
+	const parts = [];
+	if (!alert.active) parts.push({ key: "alerts.paused" });
+	if (alert.frequency !== void 0 && Alert.Frequency[alert.frequency] !== void 0) parts.push({ key: `alerts.frequency.${Alert.Frequency[alert.frequency]}` });
+	if (alert.times && TIMED_FREQUENCIES.includes(alert.frequency)) parts.push({ text: alert.times });
+	const days = alert.days ?? Alert.Days.None;
+	if (alert.frequency !== Alert.Frequency.Immediate && days !== Alert.Days.None && (days & Alert.Days.AllDays) !== Alert.Days.AllDays) parts.push({ text: formatDays(days, lang) });
+	return parts;
+}
+const ALREADY_NOTIFIED = [
+	400,
+	403,
+	500,
+	503
+];
+function saveErrorDetail(error) {
+	const { errorMessage, message } = error ?? {};
+	return errorMessage ?? message;
+}
+function notifySaveFailed(transloco, error) {
+	const { status } = error ?? {};
+	if (status !== void 0 && ALREADY_NOTIFIED.includes(status)) return;
+	notify.error(transloco.translate("alerts.saveFailed"), {
+		description: saveErrorDetail(error),
+		closeButton: true,
+		duration: 5e3
+	});
+}
 const WEEKDAYS = [
 	{
 		key: "monday",
@@ -16118,6 +16356,7 @@ var AlertDialog = class AlertDialog {
 	alert = signal(void 0, ...ngDevMode ? [{ debugName: "alert" }] : /* istanbul ignore next */ []);
 	canUpdateQuery = signal(false, ...ngDevMode ? [{ debugName: "canUpdateQuery" }] : /* istanbul ignore next */ []);
 	updateStatus = signal("idle", ...ngDevMode ? [{ debugName: "updateStatus" }] : /* istanbul ignore next */ []);
+	saveError = signal(void 0, ...ngDevMode ? [{ debugName: "saveError" }] : /* istanbul ignore next */ []);
 	alertModel = signal(emptyAlertModel(), ...ngDevMode ? [{ debugName: "alertModel" }] : /* istanbul ignore next */ []);
 	alertForm = form(this.alertModel, alertSchema, {
 		name: "alert",
@@ -16146,8 +16385,14 @@ var AlertDialog = class AlertDialog {
 		this.dialog()?.open();
 	}
 	async persist() {
-		if (this.alert()) await this.update();
-		else await this.create();
+		this.saveError.set(void 0);
+		try {
+			if (this.alert()) await this.update();
+			else await this.create();
+		} catch (error) {
+			this.saveError.set({ detail: saveErrorDetail(error) });
+			return;
+		}
 		this.dialog()?.close("dialog-confirm");
 	}
 	async create() {
@@ -16166,19 +16411,21 @@ var AlertDialog = class AlertDialog {
 			combine: true,
 			respectTabSelection: false
 		};
-		this.userSettingsStore.createAlert(alert);
+		await this.userSettingsStore.createAlert(alert);
 	}
 	async update() {
 		const alert = this.alert();
 		const index = this.index();
 		if (!alert || index === void 0) return;
 		const model = this.alertModel();
-		alert.name = model.name.trim();
-		alert.frequency = model.frequency ?? Alert.Frequency.Daily;
-		alert.days = flagsFromWeekdays(model.days);
-		alert.times = model.time;
-		alert.active = model.active;
-		this.userSettingsStore.updateAlert(alert, index);
+		await this.userSettingsStore.updateAlert({
+			...alert,
+			name: model.name.trim(),
+			frequency: model.frequency ?? Alert.Frequency.Daily,
+			days: flagsFromWeekdays(model.days),
+			times: model.time,
+			active: model.active
+		}, index);
 	}
 	showError(field) {
 		return fieldShowsError(field);
@@ -16190,9 +16437,12 @@ var AlertDialog = class AlertDialog {
 		const alert = this.alert();
 		const index = this.index();
 		if (!alert || index === void 0) return;
+		this.saveError.set(void 0);
 		this.updateStatus.set("updating");
-		alert.query = this.queryParamsStore.getQuery();
-		this.userSettingsStore.updateAlert(alert, index).then(() => {
+		this.userSettingsStore.updateAlert({
+			...alert,
+			query: this.queryParamsStore.getQuery()
+		}, index).then(() => {
 			setTimeout(() => {
 				this.updateStatus.set("updated");
 			}, 500);
@@ -16200,6 +16450,9 @@ var AlertDialog = class AlertDialog {
 			setTimeout(() => {
 				this.updateStatus.set("idle");
 			}, 2e3);
+		}).catch((error) => {
+			this.updateStatus.set("idle");
+			this.saveError.set({ detail: saveErrorDetail(error) });
 		});
 	}
 	execute() {
@@ -16352,6 +16605,25 @@ var AlertDialog = class AlertDialog {
           </DialogBody>
 
           <DialogFooter class="flex-col">
+            <!-- Shown here and not as a toast: the dialog is modal, so it is in the top layer, above any toast. -->
+            @if (saveError(); as failure) {
+              <div class="save-error w-full">
+                <div class="min-h-0 overflow-hidden">
+                  <div
+                    id="alertSaveError"
+                    role="alert"
+                    class="flex w-full items-start gap-(--spacing-sm) rounded-(--radius-md) border border-(--stroke-error-base) bg-(--bg-error-lightest) p-(--spacing-md) text-(--font-error-base)">
+                    <TriangleAlert class="mt-0.5 size-4 shrink-0" width="16" height="16" aria-hidden="true" />
+                    <div class="flex min-w-0 flex-col gap-(--spacing-2xs)">
+                      <p class="m-0 font-medium">{{ 'alerts.saveFailed' | transloco }}</p>
+                      @if (failure.detail) {
+                        <p class="m-0 text-(length:--size-sm) wrap-anywhere opacity-80">{{ failure.detail }}</p>
+                      }
+                    </div>
+                  </div>
+                </div>
+              </div>
+            }
             @if (alert() || canUpdateQuery()) {
               <div class="flex w-full flex-col gap-2">
                 @if (alert()) {
@@ -16398,7 +16670,7 @@ var AlertDialog = class AlertDialog {
     </dialog>
   `,
 		isInline: true,
-		styles: [".weekdays-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}\n"],
+		styles: [".weekdays-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.save-error{display:grid;animation:save-error-in .22s ease-out}.save-error>div>div{animation:save-error-card-in .22s ease-out}@keyframes save-error-in{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes save-error-card-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.save-error,.save-error>div>div{animation:none}}\n"],
 		dependencies: [
 			{
 				kind: "directive",
@@ -16558,6 +16830,12 @@ var AlertDialog = class AlertDialog {
 				selector: "circle-check, circle-check-icon, CircleCheck, CircleCheckIcon",
 				inputs: ["class"]
 			},
+			{
+				kind: "component",
+				type: TriangleAlertIcon,
+				selector: "triangle-alert, triangle-alert-icon, TriangleAlert, TriangleAlertIcon",
+				inputs: ["class"]
+			},
 			{
 				kind: "pipe",
 				type: TranslocoPipe,
@@ -16594,7 +16872,8 @@ i0.ɵɵngDeclareClassMetadata({
 				ChevronDownIcon,
 				CheckIcon,
 				LoadingCircleIcon,
-				CircleCheckIcon
+				CircleCheckIcon,
+				TriangleAlertIcon
 			],
 			providers: [provideTranslocoScope("alerts")],
 			template: `
@@ -16709,6 +16988,25 @@ i0.ɵɵngDeclareClassMetadata({
           </DialogBody>
 
           <DialogFooter class="flex-col">
+            <!-- Shown here and not as a toast: the dialog is modal, so it is in the top layer, above any toast. -->
+            @if (saveError(); as failure) {
+              <div class="save-error w-full">
+                <div class="min-h-0 overflow-hidden">
+                  <div
+                    id="alertSaveError"
+                    role="alert"
+                    class="flex w-full items-start gap-(--spacing-sm) rounded-(--radius-md) border border-(--stroke-error-base) bg-(--bg-error-lightest) p-(--spacing-md) text-(--font-error-base)">
+                    <TriangleAlert class="mt-0.5 size-4 shrink-0" width="16" height="16" aria-hidden="true" />
+                    <div class="flex min-w-0 flex-col gap-(--spacing-2xs)">
+                      <p class="m-0 font-medium">{{ 'alerts.saveFailed' | transloco }}</p>
+                      @if (failure.detail) {
+                        <p class="m-0 text-(length:--size-sm) wrap-anywhere opacity-80">{{ failure.detail }}</p>
+                      }
+                    </div>
+                  </div>
+                </div>
+              </div>
+            }
             @if (alert() || canUpdateQuery()) {
               <div class="flex w-full flex-col gap-2">
                 @if (alert()) {
@@ -16754,7 +17052,7 @@ i0.ɵɵngDeclareClassMetadata({
       </DialogContent>
     </dialog>
   `,
-			styles: [".weekdays-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}\n"]
+			styles: [".weekdays-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.save-error{display:grid;animation:save-error-in .22s ease-out}.save-error>div>div{animation:save-error-card-in .22s ease-out}@keyframes save-error-in{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes save-error-card-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.save-error,.save-error>div>div{animation:none}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -16764,6 +17062,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}] }
 });
 const AlertForm = createCallable(AlertDialog);
+const UNDO_DELAY = 6e3;
 var AlertsComponent = class AlertsComponent {
 	floating = inject(PopoverDirective, {
 		skipSelf: true,
@@ -16771,17 +17070,42 @@ var AlertsComponent = class AlertsComponent {
 	});
 	userSettingsStore = inject(UserSettingsStore);
 	injector = inject(Injector);
-	reordering = signal(false, ...ngDevMode ? [{ debugName: "reordering" }] : /* istanbul ignore next */ []);
-	alerts = computed(() => this.userSettingsStore.alerts(), ...ngDevMode ? [{ debugName: "alerts" }] : /* istanbul ignore next */ []);
-	tmpAlerts = [];
+	transloco = inject(TranslocoService);
+	lang = toSignal(this.transloco.langChanges$);
 	query;
+	alerts = computed(() => this.userSettingsStore.alerts() ?? [], ...ngDevMode ? [{ debugName: "alerts" }] : /* istanbul ignore next */ []);
+	order = linkedSignal(() => [...this.alerts()], ...ngDevMode ? [{ debugName: "order" }] : /* istanbul ignore next */ []);
+	hidden = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []);
+	pendingDeletion = signal(void 0, ...ngDevMode ? [{ debugName: "pendingDeletion" }] : /* istanbul ignore next */ []);
+	undoTimer;
+	visible = computed(() => {
+		const hidden = this.hidden();
+		return this.order().filter((alert) => !hidden.has(alert));
+	}, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	summaries = computed(() => {
+		const lang = this.lang() ?? this.transloco.getActiveLang();
+		return new Map(this.order().map((alert) => [alert, alertSummary(lang, alert)]));
+	}, ...ngDevMode ? [{ debugName: "summaries" }] : /* istanbul ignore next */ []);
+	summaryOf = (alert) => this.summaries().get(alert) ?? [];
+	announceMove = (alert, position, total) => this.transloco.translate("alerts.moved", {
+		name: alert.name,
+		position,
+		total
+	});
 	constructor() {
 		this.query = buildQuery();
-		effect(() => {
-			this.tmpAlerts = this.alerts()?.map((a) => Object.assign({}, a));
-		});
+		inject(DestroyRef).onDestroy(() => this.commitDeletion());
+	}
+	onRowClick(event, alert) {
+		if (event.target.closest("[data-row-action]")) return;
+		this.edit(alert);
 	}
-	onClick(index) {
+	onRowEnter(event, alert) {
+		if (event.target === event.currentTarget) this.edit(alert);
+	}
+	edit(alert) {
+		const index = this.alerts().indexOf(alert);
+		if (index < 0) return;
 		this.floating?.close();
 		AlertForm.call(index, { injector: this.injector });
 	}
@@ -16789,19 +17113,73 @@ var AlertsComponent = class AlertsComponent {
 		this.floating?.close();
 		AlertForm.call(void 0, { injector: this.injector });
 	}
-	deleteAlert(event, index) {
-		event.stopPropagation();
-		this.userSettingsStore.deleteAlert(index);
+	pendingActive = signal(/* @__PURE__ */ new Map(), ...ngDevMode ? [{ debugName: "pendingActive" }] : /* istanbul ignore next */ []);
+	isActive(alert) {
+		return this.pendingActive().get(alert) ?? alert.active;
+	}
+	async toggle(alert, active) {
+		const index = this.alerts().indexOf(alert);
+		if (index < 0) return;
+		this.pendingActive.update((pending) => new Map(pending).set(alert, active));
+		try {
+			await this.userSettingsStore.updateAlert({
+				...alert,
+				active
+			}, index);
+		} catch (error) {
+			notifySaveFailed(this.transloco, error);
+		} finally {
+			this.pendingActive.update((pending) => {
+				const next = new Map(pending);
+				next.delete(alert);
+				return next;
+			});
+		}
 	}
-	async reorder() {
-		if (this.reordering()) {
-			await this.userSettingsStore.updateAlerts(this.tmpAlerts);
-			this.reordering.set(false);
-		} else this.reordering.set(true);
+	deleteAlert(alert) {
+		this.commitDeletion();
+		this.hidden.update((hidden) => new Set(hidden).add(alert));
+		this.pendingDeletion.set(alert);
+		this.undoTimer = setTimeout(() => this.commitDeletion(), UNDO_DELAY);
 	}
-	dropped(drop) {
-		if (drop.currentIndex === drop.previousIndex) return;
-		this.tmpAlerts.splice(drop.currentIndex, 0, this.tmpAlerts.splice(drop.previousIndex, 1)[0]);
+	undoDeletion() {
+		clearTimeout(this.undoTimer);
+		const alert = this.pendingDeletion();
+		if (!alert) return;
+		this.pendingDeletion.set(void 0);
+		this.unhide(alert);
+	}
+	commitDeletion() {
+		clearTimeout(this.undoTimer);
+		const alert = this.pendingDeletion();
+		if (!alert) return;
+		this.pendingDeletion.set(void 0);
+		const index = this.alerts().indexOf(alert);
+		if (index < 0) {
+			this.unhide(alert);
+			return;
+		}
+		this.userSettingsStore.deleteAlert(index).catch((error) => notifySaveFailed(this.transloco, error)).finally(() => this.unhide(alert));
+	}
+	unhide(alert) {
+		this.hidden.update((hidden) => {
+			const next = new Set(hidden);
+			next.delete(alert);
+			return next;
+		});
+	}
+	async saveOrder(shown) {
+		const hidden = this.hidden();
+		const previous = this.order();
+		const next = [...shown, ...previous.filter((alert) => hidden.has(alert))];
+		if (next.every((alert, index) => alert === previous[index])) return;
+		this.order.set(next);
+		try {
+			await this.userSettingsStore.updateAlerts(next);
+		} catch (error) {
+			this.order.set(previous);
+			notifySaveFailed(this.transloco, error);
+		}
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -16819,7 +17197,7 @@ var AlertsComponent = class AlertsComponent {
 		selector: "Alerts",
 		providers: [provideTranslocoScope("alerts")],
 		ngImport: i0,
-		template: "<ul\n  role=\"list\"\n  class=\"flex min-w-80 flex-col p-2\"\n  cdkDropList\n  [cdkDropListData]=\"tmpAlerts\"\n  [cdkDropListDisabled]=\"!reordering()\"\n  (cdkDropListDropped)=\"dropped($event)\">\n  @if (floating) {\n    <label class=\"text-xl font-bold\">{{ \"alerts.label\" | transloco }}</label>\n    <hr\n      class=\"my-(--spacing-3xs) h-px w-full shrink-0 border-0 bg-(--stroke-neutral-disabled)\" />\n  }\n  @for (alert of tmpAlerts; track $index) {\n    <li\n      class=\"group box-border flex h-10 w-full cursor-pointer items-center gap-(--spacing-2xs) rounded-(--radius-sm) bg-transparent px-(--spacing-2xs) py-(--spacing-3xs) text-(--font-neutral-base) select-none hover:bg-(--bg-primary-lighter) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus) active:bg-(--bg-primary-light)\"\n      tabindex=\"0\"\n      cdkDrag\n      (click)=\"onClick($index)\"\n      (keydown.enter)=\"onClick($index)\">\n      <bell-icon class=\"shrink-0\" />\n      <p class=\"line-clamp-1\">{{ alert.name }}</p>\n      @if (!reordering()) {\n        @let openBookmark = \"bookmarks.openBookmark\" | transloco;\n        <button\n          variant=\"tertiary\"\n          [iconOnly]=\"true\"\n          title=\"{{ openBookmark }}\"\n          class=\"text-destructive ms-auto group-hover:visible\"\n          [attr.title]=\"openBookmark\"\n          [attr.aria-label]=\"openBookmark\"\n          (click)=\"deleteAlert($event, $index)\">\n          <TrashIcon />\n        </button>\n      } @else {\n        <bars-icon class=\"ms-auto\" />\n      }\n    </li>\n  } @empty {\n    <span class=\"py-4 text-center text-neutral-500\">\n      {{ \"alerts.noAlerts\" | transloco }}\n    </span>\n  }\n</ul>\n<div class=\"flex flex-col gap-2 p-2\">\n  <button\n    variant=\"secondary\"\n    class=\"w-full\"\n    tabindex=\"0\"\n    [attr.title]=\"'alerts.manageAlerts' | transloco\"\n    [disabled]=\"!alerts().length\"\n    (click)=\"reorder()\">\n    {{ (reordering() ? \"save\" : \"alerts.manageAlerts\") | transloco }}\n  </button>\n  <button\n    variant=\"secondary\"\n    class=\"w-full\"\n    [attr.title]=\"'alerts.createAlert' | transloco\"\n    (click)=\"createAlert()\">\n    {{ \"alerts.createAlert\" | transloco }}\n  </button>\n</div>\n",
+		template: "<div class=\"flex min-w-80 flex-col gap-(--spacing-3xs) p-2\">\n  <div class=\"flex items-center gap-(--spacing-2xs) ps-(--spacing-2xs)\">\n    @if (floating) {\n      <!-- Not an <h2>: a page's prose styles put a rule and margins on every h2, even inside a popover. -->\n      <span\n        role=\"heading\"\n        aria-level=\"2\"\n        class=\"flex-1 text-xl leading-(--line-height-4) font-bold\">\n        {{ \"alerts.label\" | transloco }}\n        @if (visible().length) {\n          <span\n            class=\"text-(length:--size-sm) font-normal text-(--font-neutral-muted)\"\n            >· {{ visible().length }}</span\n          >\n        }\n      </span>\n    } @else {\n      <span class=\"flex-1\"></span>\n    }\n    <!-- With no alert, \"Create\" is the call to action of the empty state, below. -->\n    @if (visible().length) {\n      <button size=\"md\" (click)=\"createAlert()\">\n        <plus-icon />\n        {{ \"alerts.create\" | transloco }}\n      </button>\n    }\n  </div>\n\n  <ul\n    role=\"list\"\n    class=\"m-0 flex list-none flex-col p-0\"\n    [attr.aria-label]=\"'alerts.label' | transloco\"\n    [sortable]=\"visible()\"\n    #sortable=\"sortable\"\n    [sortableAnnounce]=\"announceMove\"\n    (reorder)=\"saveOrder($event)\">\n    @for (alert of sortable.items(); track alert.name) {\n      @let name = alert.name;\n      <li\n        [sortableItem]=\"alert\"\n        class=\"group relative flex min-h-12 w-full cursor-pointer items-center gap-(--spacing-3xs) rounded-(--radius-sm) py-(--spacing-3xs) ps-(--spacing-3xs) pe-(--spacing-2xs) text-(--font-neutral-base) select-none hover:bg-(--bg-primary-lighter) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus) active:bg-(--bg-primary-light) data-dragging:bg-(--bg-primary-lighter) data-dragging:outline-2 data-dragging:-outline-offset-2 data-dragging:outline-(--stroke-primary-base) data-dragging:outline-dashed data-dragging:*:invisible\"\n        tabindex=\"0\"\n        [attr.data-inactive]=\"alert.active ? null : ''\"\n        (click)=\"onRowClick($event, alert)\"\n        (keydown.enter)=\"onRowEnter($event, alert)\">\n        <!-- Handle: shown when the row is hovered or focused, only if there is something to reorder. -->\n        <grip-vertical-icon\n          class=\"shrink-0 cursor-grab text-(--font-neutral-muted) opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 pointer-coarse:hidden\"\n          [class.invisible]=\"visible().length < 2\" />\n        @if (alert.active) {\n          <bell-icon class=\"shrink-0\" />\n        } @else {\n          <bell-slash-icon class=\"shrink-0 text-(--font-neutral-muted)\" />\n        }\n        <span class=\"flex min-w-0 flex-1 flex-col\">\n          <span\n            class=\"line-clamp-1 text-(length:--size-base) group-data-inactive:text-(--font-neutral-muted)\"\n            >{{ name }}</span\n          >\n          @if (summaryOf(alert).length) {\n            <span\n              class=\"line-clamp-1 text-(length:--size-sm) text-(--font-neutral-muted)\">\n              @for (\n                part of summaryOf(alert);\n                track $index;\n                let first = $first\n              ) {\n                {{ first ? \"\" : \" · \"\n                }}{{ part.key ? (part.key | transloco) : part.text }}\n              }\n            </span>\n          }\n        </span>\n        <span data-row-action class=\"flex shrink-0 items-center\">\n          <Switch\n            [checked]=\"isActive(alert)\"\n            [aria-label]=\"'alerts.alertActiveFor' | transloco: { name }\"\n            (checkedChange)=\"toggle(alert, $event)\" />\n        </span>\n        <span data-row-action class=\"flex shrink-0 items-center\">\n          <button\n            variant=\"tertiary\"\n            size=\"sm\"\n            [iconOnly]=\"true\"\n            class=\"text-(--font-error-muted) opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) focus-visible:opacity-100 pointer-coarse:opacity-100\"\n            [attr.title]=\"'alerts.deleteAlertNamed' | transloco: { name }\"\n            [attr.aria-label]=\"'alerts.deleteAlertNamed' | transloco: { name }\"\n            (click)=\"deleteAlert(alert)\">\n            <TrashIcon />\n          </button>\n        </span>\n      </li>\n    } @empty {\n      <li class=\"list-none\">\n        <ListPanelEmpty color=\"orange\">\n          <bell-icon listPanelEmptyIcon />\n          {{ \"alerts.noAlerts\" | transloco }}\n          <p listPanelEmptyHint>{{ \"alerts.noAlertsHint\" | transloco }}</p>\n          <button listPanelEmptyAction (click)=\"createAlert()\">\n            <plus-icon />\n            {{ \"alerts.createAlert\" | transloco }}\n          </button>\n        </ListPanelEmpty>\n      </li>\n    }\n  </ul>\n\n  @if (visible().length > 1) {\n    <p\n      class=\"m-0 ps-(--spacing-2xs) pt-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-muted)\">\n      {{ \"alerts.reorderHint\" | transloco }}\n    </p>\n  }\n\n  <!-- The regions exist before their text does, which is what makes a screen reader announce the text. -->\n  <div role=\"status\">\n    @if (pendingDeletion(); as pending) {\n      <div\n        class=\"mt-(--spacing-2xs) flex items-center gap-(--spacing-2xs) rounded-(--radius-sm) bg-(--bg-neutral-base) py-(--spacing-3xs) ps-(--spacing-xs) pe-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-base)\">\n        <span class=\"min-w-0 flex-1\">{{\n          \"alerts.deleted\" | transloco: { name: pending.name }\n        }}</span>\n        <button variant=\"tertiary\" size=\"sm\" (click)=\"undoDeletion()\">\n          {{ \"alerts.undo\" | transloco }}\n        </button>\n      </div>\n    }\n  </div>\n</div>\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -16834,63 +17212,39 @@ var AlertsComponent = class AlertsComponent {
 				]
 			},
 			{
-				kind: "ngmodule",
-				type: DragDropModule
+				kind: "component",
+				type: SwitchComponent,
+				selector: "switch, Switch",
+				inputs: [
+					"checked",
+					"disabled",
+					"size",
+					"class",
+					"aria-label",
+					"aria-labelledby",
+					"presentational",
+					"compact",
+					"tabIndex"
+				],
+				outputs: ["checkedChange"]
 			},
 			{
 				kind: "directive",
-				type: i1.CdkDropList,
-				selector: "[cdkDropList], cdk-drop-list",
+				type: SortableDirective,
+				selector: "[sortable]",
 				inputs: [
-					"cdkDropListConnectedTo",
-					"cdkDropListData",
-					"cdkDropListOrientation",
-					"id",
-					"cdkDropListLockAxis",
-					"cdkDropListDisabled",
-					"cdkDropListSortingDisabled",
-					"cdkDropListEnterPredicate",
-					"cdkDropListSortPredicate",
-					"cdkDropListAutoScrollDisabled",
-					"cdkDropListAutoScrollStep",
-					"cdkDropListElementContainer",
-					"cdkDropListHasAnchor"
+					"sortable",
+					"sortableDisabled",
+					"sortableAnnounce"
 				],
-				outputs: [
-					"cdkDropListDropped",
-					"cdkDropListEntered",
-					"cdkDropListExited",
-					"cdkDropListSorted"
-				],
-				exportAs: ["cdkDropList"]
+				outputs: ["reorder"],
+				exportAs: ["sortable"]
 			},
 			{
 				kind: "directive",
-				type: i1.CdkDrag,
-				selector: "[cdkDrag]",
-				inputs: [
-					"cdkDragData",
-					"cdkDragLockAxis",
-					"cdkDragRootElement",
-					"cdkDragBoundary",
-					"cdkDragStartDelay",
-					"cdkDragFreeDragPosition",
-					"cdkDragDisabled",
-					"cdkDragConstrainPosition",
-					"cdkDragPreviewClass",
-					"cdkDragPreviewContainer",
-					"cdkDragScale"
-				],
-				outputs: [
-					"cdkDragStarted",
-					"cdkDragReleased",
-					"cdkDragEnded",
-					"cdkDragEntered",
-					"cdkDragExited",
-					"cdkDragDropped",
-					"cdkDragMoved"
-				],
-				exportAs: ["cdkDrag"]
+				type: SortableItemDirective,
+				selector: "[sortableItem]",
+				inputs: ["sortableItem", "sortableItemDisabled"]
 			},
 			{
 				kind: "component",
@@ -16898,6 +17252,24 @@ var AlertsComponent = class AlertsComponent {
 				selector: "bell, bell-icon, Bell, BellIcon",
 				inputs: ["class"]
 			},
+			{
+				kind: "component",
+				type: BellSlashIcon,
+				selector: "bell-slash, bell-slash-icon, BellSlash, BellSlashIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: GripVerticalIcon,
+				selector: "grip-vertical, grip-vertical-icon, GripVertical, GripVerticalIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: PlusIcon,
+				selector: "plus, plus-icon, Plus, PlusIcon",
+				inputs: ["class"]
+			},
 			{
 				kind: "component",
 				type: TrashIcon,
@@ -16906,9 +17278,9 @@ var AlertsComponent = class AlertsComponent {
 			},
 			{
 				kind: "component",
-				type: BarsIcon,
-				selector: "bars, bars-icon, Bars, BarsIcon",
-				inputs: ["class"]
+				type: ListPanelEmptyComponent,
+				selector: "list-panel-empty, ListPanelEmpty",
+				inputs: ["color"]
 			},
 			{
 				kind: "pipe",
@@ -16930,13 +17302,18 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				TranslocoPipe,
 				ButtonComponent,
-				DragDropModule,
+				SwitchComponent,
+				SortableDirective,
+				SortableItemDirective,
 				BellIcon,
+				BellSlashIcon,
+				GripVerticalIcon,
+				PlusIcon,
 				TrashIcon,
-				BarsIcon
+				ListPanelEmptyComponent
 			],
 			providers: [provideTranslocoScope("alerts")],
-			template: "<ul\n  role=\"list\"\n  class=\"flex min-w-80 flex-col p-2\"\n  cdkDropList\n  [cdkDropListData]=\"tmpAlerts\"\n  [cdkDropListDisabled]=\"!reordering()\"\n  (cdkDropListDropped)=\"dropped($event)\">\n  @if (floating) {\n    <label class=\"text-xl font-bold\">{{ \"alerts.label\" | transloco }}</label>\n    <hr\n      class=\"my-(--spacing-3xs) h-px w-full shrink-0 border-0 bg-(--stroke-neutral-disabled)\" />\n  }\n  @for (alert of tmpAlerts; track $index) {\n    <li\n      class=\"group box-border flex h-10 w-full cursor-pointer items-center gap-(--spacing-2xs) rounded-(--radius-sm) bg-transparent px-(--spacing-2xs) py-(--spacing-3xs) text-(--font-neutral-base) select-none hover:bg-(--bg-primary-lighter) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus) active:bg-(--bg-primary-light)\"\n      tabindex=\"0\"\n      cdkDrag\n      (click)=\"onClick($index)\"\n      (keydown.enter)=\"onClick($index)\">\n      <bell-icon class=\"shrink-0\" />\n      <p class=\"line-clamp-1\">{{ alert.name }}</p>\n      @if (!reordering()) {\n        @let openBookmark = \"bookmarks.openBookmark\" | transloco;\n        <button\n          variant=\"tertiary\"\n          [iconOnly]=\"true\"\n          title=\"{{ openBookmark }}\"\n          class=\"text-destructive ms-auto group-hover:visible\"\n          [attr.title]=\"openBookmark\"\n          [attr.aria-label]=\"openBookmark\"\n          (click)=\"deleteAlert($event, $index)\">\n          <TrashIcon />\n        </button>\n      } @else {\n        <bars-icon class=\"ms-auto\" />\n      }\n    </li>\n  } @empty {\n    <span class=\"py-4 text-center text-neutral-500\">\n      {{ \"alerts.noAlerts\" | transloco }}\n    </span>\n  }\n</ul>\n<div class=\"flex flex-col gap-2 p-2\">\n  <button\n    variant=\"secondary\"\n    class=\"w-full\"\n    tabindex=\"0\"\n    [attr.title]=\"'alerts.manageAlerts' | transloco\"\n    [disabled]=\"!alerts().length\"\n    (click)=\"reorder()\">\n    {{ (reordering() ? \"save\" : \"alerts.manageAlerts\") | transloco }}\n  </button>\n  <button\n    variant=\"secondary\"\n    class=\"w-full\"\n    [attr.title]=\"'alerts.createAlert' | transloco\"\n    (click)=\"createAlert()\">\n    {{ \"alerts.createAlert\" | transloco }}\n  </button>\n</div>\n"
+			template: "<div class=\"flex min-w-80 flex-col gap-(--spacing-3xs) p-2\">\n  <div class=\"flex items-center gap-(--spacing-2xs) ps-(--spacing-2xs)\">\n    @if (floating) {\n      <!-- Not an <h2>: a page's prose styles put a rule and margins on every h2, even inside a popover. -->\n      <span\n        role=\"heading\"\n        aria-level=\"2\"\n        class=\"flex-1 text-xl leading-(--line-height-4) font-bold\">\n        {{ \"alerts.label\" | transloco }}\n        @if (visible().length) {\n          <span\n            class=\"text-(length:--size-sm) font-normal text-(--font-neutral-muted)\"\n            >· {{ visible().length }}</span\n          >\n        }\n      </span>\n    } @else {\n      <span class=\"flex-1\"></span>\n    }\n    <!-- With no alert, \"Create\" is the call to action of the empty state, below. -->\n    @if (visible().length) {\n      <button size=\"md\" (click)=\"createAlert()\">\n        <plus-icon />\n        {{ \"alerts.create\" | transloco }}\n      </button>\n    }\n  </div>\n\n  <ul\n    role=\"list\"\n    class=\"m-0 flex list-none flex-col p-0\"\n    [attr.aria-label]=\"'alerts.label' | transloco\"\n    [sortable]=\"visible()\"\n    #sortable=\"sortable\"\n    [sortableAnnounce]=\"announceMove\"\n    (reorder)=\"saveOrder($event)\">\n    @for (alert of sortable.items(); track alert.name) {\n      @let name = alert.name;\n      <li\n        [sortableItem]=\"alert\"\n        class=\"group relative flex min-h-12 w-full cursor-pointer items-center gap-(--spacing-3xs) rounded-(--radius-sm) py-(--spacing-3xs) ps-(--spacing-3xs) pe-(--spacing-2xs) text-(--font-neutral-base) select-none hover:bg-(--bg-primary-lighter) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus) active:bg-(--bg-primary-light) data-dragging:bg-(--bg-primary-lighter) data-dragging:outline-2 data-dragging:-outline-offset-2 data-dragging:outline-(--stroke-primary-base) data-dragging:outline-dashed data-dragging:*:invisible\"\n        tabindex=\"0\"\n        [attr.data-inactive]=\"alert.active ? null : ''\"\n        (click)=\"onRowClick($event, alert)\"\n        (keydown.enter)=\"onRowEnter($event, alert)\">\n        <!-- Handle: shown when the row is hovered or focused, only if there is something to reorder. -->\n        <grip-vertical-icon\n          class=\"shrink-0 cursor-grab text-(--font-neutral-muted) opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 pointer-coarse:hidden\"\n          [class.invisible]=\"visible().length < 2\" />\n        @if (alert.active) {\n          <bell-icon class=\"shrink-0\" />\n        } @else {\n          <bell-slash-icon class=\"shrink-0 text-(--font-neutral-muted)\" />\n        }\n        <span class=\"flex min-w-0 flex-1 flex-col\">\n          <span\n            class=\"line-clamp-1 text-(length:--size-base) group-data-inactive:text-(--font-neutral-muted)\"\n            >{{ name }}</span\n          >\n          @if (summaryOf(alert).length) {\n            <span\n              class=\"line-clamp-1 text-(length:--size-sm) text-(--font-neutral-muted)\">\n              @for (\n                part of summaryOf(alert);\n                track $index;\n                let first = $first\n              ) {\n                {{ first ? \"\" : \" · \"\n                }}{{ part.key ? (part.key | transloco) : part.text }}\n              }\n            </span>\n          }\n        </span>\n        <span data-row-action class=\"flex shrink-0 items-center\">\n          <Switch\n            [checked]=\"isActive(alert)\"\n            [aria-label]=\"'alerts.alertActiveFor' | transloco: { name }\"\n            (checkedChange)=\"toggle(alert, $event)\" />\n        </span>\n        <span data-row-action class=\"flex shrink-0 items-center\">\n          <button\n            variant=\"tertiary\"\n            size=\"sm\"\n            [iconOnly]=\"true\"\n            class=\"text-(--font-error-muted) opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) focus-visible:opacity-100 pointer-coarse:opacity-100\"\n            [attr.title]=\"'alerts.deleteAlertNamed' | transloco: { name }\"\n            [attr.aria-label]=\"'alerts.deleteAlertNamed' | transloco: { name }\"\n            (click)=\"deleteAlert(alert)\">\n            <TrashIcon />\n          </button>\n        </span>\n      </li>\n    } @empty {\n      <li class=\"list-none\">\n        <ListPanelEmpty color=\"orange\">\n          <bell-icon listPanelEmptyIcon />\n          {{ \"alerts.noAlerts\" | transloco }}\n          <p listPanelEmptyHint>{{ \"alerts.noAlertsHint\" | transloco }}</p>\n          <button listPanelEmptyAction (click)=\"createAlert()\">\n            <plus-icon />\n            {{ \"alerts.createAlert\" | transloco }}\n          </button>\n        </ListPanelEmpty>\n      </li>\n    }\n  </ul>\n\n  @if (visible().length > 1) {\n    <p\n      class=\"m-0 ps-(--spacing-2xs) pt-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-muted)\">\n      {{ \"alerts.reorderHint\" | transloco }}\n    </p>\n  }\n\n  <!-- The regions exist before their text does, which is what makes a screen reader announce the text. -->\n  <div role=\"status\">\n    @if (pendingDeletion(); as pending) {\n      <div\n        class=\"mt-(--spacing-2xs) flex items-center gap-(--spacing-2xs) rounded-(--radius-sm) bg-(--bg-neutral-base) py-(--spacing-3xs) ps-(--spacing-xs) pe-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-base)\">\n        <span class=\"min-w-0 flex-1\">{{\n          \"alerts.deleted\" | transloco: { name: pending.name }\n        }}</span>\n        <button variant=\"tertiary\" size=\"sm\" (click)=\"undoDeletion()\">\n          {{ \"alerts.undo\" | transloco }}\n        </button>\n      </div>\n    }\n  </div>\n</div>\n"
 		}]
 	}],
 	ctorParameters: () => []
@@ -18692,7 +19069,6 @@ var BookmarkButtonComponent = class BookmarkButtonComponent {
 	isBookmarked = computed(() => {
 		return this.userSettingsStore.isBookmarked(this.article());
 	}, ...ngDevMode ? [{ debugName: "isBookmarked" }] : /* istanbul ignore next */ []);
-	title = computed(() => this.transloco.translate("bookmarks.bookmarkDocument"), ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
 	async bookmark(e) {
 		e.stopPropagation();
 		const article = this.article();
@@ -18756,11 +19132,11 @@ var BookmarkButtonComponent = class BookmarkButtonComponent {
 			properties: { "class.visible": "isBookmarked()" },
 			classAttribute: "cursor-pointer"
 		},
-		providers: [provideTranslocoScope("bookmark")],
+		providers: [provideTranslocoScope("bookmarks")],
 		ngImport: i0,
 		template: `
   <button [variant]="variant()" [size]="size()" [iconOnly]="true"
-    [tooltip]="title()"
+    [tooltip]="'bookmarks.bookmarkDocument' | transloco"
     [attr.aria-pressed]="isBookmarked()"
     [attr.tabindex]="tabIndex()"
     (click)="bookmark($event)">
@@ -18770,7 +19146,7 @@ var BookmarkButtonComponent = class BookmarkButtonComponent {
     @else {
       <bookmark-icon />
     }
-    <span class="sr-only">{{ title() }}</span>
+    <span class="sr-only">{{ 'bookmarks.bookmarkDocument' | transloco }}</span>
   </button>
     `,
 		isInline: true,
@@ -18818,6 +19194,11 @@ var BookmarkButtonComponent = class BookmarkButtonComponent {
 					"tooltip-offset"
 				],
 				exportAs: ["tooltip"]
+			},
+			{
+				kind: "pipe",
+				type: TranslocoPipe,
+				name: "transloco"
 			}
 		]
 	});
@@ -18834,12 +19215,13 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				BookmarkIcon,
 				ButtonComponent,
-				TooltipDirective
+				TooltipDirective,
+				TranslocoPipe
 			],
-			providers: [provideTranslocoScope("bookmark")],
+			providers: [provideTranslocoScope("bookmarks")],
 			template: `
   <button [variant]="variant()" [size]="size()" [iconOnly]="true"
-    [tooltip]="title()"
+    [tooltip]="'bookmarks.bookmarkDocument' | transloco"
     [attr.aria-pressed]="isBookmarked()"
     [attr.tabindex]="tabIndex()"
     (click)="bookmark($event)">
@@ -18849,7 +19231,7 @@ i0.ɵɵngDeclareClassMetadata({
     @else {
       <bookmark-icon />
     }
-    <span class="sr-only">{{ title() }}</span>
+    <span class="sr-only">{{ 'bookmarks.bookmarkDocument' | transloco }}</span>
   </button>
     `,
 			host: {
@@ -19048,9 +19430,9 @@ var ListPanelComponent = class ListPanelComponent {
           }
         </ListItem>
       } @empty {
-        <span class="py-4 text-center text-neutral-500">
+        <div class="py-(--spacing-xs) text-center text-(--font-neutral-base)">
           <ng-content />
-        </span>
+        </div>
       }
     </List>
   `,
@@ -19155,9 +19537,9 @@ i0.ɵɵngDeclareClassMetadata({
           }
         </ListItem>
       } @empty {
-        <span class="py-4 text-center text-neutral-500">
+        <div class="py-(--spacing-xs) text-center text-(--font-neutral-base)">
           <ng-content />
-        </span>
+        </div>
       }
     </List>
   `,
@@ -19300,7 +19682,7 @@ var ListPanelFooterComponent = class ListPanelFooterComponent {
 			}
 		},
 		outputs: { loadMore: "loadMore" },
-		host: { properties: { "class": "cn('flex flex-col px-2 mt-2 py-(--spacing-xs)', class())" } },
+		host: { properties: { "class": "cn('flex flex-col gap-(--spacing-xs) px-2 mt-2 py-(--spacing-xs)', class())" } },
 		providers: [provideTranslocoScope("list-panel")],
 		ngImport: i0,
 		template: `
@@ -19452,7 +19834,7 @@ i0.ɵɵngDeclareClassMetadata({
       </button>
     </div>
   `,
-			host: { "[class]": "cn('flex flex-col px-2 mt-2 py-(--spacing-xs)', class())" }
+			host: { "[class]": "cn('flex flex-col gap-(--spacing-xs) px-2 mt-2 py-(--spacing-xs)', class())" }
 		}]
 	}],
 	propDecorators: {
@@ -19531,8 +19913,8 @@ var ListPanelHeaderComponent = class ListPanelHeaderComponent {
 		template: `
     @if (floating()) {
       <div class="p-2">
-        <label class="text-xl font-bold">{{ label() }}</label>
-        <hr class="my-(--spacing-3xs) h-px w-full shrink-0 border-0 bg-(--stroke-neutral-disabled)" />
+        <!-- Not an <h2>: a page's prose styles put a rule and margins on every h2, even inside a popover. -->
+        <span role="heading" aria-level="2" class="block text-xl leading-(--line-height-4) font-bold">{{ label() }}</span>
       </div>
     }
   `,
@@ -19551,8 +19933,8 @@ i0.ɵɵngDeclareClassMetadata({
 			template: `
     @if (floating()) {
       <div class="p-2">
-        <label class="text-xl font-bold">{{ label() }}</label>
-        <hr class="my-(--spacing-3xs) h-px w-full shrink-0 border-0 bg-(--stroke-neutral-disabled)" />
+        <!-- Not an <h2>: a page's prose styles put a rule and margins on every h2, even inside a popover. -->
+        <span role="heading" aria-level="2" class="block text-xl leading-(--line-height-4) font-bold">{{ label() }}</span>
       </div>
     }
   `
@@ -19676,7 +20058,7 @@ var BookmarksComponent = class BookmarksComponent {
 		} },
 		providers: [provideTranslocoScope("bookmarks")],
 		ngImport: i0,
-		template: "<ListPanelHeader\n  [label]=\"'bookmarks.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedBookmarks()\"\n  [getValue]=\"idOf\"\n  [getLabel]=\"labelOf\"\n  deleteButtonTitle=\"bookmarks.removeBookmark\"\n  [ariaLabel]=\"'bookmarks.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-bookmark>\n    <ListItemLeft>\n      <BookmarkIcon solid class=\"shrink-0\" />\n      <ListItemText>{{ bookmark.label }}</ListItemText>\n    </ListItemLeft>\n\n    @if (bookmark.author) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <UserIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.author }}</span>\n      </Tag>\n    }\n    @if (bookmark.parentFolder) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <FolderIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.parentFolder }}</span>\n      </Tag>\n    }\n  </ng-template>\n\n  {{ \"bookmarks.noBookmarks\" | transloco }}\n</ListPanel>\n\n@if (paginatedBookmarks().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n",
+		template: "<ListPanelHeader\n  [label]=\"'bookmarks.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedBookmarks()\"\n  [getValue]=\"idOf\"\n  [getLabel]=\"labelOf\"\n  deleteButtonTitle=\"bookmarks.removeBookmark\"\n  [ariaLabel]=\"'bookmarks.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-bookmark>\n    <ListItemLeft>\n      <BookmarkIcon solid class=\"shrink-0\" />\n      <div class=\"flex min-w-0 flex-1 flex-col gap-(--spacing-3xs)\">\n        <ListItemText\n          truncated=\".list-item-text\"\n          #labelCut=\"truncated\"\n          [tooltip]=\"bookmark.label\"\n          [tooltipDisabled]=\"!labelCut.isTruncated()\"\n          tooltipPosition=\"top\"\n          class=\"[&_.list-item-text]:line-clamp-2 in-focus-visible:[&_.list-item-text]:line-clamp-none\">\n          {{ bookmark.label }}\n        </ListItemText>\n\n        @if (bookmark.author || bookmark.parentFolder) {\n          <div class=\"flex min-w-0 flex-wrap gap-(--spacing-3xs)\">\n            @if (bookmark.author) {\n              <Tag\n                variant=\"primary\"\n                scheme=\"sage\"\n                size=\"xs\"\n                class=\"max-w-full gap-1\">\n                <UserIcon class=\"size-3 shrink-0\" />\n                <span\n                  truncated\n                  #authorCut=\"truncated\"\n                  [tooltip]=\"bookmark.author\"\n                  [tooltipDisabled]=\"!authorCut.isTruncated()\"\n                  tooltipPosition=\"top\"\n                  class=\"min-w-0 truncate in-focus-visible:break-words in-focus-visible:whitespace-normal\">\n                  {{ bookmark.author }}\n                </span>\n              </Tag>\n            }\n            @if (bookmark.parentFolder) {\n              <Tag\n                variant=\"primary\"\n                scheme=\"sage\"\n                size=\"xs\"\n                class=\"max-w-full gap-1\">\n                <FolderIcon class=\"size-3 shrink-0\" />\n                <span\n                  truncated\n                  #folderCut=\"truncated\"\n                  [tooltip]=\"bookmark.parentFolder\"\n                  [tooltipDisabled]=\"!folderCut.isTruncated()\"\n                  tooltipPosition=\"top\"\n                  class=\"min-w-0 truncate in-focus-visible:break-words in-focus-visible:whitespace-normal\">\n                  {{ bookmark.parentFolder }}\n                </span>\n              </Tag>\n            }\n          </div>\n        }\n      </div>\n    </ListItemLeft>\n  </ng-template>\n\n  <ListPanelEmpty color=\"pink\">\n    <BookmarkIcon listPanelEmptyIcon solid />\n    {{ \"bookmarks.noBookmarks\" | transloco }}\n    <p listPanelEmptyHint>{{ \"bookmarks.noBookmarksHint\" | transloco }}</p>\n  </ListPanelEmpty>\n</ListPanel>\n\n@if (paginatedBookmarks().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n",
 		dependencies: [
 			{
 				kind: "component",
@@ -19699,6 +20081,12 @@ var BookmarksComponent = class BookmarksComponent {
 				],
 				outputs: ["itemClick", "delete"]
 			},
+			{
+				kind: "component",
+				type: ListPanelEmptyComponent,
+				selector: "list-panel-empty, ListPanelEmpty",
+				inputs: ["color"]
+			},
 			{
 				kind: "component",
 				type: ListPanelFooterComponent,
@@ -19758,6 +20146,39 @@ var BookmarksComponent = class BookmarksComponent {
 					"size"
 				]
 			},
+			{
+				kind: "directive",
+				type: TooltipDirective,
+				selector: "[tooltip]",
+				inputs: [
+					"tooltip",
+					"tooltipPosition",
+					"tooltipEvent",
+					"showDelay",
+					"hideDelay",
+					"life",
+					"tooltipOffset",
+					"autoHide",
+					"hideOnEscape",
+					"escape",
+					"tooltipDisabled",
+					"tooltipArrow",
+					"tooltipStyleClass",
+					"tooltipOptions",
+					"tooltip-position",
+					"tooltip-delay",
+					"tooltip-duration",
+					"tooltip-offset"
+				],
+				exportAs: ["tooltip"]
+			},
+			{
+				kind: "directive",
+				type: TruncatedDirective,
+				selector: "[truncated]",
+				inputs: ["truncated"],
+				exportAs: ["truncated"]
+			},
 			{
 				kind: "pipe",
 				type: TranslocoPipe,
@@ -19779,6 +20200,7 @@ i0.ɵɵngDeclareClassMetadata({
 				TranslocoPipe,
 				ListPanelHeaderComponent,
 				ListPanelComponent,
+				ListPanelEmptyComponent,
 				ListPanelFooterComponent,
 				ListPanelItemDirective,
 				BookmarkIcon,
@@ -19786,10 +20208,12 @@ i0.ɵɵngDeclareClassMetadata({
 				FolderIcon,
 				ListItemLeftDirective,
 				ListItemTextComponent,
-				TagComponent
+				TagComponent,
+				TooltipDirective,
+				TruncatedDirective
 			],
 			providers: [provideTranslocoScope("bookmarks")],
-			template: "<ListPanelHeader\n  [label]=\"'bookmarks.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedBookmarks()\"\n  [getValue]=\"idOf\"\n  [getLabel]=\"labelOf\"\n  deleteButtonTitle=\"bookmarks.removeBookmark\"\n  [ariaLabel]=\"'bookmarks.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-bookmark>\n    <ListItemLeft>\n      <BookmarkIcon solid class=\"shrink-0\" />\n      <ListItemText>{{ bookmark.label }}</ListItemText>\n    </ListItemLeft>\n\n    @if (bookmark.author) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <UserIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.author }}</span>\n      </Tag>\n    }\n    @if (bookmark.parentFolder) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <FolderIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.parentFolder }}</span>\n      </Tag>\n    }\n  </ng-template>\n\n  {{ \"bookmarks.noBookmarks\" | transloco }}\n</ListPanel>\n\n@if (paginatedBookmarks().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n"
+			template: "<ListPanelHeader\n  [label]=\"'bookmarks.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedBookmarks()\"\n  [getValue]=\"idOf\"\n  [getLabel]=\"labelOf\"\n  deleteButtonTitle=\"bookmarks.removeBookmark\"\n  [ariaLabel]=\"'bookmarks.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-bookmark>\n    <ListItemLeft>\n      <BookmarkIcon solid class=\"shrink-0\" />\n      <div class=\"flex min-w-0 flex-1 flex-col gap-(--spacing-3xs)\">\n        <ListItemText\n          truncated=\".list-item-text\"\n          #labelCut=\"truncated\"\n          [tooltip]=\"bookmark.label\"\n          [tooltipDisabled]=\"!labelCut.isTruncated()\"\n          tooltipPosition=\"top\"\n          class=\"[&_.list-item-text]:line-clamp-2 in-focus-visible:[&_.list-item-text]:line-clamp-none\">\n          {{ bookmark.label }}\n        </ListItemText>\n\n        @if (bookmark.author || bookmark.parentFolder) {\n          <div class=\"flex min-w-0 flex-wrap gap-(--spacing-3xs)\">\n            @if (bookmark.author) {\n              <Tag\n                variant=\"primary\"\n                scheme=\"sage\"\n                size=\"xs\"\n                class=\"max-w-full gap-1\">\n                <UserIcon class=\"size-3 shrink-0\" />\n                <span\n                  truncated\n                  #authorCut=\"truncated\"\n                  [tooltip]=\"bookmark.author\"\n                  [tooltipDisabled]=\"!authorCut.isTruncated()\"\n                  tooltipPosition=\"top\"\n                  class=\"min-w-0 truncate in-focus-visible:break-words in-focus-visible:whitespace-normal\">\n                  {{ bookmark.author }}\n                </span>\n              </Tag>\n            }\n            @if (bookmark.parentFolder) {\n              <Tag\n                variant=\"primary\"\n                scheme=\"sage\"\n                size=\"xs\"\n                class=\"max-w-full gap-1\">\n                <FolderIcon class=\"size-3 shrink-0\" />\n                <span\n                  truncated\n                  #folderCut=\"truncated\"\n                  [tooltip]=\"bookmark.parentFolder\"\n                  [tooltipDisabled]=\"!folderCut.isTruncated()\"\n                  tooltipPosition=\"top\"\n                  class=\"min-w-0 truncate in-focus-visible:break-words in-focus-visible:whitespace-normal\">\n                  {{ bookmark.parentFolder }}\n                </span>\n              </Tag>\n            }\n          </div>\n        }\n      </div>\n    </ListItemLeft>\n  </ng-template>\n\n  <ListPanelEmpty color=\"pink\">\n    <BookmarkIcon listPanelEmptyIcon solid />\n    {{ \"bookmarks.noBookmarks\" | transloco }}\n    <p listPanelEmptyHint>{{ \"bookmarks.noBookmarksHint\" | transloco }}</p>\n  </ListPanelEmpty>\n</ListPanel>\n\n@if (paginatedBookmarks().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -20045,7 +20469,7 @@ var CollectionsComponent = class CollectionsComponent {
 		} },
 		providers: [provideTranslocoScope("collections")],
 		ngImport: i0,
-		template: "<ListPanelHeader\n  [label]=\"'collections.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedCollections()\"\n  [getValue]=\"nameOf\"\n  [getLabel]=\"nameOf\"\n  deleteButtonTitle=\"collections.deleteCollection\"\n  [ariaLabel]=\"'collections.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-collection>\n    <ListItemLeft>\n      <inbox-icon />\n      <ListItemText>{{ collection.name }}</ListItemText>\n    </ListItemLeft>\n  </ng-template>\n\n  {{ \"collections.noCollections\" | transloco }}\n</ListPanel>\n\n@if (paginatedCollections().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n",
+		template: "<ListPanelHeader\n  [label]=\"'collections.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedCollections()\"\n  [getValue]=\"nameOf\"\n  [getLabel]=\"nameOf\"\n  deleteButtonTitle=\"collections.deleteCollection\"\n  [ariaLabel]=\"'collections.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-collection>\n    <ListItemLeft>\n      <inbox-icon />\n      <ListItemText>{{ collection.name }}</ListItemText>\n    </ListItemLeft>\n  </ng-template>\n\n  <ListPanelEmpty color=\"indigo\">\n    <inbox-icon listPanelEmptyIcon />\n    {{ \"collections.noCollections\" | transloco }}\n    <p listPanelEmptyHint>{{ \"collections.noCollectionsHint\" | transloco }}</p>\n  </ListPanelEmpty>\n</ListPanel>\n\n@if (paginatedCollections().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n",
 		dependencies: [
 			{
 				kind: "component",
@@ -20068,6 +20492,12 @@ var CollectionsComponent = class CollectionsComponent {
 				],
 				outputs: ["itemClick", "delete"]
 			},
+			{
+				kind: "component",
+				type: ListPanelEmptyComponent,
+				selector: "list-panel-empty, ListPanelEmpty",
+				inputs: ["color"]
+			},
 			{
 				kind: "component",
 				type: ListPanelFooterComponent,
@@ -20125,6 +20555,7 @@ i0.ɵɵngDeclareClassMetadata({
 				TranslocoPipe,
 				ListPanelHeaderComponent,
 				ListPanelComponent,
+				ListPanelEmptyComponent,
 				ListPanelFooterComponent,
 				ListPanelItemDirective,
 				InboxIcon,
@@ -20132,7 +20563,7 @@ i0.ɵɵngDeclareClassMetadata({
 				ListItemTextComponent
 			],
 			providers: [provideTranslocoScope("collections")],
-			template: "<ListPanelHeader\n  [label]=\"'collections.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedCollections()\"\n  [getValue]=\"nameOf\"\n  [getLabel]=\"nameOf\"\n  deleteButtonTitle=\"collections.deleteCollection\"\n  [ariaLabel]=\"'collections.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-collection>\n    <ListItemLeft>\n      <inbox-icon />\n      <ListItemText>{{ collection.name }}</ListItemText>\n    </ListItemLeft>\n  </ng-template>\n\n  {{ \"collections.noCollections\" | transloco }}\n</ListPanel>\n\n@if (paginatedCollections().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n"
+			template: "<ListPanelHeader\n  [label]=\"'collections.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedCollections()\"\n  [getValue]=\"nameOf\"\n  [getLabel]=\"nameOf\"\n  deleteButtonTitle=\"collections.deleteCollection\"\n  [ariaLabel]=\"'collections.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-collection>\n    <ListItemLeft>\n      <inbox-icon />\n      <ListItemText>{{ collection.name }}</ListItemText>\n    </ListItemLeft>\n  </ng-template>\n\n  <ListPanelEmpty color=\"indigo\">\n    <inbox-icon listPanelEmptyIcon />\n    {{ \"collections.noCollections\" | transloco }}\n    <p listPanelEmptyHint>{{ \"collections.noCollectionsHint\" | transloco }}</p>\n  </ListPanelEmpty>\n</ListPanel>\n\n@if (paginatedCollections().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -21890,7 +22321,7 @@ var DidYouMeanComponent = class DidYouMeanComponent {
       <p>
         <span class="me-1">{{ 'didYouMean.didYouMean' | transloco }}</span>
         <a class="text-(--font-primary-base) hover:underline cursor-pointer" role="button" (click)="selectCorrected()">{{ correction() }}</a>
-        <span>?</span>
+        <span>{{ 'didYouMean.didYouMeanSuffix' | transloco }}</span>
       </p>
     }
     @case ('correction') {
@@ -21940,7 +22371,7 @@ i0.ɵɵngDeclareClassMetadata({
       <p>
         <span class="me-1">{{ 'didYouMean.didYouMean' | transloco }}</span>
         <a class="text-(--font-primary-base) hover:underline cursor-pointer" role="button" (click)="selectCorrected()">{{ correction() }}</a>
-        <span>?</span>
+        <span>{{ 'didYouMean.didYouMeanSuffix' | transloco }}</span>
       </p>
     }
     @case ('correction') {
@@ -30613,6 +31044,14 @@ function navigateToSearch(router, search) {
 	if (search.queryParams?.filters && search.queryParams?.filters?.length > 0) queryParams.f = JSON.stringify(search.queryParams?.filters);
 	router.navigate([search.queryParams?.path], { queryParams });
 }
+function searchItemSubtext(transloco, search) {
+	const parts = [];
+	const filterCount = search.filterCount || 0;
+	if (filterCount > 0) parts.push(transloco.translate("searches.filterCount", { count: filterCount }));
+	if (search.date) parts.push(getRelativeDate(transloco.getActiveLang(), search.date));
+	const text = parts.join(" · ");
+	return text ? text.charAt(0).toUpperCase() + text.slice(1) : void 0;
+}
 const RECENT_SEARCHES_OPTIONS = {
 	itemsPerPage: 10,
 	showLoadMore: true,
@@ -30629,7 +31068,7 @@ var RecentSearchesComponent = class RecentSearchesComponent {
 	userSettingsStore = inject(UserSettingsStore);
 	transloco = inject(TranslocoService);
 	router = inject(Router);
-	getRelativeDate = getRelativeDate;
+	subtextOf = (search) => searchItemSubtext(this.transloco, search);
 	urlOf = (search) => search.url;
 	labelOf = (search) => search.display || search.label || search.url;
 	range = signal(10, ...ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []);
@@ -30702,24 +31141,15 @@ var RecentSearchesComponent = class RecentSearchesComponent {
       <ng-template listPanelItem let-search>
         <ListItemLeft>
           <history-icon />
-          <ListItemText>{{ search.display || search.label }}</ListItemText>
+          <ListItemText [subtext]="subtextOf(search)">{{ search.display || search.label }}</ListItemText>
         </ListItemLeft>
-
-        @let filterCount = search.filterCount || 0;
-        @if (filterCount > 0) {
-          <Badge variant="number" fill="secondary" scheme="grey" size="xs" class="flex items-center gap-1" aria-hidden="true">
-            <FilterIcon />
-            {{ 'searches.filterCount' | transloco: { count: filterCount } }}
-          </Badge>
-        }
-
-        @let date = search.date;
-        @if (date) {
-          <Tag variant="primary" scheme="sage" size="xs" class="ms-auto shrink-0 first-letter:capitalize">{{ getRelativeDate(transloco.getActiveLang(), date) }}</Tag>
-        }
       </ng-template>
 
-      {{ "searches.recent.noRecentSearches" | transloco }}
+      <ListPanelEmpty color="blue">
+        <history-icon listPanelEmptyIcon />
+        {{ "searches.recent.noRecentSearches" | transloco }}
+        <p listPanelEmptyHint>{{ "searches.recent.noRecentSearchesHint" | transloco }}</p>
+      </ListPanelEmpty>
     </ListPanel>
 
     @if (paginatedRecentSearches().length > 0) {
@@ -30737,36 +31167,6 @@ var RecentSearchesComponent = class RecentSearchesComponent {
 				selector: "history, history-icon, History, HistoryIcon",
 				inputs: ["class"]
 			},
-			{
-				kind: "component",
-				type: FilterIcon,
-				selector: "filter, filter-icon, Filter, FilterIcon",
-				inputs: ["class"]
-			},
-			{
-				kind: "directive",
-				type: BadgeComponent,
-				selector: "badge, Badge",
-				inputs: [
-					"class",
-					"variant",
-					"fill",
-					"scheme",
-					"size",
-					"aria-label"
-				]
-			},
-			{
-				kind: "directive",
-				type: TagComponent,
-				selector: "tag, Tag",
-				inputs: [
-					"class",
-					"variant",
-					"scheme",
-					"size"
-				]
-			},
 			{
 				kind: "directive",
 				type: ListItemLeftDirective,
@@ -30806,6 +31206,12 @@ var RecentSearchesComponent = class RecentSearchesComponent {
 				],
 				outputs: ["itemClick", "delete"]
 			},
+			{
+				kind: "component",
+				type: ListPanelEmptyComponent,
+				selector: "list-panel-empty, ListPanelEmpty",
+				inputs: ["color"]
+			},
 			{
 				kind: "component",
 				type: ListPanelFooterComponent,
@@ -30839,14 +31245,12 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				TranslocoPipe,
 				HistoryIcon,
-				FilterIcon,
-				BadgeComponent,
-				TagComponent,
 				ListItemLeftDirective,
 				ListItemTextComponent,
 				ListPanelItemDirective,
 				ListPanelHeaderComponent,
 				ListPanelComponent,
+				ListPanelEmptyComponent,
 				ListPanelFooterComponent
 			],
 			template: `
@@ -30863,24 +31267,15 @@ i0.ɵɵngDeclareClassMetadata({
       <ng-template listPanelItem let-search>
         <ListItemLeft>
           <history-icon />
-          <ListItemText>{{ search.display || search.label }}</ListItemText>
+          <ListItemText [subtext]="subtextOf(search)">{{ search.display || search.label }}</ListItemText>
         </ListItemLeft>
-
-        @let filterCount = search.filterCount || 0;
-        @if (filterCount > 0) {
-          <Badge variant="number" fill="secondary" scheme="grey" size="xs" class="flex items-center gap-1" aria-hidden="true">
-            <FilterIcon />
-            {{ 'searches.filterCount' | transloco: { count: filterCount } }}
-          </Badge>
-        }
-
-        @let date = search.date;
-        @if (date) {
-          <Tag variant="primary" scheme="sage" size="xs" class="ms-auto shrink-0 first-letter:capitalize">{{ getRelativeDate(transloco.getActiveLang(), date) }}</Tag>
-        }
       </ng-template>
 
-      {{ "searches.recent.noRecentSearches" | transloco }}
+      <ListPanelEmpty color="blue">
+        <history-icon listPanelEmptyIcon />
+        {{ "searches.recent.noRecentSearches" | transloco }}
+        <p listPanelEmptyHint>{{ "searches.recent.noRecentSearchesHint" | transloco }}</p>
+      </ListPanelEmpty>
     </ListPanel>
 
     @if (paginatedRecentSearches().length > 0) {
@@ -31352,7 +31747,7 @@ var SavedSearchesComponent = class SavedSearchesComponent {
 	userSettingsStore = inject(UserSettingsStore);
 	transloco = inject(TranslocoService);
 	router = inject(Router);
-	getRelativeDate = getRelativeDate;
+	subtextOf = (search) => searchItemSubtext(this.transloco, search);
 	urlOf = (search) => search.url;
 	labelOf = (search) => search.display || search.label || search.url;
 	range = signal(10, ...ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []);
@@ -31425,24 +31820,15 @@ var SavedSearchesComponent = class SavedSearchesComponent {
       <ng-template listPanelItem let-search>
         <ListItemLeft>
           <star-icon [solid]="true" />
-          <ListItemText>{{ search.display || search.label }}</ListItemText>
+          <ListItemText [subtext]="subtextOf(search)">{{ search.display || search.label }}</ListItemText>
         </ListItemLeft>
-
-        @let filterCount = search.filterCount || 0;
-        @if (filterCount > 0) {
-          <Badge variant="number" fill="secondary" scheme="grey" size="xs" class="flex items-center gap-1" aria-hidden="true">
-            <FilterIcon />
-            {{ 'searches.filterCount' | transloco: { count: filterCount } }}
-          </Badge>
-        }
-
-        @let date = search.date;
-        @if (date) {
-          <Tag variant="primary" scheme="sage" size="xs" class="ms-auto shrink-0 first-letter:capitalize">{{ getRelativeDate(transloco.getActiveLang(), date) }}</Tag>
-        }
       </ng-template>
 
-      {{ 'searches.saved.noSavedSearches' | transloco }}
+      <ListPanelEmpty color="yellow">
+        <star-icon listPanelEmptyIcon [solid]="true" />
+        {{ 'searches.saved.noSavedSearches' | transloco }}
+        <p listPanelEmptyHint>{{ 'searches.saved.noSavedSearchesHint' | transloco }}</p>
+      </ListPanelEmpty>
     </ListPanel>
 
     @if(paginatedSearches().length > 0) {
@@ -31457,36 +31843,6 @@ var SavedSearchesComponent = class SavedSearchesComponent {
 				selector: "star, star-icon, Star, StarIcon",
 				inputs: ["class", "solid"]
 			},
-			{
-				kind: "component",
-				type: FilterIcon,
-				selector: "filter, filter-icon, Filter, FilterIcon",
-				inputs: ["class"]
-			},
-			{
-				kind: "directive",
-				type: BadgeComponent,
-				selector: "badge, Badge",
-				inputs: [
-					"class",
-					"variant",
-					"fill",
-					"scheme",
-					"size",
-					"aria-label"
-				]
-			},
-			{
-				kind: "directive",
-				type: TagComponent,
-				selector: "tag, Tag",
-				inputs: [
-					"class",
-					"variant",
-					"scheme",
-					"size"
-				]
-			},
 			{
 				kind: "directive",
 				type: ListItemLeftDirective,
@@ -31526,6 +31882,12 @@ var SavedSearchesComponent = class SavedSearchesComponent {
 				],
 				outputs: ["itemClick", "delete"]
 			},
+			{
+				kind: "component",
+				type: ListPanelEmptyComponent,
+				selector: "list-panel-empty, ListPanelEmpty",
+				inputs: ["color"]
+			},
 			{
 				kind: "component",
 				type: ListPanelFooterComponent,
@@ -31559,14 +31921,12 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				TranslocoPipe,
 				StarIcon,
-				FilterIcon,
-				BadgeComponent,
-				TagComponent,
 				ListItemLeftDirective,
 				ListItemTextComponent,
 				ListPanelItemDirective,
 				ListPanelHeaderComponent,
 				ListPanelComponent,
+				ListPanelEmptyComponent,
 				ListPanelFooterComponent
 			],
 			template: `
@@ -31583,24 +31943,15 @@ i0.ɵɵngDeclareClassMetadata({
       <ng-template listPanelItem let-search>
         <ListItemLeft>
           <star-icon [solid]="true" />
-          <ListItemText>{{ search.display || search.label }}</ListItemText>
+          <ListItemText [subtext]="subtextOf(search)">{{ search.display || search.label }}</ListItemText>
         </ListItemLeft>
-
-        @let filterCount = search.filterCount || 0;
-        @if (filterCount > 0) {
-          <Badge variant="number" fill="secondary" scheme="grey" size="xs" class="flex items-center gap-1" aria-hidden="true">
-            <FilterIcon />
-            {{ 'searches.filterCount' | transloco: { count: filterCount } }}
-          </Badge>
-        }
-
-        @let date = search.date;
-        @if (date) {
-          <Tag variant="primary" scheme="sage" size="xs" class="ms-auto shrink-0 first-letter:capitalize">{{ getRelativeDate(transloco.getActiveLang(), date) }}</Tag>
-        }
       </ng-template>
 
-      {{ 'searches.saved.noSavedSearches' | transloco }}
+      <ListPanelEmpty color="yellow">
+        <star-icon listPanelEmptyIcon [solid]="true" />
+        {{ 'searches.saved.noSavedSearches' | transloco }}
+        <p listPanelEmptyHint>{{ 'searches.saved.noSavedSearchesHint' | transloco }}</p>
+      </ListPanelEmpty>
     </ListPanel>
 
     @if(paginatedSearches().length > 0) {
@@ -31619,6 +31970,36 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}] }
 });
+const isPlainObject = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+const LEAF_SEPARATOR = " › ";
+function flattenLeaves(source, prefix = []) {
+	return Object.entries(source).flatMap(([name, value]) => isPlainObject(value) ? flattenLeaves(value, [...prefix, name]) : [{
+		path: [...prefix, name],
+		value
+	}]);
+}
+function valueAtPath(source, path) {
+	return path.reduce((node, name) => isPlainObject(node) ? node[name] : void 0, source);
+}
+const toFieldText = (value) => {
+	if (value === void 0 || value === null) return "";
+	return Array.isArray(value) ? JSON.stringify(value) : String(value);
+};
+function normalizeCustomData(entries) {
+	const properties = /* @__PURE__ */ new Map();
+	const add = (key, value) => {
+		if (!key || properties.has(key)) return;
+		properties.set(key, value === void 0 || value === null ? { key } : {
+			key,
+			defaultValue: value
+		});
+	};
+	for (const entry of Array.isArray(entries) ? entries : []) if (typeof entry === "string") add(entry);
+	else if (entry && typeof entry === "object" && !Array.isArray(entry)) Object.entries(entry).forEach(([key, value]) => add(key, value));
+	else console.warn("[user-profile] customData: entry ignored, expected a string or an object.", entry);
+	return [...properties.values()];
+}
+const SAVED_FLASH_MS = 3e3;
 const sameKeys = (a, b) => a.length === b.length && a.every((key, index) => key === b[index]);
 const userProfileSchema = (editing) => schema((p) => {
 	applyEach(p.data, (field) => readonly(field, { when: ({ key }) => `data.${key()}` !== editing() }));
@@ -31632,9 +32013,13 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 	transloco = inject(TranslocoService);
 	injector = inject(Injector);
 	document = inject(DOCUMENT);
+	destroyRef = inject(DestroyRef);
 	labelClass = FORM_LABEL_CLASS;
 	errorClass = FORM_ERROR_CLASS;
+	chipClass = "inline-flex items-center rounded-(--radius-rounded) bg-(--bg-accent-base-alt) px-(--spacing-2xs) text-(length:--size-sm) font-medium text-(--font-accent-base)";
 	statusMessage = signal("", ...ngDevMode ? [{ debugName: "statusMessage" }] : /* istanbul ignore next */ []);
+	savedProperty = signal(void 0, ...ngDevMode ? [{ debugName: "savedProperty" }] : /* istanbul ignore next */ []);
+	savedTimer;
 	dataKeys = [
 		"fullName",
 		"mail",
@@ -31657,10 +32042,29 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		equal: sameKeys
 	});
 	allowProfilePhoto = computed(() => this.keys().some((key) => key === "profilePhoto"), ...ngDevMode ? [{ debugName: "allowProfilePhoto" }] : /* istanbul ignore next */ []);
-	customData = computed(() => (this.appStore.general()?.features?.userProfile?.customData || []).filter((key) => !this.keys().some((k) => k.toLowerCase() === key.toLowerCase())), {
+	customDataConfig = computed(() => normalizeCustomData(this.appStore.general()?.features?.userProfile?.customData).filter(({ key }) => !this.keys().some((k) => k.toLowerCase() === key.toLowerCase())), ...ngDevMode ? [{ debugName: "customDataConfig" }] : /* istanbul ignore next */ []);
+	customRows = computed(() => {
+		const stored = this.user()?.customData;
+		return this.customDataConfig().flatMap(({ key, defaultValue }) => {
+			const shape = isPlainObject(defaultValue) ? defaultValue : isPlainObject(stored?.[key]) ? stored[key] : void 0;
+			if (!shape) return [{
+				key,
+				root: key,
+				defaultValue
+			}];
+			return flattenLeaves(shape).map(({ path, value }) => ({
+				key: [key, ...path].join(LEAF_SEPARATOR),
+				root: key,
+				path: [key, ...path],
+				defaultValue: isPlainObject(defaultValue) ? value : void 0
+			}));
+		});
+	}, ...ngDevMode ? [{ debugName: "customRows" }] : /* istanbul ignore next */ []);
+	customData = computed(() => this.customRows().map(({ key }) => key), {
 		...ngDevMode ? { debugName: "customData" } : /* istanbul ignore next */ {},
 		equal: sameKeys
 	});
+	customRowIndex = computed(() => new Map(this.customRows().map((row) => [row.key, row])), ...ngDevMode ? [{ debugName: "customRowIndex" }] : /* istanbul ignore next */ []);
 	properties = computed(() => [...this.formKeys().map((key) => ({
 		category: "data",
 		key,
@@ -31670,6 +32074,13 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		key,
 		translated: false
 	}))], ...ngDevMode ? [{ debugName: "properties" }] : /* istanbul ignore next */ []);
+	sections = computed(() => {
+		const rows = this.properties();
+		return ["data", "customData"].map((category) => ({
+			id: category === "data" ? "information" : "preferences",
+			rows: rows.filter((row) => row.category === category)
+		})).filter((section) => section.rows.length > 0);
+	}, ...ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []);
 	initials = computed(() => this.principalStore.initials(), ...ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []);
 	username = computed(() => this.principalStore.name() || this.principalStore.email() || null, ...ngDevMode ? [{ debugName: "username" }] : /* istanbul ignore next */ []);
 	propertyToEdit = signal(void 0, ...ngDevMode ? [{ debugName: "propertyToEdit" }] : /* istanbul ignore next */ []);
@@ -31695,7 +32106,7 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		const profile = this.user();
 		return {
 			data: toRecord(this.formKeys(), profile?.data),
-			customData: toRecord(this.customData(), profile?.customData)
+			customData: Object.fromEntries(this.customData().map((key) => [key, toFieldText(this.effectiveValue("customData", key))]))
 		};
 	}, ...ngDevMode ? [{ debugName: "profileModel" }] : /* istanbul ignore next */ []);
 	profileForm = form(this.profileModel, userProfileSchema(this.propertyToEdit), {
@@ -31706,6 +32117,7 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		effect(() => {
 			if (this.userProfileResource.error()?.status === 404) this.createUserProfile();
 		});
+		this.destroyRef.onDestroy(() => clearTimeout(this.savedTimer));
 	}
 	fieldId(category, key) {
 		return `user-profile-${category}-${key.replace(/[^\w-]+/g, "-")}`;
@@ -31734,6 +32146,33 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 	getDataValue(category, key) {
 		return this.user()?.[category]?.[key];
 	}
+	defaultValue(category, key) {
+		return category === "customData" ? this.customRowIndex().get(key)?.defaultValue : void 0;
+	}
+	isLeaf(category, key) {
+		return category === "customData" && this.customRowIndex().get(key)?.path !== void 0;
+	}
+	storedValue(category, key) {
+		const bucket = this.user()?.[category];
+		const path = category === "customData" ? this.customRowIndex().get(key)?.path : void 0;
+		return path ? valueAtPath(bucket, path) : bucket?.[key];
+	}
+	isBoolean(category, key) {
+		return !this.isLeaf(category, key) && typeof this.effectiveValue(category, key) === "boolean";
+	}
+	booleanValue(category, key) {
+		return this.effectiveValue(category, key) === true;
+	}
+	isReadOnlyValue(category, key) {
+		return Array.isArray(this.effectiveValue(category, key));
+	}
+	arrayTags(category, key) {
+		const value = this.effectiveValue(category, key);
+		return [...new Set((Array.isArray(value) ? value : []).map((item) => typeof item === "string" ? item : JSON.stringify(item)))];
+	}
+	effectiveValue(category, key) {
+		return this.storedValue(category, key) ?? this.defaultValue(category, key);
+	}
 	onEdit(category, key) {
 		this.propertyToEdit.set(`${category}.${key}`);
 		this.fieldFor(category, key)?.().focusBoundControl();
@@ -31743,19 +32182,43 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		const field = event.target;
 		field.setSelectionRange(field.value.length, field.value.length);
 	}
+	onEscape(event, category, key) {
+		if (!this.isEditing(category, key)) return;
+		event.preventDefault();
+		event.stopPropagation();
+		this.onCancelEdit(category, key);
+	}
 	onCancelEdit(category, key) {
 		if (!this.isEditing(category, key)) return;
 		const state = this.fieldFor(category, key)?.();
-		state?.value.set(this.getDataValue(category, key) ?? "");
+		state?.value.set(toFieldText(this.effectiveValue(category, key)));
 		state?.reset();
 		this.leaveEditMode(category, key);
 		this.announce("editCancelled", category, key);
 	}
-	propertyLabel(category, key) {
-		return category === "data" ? this.transloco.translate(`userProfile.data.${key}`) : key;
+	labelFor(category, key) {
+		if (category === "data") return this.transloco.translate(`userProfile.data.${key}`);
+		const leafPath = this.customRowIndex().get(key)?.path;
+		if (leafPath) return [this.labelFor(category, leafPath[0]), ...leafPath.slice(1)].join(LEAF_SEPARATOR);
+		const path = `userProfile.customData.${key}`;
+		const translated = this.transloco.translate(path);
+		return translated && translated !== path ? translated : key;
+	}
+	isDefault(category, key) {
+		const stored = this.storedValue(category, key);
+		return (stored === void 0 || stored === null) && this.defaultValue(category, key) !== void 0;
+	}
+	isSaved(category, key) {
+		return this.savedProperty() === `${category}.${key}`;
+	}
+	flashSaved(category, key) {
+		this.savedProperty.set(`${category}.${key}`);
+		clearTimeout(this.savedTimer);
+		this.savedTimer = setTimeout(() => this.savedProperty.set(void 0), SAVED_FLASH_MS);
 	}
 	announce(kind, category, key) {
-		this.statusMessage.set(this.transloco.translate(`userProfile.status.${kind}`, { property: this.propertyLabel(category, key) }));
+		this.statusMessage.set(this.transloco.translate(`userProfile.status.${kind}`, { property: this.labelFor(category, key) }));
+		if (kind === "saved") this.flashSaved(category, key);
 	}
 	leaveEditMode(category, key) {
 		this.propertyToEdit.set(void 0);
@@ -31789,6 +32252,7 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		}
 	}
 	async onDeleteData(category, key) {
+		if (!this.hasStoredValue(category, key)) return;
 		try {
 			const response = await this.client.api.userProfile.deleteProperty(this.user(), category, key);
 			if (!response) {
@@ -31796,14 +32260,46 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 				return;
 			}
 			info("Deleted user profile property", response);
-			const userProfile = JSON.parse(JSON.stringify(this.user()));
-			userProfile[category][key] = "";
-			this.userProfileResource.set(userProfile);
-			this.announce("deleted", category, key);
+			this.forgetProperty(category, key);
 		} catch (err) {
+			if (err?.status === 404) {
+				info("User profile property already absent", {
+					category,
+					key
+				});
+				this.forgetProperty(category, key);
+				return;
+			}
 			notify.error(err.message);
 		}
 	}
+	hasStoredValue(category, key) {
+		const stored = this.storedValue(category, key);
+		return stored !== void 0 && stored !== null;
+	}
+	forgetProperty(category, key) {
+		const userProfile = JSON.parse(JSON.stringify(this.user()));
+		if (this.defaultValue(category, key) === void 0) userProfile[category][key] = "";
+		else delete userProfile[category][key];
+		this.userProfileResource.set(userProfile);
+		this.announce("deleted", category, key);
+	}
+	async onToggleBoolean(category, key, checked, toggle) {
+		const previous = this.user();
+		if (!previous || this.booleanValue(category, key) === checked) return;
+		this.userProfileResource.set({
+			...previous,
+			[category]: {
+				...previous[category],
+				[key]: checked
+			}
+		});
+		if (await this.patchProperty(category, key, checked)) this.announce("saved", category, key);
+		else {
+			this.userProfileResource.set(previous);
+			toggle.checked.set(!checked);
+		}
+	}
 	async patchProperty(category, key, value) {
 		const userProfile = JSON.parse(JSON.stringify(this.user()));
 		userProfile[category] = {
@@ -31857,7 +32353,7 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		host: { classAttribute: "flex flex-col h-full overflow-hidden" },
 		providers: [provideTranslocoScope("user-profile", "login")],
 		ngImport: i0,
-		template: "@if (userProfileResource.hasValue()) {\n  @let profile = user();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        @let profilePhoto = profile?.data?.profilePhoto;\n        <!-- AVATAR — a real <button>: the avatar opens the file picker, so it has to be reachable and\n             activatable with the keyboard, which a click handler on a <div> never is. -->\n        <button\n          type=\"button\"\n          variant=\"none\"\n          class=\"cursor-pointer rounded-full\"\n          [title]=\"'userProfile.changePhoto' | transloco\"\n          [attr.aria-label]=\"'userProfile.changePhoto' | transloco\"\n          (click)=\"avatarInput.click()\">\n          <Avatar fill=\"secondary\" class=\"size-14\">\n            @if (profilePhoto) {\n              <!-- alt=\"\": the button already carries the accessible name, the image would repeat it. -->\n              <AvatarImage [src]=\"profilePhoto\" width=\"44\" height=\"44\" alt=\"\" />\n            }\n            <AvatarFallback class=\"size-full text-lg\">\n              @if (initials()) {\n                <span>{{ initials() }}</span>\n              } @else {\n                <UserIcon class=\"size-7\" />\n              }\n            </AvatarFallback>\n          </Avatar>\n        </button>\n        @if (profilePhoto) {\n          <button\n            type=\"button\"\n            variant=\"tertiary\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            [title]=\"'userProfile.deleteProperty' | transloco\"\n            [attr.aria-label]=\"\n              'userProfile.deletePropertyNamed'\n                | transloco\n                  : { property: 'userProfile.data.profilePhoto' | transloco }\n            \"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            type=\"button\"\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <!-- ChangePassword renders its own <form [formRoot]>: it stays in this branch, mutually\n           exclusive with the profile form below, so the two never nest. -->\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- p: the focus outline of the fields is drawn *outside* their box, and this is the\n           scrolling ancestor — without a gutter it clips the ring on every edge it touches\n           (left for all of them, bottom for the last one, top for the first). -->\n      <div class=\"min-h-0 flex-1 overflow-auto p-(--spacing-3xs)\">\n        <!--\n          [formRoot] pose novalidate, intercepte submit et appelle preventDefault() avant de déclencher\n          submit() sur le field tree. Un seul bouton type=\"submit\" est rendu à la fois — celui de la\n          ligne en cours d'édition — et l'action de soumission persiste cette seule propriété.\n        -->\n        <!-- aria-label: a <form> with no accessible name is not exposed as a form landmark, so the\n             fields could not be reached as a whole. aria-busy holds the announcement back while a\n             property is being persisted. -->\n        <form\n          [formRoot]=\"profileForm\"\n          [attr.aria-label]=\"'userProfile.profileFields' | transloco\"\n          [attr.aria-busy]=\"profileForm().submitting() ? 'true' : null\">\n          @for (\n            property of properties();\n            track property.category + \".\" + property.key\n          ) {\n            @let category = property.category;\n            @let key = property.key;\n            @let field = profileForm[category][key];\n            @let label =\n              property.translated\n                ? (\"userProfile.data.\" + key | transloco)\n                : key;\n            @let editing = isEditing(category, key);\n            @let invalid = showError(field);\n            <!-- role=\"group\" named by the label: without it the four action buttons of a row are\n                 announced out of context, as a flat run of \"Edit …\" / \"Delete …\" with nothing tying\n                 them to the property they belong to. -->\n            <div\n              role=\"group\"\n              [attr.aria-labelledby]=\"labelId(category, key)\"\n              class=\"flex flex-col gap-(--spacing-3xs)\">\n              <label\n                [id]=\"labelId(category, key)\"\n                [for]=\"fieldId(category, key)\"\n                [class]=\"labelClass\"\n                >{{ label }}</label\n              >\n              <div class=\"group flex flex-row\">\n                <div class=\"min-w-0 grow\">\n                  <textarea-group\n                    resize=\"auto\"\n                    [maxRows]=\"3\"\n                    [scheme]=\"invalid ? 'error' : 'default'\">\n                    <!-- No [attr.readonly] here: [formField] writes the readonly attribute itself from\n                         the field state, which the schema's readonly() rule drives. The native\n                         readonly attribute is what exposes aria-readonly — do not duplicate it. -->\n                    <textarea\n                      textarea-control\n                      rows=\"1\"\n                      [id]=\"fieldId(category, key)\"\n                      [formField]=\"field\"\n                      [attr.placeholder]=\"'userProfile.notDefined' | transloco\"\n                      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n                      [attr.aria-describedby]=\"\n                        invalid ? errorId(category, key) : null\n                      \"\n                      [attr.aria-keyshortcuts]=\"editing ? 'Escape' : null\"\n                      (focus)=\"onFieldFocus($event)\"\n                      (keydown.escape)=\"onCancelEdit(category, key)\"></textarea>\n                  </textarea-group>\n                </div>\n                <!-- group-focus-within, and not only group-hover: `invisible` takes the buttons out of\n                     the tab order, so without it editing or deleting a property is unreachable with a\n                     keyboard. Focusing the field of the row reveals its actions. -->\n                @if (editing) {\n                  <button\n                    type=\"submit\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [disabled]=\"profileForm().submitting()\"\n                    [title]=\"'userProfile.saveProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.savePropertyNamed'\n                        | transloco: { property: label }\n                    \">\n                    <save-icon />\n                  </button>\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.cancelEdit' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.cancelEditNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onCancelEdit(category, key)\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    [id]=\"editButtonId(category, key)\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.editProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.editPropertyNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onEdit(category, key)\">\n                    <EditIcon />\n                  </button>\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.deleteProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.deletePropertyNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onDeleteData(category, key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n              @if (invalid) {\n                <p\n                  [id]=\"errorId(category, key)\"\n                  role=\"alert\"\n                  [class]=\"errorClass\">\n                  {{ errorKey(field) | transloco }}\n                </p>\n              }\n            </div>\n          }\n        </form>\n        <!-- Always in the DOM, and only its text changes: a live region inserted at the same time as\n             its content is not reliably announced. `sr-only` — the transitions it describes are\n             already visible on screen. -->\n        <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {{ statusMessage() }}\n        </p>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <p role=\"status\">{{ \"userProfile.loading\" | transloco }}</p>\n} @else if (userProfileResource.error()) {\n  <p role=\"alert\">{{ \"userProfile.loadError\" | transloco }}</p>\n}\n\n<!-- AVATAR UPLOAD — `hidden` keeps it out of both the tab order and the accessibility tree, which is\n     intended: it is opened by the avatar button above. It also sits outside the <form>. -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n",
+		template: "@if (userProfileResource.hasValue()) {\n  @let profile = user();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        @let profilePhoto = profile?.data?.profilePhoto;\n        <!-- AVATAR — a real <button>: the avatar opens the file picker, so it has to be reachable and\n             activatable with the keyboard, which a click handler on a <div> never is. -->\n        <button\n          type=\"button\"\n          variant=\"none\"\n          class=\"cursor-pointer rounded-full\"\n          [title]=\"'userProfile.changePhoto' | transloco\"\n          [attr.aria-label]=\"'userProfile.changePhoto' | transloco\"\n          (click)=\"avatarInput.click()\">\n          <Avatar fill=\"secondary\" class=\"size-14\">\n            @if (profilePhoto) {\n              <!-- alt=\"\": the button already carries the accessible name, the image would repeat it. -->\n              <AvatarImage [src]=\"profilePhoto\" width=\"44\" height=\"44\" alt=\"\" />\n            }\n            <AvatarFallback class=\"size-full text-lg\">\n              @if (initials()) {\n                <span>{{ initials() }}</span>\n              } @else {\n                <UserIcon class=\"size-7\" />\n              }\n            </AvatarFallback>\n          </Avatar>\n        </button>\n        @if (profilePhoto) {\n          <button\n            type=\"button\"\n            variant=\"tertiary\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            [title]=\"'userProfile.deleteProperty' | transloco\"\n            [attr.aria-label]=\"\n              'userProfile.deletePropertyNamed'\n                | transloco\n                  : { property: 'userProfile.data.profilePhoto' | transloco }\n            \"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            type=\"button\"\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <!-- ChangePassword renders its own <form [formRoot]>: it stays in this branch, mutually\n           exclusive with the profile form below, so the two never nest. -->\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- p: the focus outline of the fields is drawn *outside* their box, and this is the\n           scrolling ancestor — without a gutter it clips the ring on every edge it touches\n           (left for all of them, bottom for the last one, top for the first). -->\n      <div class=\"min-h-0 flex-1 overflow-auto p-(--spacing-3xs)\">\n        <!--\n          [formRoot] pose novalidate, intercepte submit et appelle preventDefault() avant de déclencher\n          submit() sur le field tree. Un seul bouton type=\"submit\" est rendu à la fois — celui de la\n          ligne en cours d'édition — et l'action de soumission persiste cette seule propriété.\n        -->\n        <!-- aria-label: a <form> with no accessible name is not exposed as a form landmark, so the\n             fields could not be reached as a whole. aria-busy holds the announcement back while a\n             property is being persisted. -->\n        <form\n          class=\"@container\"\n          [formRoot]=\"profileForm\"\n          [attr.aria-label]=\"'userProfile.profileFields' | transloco\"\n          [attr.aria-busy]=\"profileForm().submitting() ? 'true' : null\">\n          @for (section of sections(); track section.id) {\n            <section\n              [attr.aria-labelledby]=\"'user-profile-section-' + section.id\"\n              class=\"mb-(--spacing-md) flex flex-col gap-(--spacing-sm) rounded-(--radius-lg) border border-solid border-(--stroke-primary-lighter) p-(--spacing-md)\">\n              <div>\n                <h3\n                  [id]=\"'user-profile-section-' + section.id\"\n                  class=\"m-0 text-(length:--size-base) font-semibold\">\n                  {{ \"userProfile.sections.\" + section.id | transloco }}\n                </h3>\n                <p\n                  class=\"m-0 text-(length:--size-sm) text-(--font-neutral-muted)\">\n                  {{\n                    \"userProfile.sections.\" + section.id + \"Hint\" | transloco\n                  }}\n                </p>\n              </div>\n              <div\n                class=\"grid grid-cols-1 gap-x-(--spacing-md) gap-y-(--spacing-sm) @lg:grid-cols-2\">\n                @for (\n                  property of section.rows;\n                  track property.category + \".\" + property.key\n                ) {\n                  @let category = property.category;\n                  @let key = property.key;\n                  @let field = profileForm[category][key];\n                  @let label = labelFor(category, key);\n                  @let editing = isEditing(category, key);\n                  @let invalid = showError(field);\n                  @let boolean = isBoolean(category, key);\n                  @let readOnlyValue = isReadOnlyValue(category, key);\n                  @let leaf = isLeaf(category, key);\n                  @let saved = isSaved(category, key);\n                  <!-- role=\"group\" named by the label: without it the action buttons of a row are\n                       announced out of context, as a flat run of \"Edit …\" / \"Delete …\" with nothing tying\n                       them to the property they belong to. A switch, and a value shown but not edited,\n                       take the whole width of the grid: they are not a field to line up with another. -->\n                  <div\n                    role=\"group\"\n                    [attr.aria-labelledby]=\"labelId(category, key)\"\n                    class=\"flex min-w-0 flex-col gap-(--spacing-3xs)\"\n                    [class.col-span-full]=\"boolean || readOnlyValue\">\n                    @if (boolean) {\n                      <!-- A switch is not a labelable text field: the name goes through aria-labelledby. The\n                           value is saved as soon as it is flipped, so there is no edit mode. -->\n                      <div\n                        class=\"flex flex-row items-center gap-(--spacing-sm) rounded-(--radius-md) border border-solid border-(--stroke-primary-lighter) px-(--spacing-md) py-(--spacing-xs)\">\n                        <span\n                          [id]=\"labelId(category, key)\"\n                          class=\"grow\"\n                          [class]=\"labelClass\"\n                          >{{ label }}</span\n                        >\n                        @if (saved) {\n                          <span\n                            class=\"flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-success-base)\">\n                            <CircleCheckIcon aria-hidden=\"true\" />\n                            {{ \"userProfile.saved\" | transloco }}\n                          </span>\n                        } @else if (isDefault(category, key)) {\n                          <span [class]=\"chipClass\">{{\n                            \"userProfile.defaultValue\" | transloco\n                          }}</span>\n                        }\n                        <switch\n                          #toggle\n                          [checked]=\"booleanValue(category, key)\"\n                          [disabled]=\"profileForm().submitting()\"\n                          [aria-labelledby]=\"labelId(category, key)\"\n                          (checkedChange)=\"\n                            onToggleBoolean(category, key, $event, toggle)\n                          \" />\n                        <button\n                          type=\"button\"\n                          variant=\"tertiary\"\n                          [iconOnly]=\"true\"\n                          class=\"text-destructive cursor-pointer\"\n                          [title]=\"'userProfile.deleteProperty' | transloco\"\n                          [attr.aria-label]=\"\n                            'userProfile.deletePropertyNamed'\n                              | transloco: { property: label }\n                          \"\n                          [disabled]=\"!hasStoredValue(category, key)\"\n                          (click)=\"onDeleteData(category, key)\">\n                          <TrashIcon />\n                        </button>\n                      </div>\n                    } @else if (readOnlyValue) {\n                      <!-- An array is shown, never edited: its shape is the administrator's. A galactik\n                           TagInput in read-only mode, which is what it is for; its inner text field is named\n                           after the property, as there is no <label for> to reach it. -->\n                      <span\n                        [id]=\"labelId(category, key)\"\n                        [class]=\"labelClass\"\n                        >{{ label }}</span\n                      >\n                      <tag-input\n                        class=\"[&_tag-remove]:hidden\"\n                        [value]=\"arrayTags(category, key)\"\n                        [readonly]=\"true\"\n                        [aria-label]=\"label\"\n                        [addLabel]=\"label\" />\n                    } @else {\n                      <label\n                        [id]=\"labelId(category, key)\"\n                        [for]=\"fieldId(category, key)\"\n                        [class]=\"labelClass\"\n                        >{{ label }}</label\n                      >\n                      <!-- The actions sit inside the box: galactik styles it from the control with has-[]\n                           selectors, which match descendants, so the focus ring and the read-only look\n                           keep working with the buttons next to the input. At rest the box is tinted,\n                           which is what tells a field from its label; it is white while edited. -->\n                      <!-- scheme: galactik colours the field itself for an error and for a save that just\n                           went through. The tint of a read-only field must not hide the success one, hence\n                           the data attribute and its more specific variant. -->\n                      <input-group\n                        class=\"has-[[readonly]]:bg-(--bg-primary-lighter) data-[state=success]:has-[[readonly]]:bg-(--bg-success-base-alt)\"\n                        [attr.data-state]=\"saved ? 'success' : null\"\n                        [scheme]=\"\n                          invalid ? 'error' : saved ? 'success' : 'default'\n                        \">\n                        <!-- No [attr.readonly] here: [formField] writes the readonly attribute itself from\n                             the field state, which the schema's readonly() rule drives. The native\n                             readonly attribute is what exposes aria-readonly — do not duplicate it. -->\n                        <input\n                          input-control\n                          type=\"text\"\n                          [id]=\"fieldId(category, key)\"\n                          [formField]=\"field\"\n                          [attr.placeholder]=\"\n                            'userProfile.notDefined' | transloco\n                          \"\n                          [attr.aria-invalid]=\"invalid ? 'true' : null\"\n                          [attr.aria-describedby]=\"\n                            invalid ? errorId(category, key) : null\n                          \"\n                          [attr.aria-keyshortcuts]=\"editing ? 'Escape' : null\"\n                          (focus)=\"onFieldFocus($event)\"\n                          (keydown.escape)=\"onEscape($event, category, key)\" />\n                        <!-- Always visible: hiding them until hover made them unreachable on a touch screen\n                             and left nothing to discover. -->\n                        @if (!leaf) {\n                          <div class=\"flex shrink-0 flex-row items-center\">\n                            @if (editing) {\n                              <button\n                                type=\"submit\"\n                                variant=\"primary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"cursor-pointer\"\n                                [disabled]=\"profileForm().submitting()\"\n                                [title]=\"'userProfile.saveProperty' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.savePropertyNamed'\n                                    | transloco: { property: label }\n                                \">\n                                <save-icon />\n                              </button>\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"cursor-pointer\"\n                                [title]=\"'userProfile.cancelEdit' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.cancelEditNamed'\n                                    | transloco: { property: label }\n                                \"\n                                (click)=\"onCancelEdit(category, key)\">\n                                <UndoIcon />\n                              </button>\n                            } @else {\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                [id]=\"editButtonId(category, key)\"\n                                class=\"cursor-pointer\"\n                                [title]=\"'userProfile.editProperty' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.editPropertyNamed'\n                                    | transloco: { property: label }\n                                \"\n                                (click)=\"onEdit(category, key)\">\n                                <EditIcon />\n                              </button>\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"text-destructive cursor-pointer\"\n                                [title]=\"\n                                  'userProfile.deleteProperty' | transloco\n                                \"\n                                [attr.aria-label]=\"\n                                  'userProfile.deletePropertyNamed'\n                                    | transloco: { property: label }\n                                \"\n                                [disabled]=\"!hasStoredValue(category, key)\"\n                                (click)=\"onDeleteData(category, key)\">\n                                <TrashIcon />\n                              </button>\n                            }\n                          </div>\n                        }\n                      </input-group>\n                    }\n                    <!-- Under the field, one message at a time: the error first, then the confirmation of a\n                         save, then what is worth knowing about the value. -->\n                    @if (invalid) {\n                      <p\n                        [id]=\"errorId(category, key)\"\n                        role=\"alert\"\n                        [class]=\"errorClass\">\n                        {{ errorKey(field) | transloco }}\n                      </p>\n                    } @else if (!boolean) {\n                      @if (saved) {\n                        <p\n                          class=\"m-0 flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-success-base)\">\n                          <CircleCheckIcon aria-hidden=\"true\" />\n                          {{ \"userProfile.saved\" | transloco }}\n                        </p>\n                      } @else if (readOnlyValue || leaf) {\n                        <p\n                          class=\"m-0 flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-muted)\">\n                          <LockIcon />\n                          {{ \"userProfile.lockedByAdmin\" | transloco }}\n                        </p>\n                      } @else if (editing) {\n                        <p\n                          class=\"m-0 text-(length:--size-sm) text-(--font-neutral-muted)\">\n                          {{ \"userProfile.editHint\" | transloco }}\n                        </p>\n                      } @else if (isDefault(category, key)) {\n                        <p class=\"m-0\">\n                          <span [class]=\"chipClass\">{{\n                            \"userProfile.defaultValue\" | transloco\n                          }}</span>\n                        </p>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </section>\n          }\n        </form>\n        <!-- Always in the DOM, and only its text changes: a live region inserted at the same time as\n             its content is not reliably announced. `sr-only` — the transitions it describes are\n             already visible on screen. -->\n        <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {{ statusMessage() }}\n        </p>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <p role=\"status\">{{ \"userProfile.loading\" | transloco }}</p>\n} @else if (userProfileResource.error()) {\n  <p role=\"alert\">{{ \"userProfile.loadError\" | transloco }}</p>\n}\n\n<!-- AVATAR UPLOAD — `hidden` keeps it out of both the tab order and the accessibility tree, which is\n     intended: it is opened by the avatar button above. It also sits outside the <form>. -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -31950,24 +32446,75 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 					"size"
 				]
 			},
+			{
+				kind: "component",
+				type: CircleCheckIcon,
+				selector: "circle-check, circle-check-icon, CircleCheck, CircleCheckIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: LockIcon,
+				selector: "lock, lock-icon, Lock, LockIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: SwitchComponent,
+				selector: "switch, Switch",
+				inputs: [
+					"checked",
+					"disabled",
+					"size",
+					"class",
+					"aria-label",
+					"aria-labelledby",
+					"presentational",
+					"compact",
+					"tabIndex"
+				],
+				outputs: ["checkedChange"]
+			},
+			{
+				kind: "component",
+				type: TagInputComponent,
+				selector: "TagInput, tag-input, taginput",
+				inputs: [
+					"value",
+					"disabled",
+					"readonly",
+					"placeholder",
+					"separator",
+					"addOnBlur",
+					"size",
+					"scheme",
+					"class",
+					"aria-label",
+					"addLabel",
+					"removeLabel",
+					"addedLabel",
+					"removedLabel"
+				],
+				outputs: ["valueChange", "touch"]
+			},
 			{
 				kind: "directive",
-				type: TextareaComponent,
-				selector: "textarea-group, textareagroup, TextareaGroup",
+				type: InputComponent,
+				selector: "input-group, inputgroup, InputGroup",
 				inputs: [
 					"class",
 					"size",
 					"scheme",
-					"resize",
 					"filled",
-					"minRows",
-					"maxRows"
+					"numbers",
+					"autoHeight",
+					"textSize"
 				]
 			},
 			{
 				kind: "directive",
-				type: TextareaControlDirective,
-				selector: "textarea[textarea-control], textarea[textareaControl]",
+				type: InputControlDirective,
+				selector: "input[input-control], input[inputControl]",
 				inputs: ["class"]
 			},
 			{
@@ -32019,18 +32566,22 @@ i0.ɵɵngDeclareClassMetadata({
 				UserIcon,
 				AvatarImageComponent,
 				ButtonComponent,
-				TextareaComponent,
-				TextareaControlDirective,
+				CircleCheckIcon,
+				LockIcon,
+				SwitchComponent,
+				TagInputComponent,
+				InputComponent,
+				InputControlDirective,
 				ChangePasswordComponent
 			],
 			providers: [provideTranslocoScope("user-profile", "login")],
-			template: "@if (userProfileResource.hasValue()) {\n  @let profile = user();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        @let profilePhoto = profile?.data?.profilePhoto;\n        <!-- AVATAR — a real <button>: the avatar opens the file picker, so it has to be reachable and\n             activatable with the keyboard, which a click handler on a <div> never is. -->\n        <button\n          type=\"button\"\n          variant=\"none\"\n          class=\"cursor-pointer rounded-full\"\n          [title]=\"'userProfile.changePhoto' | transloco\"\n          [attr.aria-label]=\"'userProfile.changePhoto' | transloco\"\n          (click)=\"avatarInput.click()\">\n          <Avatar fill=\"secondary\" class=\"size-14\">\n            @if (profilePhoto) {\n              <!-- alt=\"\": the button already carries the accessible name, the image would repeat it. -->\n              <AvatarImage [src]=\"profilePhoto\" width=\"44\" height=\"44\" alt=\"\" />\n            }\n            <AvatarFallback class=\"size-full text-lg\">\n              @if (initials()) {\n                <span>{{ initials() }}</span>\n              } @else {\n                <UserIcon class=\"size-7\" />\n              }\n            </AvatarFallback>\n          </Avatar>\n        </button>\n        @if (profilePhoto) {\n          <button\n            type=\"button\"\n            variant=\"tertiary\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            [title]=\"'userProfile.deleteProperty' | transloco\"\n            [attr.aria-label]=\"\n              'userProfile.deletePropertyNamed'\n                | transloco\n                  : { property: 'userProfile.data.profilePhoto' | transloco }\n            \"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            type=\"button\"\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <!-- ChangePassword renders its own <form [formRoot]>: it stays in this branch, mutually\n           exclusive with the profile form below, so the two never nest. -->\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- p: the focus outline of the fields is drawn *outside* their box, and this is the\n           scrolling ancestor — without a gutter it clips the ring on every edge it touches\n           (left for all of them, bottom for the last one, top for the first). -->\n      <div class=\"min-h-0 flex-1 overflow-auto p-(--spacing-3xs)\">\n        <!--\n          [formRoot] pose novalidate, intercepte submit et appelle preventDefault() avant de déclencher\n          submit() sur le field tree. Un seul bouton type=\"submit\" est rendu à la fois — celui de la\n          ligne en cours d'édition — et l'action de soumission persiste cette seule propriété.\n        -->\n        <!-- aria-label: a <form> with no accessible name is not exposed as a form landmark, so the\n             fields could not be reached as a whole. aria-busy holds the announcement back while a\n             property is being persisted. -->\n        <form\n          [formRoot]=\"profileForm\"\n          [attr.aria-label]=\"'userProfile.profileFields' | transloco\"\n          [attr.aria-busy]=\"profileForm().submitting() ? 'true' : null\">\n          @for (\n            property of properties();\n            track property.category + \".\" + property.key\n          ) {\n            @let category = property.category;\n            @let key = property.key;\n            @let field = profileForm[category][key];\n            @let label =\n              property.translated\n                ? (\"userProfile.data.\" + key | transloco)\n                : key;\n            @let editing = isEditing(category, key);\n            @let invalid = showError(field);\n            <!-- role=\"group\" named by the label: without it the four action buttons of a row are\n                 announced out of context, as a flat run of \"Edit …\" / \"Delete …\" with nothing tying\n                 them to the property they belong to. -->\n            <div\n              role=\"group\"\n              [attr.aria-labelledby]=\"labelId(category, key)\"\n              class=\"flex flex-col gap-(--spacing-3xs)\">\n              <label\n                [id]=\"labelId(category, key)\"\n                [for]=\"fieldId(category, key)\"\n                [class]=\"labelClass\"\n                >{{ label }}</label\n              >\n              <div class=\"group flex flex-row\">\n                <div class=\"min-w-0 grow\">\n                  <textarea-group\n                    resize=\"auto\"\n                    [maxRows]=\"3\"\n                    [scheme]=\"invalid ? 'error' : 'default'\">\n                    <!-- No [attr.readonly] here: [formField] writes the readonly attribute itself from\n                         the field state, which the schema's readonly() rule drives. The native\n                         readonly attribute is what exposes aria-readonly — do not duplicate it. -->\n                    <textarea\n                      textarea-control\n                      rows=\"1\"\n                      [id]=\"fieldId(category, key)\"\n                      [formField]=\"field\"\n                      [attr.placeholder]=\"'userProfile.notDefined' | transloco\"\n                      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n                      [attr.aria-describedby]=\"\n                        invalid ? errorId(category, key) : null\n                      \"\n                      [attr.aria-keyshortcuts]=\"editing ? 'Escape' : null\"\n                      (focus)=\"onFieldFocus($event)\"\n                      (keydown.escape)=\"onCancelEdit(category, key)\"></textarea>\n                  </textarea-group>\n                </div>\n                <!-- group-focus-within, and not only group-hover: `invisible` takes the buttons out of\n                     the tab order, so without it editing or deleting a property is unreachable with a\n                     keyboard. Focusing the field of the row reveals its actions. -->\n                @if (editing) {\n                  <button\n                    type=\"submit\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [disabled]=\"profileForm().submitting()\"\n                    [title]=\"'userProfile.saveProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.savePropertyNamed'\n                        | transloco: { property: label }\n                    \">\n                    <save-icon />\n                  </button>\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.cancelEdit' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.cancelEditNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onCancelEdit(category, key)\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    [id]=\"editButtonId(category, key)\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.editProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.editPropertyNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onEdit(category, key)\">\n                    <EditIcon />\n                  </button>\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.deleteProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.deletePropertyNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onDeleteData(category, key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n              @if (invalid) {\n                <p\n                  [id]=\"errorId(category, key)\"\n                  role=\"alert\"\n                  [class]=\"errorClass\">\n                  {{ errorKey(field) | transloco }}\n                </p>\n              }\n            </div>\n          }\n        </form>\n        <!-- Always in the DOM, and only its text changes: a live region inserted at the same time as\n             its content is not reliably announced. `sr-only` — the transitions it describes are\n             already visible on screen. -->\n        <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {{ statusMessage() }}\n        </p>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <p role=\"status\">{{ \"userProfile.loading\" | transloco }}</p>\n} @else if (userProfileResource.error()) {\n  <p role=\"alert\">{{ \"userProfile.loadError\" | transloco }}</p>\n}\n\n<!-- AVATAR UPLOAD — `hidden` keeps it out of both the tab order and the accessibility tree, which is\n     intended: it is opened by the avatar button above. It also sits outside the <form>. -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n"
+			template: "@if (userProfileResource.hasValue()) {\n  @let profile = user();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        @let profilePhoto = profile?.data?.profilePhoto;\n        <!-- AVATAR — a real <button>: the avatar opens the file picker, so it has to be reachable and\n             activatable with the keyboard, which a click handler on a <div> never is. -->\n        <button\n          type=\"button\"\n          variant=\"none\"\n          class=\"cursor-pointer rounded-full\"\n          [title]=\"'userProfile.changePhoto' | transloco\"\n          [attr.aria-label]=\"'userProfile.changePhoto' | transloco\"\n          (click)=\"avatarInput.click()\">\n          <Avatar fill=\"secondary\" class=\"size-14\">\n            @if (profilePhoto) {\n              <!-- alt=\"\": the button already carries the accessible name, the image would repeat it. -->\n              <AvatarImage [src]=\"profilePhoto\" width=\"44\" height=\"44\" alt=\"\" />\n            }\n            <AvatarFallback class=\"size-full text-lg\">\n              @if (initials()) {\n                <span>{{ initials() }}</span>\n              } @else {\n                <UserIcon class=\"size-7\" />\n              }\n            </AvatarFallback>\n          </Avatar>\n        </button>\n        @if (profilePhoto) {\n          <button\n            type=\"button\"\n            variant=\"tertiary\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            [title]=\"'userProfile.deleteProperty' | transloco\"\n            [attr.aria-label]=\"\n              'userProfile.deletePropertyNamed'\n                | transloco\n                  : { property: 'userProfile.data.profilePhoto' | transloco }\n            \"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            type=\"button\"\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <!-- ChangePassword renders its own <form [formRoot]>: it stays in this branch, mutually\n           exclusive with the profile form below, so the two never nest. -->\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- p: the focus outline of the fields is drawn *outside* their box, and this is the\n           scrolling ancestor — without a gutter it clips the ring on every edge it touches\n           (left for all of them, bottom for the last one, top for the first). -->\n      <div class=\"min-h-0 flex-1 overflow-auto p-(--spacing-3xs)\">\n        <!--\n          [formRoot] pose novalidate, intercepte submit et appelle preventDefault() avant de déclencher\n          submit() sur le field tree. Un seul bouton type=\"submit\" est rendu à la fois — celui de la\n          ligne en cours d'édition — et l'action de soumission persiste cette seule propriété.\n        -->\n        <!-- aria-label: a <form> with no accessible name is not exposed as a form landmark, so the\n             fields could not be reached as a whole. aria-busy holds the announcement back while a\n             property is being persisted. -->\n        <form\n          class=\"@container\"\n          [formRoot]=\"profileForm\"\n          [attr.aria-label]=\"'userProfile.profileFields' | transloco\"\n          [attr.aria-busy]=\"profileForm().submitting() ? 'true' : null\">\n          @for (section of sections(); track section.id) {\n            <section\n              [attr.aria-labelledby]=\"'user-profile-section-' + section.id\"\n              class=\"mb-(--spacing-md) flex flex-col gap-(--spacing-sm) rounded-(--radius-lg) border border-solid border-(--stroke-primary-lighter) p-(--spacing-md)\">\n              <div>\n                <h3\n                  [id]=\"'user-profile-section-' + section.id\"\n                  class=\"m-0 text-(length:--size-base) font-semibold\">\n                  {{ \"userProfile.sections.\" + section.id | transloco }}\n                </h3>\n                <p\n                  class=\"m-0 text-(length:--size-sm) text-(--font-neutral-muted)\">\n                  {{\n                    \"userProfile.sections.\" + section.id + \"Hint\" | transloco\n                  }}\n                </p>\n              </div>\n              <div\n                class=\"grid grid-cols-1 gap-x-(--spacing-md) gap-y-(--spacing-sm) @lg:grid-cols-2\">\n                @for (\n                  property of section.rows;\n                  track property.category + \".\" + property.key\n                ) {\n                  @let category = property.category;\n                  @let key = property.key;\n                  @let field = profileForm[category][key];\n                  @let label = labelFor(category, key);\n                  @let editing = isEditing(category, key);\n                  @let invalid = showError(field);\n                  @let boolean = isBoolean(category, key);\n                  @let readOnlyValue = isReadOnlyValue(category, key);\n                  @let leaf = isLeaf(category, key);\n                  @let saved = isSaved(category, key);\n                  <!-- role=\"group\" named by the label: without it the action buttons of a row are\n                       announced out of context, as a flat run of \"Edit …\" / \"Delete …\" with nothing tying\n                       them to the property they belong to. A switch, and a value shown but not edited,\n                       take the whole width of the grid: they are not a field to line up with another. -->\n                  <div\n                    role=\"group\"\n                    [attr.aria-labelledby]=\"labelId(category, key)\"\n                    class=\"flex min-w-0 flex-col gap-(--spacing-3xs)\"\n                    [class.col-span-full]=\"boolean || readOnlyValue\">\n                    @if (boolean) {\n                      <!-- A switch is not a labelable text field: the name goes through aria-labelledby. The\n                           value is saved as soon as it is flipped, so there is no edit mode. -->\n                      <div\n                        class=\"flex flex-row items-center gap-(--spacing-sm) rounded-(--radius-md) border border-solid border-(--stroke-primary-lighter) px-(--spacing-md) py-(--spacing-xs)\">\n                        <span\n                          [id]=\"labelId(category, key)\"\n                          class=\"grow\"\n                          [class]=\"labelClass\"\n                          >{{ label }}</span\n                        >\n                        @if (saved) {\n                          <span\n                            class=\"flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-success-base)\">\n                            <CircleCheckIcon aria-hidden=\"true\" />\n                            {{ \"userProfile.saved\" | transloco }}\n                          </span>\n                        } @else if (isDefault(category, key)) {\n                          <span [class]=\"chipClass\">{{\n                            \"userProfile.defaultValue\" | transloco\n                          }}</span>\n                        }\n                        <switch\n                          #toggle\n                          [checked]=\"booleanValue(category, key)\"\n                          [disabled]=\"profileForm().submitting()\"\n                          [aria-labelledby]=\"labelId(category, key)\"\n                          (checkedChange)=\"\n                            onToggleBoolean(category, key, $event, toggle)\n                          \" />\n                        <button\n                          type=\"button\"\n                          variant=\"tertiary\"\n                          [iconOnly]=\"true\"\n                          class=\"text-destructive cursor-pointer\"\n                          [title]=\"'userProfile.deleteProperty' | transloco\"\n                          [attr.aria-label]=\"\n                            'userProfile.deletePropertyNamed'\n                              | transloco: { property: label }\n                          \"\n                          [disabled]=\"!hasStoredValue(category, key)\"\n                          (click)=\"onDeleteData(category, key)\">\n                          <TrashIcon />\n                        </button>\n                      </div>\n                    } @else if (readOnlyValue) {\n                      <!-- An array is shown, never edited: its shape is the administrator's. A galactik\n                           TagInput in read-only mode, which is what it is for; its inner text field is named\n                           after the property, as there is no <label for> to reach it. -->\n                      <span\n                        [id]=\"labelId(category, key)\"\n                        [class]=\"labelClass\"\n                        >{{ label }}</span\n                      >\n                      <tag-input\n                        class=\"[&_tag-remove]:hidden\"\n                        [value]=\"arrayTags(category, key)\"\n                        [readonly]=\"true\"\n                        [aria-label]=\"label\"\n                        [addLabel]=\"label\" />\n                    } @else {\n                      <label\n                        [id]=\"labelId(category, key)\"\n                        [for]=\"fieldId(category, key)\"\n                        [class]=\"labelClass\"\n                        >{{ label }}</label\n                      >\n                      <!-- The actions sit inside the box: galactik styles it from the control with has-[]\n                           selectors, which match descendants, so the focus ring and the read-only look\n                           keep working with the buttons next to the input. At rest the box is tinted,\n                           which is what tells a field from its label; it is white while edited. -->\n                      <!-- scheme: galactik colours the field itself for an error and for a save that just\n                           went through. The tint of a read-only field must not hide the success one, hence\n                           the data attribute and its more specific variant. -->\n                      <input-group\n                        class=\"has-[[readonly]]:bg-(--bg-primary-lighter) data-[state=success]:has-[[readonly]]:bg-(--bg-success-base-alt)\"\n                        [attr.data-state]=\"saved ? 'success' : null\"\n                        [scheme]=\"\n                          invalid ? 'error' : saved ? 'success' : 'default'\n                        \">\n                        <!-- No [attr.readonly] here: [formField] writes the readonly attribute itself from\n                             the field state, which the schema's readonly() rule drives. The native\n                             readonly attribute is what exposes aria-readonly — do not duplicate it. -->\n                        <input\n                          input-control\n                          type=\"text\"\n                          [id]=\"fieldId(category, key)\"\n                          [formField]=\"field\"\n                          [attr.placeholder]=\"\n                            'userProfile.notDefined' | transloco\n                          \"\n                          [attr.aria-invalid]=\"invalid ? 'true' : null\"\n                          [attr.aria-describedby]=\"\n                            invalid ? errorId(category, key) : null\n                          \"\n                          [attr.aria-keyshortcuts]=\"editing ? 'Escape' : null\"\n                          (focus)=\"onFieldFocus($event)\"\n                          (keydown.escape)=\"onEscape($event, category, key)\" />\n                        <!-- Always visible: hiding them until hover made them unreachable on a touch screen\n                             and left nothing to discover. -->\n                        @if (!leaf) {\n                          <div class=\"flex shrink-0 flex-row items-center\">\n                            @if (editing) {\n                              <button\n                                type=\"submit\"\n                                variant=\"primary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"cursor-pointer\"\n                                [disabled]=\"profileForm().submitting()\"\n                                [title]=\"'userProfile.saveProperty' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.savePropertyNamed'\n                                    | transloco: { property: label }\n                                \">\n                                <save-icon />\n                              </button>\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"cursor-pointer\"\n                                [title]=\"'userProfile.cancelEdit' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.cancelEditNamed'\n                                    | transloco: { property: label }\n                                \"\n                                (click)=\"onCancelEdit(category, key)\">\n                                <UndoIcon />\n                              </button>\n                            } @else {\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                [id]=\"editButtonId(category, key)\"\n                                class=\"cursor-pointer\"\n                                [title]=\"'userProfile.editProperty' | transloco\"\n                                [attr.aria-label]=\"\n                                  'userProfile.editPropertyNamed'\n                                    | transloco: { property: label }\n                                \"\n                                (click)=\"onEdit(category, key)\">\n                                <EditIcon />\n                              </button>\n                              <button\n                                type=\"button\"\n                                variant=\"tertiary\"\n                                size=\"sm\"\n                                [iconOnly]=\"true\"\n                                class=\"text-destructive cursor-pointer\"\n                                [title]=\"\n                                  'userProfile.deleteProperty' | transloco\n                                \"\n                                [attr.aria-label]=\"\n                                  'userProfile.deletePropertyNamed'\n                                    | transloco: { property: label }\n                                \"\n                                [disabled]=\"!hasStoredValue(category, key)\"\n                                (click)=\"onDeleteData(category, key)\">\n                                <TrashIcon />\n                              </button>\n                            }\n                          </div>\n                        }\n                      </input-group>\n                    }\n                    <!-- Under the field, one message at a time: the error first, then the confirmation of a\n                         save, then what is worth knowing about the value. -->\n                    @if (invalid) {\n                      <p\n                        [id]=\"errorId(category, key)\"\n                        role=\"alert\"\n                        [class]=\"errorClass\">\n                        {{ errorKey(field) | transloco }}\n                      </p>\n                    } @else if (!boolean) {\n                      @if (saved) {\n                        <p\n                          class=\"m-0 flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-success-base)\">\n                          <CircleCheckIcon aria-hidden=\"true\" />\n                          {{ \"userProfile.saved\" | transloco }}\n                        </p>\n                      } @else if (readOnlyValue || leaf) {\n                        <p\n                          class=\"m-0 flex items-center gap-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-muted)\">\n                          <LockIcon />\n                          {{ \"userProfile.lockedByAdmin\" | transloco }}\n                        </p>\n                      } @else if (editing) {\n                        <p\n                          class=\"m-0 text-(length:--size-sm) text-(--font-neutral-muted)\">\n                          {{ \"userProfile.editHint\" | transloco }}\n                        </p>\n                      } @else if (isDefault(category, key)) {\n                        <p class=\"m-0\">\n                          <span [class]=\"chipClass\">{{\n                            \"userProfile.defaultValue\" | transloco\n                          }}</span>\n                        </p>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </section>\n          }\n        </form>\n        <!-- Always in the DOM, and only its text changes: a live region inserted at the same time as\n             its content is not reliably announced. `sr-only` — the transitions it describes are\n             already visible on screen. -->\n        <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {{ statusMessage() }}\n        </p>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <p role=\"status\">{{ \"userProfile.loading\" | transloco }}</p>\n} @else if (userProfileResource.error()) {\n  <p role=\"alert\">{{ \"userProfile.loadError\" | transloco }}</p>\n}\n\n<!-- AVATAR UPLOAD — `hidden` keeps it out of both the tab order and the accessibility tree, which is\n     intended: it is opened by the avatar button above. It also sits outside the <form>. -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n"
 		}]
 	}],
 	ctorParameters: () => []
 });
 function toRecord(keys, source) {
-	return Object.fromEntries(keys.map((key) => [key, String(source?.[key] ?? "")]));
+	return Object.fromEntries(keys.map((key) => [key, toFieldText(source?.[key])]));
 }
 function splitPropertyId(id) {
 	const separator = id.indexOf(".");
@@ -32672,8 +33223,10 @@ var SettingsDialogComponent = class SettingsDialogComponent {
 		template: `
     @if (!duplicate) {
       <div dialog #dialog="dialog" [closeLabel]="'settings.close' | transloco" (closed)="call.end($event)">
-        <DialogContent size="xl" class="h-[min(48rem,calc(100dvh-2rem))] flex-row! items-stretch!">
-          <div class="flex w-64 shrink-0 flex-col gap-(--spacing-3xs) bg-(--layer-page-on-layer) p-(--spacing-sm)">
+        <!-- The inset layout of the sidebar, in a dialog: the navigation sits on the tinted surface of the
+             dialog itself and the panel is a white card set into it. -->
+        <DialogContent size="xl" class="h-[min(48rem,calc(100dvh-2rem))] flex-row! items-stretch! bg-(--bg-primary-lighter)">
+          <div class="flex w-64 shrink-0 flex-col gap-(--spacing-3xs) p-(--spacing-sm)">
             <button
               type="button"
               variant="none"
@@ -32710,7 +33263,7 @@ var SettingsDialogComponent = class SettingsDialogComponent {
             </nav>
           </div>
 
-          <div class="m-(--spacing-xs) flex min-w-0 flex-1 flex-col overflow-y-auto rounded-(--radius-lg) bg-(--layer-page-layer) p-(--spacing-xl)">
+          <div sidebarInset class="my-(--spacing-xs) mr-(--spacing-xs) overflow-y-auto rounded-(--radius-2xl) bg-(--bg-neutral-white) p-(--spacing-xl) shadow-none">
             @switch (panel()) {
               @case ("account") {
                 <settings-account-panel class="flex min-h-0 flex-1 flex-col" [focusOnOpen]="!navigated()" />
@@ -32783,6 +33336,12 @@ var SettingsDialogComponent = class SettingsDialogComponent {
 				selector: "x-mark, x-mark-icon, XMark, XMarkIcon",
 				inputs: ["class"]
 			},
+			{
+				kind: "directive",
+				type: SidebarInsetDirective,
+				selector: "[sidebarInset]",
+				inputs: ["class"]
+			},
 			{
 				kind: "component",
 				type: SettingsAccountPanelComponent,
@@ -32825,6 +33384,7 @@ i0.ɵɵngDeclareClassMetadata({
 				PaletteIcon,
 				KeyboardIcon,
 				XMarkIcon,
+				SidebarInsetDirective,
 				SettingsAccountPanelComponent,
 				SettingsAppearancePanelComponent,
 				SettingsShortcutsPanelComponent
@@ -32833,8 +33393,10 @@ i0.ɵɵngDeclareClassMetadata({
 			template: `
     @if (!duplicate) {
       <div dialog #dialog="dialog" [closeLabel]="'settings.close' | transloco" (closed)="call.end($event)">
-        <DialogContent size="xl" class="h-[min(48rem,calc(100dvh-2rem))] flex-row! items-stretch!">
-          <div class="flex w-64 shrink-0 flex-col gap-(--spacing-3xs) bg-(--layer-page-on-layer) p-(--spacing-sm)">
+        <!-- The inset layout of the sidebar, in a dialog: the navigation sits on the tinted surface of the
+             dialog itself and the panel is a white card set into it. -->
+        <DialogContent size="xl" class="h-[min(48rem,calc(100dvh-2rem))] flex-row! items-stretch! bg-(--bg-primary-lighter)">
+          <div class="flex w-64 shrink-0 flex-col gap-(--spacing-3xs) p-(--spacing-sm)">
             <button
               type="button"
               variant="none"
@@ -32871,7 +33433,7 @@ i0.ɵɵngDeclareClassMetadata({
             </nav>
           </div>
 
-          <div class="m-(--spacing-xs) flex min-w-0 flex-1 flex-col overflow-y-auto rounded-(--radius-lg) bg-(--layer-page-layer) p-(--spacing-xl)">
+          <div sidebarInset class="my-(--spacing-xs) mr-(--spacing-xs) overflow-y-auto rounded-(--radius-2xl) bg-(--bg-neutral-white) p-(--spacing-xl) shadow-none">
             @switch (panel()) {
               @case ("account") {
                 <settings-account-panel class="flex min-h-0 flex-1 flex-col" [focusOnOpen]="!navigated()" />