Feat/user directory free pro functionality (#1778)

* Add free User Directory feature with setup wizard

Implements a limited User Directory in the free version, including setup wizard UI, REST API, shortcode handler, and directory limit logic. Adds new assets, React components, admin menu, post type registration, and views for directory/profile layouts. Pro-only features are previewed with disabled states and upgrade prompts, following the Pro Preview pattern.

* Update color classes to use ! prefix for importance

Added ! prefix to purple color classes in layout helpers and Tailwind config to ensure higher specificity. Updated safelist in Tailwind config to include both prefixed and non-prefixed classes, and adjusted button class usage for consistency.

* Enhance user directory UI and member count logic

Improves member count calculation in the REST API and displays live member counts in the directory list. Refines input styles for number fields, updates the toast notification component for better UX, and adds a Pro badge to the 'New Directory' button when the directory limit is reached.

* Add file tab to user profile and update build tasks

Introduces a new 'Files' tab to the user profile with grouped file display and filtering, excluding private message attachments. Updates Gruntfile.js to add user directory build/watch tasks and ensures profile size is passed to the template. Also adds the corresponding template file for the new tab.

* Add new utility classes for WPUF admin styles

Introduced a wide range of new utility classes to form-builder.css for layout, spacing, sizing, display, border, background, and other style properties. These additions improve flexibility and consistency for admin UI components and support more granular styling options.

* Refactor user directory module structure and build config

Moved user directory assets and configs to modules/user-directory, updated Gruntfile.js to reflect new paths, and adjusted build/watch tasks. Renamed Tailwind and Webpack configs, added PostCSS config, and updated package files to support the new module structure.

* Refactor advanced step options and update sort values

Updated sort option values from 'ID' to 'id' and adjusted related logic for consistency. Removed free/pro checks from handlers to simplify state updates. Improved UI/UX for avatar and sort options, added Pro-locked features with badges and tooltips, and enhanced descriptions for better clarity.

* Update profile layout to use purple theme and improve UI

Changed primary color scheme from emerald to purple across helpers and Tailwind config. Updated profile layout-2 to add a cover photo section, adjust class names, and improve header overlap. Cleaned up the About tab by removing Pro upgrade prompts and related UI elements.

* Update primary color scheme to emerald green

Changed Tailwind primary and hover colors from purple to emerald green in tailwind.config.js. Updated related CSS class in App.js to use emerald color for upgrade link, ensuring visual consistency with the new color scheme.

* Refactor user avatar logic for consistency and fallback

Updated avatar rendering to use the same logic as the directory listing, prioritizing custom profile photos, then Gravatar, and finally user initials as a fallback. Improved initials calculation and font sizing for better visual consistency. Simplified markup to show either the avatar image or initials, not both, and ensured consistent sizing and styling.

* Improve pagination shortcode handling and styling

Add early return if there are no items to display in the pagination shortcode. Also update the current page styling to use layout-specific color classes for better theme consistency.

* Refactor user directory module and update styles

Refactored multiple files in the user-directory module, including Admin_Menu.php, Directory.php, Helpers.php, Post_Type.php, PrettyUrls.php, Shortcode.php, and profile layout. Updated Toast.js in the frontend and regenerated several minified CSS files to reflect style changes.

* Skip role filter when 'all' is selected in user directory

Updated both Directory API and Shortcode to skip applying the 'role__in' filter if 'all' is present in the roles array. This prevents unnecessary filtering when all roles should be included.

* Enhance profile tabs and settings compatibility

Updated default and saved settings to include all profile tabs for better Pro compatibility. Improved REST API to merge settings with defaults and existing values, and to sanitize and save all profile tab-related fields. Adjusted frontend JS and wizard defaults to reflect all tabs, and fixed minor issues with sort option selection and profile slug decoding.

* User Directory: add SingleSelect & UI polish

Introduce a reusable SingleSelect dropdown and refactor User Directory UI/UX. Key changes:

- Add src/js/user-directory/components/common/SingleSelect.js: new reusable single-select dropdown with grouped options and ProBadge support.
- Refactor StepAdvanced to use SingleSelect for sort and gallery size, simplify Pro feature handling, change free avatar default from 192→128 and adjust avatar size isFree flags, and convert several hover-only Pro badges into clickable upgrade links.
- Update StepLayout to show Pro badge on hover with an upgrade link, simplify border/opacity logic and add local hover state.
- Update App.js ProBadge into a clickable upgrade link and reposition/remove some hover-only Pro UI (New Directory button now shows badge inline when limit reached; limit warning block removed/streamlined).
- package.json: ensure user-directory build/dev scripts run npm ci before npm run build/dev.
- Remove get_current_page() from modules/user-directory/Shortcode.php (cleanup).

These changes centralize dropdown logic, improve upgrade CTA consistency, and tidy UI behavior for Pro-locked features.

* Use SingleSelect for profile base field

Replace the native <select> for the profile_base field with a SingleSelect component, passing profileBases as options and adapting the onChange to call the existing handleChange ({ target: { name, value } }). Remove the now-unused inputStyle constant and its comment block. This simplifies the markup and delegates select rendering/styling to the SingleSelect component.

* Add button/focus classes and update wizard UI

Safelist new button and focus utilities in the user-directory Tailwind config and update DirectoryWizard and StepTabs components. DirectoryWizard: replace verbose button classnames with wpuf-btn-white, add focus ring utilities to Cancel/Prev/Next/Next (submit) buttons for better accessibility, adjust the footer container style to ensure correct left/right positioning and enforce background color. StepTabs: only render the ProBadge on hover to reduce visual clutter. These changes centralize button styles and improve keyboard focus visibility and layout consistency.

* User Directory: file-tabs, sanitization, fetch fixes

Add an external file-tabs script and register/enqueue it for profile files; remove inline tab JS. Improve security and robustness across templates: add ABSPATH checks, use esc_url/esc_html/wp_kses/wp_kses_post where appropriate, use wp_unslash for $_GET input, strict in_array checks, and replace raw $_SERVER URL construction with home_url( add_query_arg( null, null ) ).

Refactor Helpers: change free layout color palette to emerald, update avatar markup to use Tailwind classes, and add utility helpers (pagination URL builders and wpuf_ud_get_image_size_dimensions). Limit attachment queries to avoid memory issues and tighten file grouping checks. Replace duplicated pagination URL helpers in posts/comments templates with shared helpers.

Frontend JS improvements: include X-WP-Nonce header in ud-search-shortcode fetch, add new wpuf-ud-file-tabs.js, and harden React code (useCallback for fetchDirectories, AbortController for member-count fetches, improved batching/loading state for directory member counts, promise-handling fallback for clipboard API). Small doc/version placeholder updates (WPUF_SINCE). These changes aim to improve security, performance, and maintainability.

* User Directory: sanitize, docs, REST & module fixes

Apply a set of cleanup and safety fixes for the User Directory free module:

- Update @SInCE tags to use WPUF_SINCE across multiple files.
- Add admin CSS for module section titles, pro badge and preview container (replace inline styles with classes).
- Harden input handling by sanitizing usage of $_GET and $_SERVER in DirectoryStyles.
- Remove an unnecessary flush_rewrite_rules() call from REST directory creation and disable REST exposure for the internal wpuf_user_listing post type.
- Improve wpuf_free_deactivate_module: validate module existence, return WP_Error for invalid/not-active cases and return null on success; use wpuf_free_get_modules() for checks.
- Simplify helpers: free layout color API now always returns the emerald palette and related wrapper functions updated accordingly.
- Misc: update docblocks and minor view/template metadata to reflect the changes.

These changes improve security, clarity, and correctness of the free User Directory implementation and replace inline styling with maintainable CSS classes.

* User Directory: UI fixes & avatar/tab corrections

Multiple fixes and UI refinements for the User Directory module:

- Ensure per_page is at least 1 to avoid zero-limit pagination.
- Use profile_tabs (instead of default_tabs) in Shortcode and update default profile_tabs order to use 'file' key to match settings.
- Fix Tailwind/PostCSS config paths and include Admin_Menu.php in Tailwind content scan.
- DirectoryWizard: track WP sidebar folded state reactively (MutationObserver), switch to functional setState updates to avoid stale values, and improve fetch error handling.
- MultiSelect: import and use cloneElement instead of React.cloneElement for icon cloning.
- SingleSelect: use semantic <li> for option items.
- StepAdvanced: correct avatar size to 256 and remove pointerEvents style from ProBadge overlay.
- StepTabs: small markup and layout adjustments (heading level change, container maxWidth, minor cleanups).
- avatarSizeHelper: correct mapping for layout-6 to 256.

These changes address UX bugs, ensure consistent config keys, and improve robustness of state updates and error handling.

* Harden user-directory: sanitization & perf

Add extensive sanitization, validation and security hardening across the user-directory module. Key changes:

- Register REST args for directory endpoints with sanitize/validate callbacks and sanitize base_url using esc_url_raw; block user_email from public search columns to reduce email harvesting.
- Recursively sanitize excluded_users input and use sanitized data when extracting IDs.
- Schedule background Gravatar checks via wp_cron (non-blocking) and mark transient as pending to avoid remote requests during page loads.
- Use home_url and esc_url_raw for building profile/base URLs and escape pagination links (esc_url/esc_html/esc_attr).
- Defer flush_rewrite_rules and cache directory pages with transients; invalidate cache on content changes.
- Harden template loading (realpath check) and extract template data using EXTR_SKIP to avoid variable injection.
- Make User_Directory constructor private and optimize get_directory_count using wp_count_posts.
- Sanitize/absint GET parameters in templates and harden JS tab activation with an allowlist and safer selectors to prevent DOM-based XSS.
- Add docblocks/@SInCE annotations and minor refactors to improve robustness and performance.

Author: arifulhoque7

Gruntfile.js

@@ -164,6 +164,20 @@ module.exports = function( grunt) {
                 }
             },
 
+            userDirectory: {
+                files: [
+                    'src/js/user-directory/**/*.js',
+                    'src/js/user-directory/**/*.jsx',
+                    'src/js/user-directory/**/*.css',
+                    'src/js/user-directory/styles/*.css',
+                    'modules/user-directory/**/*.php',
+                ],
+                tasks: ['build-user-directory'],
+                options: {
+                    spawn: false
+                }
+            },
+
         },
 
         // Clean up build directory
@@ -278,6 +292,9 @@ module.exports = function( grunt) {
             npm_build_ai_form_builder: {
                 command: 'npm run build:ai-form-builder',
             },
+            npm_build_user_directory: {
+                command: 'npm run build:user-directory',
+            },
             tailwind: {
                 command: function ( input, output ) {
                     return `npx tailwindcss -i ${input} -o ${output} --minify`;
@@ -306,7 +323,7 @@ module.exports = function( grunt) {
     grunt.loadNpmTasks( 'grunt-shell' );
     grunt.loadNpmTasks( 'grunt-postcss' );
 
-    grunt.registerTask( 'default', [ 'less', 'concat', 'uglify', 'i18n', 'tailwind' ] );
+    grunt.registerTask( 'default', [ 'less', 'concat', 'uglify', 'i18n', 'tailwind', 'build-user-directory' ] );
 
     // file auto generation
     grunt.registerTask( 'i18n', [ 'makepot' ] );
@@ -316,6 +333,11 @@ module.exports = function( grunt) {
     grunt.registerTask( 'release', [ 'less', 'concat', 'uglify', 'i18n', 'readme', 'tailwind', 'tailwind-minify' ] );
     grunt.registerTask( 'zip', [ 'shell:npm_build', 'clean', 'copy', 'compress' ] );
 
+    // User Directory CSS build task
+    grunt.registerTask( 'build-user-directory', 'Build User Directory CSS with Tailwind', function() {
+        grunt.task.run('shell:npm_build_user_directory');
+    });
+
     grunt.event.on('watch', function(action, filepath, target) {
         if (target === 'tailwind') {
             grunt.task.run('tailwind');

assets/css/admin/subscriptions.min.css

@@ -42,6 +42,39 @@
     position: relative;
 }
 
+.wpuf-modules-section-title {
+    clear: both;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.wpuf-modules-section-title.wpuf-pro-modules-title {
+    margin-top: 30px;
+}
+
+.wpuf-modules-section-title .wpuf-pro-badge {
+    font-size: 12px;
+    font-weight: normal;
+    color: #666;
+    margin-left: 10px;
+}
+
+.wpuf-pro-modules-preview {
+    position: relative;
+}
+
+.wpuf-free-modules {
+    margin-bottom: 20px;
+}
+
+.wpuf-free-modules::after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
 .wpuf-modules .plugin-card .plugin-name {
     color: #0073aa;
 }
@@ -78,7 +111,7 @@
     padding-top: 26px;
 }
 
-.plugin-card:hover .form-create-overlay {
+.wpuf-pro-modules-preview .plugin-card:hover .form-create-overlay {
     -webkit-opacity: 1;
     opacity: 1;
     z-index: 1;