feat(model-picker): sortable column headers — Model, Price, Context

- Add .ab-mp-col-headers bar between search and list with three
  clickable column headers: Model (sorts by name), Price in/out
  (sorts by input_price_per_m), Context (sorts by context_length)
- Track sortState at module level so preference persists across
  open/close; clicking same column toggles asc/desc
- Deprecated models always sink to bottom regardless of sort column
- Add CSS for .ab-mp-col-headers, .ab-mp-col-header, .ab-mp-sort-arrow,
  .ab-mp-col-active; widths mirror existing row flex layout so columns
  visually align with data

Bumps version 0.13.1 → 0.13.2

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to PRAutoBlogger will be documented in this file.
 Format follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project uses [Semantic Versioning](https://semver.org/).
 
+## [0.13.2] - 2026-04-24
+
+### Changed
+- Model picker: added sortable column headers (Model, Price, Context); clicking a header sorts the list ascending/descending; active column highlighted with sort arrow; sort preference persists while the picker is open.
+
 ## [0.12.3] — 2026-04-24
 ## [0.13.1] - 2026-04-24
 

assets/css/model-picker.css

@@ -205,3 +205,58 @@
 	.ab-mp-row { padding: 10px 14px; }
 	.ab-mp-row-meta { gap: 8px; }
 }
+
+/* ── Column headers (sortable) ──────────────────────────────────────── */
+.ab-mp-col-headers {
+	display: flex; align-items: center; justify-content: space-between;
+	padding: 5px 20px;
+	border-bottom: 1px solid var(--ab-border, #e2e8f0);
+	background: var(--ab-bg, #f8fafc);
+	gap: 12px; /* must match .ab-mp-row gap */
+}
+
+.ab-mp-col-headers-meta {
+	display: flex; align-items: center;
+	gap: 16px; /* must match .ab-mp-row-meta gap */
+	flex-shrink: 0;
+}
+
+.ab-mp-col-header {
+	display: inline-flex; align-items: center;
+	font-size: 10px; font-weight: 700; text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--ab-text-muted, #64748b);
+	cursor: pointer; user-select: none;
+	background: none; border: none; padding: 3px 0;
+	white-space: nowrap; line-height: 1.2;
+	transition: color 0.1s ease;
+}
+.ab-mp-col-header:hover {
+	color: var(--ab-text, #1e293b);
+}
+.ab-mp-col-header.ab-mp-col-active {
+	color: var(--ab-primary, #4f46e5);
+}
+
+/* "Model" header spans the left flex-1 area */
+.ab-mp-col-model {
+	flex: 1; min-width: 0;
+}
+
+/* "Price" header width matches .ab-mp-price */
+.ab-mp-col-price {
+	font-variant-numeric: tabular-nums;
+}
+
+/* "Context" header width matches .ab-mp-ctx (min-width 36px + padding) */
+.ab-mp-col-ctx {
+	min-width: 48px; justify-content: center; text-align: center;
+}
+
+.ab-mp-sort-arrow {
+	font-size: 9px; opacity: 0.5;
+	transition: opacity 0.1s ease;
+}
+.ab-mp-col-header.ab-mp-col-active .ab-mp-sort-arrow {
+	opacity: 1;
+}

assets/js/model-picker.js

@@ -1,9 +1,10 @@
 /**
  * Model picker popup for PRAutoBlogger admin settings.
  *
- * Fetches the OpenRouter model registry via AJAX, then renders a searchable
- * popup overlay when the user clicks a model-select trigger button. Shows
- * name, provider, input/output cost, and context window per model.
+ * Fetches the OpenRouter model registry via AJAX, then renders a searchable,
+ * sortable popup overlay when the user clicks a model-select trigger button.
+ * Columns: Model, Price (in / out per 1M tokens), Context window.
+ * Each column header is clickable to sort ascending/descending.
  *
  * @see admin/class-admin-page.php — Renders model_select fields and localizes config.
  * @see services/class-open-router-model-registry.php — Server-side registry source.
@@ -11,54 +12,57 @@
 (function ($) {
 	'use strict';
 
-	var config = window.prautobloggerAdmin || {};
-	var cachedModels = null;
+	var config          = window.prautobloggerAdmin || {};
+	var cachedModels    = null;
 	var fetchInProgress = null;
 
+	// Persists across open/close so the user's preferred sort is remembered.
+	var sortState = { col: 'name', dir: 'asc' };
+
 	/**
 	 * Fetch models from the server (cached after first call).
 	 *
 	 * @param {string} capability Filter capability (e.g. 'text→text').
 	 * @return {jQuery.Deferred} Resolves with model array.
 	 */
-	function fetchModels(capability) {
+	function fetchModels( capability ) {
 		// Image models are embedded in the page config — no AJAX needed.
-		if (capability === 'image_generation') {
+		if ( capability === 'image_generation' ) {
 			var imgModels = config.imageModels || [];
-			return $.Deferred().resolve(imgModels);
+			return $.Deferred().resolve( imgModels );
 		}
 
-		if (cachedModels) {
-			return $.Deferred().resolve(filterModels(cachedModels, capability));
+		if ( cachedModels ) {
+			return $.Deferred().resolve( filterModels( cachedModels, capability ) );
 		}
 
-		if (fetchInProgress) {
-			return fetchInProgress.then(function () {
-				return filterModels(cachedModels, capability);
-			});
+		if ( fetchInProgress ) {
+			return fetchInProgress.then( function () {
+				return filterModels( cachedModels, capability );
+			} );
 		}
 
-		fetchInProgress = $.ajax({
-			url: config.ajaxUrl,
+		fetchInProgress = $.ajax( {
+			url:    config.ajaxUrl,
 			method: 'POST',
 			data: {
 				action: 'prautoblogger_get_models',
-				nonce: config.modelsNonce
+				nonce:  config.modelsNonce
 			},
 			timeout: 15000
-		}).then(function (response) {
+		} ).then( function ( response ) {
 			fetchInProgress = null;
-			if (response.success && Array.isArray(response.data)) {
+			if ( response.success && Array.isArray( response.data ) ) {
 				cachedModels = response.data;
-				return filterModels(cachedModels, capability);
+				return filterModels( cachedModels, capability );
 			}
 			cachedModels = [];
 			return [];
 		}, function () {
 			fetchInProgress = null;
-			cachedModels = [];
+			cachedModels    = [];
 			return [];
-		});
+		} );
 
 		return fetchInProgress;
 	}
@@ -70,11 +74,48 @@
 	 * @param {string} capability Capability string to match.
 	 * @return {Array} Filtered models.
 	 */
-	function filterModels(models, capability) {
-		if (!capability) return models;
-		return models.filter(function (m) {
-			return m.capabilities && m.capabilities.indexOf(capability) !== -1;
-		});
+	function filterModels( models, capability ) {
+		if ( ! capability ) return models;
+		return models.filter( function ( m ) {
+			return m.capabilities && m.capabilities.indexOf( capability ) !== -1;
+		} );
+	}
+
+	/**
+	 * Sort a model array according to the current sortState.
+	 * Deprecated models always sink to the bottom regardless of column.
+	 *
+	 * @param {Array} arr Model array to sort (not mutated — returns a new array).
+	 * @return {Array} Sorted copy.
+	 */
+	function applySort( arr ) {
+		var col = sortState.col;
+		var dir = sortState.dir;
+
+		return arr.slice().sort( function ( a, b ) {
+			// Deprecated always last.
+			if ( a.deprecated !== b.deprecated ) {
+				return a.deprecated ? 1 : -1;
+			}
+
+			var valA, valB;
+
+			if ( col === 'price' ) {
+				valA = a.input_price_per_m || 0;
+				valB = b.input_price_per_m || 0;
+			} else if ( col === 'context' ) {
+				valA = a.context_length || 0;
+				valB = b.context_length || 0;
+			} else {
+				// Default: sort by model name.
+				valA = ( a.name || '' ).toLowerCase();
+				valB = ( b.name || '' ).toLowerCase();
+			}
+
+			if ( valA < valB ) return dir === 'asc' ? -1 : 1;
+			if ( valA > valB ) return dir === 'asc' ? 1  : -1;
+			return 0;
+		} );
 	}
 
 	/**
@@ -83,11 +124,11 @@
 	 * @param {number} price Price per 1M tokens.
 	 * @return {string} Formatted string like "$0.25" or "Free".
 	 */
-	function formatPrice(price) {
-		if (!price || price <= 0) return 'Free';
-		if (price < 0.01) return '$' + price.toFixed(4);
-		if (price < 1) return '$' + price.toFixed(2);
-		return '$' + price.toFixed(2);
+	function formatPrice( price ) {
+		if ( ! price || price <= 0 ) return 'Free';
+		if ( price < 0.01 )         return '$' + price.toFixed( 4 );
+		if ( price < 1 )            return '$' + price.toFixed( 2 );
+		return '$' + price.toFixed( 2 );
 	}
 
 	/**
@@ -96,10 +137,10 @@
 	 * @param {number} ctx Context length in tokens.
 	 * @return {string} Formatted string like "128K" or "1M".
 	 */
-	function formatContext(ctx) {
-		if (!ctx) return '—';
-		if (ctx >= 1000000) return (ctx / 1000000).toFixed(0) + 'M';
-		if (ctx >= 1000) return Math.round(ctx / 1000) + 'K';
+	function formatContext( ctx ) {
+		if ( ! ctx )          return '—';
+		if ( ctx >= 1000000 ) return ( ctx / 1000000 ).toFixed( 0 ) + 'M';
+		if ( ctx >= 1000 )    return Math.round( ctx / 1000 ) + 'K';
 		return ctx.toString();
 	}
 
@@ -109,27 +150,29 @@
 	 * @param {Object} model Normalized model record.
 	 * @return {string} HTML string.
 	 */
-	function renderModelRow(model) {
-		var deprecated = model.deprecated ? ' ab-mp-deprecated' : '';
+	function renderModelRow( model ) {
+		var deprecated   = model.deprecated ? ' ab-mp-deprecated' : '';
 		var isImageModel = model.cost_per_image !== undefined && model.cost_per_image > 0;
 		var priceHtml, priceTitle, metaRight;
 
-		if (isImageModel) {
-			priceHtml  = '$' + model.cost_per_image.toFixed(4) + '/image';
+		if ( isImageModel ) {
+			priceHtml  = '$' + model.cost_per_image.toFixed( 4 ) + '/image';
 			priceTitle = 'Cost per generated image';
-			metaRight  = model.description ? '<span class="ab-mp-ctx" title="Details">' + escHtml(model.description) + '</span>' : '';
+			metaRight  = model.description
+				? '<span class="ab-mp-ctx" title="Details">' + escHtml( model.description ) + '</span>'
+				: '';
 		} else {
-			priceHtml  = formatPrice(model.input_price_per_m) + ' / ' + formatPrice(model.output_price_per_m);
+			priceHtml  = formatPrice( model.input_price_per_m ) + ' / ' + formatPrice( model.output_price_per_m );
 			priceTitle = 'Input / Output per 1M tokens';
-			metaRight  = '<span class="ab-mp-ctx" title="Context window">' + formatContext(model.context_length) + '</span>';
+			metaRight  = '<span class="ab-mp-ctx" title="Context window">' + formatContext( model.context_length ) + '</span>';
 		}
 
 		return (
-			'<div class="ab-mp-row' + deprecated + '" data-model-id="' + escAttr(model.id) + '">' +
+			'<div class="ab-mp-row' + deprecated + '" data-model-id="' + escAttr( model.id ) + '">' +
 				'<div class="ab-mp-row-main">' +
-					'<span class="ab-mp-name">' + escHtml(model.name) + '</span>' +
-					'<span class="ab-mp-provider">' + escHtml(model.provider) + '</span>' +
-					(model.deprecated ? '<span class="ab-mp-dep-badge">deprecated</span>' : '') +
+					'<span class="ab-mp-name">' + escHtml( model.name ) + '</span>' +
+					'<span class="ab-mp-provider">' + escHtml( model.provider ) + '</span>' +
+					( model.deprecated ? '<span class="ab-mp-dep-badge">deprecated</span>' : '' ) +
 				'</div>' +
 				'<div class="ab-mp-row-meta">' +
 					'<span class="ab-mp-price" title="' + priceTitle + '">' + priceHtml + '</span>' +
@@ -140,14 +183,14 @@
 	}
 
 	/** Minimal HTML escaping for display. */
-	function escHtml(str) {
-		if (!str) return '';
-		return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+	function escHtml( str ) {
+		if ( ! str ) return '';
+		return str.replace( /&/g, '&amp;' ).replace( /</g, '&lt;' ).replace( />/g, '&gt;' );
 	}
 
 	/** Escape a string for use in an HTML attribute. */
-	function escAttr(str) {
-		return escHtml(str).replace(/"/g, '&quot;');
+	function escAttr( str ) {
+		return escHtml( str ).replace( /"/g, '&quot;' );
 	}
 
 	/**
@@ -155,16 +198,16 @@
 	 *
 	 * @param {jQuery} $trigger The .ab-mp-trigger button that was clicked.
 	 */
-	function openPicker($trigger) {
-		var fieldId = $trigger.data('field-id');
-		var capability = $trigger.data('capability') || '';
+	function openPicker( $trigger ) {
+		var fieldId    = $trigger.data( 'field-id' );
+		var capability = $trigger.data( 'capability' ) || '';
 
-		// Build overlay + popup structure.
 		var isImageCap = capability === 'image_generation';
 		var priceLabel = isImageCap ? 'Cost per generated image' : 'Prices per 1M tokens (in / out)';
 
-		var $overlay = $('<div class="ab-mp-overlay"></div>');
-		var $popup = $(
+		// ── Build overlay + popup ───────────────────────────────────────
+		var $overlay = $( '<div class="ab-mp-overlay"></div>' );
+		var $popup   = $(
 			'<div class="ab-mp-popup">' +
 				'<div class="ab-mp-header">' +
 					'<span class="ab-mp-title">Select Model</span>' +
@@ -173,6 +216,13 @@
 				'<div class="ab-mp-search-wrap">' +
 					'<input type="text" class="ab-mp-search" placeholder="Search models…" autocomplete="off" />' +
 				'</div>' +
+				'<div class="ab-mp-col-headers">' +
+					'<button type="button" class="ab-mp-col-header ab-mp-col-model" data-col="name">Model <span class="ab-mp-sort-arrow"></span></button>' +
+					'<div class="ab-mp-col-headers-meta">' +
+						'<button type="button" class="ab-mp-col-header ab-mp-col-price" data-col="price">Price (in / out) <span class="ab-mp-sort-arrow"></span></button>' +
+						'<button type="button" class="ab-mp-col-header ab-mp-col-ctx" data-col="context">Context <span class="ab-mp-sort-arrow"></span></button>' +
+					'</div>' +
+				'</div>' +
 				'<div class="ab-mp-list"><div class="ab-mp-loading">Loading models…</div></div>' +
 				'<div class="ab-mp-footer">' +
 					'<span class="ab-mp-count"></span>' +
@@ -181,105 +231,132 @@
 			'</div>'
 		);
 
-		$overlay.append($popup);
-		$('body').append($overlay);
+		$overlay.append( $popup );
+		$( 'body' ).append( $overlay );
 
-		var $search = $popup.find('.ab-mp-search');
-		var $list = $popup.find('.ab-mp-list');
-		var $count = $popup.find('.ab-mp-count');
-		var allModels = [];
+		var $search      = $popup.find( '.ab-mp-search' );
+		var $list        = $popup.find( '.ab-mp-list' );
+		var $count       = $popup.find( '.ab-mp-count' );
+		var $colHeaders  = $popup.find( '.ab-mp-col-headers' );
+		var allModels    = [];
+		var currentQuery = '';
 
 		// Focus search after render.
-		setTimeout(function () { $search.focus(); }, 50);
+		setTimeout( function () { $search.focus(); }, 50 );
 
-		// Fetch and render model list.
-		fetchModels(capability).then(function (models) {
-			allModels = models;
-			renderList(models, '');
-		});
-
-		/** Render filtered model list. */
-		function renderList(models, query) {
-			var filtered = models;
-			if (query) {
-				var q = query.toLowerCase();
-				filtered = models.filter(function (m) {
-					return (m.name && m.name.toLowerCase().indexOf(q) !== -1) ||
-						(m.id && m.id.toLowerCase().indexOf(q) !== -1) ||
-						(m.provider && m.provider.toLowerCase().indexOf(q) !== -1);
-				});
-			}
-
-			// Sort: non-deprecated first, then by provider + name.
-			filtered.sort(function (a, b) {
-				if (a.deprecated !== b.deprecated) return a.deprecated ? 1 : -1;
-				var pa = (a.provider || '').toLowerCase();
-				var pb = (b.provider || '').toLowerCase();
-				if (pa !== pb) return pa < pb ? -1 : 1;
-				return (a.name || '').toLowerCase().localeCompare((b.name || '').toLowerCase());
-			});
-
-			if (filtered.length === 0) {
-				$list.html('<div class="ab-mp-empty">No models found.</div>');
-			} else {
-				var html = '';
-				for (var i = 0; i < filtered.length; i++) {
-					html += renderModelRow(filtered[i]);
+		// ── Sort header indicators ──────────────────────────────────────
+		/** Update active-column highlight and sort arrow glyphs. */
+		function updateSortHeaders() {
+			$colHeaders.find( '.ab-mp-col-header' ).each( function () {
+				var col    = $( this ).data( 'col' );
+				var $arrow = $( this ).find( '.ab-mp-sort-arrow' );
+				if ( col === sortState.col ) {
+					$( this ).addClass( 'ab-mp-col-active' );
+					$arrow.text( sortState.dir === 'asc' ? ' ▲' : ' ▼' );
+				} else {
+					$( this ).removeClass( 'ab-mp-col-active' );
+					$arrow.text( ' ⇅' );
 				}
-				$list.html(html);
-			}
-			$count.text(filtered.length + ' model' + (filtered.length !== 1 ? 's' : ''));
+			} );
 		}
 
-		// Search input handler (debounced).
+		// ── Render ──────────────────────────────────────────────────────
+		/** Render filtered + sorted model list. */
+		function renderList( models, query ) {
+			var filtered = models;
+			if ( query ) {
+				var q = query.toLowerCase();
+				filtered = models.filter( function ( m ) {
+					return ( m.name     && m.name.toLowerCase().indexOf( q )     !== -1 ) ||
+					       ( m.id       && m.id.toLowerCase().indexOf( q )       !== -1 ) ||
+					       ( m.provider && m.provider.toLowerCase().indexOf( q ) !== -1 );
+				} );
+			}
+
+			filtered = applySort( filtered );
+
+			if ( filtered.length === 0 ) {
+				$list.html( '<div class="ab-mp-empty">No models found.</div>' );
+			} else {
+				var html = '';
+				for ( var i = 0; i < filtered.length; i++ ) {
+					html += renderModelRow( filtered[ i ] );
+				}
+				$list.html( html );
+			}
+			$count.text( filtered.length + ' model' + ( filtered.length !== 1 ? 's' : '' ) );
+			updateSortHeaders();
+		}
+
+		// Initial render after data loads.
+		fetchModels( capability ).then( function ( models ) {
+			allModels = models;
+			renderList( allModels, currentQuery );
+		} );
+
+		// ── Column header sort clicks ───────────────────────────────────
+		$colHeaders.on( 'click', '.ab-mp-col-header', function () {
+			var col = $( this ).data( 'col' );
+			if ( sortState.col === col ) {
+				sortState.dir = sortState.dir === 'asc' ? 'desc' : 'asc';
+			} else {
+				sortState.col = col;
+				sortState.dir = 'asc';
+			}
+			renderList( allModels, currentQuery );
+		} );
+
+		// ── Search (debounced) ──────────────────────────────────────────
 		var searchTimer = null;
-		$search.on('input', function () {
-			var q = $(this).val();
-			clearTimeout(searchTimer);
-			searchTimer = setTimeout(function () {
-				renderList(allModels, q);
-			}, 150);
-		});
+		$search.on( 'input', function () {
+			currentQuery = $( this ).val();
+			clearTimeout( searchTimer );
+			searchTimer = setTimeout( function () {
+				renderList( allModels, currentQuery );
+			}, 150 );
+		} );
 
-		// Select a model.
-		$list.on('click', '.ab-mp-row', function () {
-			var id = $(this).data('model-id');
-			var model = allModels.find(function (m) { return m.id === id; });
-			if (!model) return;
+		// ── Select a model ──────────────────────────────────────────────
+		$list.on( 'click', '.ab-mp-row', function () {
+			var id    = $( this ).data( 'model-id' );
+			var model = null;
+			for ( var i = 0; i < allModels.length; i++ ) {
+				if ( allModels[ i ].id === id ) { model = allModels[ i ]; break; }
+			}
+			if ( ! model ) return;
 
-			// Update hidden input + display.
-			$('#' + fieldId).val(model.id);
-			$trigger.find('.ab-mp-display-name').text(model.name || model.id);
+			$( '#' + fieldId ).val( model.id );
+			$trigger.find( '.ab-mp-display-name' ).text( model.name || model.id );
 
 			var isImageModel = model.cost_per_image !== undefined && model.cost_per_image > 0;
-			var priceText = isImageModel
-				? '$' + model.cost_per_image.toFixed(4) + '/image'
-				: formatPrice(model.input_price_per_m) + ' / ' + formatPrice(model.output_price_per_m);
-			$trigger.find('.ab-mp-display-price').text(priceText);
+			var priceText    = isImageModel
+				? '$' + model.cost_per_image.toFixed( 4 ) + '/image'
+				: formatPrice( model.input_price_per_m ) + ' / ' + formatPrice( model.output_price_per_m );
+			$trigger.find( '.ab-mp-display-price' ).text( priceText );
 			closePicker();
-		});
+		} );
 
-		// Close handlers.
+		// ── Close ───────────────────────────────────────────────────────
 		function closePicker() {
 			$overlay.remove();
 		}
 
-		$popup.find('.ab-mp-close').on('click', closePicker);
-		$overlay.on('click', function (e) {
-			if ($(e.target).is('.ab-mp-overlay')) closePicker();
-		});
-		$(document).on('keydown.abModelPicker', function (e) {
-			if (e.key === 'Escape') {
+		$popup.find( '.ab-mp-close' ).on( 'click', closePicker );
+		$overlay.on( 'click', function ( e ) {
+			if ( $( e.target ).is( '.ab-mp-overlay' ) ) closePicker();
+		} );
+		$( document ).on( 'keydown.abModelPicker', function ( e ) {
+			if ( e.key === 'Escape' ) {
 				closePicker();
-				$(document).off('keydown.abModelPicker');
+				$( document ).off( 'keydown.abModelPicker' );
 			}
-		});
+		} );
 	}
 
 	// Bind click on all model picker triggers.
-	$(document).on('click', '.ab-mp-trigger', function (e) {
+	$( document ).on( 'click', '.ab-mp-trigger', function ( e ) {
 		e.preventDefault();
-		openPicker($(this));
-	});
+		openPicker( $( this ) );
+	} );
 
-})(jQuery);
+} )( jQuery );

prautoblogger.php

@@ -9,7 +9,7 @@
  * Plugin Name:       PRAutoBlogger
  * Plugin URI:        https://peptiderepo.com/prautoblogger
  * Description:       Monitors social media for trending topics, generates SEO-friendly blog posts using AI, and publishes them on a daily schedule with full cost tracking and self-improvement metrics.
- * Version:           0.13.1
+ * Version:           0.13.2
  * Requires at least: 6.0
  * Requires PHP:      7.4
  * Author:            PeptideRepo
@@ -35,7 +35,7 @@ if ( ! defined( 'ABSPATH' ) ) {
 | Defined here so every file in the plugin can reference paths, versions,
 | and limits without magic strings.
 */
-define( 'PRAUTOBLOGGER_VERSION', '0.13.1' );
+define( 'PRAUTOBLOGGER_VERSION', '0.13.2' );
 define( 'PRAUTOBLOGGER_DB_VERSION', '1.1.0' );
 define( 'PRAUTOBLOGGER_PLUGIN_FILE', __FILE__ );
 define( 'PRAUTOBLOGGER_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );