pict-section-recordset 1.0.70 → 1.2.0

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "pict-section-recordset",
-  "version": "1.0.70",
+  "version": "1.2.0",
   "description": "Pict dynamic record set management views",
   "main": "source/Pict-Section-RecordSet.js",
+  "files": [
+    "source",
+    "types"
+  ],
   "directories": {
     "test": "test"
   },

package/source/providers/Filter-Data-Provider.js

@@ -128,10 +128,17 @@ class FilterDataProvider extends libPictProvider
 	 */
 	navigateToFilterExperienceRoute(tmpFilterExperience, pRecordSet, pViewContext)
 	{
-		// go to the new url with the filter experience encoded param
+		// The search term (the /FilteredTo/ segment) is part of the saved experience — restore
+		// it alongside the structured filter clauses.
+		const tmpSearchSegment = (tmpFilterExperience && tmpFilterExperience.SearchFilterURLParam) ? `/FilteredTo/${tmpFilterExperience.SearchFilterURLParam}` : '';
+		// go to the new url with the search segment + the filter experience encoded param
 		if (tmpFilterExperience?.FilterExperienceEncodedURLParam && tmpFilterExperience?.FilterExperienceEncodedURLParam?.length > 0)
 		{
-			this.fable.providers.RecordSetRouter.pictRouter.navigate(`/PSRS/${pRecordSet}/${pViewContext}/FilterExperience/${tmpFilterExperience.FilterExperienceEncodedURLParam}`);
+			this.fable.providers.RecordSetRouter.pictRouter.navigate(`/PSRS/${pRecordSet}/${pViewContext}${tmpSearchSegment}/FilterExperience/${tmpFilterExperience.FilterExperienceEncodedURLParam}`);
+		}
+		else if (tmpSearchSegment)
+		{
+			this.fable.providers.RecordSetRouter.pictRouter.navigate(`/PSRS/${pRecordSet}/${pViewContext}${tmpSearchSegment}`);
 		}
 		else
 		{
@@ -431,10 +438,12 @@ class FilterDataProvider extends libPictProvider
 	 * @param {string} pViewContext - The current view context
 	 * @return {boolean} - Returns true when the settings have been saved.
 	 */
-	saveFilterMeta(pRecordSet, pViewContext)
+	saveFilterMeta(pRecordSet, pViewContext, pSilent, pDisplayNameOverride)
 	{
 		const activeFilterExperienceClauses = this.pict.Bundle._ActiveFilterState[pRecordSet]?.FilterClauses || [];
-		const filterDisplayName = this.getCurrentFilterName({ FilterClauses: activeFilterExperienceClauses }, pRecordSet, pViewContext);
+		const filterDisplayName = (pDisplayNameOverride && String(pDisplayNameOverride).trim())
+			? String(pDisplayNameOverride).trim()
+			: this.getCurrentFilterName({ FilterClauses: activeFilterExperienceClauses }, pRecordSet, pViewContext);
 		const tmpFilterExperienceHash = filterDisplayName.replace(/[^a-zA-Z0-9_-]/g, '');
 
 		if (this.checkIfFilterExperienceExists(pRecordSet, pViewContext, tmpFilterExperienceHash))
@@ -444,13 +453,15 @@ class FilterDataProvider extends libPictProvider
 		}
 
 		// TODO: BUG: Gotta have a more complex merge happen here for multiple tabs
-		const newFilterExperience = { 
+		const newFilterExperience = {
 			RecordSet: pRecordSet,
 			ViewContext: pViewContext,
 			FilterClauses: activeFilterExperienceClauses,
 			FilterDisplayName: filterDisplayName,
 			FilterExperienceHash: tmpFilterExperienceHash,
 			FilterExperienceEncodedURLParam: window.location.hash.split('/FilterExperience/')?.[1] || '',
+			// The search term (the /FilteredTo/ segment) is part of the saved experience too.
+			SearchFilterURLParam: window.location.hash.split('/FilteredTo/')?.[1]?.split('/FilterExperience/')?.[0] || '',
 			LastModifiedDate: new Date().toISOString(),
 		}
 		// Save the specific filter metadata to localStorage

package/source/views/Filter-PersistenceView.js

@@ -21,7 +21,20 @@ const _DEFAULT_CONFIGURATION_FilterPersistenceView = (
 	AutoSolveWithApp: false,
 	AutoSolveOrdinal: 0,
 
-	CSS: false,
+	CSS: /*css*/`
+.prsp-exp { display: flex; flex-direction: column; gap: 0.4rem; }
+.prsp-exp-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--theme-color-text-muted, #6b7686); }
+.prsp-exp-row { display: flex; align-items: center; gap: 0.5rem; }
+.prsp-exp-row > span:empty { display: none; }
+.prsp-exp-select, .prsp-exp-name { font: inherit; font-size: 0.9rem; padding: 0.42rem 0.6rem; border-radius: 8px;
+	border: 1px solid var(--theme-color-border-default, #d7dce3); background: var(--theme-color-background-primary, #fff); color: var(--theme-color-text-primary, #1f2733); }
+.prsp-exp-select { flex: 0 0 auto; width: 230px; min-width: 0; max-width: 100%; }
+.prsp-exp-select:focus, .prsp-exp-name:focus { outline: none; border-color: var(--theme-color-brand-primary, #156dd1);
+	box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color-brand-primary, #156dd1) 16%, transparent); }
+.prsp-exp-btn { flex: 0 0 auto; white-space: nowrap; }
+.prsp-exp-validation { font-size: 0.8rem; color: var(--theme-color-status-error, #cf5b5b); }
+.prsp-exp-validation:empty { display: none; }
+`,
 	CSSPriority: 500,
 
 	Templates:
@@ -30,41 +43,17 @@ const _DEFAULT_CONFIGURATION_FilterPersistenceView = (
 			Hash: 'FilterPersistenceView-Container',
 			Template: /*html*/`
 <!-- DefaultPackage pict view template: [FilterPersistenceView-Container] -->
-<div id="FilterPersistenceView-Content">
-	<!-- Content for Filter Persistence View goes here -->
-	<div id="FilterPersistenceView-Header">
-		<h3>Filter Experience Settings</h3>
-	</div>
-	<div id="FilterPersistenceView-Body">
-		<div class="FilterPersistenceView-ActiveSettings">
-			<label for="CurrentFilterName">Current Filter Experience:</label>
-			<span id="FilterPersistenceView-CurrentFilterNameInput-ValidationMessage" style="color: red; font-size: 0.9em; margin-left: 10px;"></span>
-			<input type="text" id="FilterPersistenceView-CurrentFilterNameInput" name="CurrentFilterName" value="" onfocus="this.select()" />
-			<button type="button" id="FilterPersistenceView-SaveFilterButton" onclick="_Pict.views['FilterPersistenceView'].saveFilterPersistenceSettings(event)">
-				<span id="FilterPersistenceView-SaveFilterButtonText">Save</span>
-			</button>
-		</div>
-		<div class="FilterPersistenceView-StoredSettings">
-			<label for="StoredFilterName">Stored Filter Experiences:</label>
-			<select id="FilterPersistenceView-StoredFiltersSelect" onchange="_Pict.views['FilterPersistenceView'].setFilterExperienceToSelection(event)" name="StoredFilterName">
-				<!-- Options will be populated dynamically -->
-			</select>
-			<button type="button" id="FilterPersistenceView-LoadFilterButton" onclick="_Pict.views['FilterPersistenceView'].loadFilterPersistenceSettings(event)">Load</button>
-			<button type="button" id="FilterPersistenceView-SetAsDefaultButton" onclick="_Pict.views['FilterPersistenceView'].toggleFilterExperienceAsTheDefault(event, true)">Set As Default</button>
-			<button type="button" id="FilterPersistenceView-RemoveAsDefaultButton" onclick="_Pict.views['FilterPersistenceView'].toggleFilterExperienceAsTheDefault(event, false)">Remove As Default</button>
-			<button type="button" id="FilterPersistenceView-DeleteFilterButton" onclick="_Pict.views['FilterPersistenceView'].deleteFilterPersistenceSettings(event)">Delete</button>
-		</div>
-		<div class="FilterPersistenceView-OptionalSettings">
-			<label for="OptionalSettings">Optional Settings:</label>
-			<label for="OptionalSettings-RememberLastUsed">
-				<input type="checkbox" id="OptionalSettings-RememberLastUsed" name="RememberLastUsed" onchange="_Pict.views['FilterPersistenceView'].toggleRememberLastUsedFilterExperience(event)"	 />
-				Remember my last search filter experience
-			</label>
-		</div>
-	</div>
-	<div id="FilterPersistenceView-Footer">
-		<button type="button" id="FilterPersistenceView-CloseManageFiltersButton" onclick="_Pict.views['FilterPersistenceView'].closeFilterPersistenceUI()">Close</button>
+<div id="FilterPersistenceView-Content" class="prsp-exp">
+	<span class="prsp-exp-label">Filter experience</span>
+	<div class="prsp-exp-row">
+		<select id="FilterPersistenceView-StoredFiltersSelect" class="prsp-exp-select" name="StoredFilterName" title="Load a saved filter experience"
+			onchange="_Pict.views['FilterPersistenceView'].setFilterExperienceToSelection(event); _Pict.views['FilterPersistenceView'].loadFilterPersistenceSettings(event);">
+			<!-- Options populated dynamically -->
+		</select>
+		<button type="button" class="prsp-filters-btn-text prsp-exp-btn" id="FilterPersistenceView-SaveFilterButton" title="Save the current search + filters as a named experience" onclick="_Pict.views['FilterPersistenceView'].promptSaveFilterExperience(event)">Save</button>
+		<button type="button" class="prsp-filters-btn-text prsp-exp-btn" id="FilterPersistenceView-DeleteFilterButton" title="Delete the selected experience" onclick="_Pict.views['FilterPersistenceView'].deleteFilterPersistenceSettings(event)">Delete</button>
 	</div>
+	<span id="FilterPersistenceView-CurrentFilterNameInput-ValidationMessage" class="prsp-exp-validation"></span>
 </div>
 <!-- DefaultPackage end view template:  [FilterPersistenceView-Container] -->
 		`
@@ -97,6 +86,24 @@ class viewFilterPersistenceView extends libPictView
 		this.filterExperienceSelection = null;
 		this.filterExperienceInitialized = false;
 	}
+
+	/**
+	 * Re-assert this view's own template before rendering so a host/server template override
+	 * doesn't replace the slimmed experiences control (mirrors RecordSet-Filters).
+	 *
+	 * @param {import('pict-view').Renderable} pRenderable
+	 */
+	onBeforeRender(pRenderable)
+	{
+		if (this.pict.TemplateProvider && Array.isArray(_DEFAULT_CONFIGURATION_FilterPersistenceView.Templates))
+		{
+			for (const tmpTemplate of _DEFAULT_CONFIGURATION_FilterPersistenceView.Templates)
+			{
+				this.pict.TemplateProvider.addTemplate(tmpTemplate.Hash, tmpTemplate.Template);
+			}
+		}
+		return super.onBeforeRender(pRenderable);
+	}
 	
 
 	/**
@@ -408,6 +415,114 @@ class viewFilterPersistenceView extends libPictView
 	 * @param {function} [pCallback] - A callback function to be executed after saving the settings.
 	 * @returns {boolean} - Returns true when the settings have been saved.
 	 */
+	/** HTML-escape a value for safe display in the modal. */
+	_escapeHTML(pValue)
+	{
+		return String(pValue == null ? '' : pValue).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+	}
+
+	/** Describe a single active filter clause in plain English (e.g. "Date Created between A and B"). */
+	_describeFilterClause(pClause)
+	{
+		const tmpLabel = pClause.Label || pClause.FilterByColumn || 'Filter';
+		const tmpType = String(pClause.Type || '');
+		const tmpValues = Array.isArray(pClause.Values) ? pClause.Values.filter((v) => v !== null && v !== undefined && v !== '') : [];
+		const tmpValue = (pClause.Value !== null && pClause.Value !== undefined && pClause.Value !== '') ? pClause.Value : null;
+		if (/Range/i.test(tmpType))
+		{
+			const tmpLow = (tmpValues.length > 0) ? tmpValues[0] : (tmpValue != null ? tmpValue : '…');
+			const tmpHigh = (tmpValues.length > 1) ? tmpValues[1] : '…';
+			return `${tmpLabel} between ${tmpLow} and ${tmpHigh}`;
+		}
+		if (/Select/i.test(tmpType))
+		{
+			const tmpList = tmpValues.length ? tmpValues : (tmpValue != null ? [ tmpValue ] : []);
+			return tmpList.length ? `${tmpLabel} is ${tmpList.join(', ')}` : `${tmpLabel} is set`;
+		}
+		const tmpSingle = (tmpValue != null) ? tmpValue : (tmpValues.length ? tmpValues.join(', ') : null);
+		const tmpOp = pClause.ExactMatch ? 'is' : 'contains';
+		return (tmpSingle != null) ? `${tmpLabel} ${tmpOp} "${tmpSingle}"` : `${tmpLabel} is set`;
+	}
+
+	/**
+	 * @returns {{ summary: string, count: string }} A plain-English summary of the current
+	 * search + filter clauses, and the matched record count (from the rendered list total).
+	 */
+	_describeCurrentFilter()
+	{
+		const tmpParts = [];
+		const tmpFilterView = this.pict.views['PRSP-Filters'];
+		const tmpSearchTerm = (tmpFilterView && typeof tmpFilterView._searchTermFromURL === 'function') ? tmpFilterView._searchTermFromURL() : '';
+		if (tmpSearchTerm)
+		{
+			const tmpCfg = this.pict.PictSectionRecordSet && this.pict.PictSectionRecordSet.recordSetProviderConfigurations
+				? this.pict.PictSectionRecordSet.recordSetProviderConfigurations[this.currentRecordSet] : null;
+			const tmpFields = (tmpCfg && Array.isArray(tmpCfg.SearchFields) && tmpCfg.SearchFields.length) ? tmpCfg.SearchFields : [ 'Name' ];
+			tmpParts.push(`${tmpFields.join(' / ')} like "${tmpSearchTerm}"`);
+		}
+		const tmpClauses = (this.pict.Bundle._ActiveFilterState[this.currentRecordSet] || {}).FilterClauses || [];
+		for (const tmpClause of tmpClauses) { tmpParts.push(this._describeFilterClause(tmpClause)); }
+		const tmpSummary = tmpParts.length ? (tmpParts.join('. ') + '.') : 'No filters — matches all records.';
+		const tmpCountEl = document.getElementById('PRSP_Pagination_Description_Records_Total');
+		const tmpCount = (tmpCountEl && tmpCountEl.textContent) ? tmpCountEl.textContent.trim() : '';
+		return { summary: tmpSummary, count: tmpCount };
+	}
+
+	/**
+	 * Prompt for a name (via pict-section-modal when available) and save the current search +
+	 * filters as a named experience. The modal previews the filter in plain English and the
+	 * number of records it matches. Falls back to the generated name with no prompt if the
+	 * modal section is not registered in the host app.
+	 *
+	 * @param {Event} pEvent
+	 */
+	promptSaveFilterExperience(pEvent)
+	{
+		if (pEvent) { pEvent.preventDefault(); pEvent.stopPropagation(); }
+		if (!this.currentRecordSet || !this.currentViewContext) { return false; }
+		const tmpProvider = this.pict.providers.FilterDataProvider;
+		if (tmpProvider.filterExperienceModifiedFromURLHash)
+		{
+			this.pict.log.warn('The current filter experience was modified from the URL hash; apply or reset before saving.');
+			return false;
+		}
+		const tmpClauses = (this.pict.Bundle._ActiveFilterState[this.currentRecordSet] || {}).FilterClauses || [];
+		const tmpCurrent = this.filterExperienceSelection ? tmpProvider.getFilterExperienceByHash(this.currentRecordSet, this.currentViewContext, this.filterExperienceSelection) : null;
+		const tmpSuggested = (tmpCurrent && tmpCurrent.FilterDisplayName) || tmpProvider.generateContextualDefaultFilterName({ FilterClauses: tmpClauses }, this.currentRecordSet, this.currentViewContext);
+
+		const fSave = (pName) =>
+		{
+			tmpProvider.saveFilterMeta(this.currentRecordSet, this.currentViewContext, false, pName);
+			this.buildSelectOptionsForAvailableFilterExperiences();
+			this.pict.log.info(`Filter experience '${pName}' saved.`);
+		};
+
+		const tmpModal = this.pict.views['Pict-Section-Modal'];
+		if (!tmpModal || typeof tmpModal.show !== 'function')
+		{
+			fSave(tmpSuggested);
+			return true;
+		}
+		const tmpEscaped = this._escapeHTML(tmpSuggested);
+		const tmpDescription = this._describeCurrentFilter();
+		const tmpCountLine = tmpDescription.count
+			? `<p style="margin:0 0 0.8rem;color:var(--theme-color-text-secondary,#45505f);">Matches <strong>${this._escapeHTML(tmpDescription.count)}</strong> record${tmpDescription.count === '1' ? '' : 's'}.</p>`
+			: '';
+		tmpModal.show(
+			{
+				title: 'Save filter experience',
+				content: `<p style="margin:0 0 0.75rem;color:var(--theme-color-text-secondary,#45505f);font-size:0.9rem;line-height:1.45;">Give this filter a name to save it, then load it again any time to come back to these records, or whatever matches it down the road.</p><div style="margin-bottom:0.6rem;padding:0.6rem 0.8rem;border-radius:8px;background:var(--theme-color-background-tertiary,#eceef2);font-size:0.9rem;line-height:1.4;color:var(--theme-color-text-primary,#1f2733);">${this._escapeHTML(tmpDescription.summary)}</div>${tmpCountLine}<p style="margin-bottom:0.4rem;">Name this filter experience:</p><input type="text" id="prsp-exp-name-input" class="pict-input" style="width:100%;" value="${tmpEscaped}" autofocus>`,
+				buttons: [ { Hash: 'cancel', Label: 'Cancel' }, { Hash: 'ok', Label: 'Save', Style: 'primary' } ],
+			}).then((pChoice) =>
+			{
+				if (pChoice !== 'ok') { return; }
+				const tmpEl = document.getElementById('prsp-exp-name-input');
+				const tmpName = (tmpEl && tmpEl.value && tmpEl.value.trim()) ? tmpEl.value.trim() : tmpSuggested;
+				fSave(tmpName);
+			});
+		return true;
+	}
+
 	saveFilterPersistenceSettings(event, pCallback)
 	{
 		event.preventDefault();

package/source/views/RecordSet-Filters.js

@@ -22,24 +22,80 @@ const _DEFAULT_CONFIGURATION_SUBSET_Filter =
 	AutoSolveWithApp: false,
 	AutoSolveOrdinal: 0,
 
-	CSS: false,
+	CSS: /*css*/`
+.prsp-filters { width: 100%; }
+.prsp-filters *, .prsp-filters *::before, .prsp-filters *::after { box-sizing: border-box; }
+.prsp-filters-bar { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
+.prsp-filters-search { position: relative; flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
+.prsp-filters-search-ic { position: absolute; left: 0.75rem; display: inline-flex; align-items: center; color: var(--theme-color-text-muted, #6b7686); pointer-events: none; font-size: 0.95rem; }
+.prsp-filters-input { width: 100%; font: inherit; font-size: 0.95rem; padding: 0.5rem 0.85rem 0.5rem 2.2rem;
+	border: 1px solid var(--theme-color-border-default, #d7dce3); border-radius: 8px;
+	background: var(--theme-color-background-primary, #fff); color: var(--theme-color-text-primary, #1f2733); }
+.prsp-filters-input:focus { outline: none; border-color: var(--theme-color-brand-primary, #156dd1);
+	box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color-brand-primary, #156dd1) 16%, transparent); }
+.prsp-filters-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem; font: inherit; cursor: pointer;
+	padding: 0.45rem 0.7rem; border-radius: 8px; border: 1px solid var(--theme-color-border-default, #d7dce3);
+	background: var(--theme-color-background-primary, #fff); color: var(--theme-color-text-secondary, #45505f); }
+.prsp-filters-toggle:hover { border-color: var(--theme-color-brand-primary, #156dd1); }
+.prsp-filters.has-filters .prsp-filters-toggle { border-color: var(--theme-color-brand-primary, #156dd1); color: var(--theme-color-brand-primary, #156dd1); }
+.prsp-filters.drawer-open .prsp-filters-toggle { background: var(--theme-color-background-tertiary, #eceef2); }
+.prsp-filters-toggle-ic { display: inline-flex; align-items: center; }
+.prsp-filters-toggle-ic svg { width: 1.05em; height: 1.05em; display: block; }
+.prsp-filters-toggle-count { display: none; align-items: center; justify-content: center; min-width: 1.3em; height: 1.3em;
+	padding: 0 0.35em; border-radius: 999px; font-size: 0.74rem; font-weight: 700;
+	background: var(--theme-color-brand-primary, #156dd1); color: var(--theme-color-text-on-brand, #fff); }
+.prsp-filters.has-filters .prsp-filters-toggle-count { display: inline-flex; }
+.prsp-filters-apply { flex: 0 0 auto; font: inherit; font-weight: 650; cursor: pointer; padding: 0.5rem 1.15rem; border-radius: 8px;
+	border: 1px solid var(--theme-color-brand-primary, #156dd1); background: var(--theme-color-brand-primary, #156dd1); color: var(--theme-color-text-on-brand, #fff); }
+.prsp-filters-apply:hover { background: color-mix(in srgb, var(--theme-color-brand-primary, #156dd1) 88%, #000); }
+.prsp-filters-btn-text { font: inherit; cursor: pointer; padding: 0.4rem 0.85rem; border-radius: 8px;
+	border: 1px solid var(--theme-color-border-default, #d7dce3); background: transparent; color: var(--theme-color-text-secondary, #45505f); }
+.prsp-filters-btn-text:hover { background: var(--theme-color-background-tertiary, #eceef2); }
+
+/* Slide-out drawer (CSS grid trick: 0fr -> 1fr animates height). */
+.prsp-filters-drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.18s ease; }
+.prsp-filters.drawer-open .prsp-filters-drawer { grid-template-rows: 1fr; }
+.prsp-filters-drawer-inner { overflow: hidden; min-height: 0; }
+.prsp-filters.drawer-open .prsp-filters-drawer-inner { margin-top: 0.6rem; padding: 0.95rem 1.1rem;
+	border: 1px solid var(--theme-color-border-light, #e8ebf0); border-radius: 10px; background: var(--theme-color-background-panel, #fff); }
+.prsp-filters-add { margin: 0.4rem 0 0.2rem; }
+/* Drawer footer: filter experience on the left, Clear/Reset/Apply on the right. */
+.prsp-filters-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
+	margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--theme-color-border-light, #e8ebf0); }
+.prsp-filters-experiences { flex: 0 1 auto; min-width: 0; }
+.prsp-filters-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; }
+`,
 	CSSPriority: 500,
 
 	Templates:
 	[
 		{
+			// One coherent control: a search row (search input + a filters icon button that
+			// shows the active-filter count and toggles the drawer + a Search button), and a
+			// slide-out drawer beneath it holding the filter clauses, "add filter", the saved
+			// Filter Experiences dropdown, and Clear / Reset / Apply. Search, Apply and Enter
+			// all submit the form -> handleSearch (apply search + current filters).
 			Hash: 'PRSP-SUBSET-Filters-Template',
 			Template: /*html*/`
 	<!-- DefaultPackage pict view template: [PRSP-SUBSET-Filters-Template] -->
-	<form id="PRSP_Filter_Form" onsubmit="_Pict.views['PRSP-Filters'].handleSearch(event, '{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}'); return false;">
-		{~T:PRSP-SUBSET-Filters-Template-Input-Fieldset~}
-		<div id="PRSP_Filter_Instances">
-			{~FIV:Record~}
+	<div class="prsp-filters" id="PRSP_FilterBar">
+		<form id="PRSP_Filter_Form" class="prsp-filters-bar" onsubmit="_Pict.views['PRSP-Filters'].handleSearch(event, '{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}'); return false;">
+			{~T:PRSP-SUBSET-Filters-Template-Input-Fieldset~}
+			{~T:PRSP-SUBSET-Filters-Template-Button-Fieldset~}
+		</form>
+		<div class="prsp-filters-drawer" id="PRSP_Filter_Drawer">
+			<div class="prsp-filters-drawer-inner">
+				<div id="PRSP_Filter_Instances" class="prsp-filters-clauses">
+					{~FIV:Record~}
+				</div>
+				{~T:PRSP-SUBSET-Filters-Template-AddFilter-Fieldset~}
+				<div class="prsp-filters-footer">
+					{~T:PRSP-SUBSET-Filters-Template-ManageFilters-Fieldset~}
+					{~T:PRSP-SUBSET-Filters-Template-DrawerActions-Fieldset~}
+				</div>
+			</div>
 		</div>
-		{~T:PRSP-SUBSET-Filters-Template-Button-Fieldset~}
-		{~T:PRSP-SUBSET-Filters-Template-AddFilter-Fieldset~}
-		{~T:PRSP-SUBSET-Filters-Template-ManageFilters-Fieldset~}
-	</form>
+	</div>
 	<!-- DefaultPackage end view template:	[PRSP-SUBSET-Filters-Template] -->
 `
 		},
@@ -47,10 +103,10 @@ const _DEFAULT_CONFIGURATION_SUBSET_Filter =
 			Hash: 'PRSP-SUBSET-Filters-Template-Input-Fieldset',
 			Template: /*html*/`
 	<!-- DefaultPackage pict view template: [PRSP-SUBSET-Filters-Template-Input-Fieldset] -->
-	<fieldset>
-		<label for="search_filter">Filter:</label>
-		<input id="search_filter" type="text" name="filter">
-	</fieldset>
+	<span class="prsp-filters-search">
+		<span class="prsp-filters-search-ic">{~I:Search~}</span>
+		<input id="search_filter" class="prsp-filters-input" type="text" name="filter" placeholder="Search…" autocomplete="off" aria-label="Search">
+	</span>
 	<!-- DefaultPackage end view template:	[PRSP-SUBSET-Filters-Template-Input-Fieldset] -->
 `
 		},
@@ -58,11 +114,11 @@ const _DEFAULT_CONFIGURATION_SUBSET_Filter =
 			Hash: 'PRSP-SUBSET-Filters-Template-Button-Fieldset',
 			Template: /*html*/`
 	<!-- DefaultPackage pict view template: [PRSP-SUBSET-Filters-Template-Button-Fieldset] -->
-	<fieldset>
-		<button type="button" id="PRSP_Filter_Button_Clear" title="Clear all filters to a blank state" onclick="_Pict.views['PRSP-Filters'].handleClear(event, '{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}')">Clear</button>
-		<button type="button" id="PRSP_Filter_Button_Reset" title="Reset all filters to the last saved/defaulted state" onclick="_Pict.views['PRSP-Filters'].handleReset(event, '{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}')">Reset</button>
-		<button type="submit" id="PRSP_Filter_Button_Apply">Apply</button>
-	</fieldset>
+	<button type="button" class="prsp-filters-toggle" id="PRSP_Filter_Toggle" title="Filters" aria-label="Filters" onclick="_Pict.views['PRSP-Filters'].toggleFilterDrawer()">
+		<span class="prsp-filters-toggle-ic" id="PRSP_Filter_Icon"></span>
+		<span class="prsp-filters-toggle-count" id="PRSP_Filter_Count"></span>
+	</button>
+	<button type="submit" class="prsp-filters-apply prsp-filters-apply-search" id="PRSP_Filter_Button_Apply">Search</button>
 	<!-- DefaultPackage end view template:	[PRSP-SUBSET-Filters-Template-Button-Fieldset] -->
 `
 		},
@@ -70,21 +126,32 @@ const _DEFAULT_CONFIGURATION_SUBSET_Filter =
 			Hash: 'PRSP-SUBSET-Filters-Template-ManageFilters-Fieldset',
 			Template: /*html*/`
 	<!-- DefaultPackage pict view template: [PRSP-SUBSET-Filters-Template-ManageFilters-Fieldset] -->
-	<fieldset>
-		<button type="button" id="PRSP_Filter_Button_Manage" title="Manage saved filter experiences" onclick="_Pict.views['PRSP-Filters'].handleManage(event, '{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}')">Manage Filter Experience</button>
+	<div class="prsp-filters-experiences">
 		<div id="FilterPersistenceView-Container"></div>
-	</fieldset>
+	</div>
 	<!-- DefaultPackage end view template:	[PRSP-SUBSET-Filters-Template-ManageFilters-Fieldset] -->
+`
+		},
+		{
+			Hash: 'PRSP-SUBSET-Filters-Template-DrawerActions-Fieldset',
+			Template: /*html*/`
+	<!-- DefaultPackage pict view template: [PRSP-SUBSET-Filters-Template-DrawerActions-Fieldset] -->
+	<div class="prsp-filters-actions">
+		<button type="button" class="prsp-filters-btn-text" id="PRSP_Filter_Button_Clear" title="Clear all filters to a blank state" onclick="_Pict.views['PRSP-Filters'].handleClear(event, '{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}')">Clear</button>
+		<button type="button" class="prsp-filters-btn-text" id="PRSP_Filter_Button_Reset" title="Reset all filters to the last saved/defaulted state" onclick="_Pict.views['PRSP-Filters'].handleReset(event, '{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}')">Reset</button>
+		<button type="button" class="prsp-filters-apply" id="PRSP_Filter_Button_ApplyDrawer" onclick="_Pict.views['PRSP-Filters'].handleSearch(event, '{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}')">Apply</button>
+	</div>
+	<!-- DefaultPackage end view template:	[PRSP-SUBSET-Filters-Template-DrawerActions-Fieldset] -->
 `
 		},
 		{
 			Hash: 'PRSP-SUBSET-Filters-Template-AddFilter-Fieldset',
 			Template: /*html*/`
 	<!-- DefaultPackage pict view template: [PRSP-SUBSET-Filters-Template-AddFilter-Fieldset] -->
-	<fieldset>
-		<button type="button" id="PRSP_Filter_Button_Add" title="Add a new filter clause" onclick="_Pict.views['PRSP-Filters'].selectFilterToAdd(event, '{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}')">+</button>
+	<div class="prsp-filters-add">
+		<button type="button" class="prsp-filters-btn-text" id="PRSP_Filter_Button_Add" title="Add a new filter clause" onclick="_Pict.views['PRSP-Filters'].selectFilterToAdd(event, '{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}')">+ Add filter</button>
 		<div id="PRSP-SUBSET-Filters-Template-AddFilter-Dropdown"></div>
-	</fieldset>
+	</div>
 	<!-- DefaultPackage end view template:	[PRSP-SUBSET-Filters-Template-AddFilter-Fieldset] -->
 `
 		},
@@ -236,6 +303,10 @@ class ViewRecordSetSUBSETFilters extends libPictView
 		this.newFilterSearchApplied = false;
 		this.addFilterCallback = null;
 		this.removeFilterCallback = null;
+		// Consolidated filter control state: drawer open/closed, and the last-applied search
+		// string per record set (so a search no longer clears the search box on re-render).
+		this._drawerOpen = false;
+		this._searchString = {};
 		// Render-epoch counter, bumped any time the filter list is re-rendered
 		// or a new filter experience is applied. Deferred filter post-render
 		// work (e.g. the setTimeout-scheduled transaction drain in
@@ -348,6 +419,67 @@ class ViewRecordSetSUBSETFilters extends libPictView
 		return super.onMarshalToView();
 	}
 
+	/** Toggle the slide-out filter drawer beneath the search bar. */
+	toggleFilterDrawer()
+	{
+		this._drawerOpen = !this._drawerOpen;
+		const tmpBar = document.getElementById('PRSP_FilterBar');
+		if (tmpBar) { tmpBar.classList.toggle('drawer-open', this._drawerOpen); }
+		return this._drawerOpen;
+	}
+
+	/**
+	 * The current search term, read back from the active route URL (the source of truth) so
+	 * the search box stays populated across re-renders and reflects bookmarked/filtered URLs.
+	 * performSearch builds `.../FilteredTo/FBVOR~<field>~LK~<encoded %term%>~...` from the
+	 * SearchFields, so the term is the first LK value in the FilteredTo segment.
+	 *
+	 * @return {string}
+	 */
+	_searchTermFromURL()
+	{
+		const tmpCurrent = this.pict.providers.PictRouter && this.pict.providers.PictRouter.router && this.pict.providers.PictRouter.router.current
+			? this.pict.providers.PictRouter.router.current[0] : null;
+		const tmpUrl = (tmpCurrent && (tmpCurrent.url || tmpCurrent.hashString)) || '';
+		if (tmpUrl.indexOf('FilteredTo/') < 0) { return ''; }
+		const tmpFilteredPart = (tmpUrl.split('FilteredTo/')[1] || '').split('/FilterExperience')[0];
+		const tmpMatch = tmpFilteredPart.match(/LK~([^~]+)/);
+		if (!tmpMatch) { return ''; }
+		let tmpValue = tmpMatch[1];
+		try { tmpValue = decodeURIComponent(tmpValue); } catch (pError) { /* leave raw */ }
+		return tmpValue.replace(/^%+|%+$/g, '');
+	}
+
+	/** The number of active (structured) filter clauses for a record set. */
+	getActiveFilterCount(pRecordSet)
+	{
+		const tmpClauses = this.pict && this.pict.Bundle && this.pict.Bundle._ActiveFilterState && this.pict.Bundle._ActiveFilterState[pRecordSet]
+			? this.pict.Bundle._ActiveFilterState[pRecordSet].FilterClauses : null;
+		return Array.isArray(tmpClauses) ? tmpClauses.length : 0;
+	}
+
+	/**
+	 * Repaint the filter-bar chrome after a (re)render: the filters icon (outline vs filled
+	 * + count badge), the active-filter highlight, the persisted drawer-open state, and the
+	 * search input value (so applying a search no longer clears the search box).
+	 *
+	 * @param {string} pRecordSet
+	 */
+	_paintFilterControls(pRecordSet)
+	{
+		const tmpBar = document.getElementById('PRSP_FilterBar');
+		if (!tmpBar) { return; }
+		const tmpCount = this.getActiveFilterCount(pRecordSet);
+		tmpBar.classList.toggle('has-filters', tmpCount > 0);
+		tmpBar.classList.toggle('drawer-open', !!this._drawerOpen);
+		const tmpIcon = document.getElementById('PRSP_Filter_Icon');
+		if (tmpIcon) { tmpIcon.innerHTML = (tmpCount > 0) ? ViewRecordSetSUBSETFilters.FilterIconFilled : ViewRecordSetSUBSETFilters.FilterIconOutline; }
+		const tmpCountEl = document.getElementById('PRSP_Filter_Count');
+		if (tmpCountEl) { tmpCountEl.textContent = (tmpCount > 0) ? String(tmpCount) : ''; }
+		const tmpInput = document.getElementById('search_filter');
+		if (tmpInput) { tmpInput.value = this._searchTermFromURL(); }
+	}
+
 	/**
 	 * @param {Event} pEvent - The DOM event that triggered the search
 	 * @param {string} pRecordSet - The record set being filtered
@@ -355,12 +487,12 @@ class ViewRecordSetSUBSETFilters extends libPictView
 	 */
 	handleSearch(pEvent, pRecordSet, pViewContext)
 	{
-		pEvent.preventDefault(); // don't submit the form
-		pEvent.stopPropagation();
+		if (pEvent) { pEvent.preventDefault(); pEvent.stopPropagation(); } // don't submit the form
 		this.newFilterSearchApplied = true;
-		//FIXME: store this filter string in the bundle so we can re-apply it on re-render
 		const tmpSearchString = this.pict.ContentAssignment.readContent(`input[name="filter"]`);
-		this.performSearch(pRecordSet, pViewContext, tmpSearchString ? String(tmpSearchString) : '');
+		// Remember the applied search so the re-render below doesn't blank the search box.
+		this._searchString[pRecordSet] = tmpSearchString ? String(tmpSearchString) : '';
+		this.performSearch(pRecordSet, pViewContext, this._searchString[pRecordSet]);
 	}
 
 	/**
@@ -433,6 +565,7 @@ class ViewRecordSetSUBSETFilters extends libPictView
 		if (pEvent) pEvent.preventDefault();
 		this.bumpRenderEpoch();
 		this.pict.ContentAssignment.assignContent('input[name="filter"]', '');
+		this._searchString[pRecordSet] = '';
 		this.pict.Bundle._ActiveFilterState[pRecordSet].FilterClauses = [];
 		this.pict.providers.FilterDataProvider.removeDefaultFilterExperience(pRecordSet, pViewContext);
 		this.performSearch(pRecordSet, pViewContext, '');
@@ -538,6 +671,44 @@ class ViewRecordSetSUBSETFilters extends libPictView
 		return Object.values(tmpRecordsetProvider.getFilterSchema()).flatMap((pFilter) => pFilter.AvailableClauses || []);
 	}
 
+	/**
+	 * Lifecycle hook that triggers before the view is rendered. The consolidated filter
+	 * control's markup is owned by this module now, so re-assert its templates here — this
+	 * neutralizes any host/server template override that previously replaced the filter UI,
+	 * letting apps brand the control via CSS (theme tokens) rather than by swapping markup.
+	 *
+	 * @param {import('pict-view').Renderable} pRenderable - The renderable about to be rendered.
+	 */
+	onBeforeRender(pRenderable)
+	{
+		// Re-assert ONLY the consolidated-control chrome (the wrapper, search row, filter toggle +
+		// Search button, the Filter Experiences container, and Clear/Reset/Apply) so the module owns
+		// that markup. Deliberately NOT the add-filter dropdown or per-clause templates: host apps
+		// (e.g. Headlight) layer their own styled add-filter popover and clause UI on top, and
+		// re-asserting those clobbers them — re-exposing bare native <select> dropdowns and a dead
+		// remove button. Those host overrides register at init and must survive each re-render.
+		const tmpChromeTemplateHashes =
+		[
+			'PRSP-SUBSET-Filters-Template',
+			'PRSP-SUBSET-Filters-Template-Input-Fieldset',
+			'PRSP-SUBSET-Filters-Template-Button-Fieldset',
+			'PRSP-SUBSET-Filters-Template-ManageFilters-Fieldset',
+			'PRSP-SUBSET-Filters-Template-DrawerActions-Fieldset'
+		];
+		if (this.pict.TemplateProvider && Array.isArray(_DEFAULT_CONFIGURATION_SUBSET_Filter.Templates))
+		{
+			for (const tmpTemplateHash of tmpChromeTemplateHashes)
+			{
+				const tmpTemplate = _DEFAULT_CONFIGURATION_SUBSET_Filter.Templates.find((pTemplate) => pTemplate.Hash === tmpTemplateHash);
+				if (tmpTemplate)
+				{
+					this.pict.TemplateProvider.addTemplate(tmpTemplate.Hash, tmpTemplate.Template);
+				}
+			}
+		}
+		return super.onBeforeRender(pRenderable);
+	}
+
 	/**
 	 * Lifecycle hook that triggers after the view is rendered.
 	 * @param {import('pict-view').Renderable} pRenderable - The renderable that was rendered.
@@ -584,6 +755,32 @@ class ViewRecordSetSUBSETFilters extends libPictView
 			this.pict.providers.FilterDataProvider.applyExpectedFilterExperience(tmpRecordSet, tmpViewContext);
 		}
 
+		// Consolidated filter control: whenever the search row is in the DOM, refresh the
+		// search box, the filters icon/count + drawer state, and surface the saved Filter
+		// Experiences dropdown in the drawer. (Guarded on the DOM element rather than the
+		// renderable hash because the list embeds this view via {~FV:~}.)
+		if (document.getElementById('PRSP_Filter_Icon'))
+		{
+			let tmpFilterRecordSet = tmpRecordSet;
+			let tmpFilterViewContext = tmpViewContext || 'List';
+			if (!tmpFilterRecordSet && this.pict.Bundle && this.pict.Bundle._ActiveFilterState)
+			{
+				tmpFilterRecordSet = Object.keys(this.pict.Bundle._ActiveFilterState)[0];
+			}
+			if (tmpFilterRecordSet)
+			{
+				this._paintFilterControls(tmpFilterRecordSet);
+				// (Re)render the experiences dropdown only when its container is empty — i.e. on
+				// a fresh filter render — not on every sub-render (add-filter dropdown, etc.).
+				const tmpExpContainer = document.getElementById('FilterPersistenceView-Container');
+				if (this.pict.views.FilterPersistenceView && tmpExpContainer && !tmpExpContainer.querySelector('#FilterPersistenceView-Content'))
+				{
+					this.pict.views.FilterPersistenceView.initializeFilterPersistenceViewUI(tmpFilterRecordSet, tmpFilterViewContext);
+				}
+			}
+			if (this.pict.CSSMap && typeof this.pict.CSSMap.injectCSS === 'function') { this.pict.CSSMap.injectCSS(); }
+		}
+
 		return res;
 	}
 
@@ -730,6 +927,11 @@ class ViewRecordSetSUBSETFilters extends libPictView
 	};
 }
 
+// Funnel icons for the filters toggle — outline when no filters are set, filled when set.
+// currentColor so they follow the (themeable) toggle text color.
+ViewRecordSetSUBSETFilters.FilterIconOutline = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 5.5h17l-6.6 7.8v4.7l-3.8 2v-6.7z"/></svg>';
+ViewRecordSetSUBSETFilters.FilterIconFilled = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3.5 5.5h17l-6.6 7.8v4.7l-3.8 2v-6.7z"/></svg>';
+
 module.exports = ViewRecordSetSUBSETFilters;
 
 module.exports.default_configuration = _DEFAULT_CONFIGURATION_SUBSET_Filter;