@sinequa/atomic-angular 2.7.0 → 2.8.0

package/fesm2022/sinequa-atomic-angular.mjs

@@ -2,7 +2,7 @@ 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, LockIcon, 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, SidebarInsetDirective, SlashIcon, SlidersIcon, 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, 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";
@@ -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";
@@ -1374,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 }
@@ -1390,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 {
@@ -5745,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 */ []);
@@ -5920,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 {
@@ -6059,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,
@@ -6088,7 +6195,10 @@ i0.ɵɵngDeclareClassMetadata({
 				DialogFooterComponent,
 				InputComponent,
 				InputControlDirective,
-				CheckboxComponent
+				CheckboxComponent,
+				ListPanelEmptyComponent,
+				InboxIcon,
+				SearchIcon
 			],
 			providers: [provideTranslocoScope("collections")],
 			template: `
@@ -6137,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 {
@@ -16096,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",
@@ -16170,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",
@@ -16198,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() {
@@ -16218,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);
@@ -16242,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);
@@ -16252,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() {
@@ -16404,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()) {
@@ -16450,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",
@@ -16610,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,
@@ -16646,7 +16872,8 @@ i0.ɵɵngDeclareClassMetadata({
 				ChevronDownIcon,
 				CheckIcon,
 				LoadingCircleIcon,
-				CircleCheckIcon
+				CircleCheckIcon,
+				TriangleAlertIcon
 			],
 			providers: [provideTranslocoScope("alerts")],
 			template: `
@@ -16761,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()) {
@@ -16806,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: () => [],
@@ -16816,6 +17062,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}] }
 });
 const AlertForm = createCallable(AlertDialog);
+const UNDO_DELAY = 6e3;
 var AlertsComponent = class AlertsComponent {
 	floating = inject(PopoverDirective, {
 		skipSelf: true,
@@ -16823,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);
+	}
+	onRowEnter(event, alert) {
+		if (event.target === event.currentTarget) this.edit(alert);
 	}
-	onClick(index) {
+	edit(alert) {
+		const index = this.alerts().indexOf(alert);
+		if (index < 0) return;
 		this.floating?.close();
 		AlertForm.call(index, { injector: this.injector });
 	}
@@ -16841,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;
+			});
+		}
+	}
+	deleteAlert(alert) {
+		this.commitDeletion();
+		this.hidden.update((hidden) => new Set(hidden).add(alert));
+		this.pendingDeletion.set(alert);
+		this.undoTimer = setTimeout(() => this.commitDeletion(), UNDO_DELAY);
+	}
+	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));
 	}
-	async reorder() {
-		if (this.reordering()) {
-			await this.userSettingsStore.updateAlerts(this.tmpAlerts);
-			this.reordering.set(false);
-		} else this.reordering.set(true);
+	unhide(alert) {
+		this.hidden.update((hidden) => {
+			const next = new Set(hidden);
+			next.delete(alert);
+			return next;
+		});
 	}
-	dropped(drop) {
-		if (drop.currentIndex === drop.previousIndex) return;
-		this.tmpAlerts.splice(drop.currentIndex, 0, this.tmpAlerts.splice(drop.previousIndex, 1)[0]);
+	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",
@@ -16871,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",
@@ -16886,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",
@@ -16950,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,
@@ -16958,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",
@@ -16982,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: () => []
@@ -19105,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>
   `,
@@ -19212,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>
   `,
@@ -19357,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: `
@@ -19509,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: {
@@ -19588,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>
     }
   `,
@@ -19608,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>
     }
   `
@@ -19733,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",
@@ -19756,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,
@@ -19815,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,
@@ -19836,6 +20200,7 @@ i0.ɵɵngDeclareClassMetadata({
 				TranslocoPipe,
 				ListPanelHeaderComponent,
 				ListPanelComponent,
+				ListPanelEmptyComponent,
 				ListPanelFooterComponent,
 				ListPanelItemDirective,
 				BookmarkIcon,
@@ -19843,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: () => [],
@@ -20102,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",
@@ -20125,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,
@@ -20182,6 +20555,7 @@ i0.ɵɵngDeclareClassMetadata({
 				TranslocoPipe,
 				ListPanelHeaderComponent,
 				ListPanelComponent,
+				ListPanelEmptyComponent,
 				ListPanelFooterComponent,
 				ListPanelItemDirective,
 				InboxIcon,
@@ -20189,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: () => [],
@@ -30670,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,
@@ -30686,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 */ []);
@@ -30759,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) {
@@ -30794,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,
@@ -30863,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,
@@ -30896,14 +31245,12 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				TranslocoPipe,
 				HistoryIcon,
-				FilterIcon,
-				BadgeComponent,
-				TagComponent,
 				ListItemLeftDirective,
 				ListItemTextComponent,
 				ListPanelItemDirective,
 				ListPanelHeaderComponent,
 				ListPanelComponent,
+				ListPanelEmptyComponent,
 				ListPanelFooterComponent
 			],
 			template: `
@@ -30920,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) {
@@ -31409,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 */ []);
@@ -31482,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) {
@@ -31514,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,
@@ -31583,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,
@@ -31616,14 +31921,12 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				TranslocoPipe,
 				StarIcon,
-				FilterIcon,
-				BadgeComponent,
-				TagComponent,
 				ListItemLeftDirective,
 				ListItemTextComponent,
 				ListPanelItemDirective,
 				ListPanelHeaderComponent,
 				ListPanelComponent,
+				ListPanelEmptyComponent,
 				ListPanelFooterComponent
 			],
 			template: `
@@ -31640,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) {