Implements saved filter presets in toolbars—save/delete named presets, adaptive picker (SelectButton vs Select), overlay expansion. Use when working on toolbar filters, saved presets, SelectButton, Select dropdown, or overlay expansion.
Implement saved filter presets in toolbars: users can save/delete named presets, the filter picker adapts (SelectButton for 1–4, Select dropdown for 5+), and the expanded toolbar overlays content instead of pushing it.
src/app/shared/components/toolbar/toolbar.component.ts — data model, logicsrc/app/shared/components/toolbar/toolbar.component.html — templatesrc/styles/06-components/_c-toolbar.scss — overlay positioning, empty-state stylessrc/styles/05-objects/_layout.scss — toolbar section positioning contextinterface SavedFilter {
id: string;
name: string;
autocompleteValues: Record<string, string[]>;
toggleValues: Record<string, boolean>;
}
savedFilters = signal<SavedFilter[]>([]) — starts empty (in-memory)selectedFilterId = signal<string | null>(null)filterOptions as computed() from savedFilters()DialogModule, InputTextModuleshowSaveDialog, saveFilterName signalsonSaveAndApply(): snapshot autocomplete/toggle → new SavedFilter → push to savedFilters → set active → closeonDelete() removes selected filter, resets selectedFilterIdselectedFilterId changes, restore autocomplete/toggle from selected SavedFilter (effect or method)p-selectbuttonp-select (SelectModule)useDropdown = computed(() => this.savedFilters().length > 4);
layout.scss: .o-dashboard-layout__main-content → position: relative
c-toolbar.scss: .c-toolbar--expanded → position: absolute, z-index: 10, left: 0, right: 0 (overlays content; collapsed stays in flow)
DialogModule (primeng/dialog)SelectModule (primeng/select)