Changeset 3692384

Timestamp:

09/12/2026 06:50:48 AM (6 weeks ago)

Author:

carlosmmairena

Message:

tagging version 1.4.0

Location:

ldap-staff-directory

Files:

• tags/1.4.0 (copied) (copied from ldap-staff-directory/trunk )
• tags/1.4.0/admin/views/settings-page.php (modified) (1 diff)
• tags/1.4.0/includes/class-admin.php (modified) (2 diffs)
• tags/1.4.0/includes/class-ldap-connector.php (modified) (2 diffs)
• tags/1.4.0/includes/class-shortcode.php (modified) (5 diffs)
• tags/1.4.0/ldap-staff-directory.php (modified) (2 diffs)
• tags/1.4.0/public/css/directory.css (modified) (5 diffs)
• tags/1.4.0/public/js/directory.js (modified) (2 diffs)
• tags/1.4.0/public/views/directory.php (modified) (13 diffs)
• tags/1.4.0/readme.txt (modified) (4 diffs)
• trunk/admin/views/settings-page.php (modified) (1 diff)
• trunk/includes/class-admin.php (modified) (2 diffs)
• trunk/includes/class-ldap-connector.php (modified) (2 diffs)
• trunk/includes/class-shortcode.php (modified) (5 diffs)
• trunk/ldap-staff-directory.php (modified) (2 diffs)
• trunk/public/css/directory.css (modified) (5 diffs)
• trunk/public/js/directory.js (modified) (2 diffs)
• trunk/public/views/directory.php (modified) (13 diffs)
• trunk/readme.txt (modified) (4 diffs)

ldap-staff-directory/tags/1.4.0/admin/views/settings-page.php

@@ -145 +145 @@
                                 printf( '</div>' );
                                 $this->row( __( 'Department order', 'ldap-staff-directory' ), 'ldap_ed_department_order', array( $this, 'render_field_department_order' ) );
+                                $this->row( __( 'Employee order', 'ldap-staff-directory' ), 'ldap_ed_employee_order', array( $this, 'render_field_employee_order' ) );
                                 ?>
                         </div>

ldap-staff-directory/tags/1.4.0/includes/class-admin.php

@@ -147 +147 @@
                                 ? $raw_department_order
                                 : 'alpha';
+
+                        $allowed_employee_orders = array( 'name_asc', 'name_desc', 'title_asc', 'title_desc' );
+                        $raw_employee_order      = sanitize_text_field( $input['employee_order'] ?? 'name_asc' );
+                        $clean['employee_order'] = in_array( $raw_employee_order, $allowed_employee_orders, true )
+                                ? $raw_employee_order
+                                : 'name_asc';
 
                         $clean['cache_ttl'] = absint( $input['cache_ttl'] ?? 60 );
@@ -588 +594 @@
         }
 
+        public function render_field_employee_order() {
+                $saved   = $this->get_option( 'employee_order', 'name_asc' );
+                $options = array(
+                        'name_asc'   => __( 'Name (A–Z)', 'ldap-staff-directory' ),
+                        'name_desc'  => __( 'Name (Z–A)', 'ldap-staff-directory' ),
+                        'title_asc'  => __( 'Title (A–Z)', 'ldap-staff-directory' ),
+                        'title_desc' => __( 'Title (Z–A)', 'ldap-staff-directory' ),
+                );
+
+                printf(
+                        '<select id="ldap_ed_employee_order" name="%1$s[employee_order]">',
+                        esc_attr( LDAP_ED_OPTION_KEY )
+                );
+                foreach ( $options as $ldap_ed_order_value => $ldap_ed_order_label ) {
+                        printf(
+                                '<option value="%1$s" %2$s>%3$s</option>',
+                                esc_attr( $ldap_ed_order_value ),
+                                selected( $saved, $ldap_ed_order_value, false ),
+                                esc_html( $ldap_ed_order_label )
+                        );
+                }
+                printf(
+                        '</select><p class="description">%s</p>',
+                        esc_html__( 'Order of the employee cards within a department on the public directory. Ties on title are broken by name (A–Z).', 'ldap-staff-directory' )
+                );
+        }
+
         public function render_field_enable_search() {
                 printf(

ldap-staff-directory/tags/1.4.0/includes/class-ldap-connector.php

@@ -239 +239 @@
          * Search the LDAP directory and return an array of user data.
          *
+         * The returned array's order is NOT guaranteed — it reflects whatever order
+         * the LDAP server returned entries in. Callers that need a specific display
+         * order (e.g. the shortcode's employee_order setting) must sort explicitly.
+         *
          * @return array|\WP_Error
          */
@@ -277 +281 @@
                 }
 
-                // Sort alphabetically by name.
-                usort( $users, function ( $a, $b ) {
-                        return strcmp( $a['name'], $b['name'] );
-                } );
-
                 $this->disconnect();
                 return $users;

ldap-staff-directory/tags/1.4.0/includes/class-shortcode.php

@@ -12 +12 @@
 class LDAP_ED_Shortcode {
 
+        /**
+         * Deterministic avatar background colors, shared between employee and
+         * department avatars. Color is picked via crc32( $name ) % count( palette ).
+         */
+        private const AVATAR_PALETTE = array(
+                '#4f7df3', '#7c5cbf', '#0e9b8a',
+                '#2e9e4f', '#c0392b', '#d35400',
+                '#1a7bbf', '#8e44ad',
+        );
+
+        /**
+         * Inline SVG icon paths (Lucide), keyed by icon name. Static, trusted
+         * markup — never built from user input.
+         */
+        private const ICONS = array(
+                'briefcase'     => '<path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/><rect width="20" height="14" x="2" y="6" rx="2"/>',
+                'mail'          => '<rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>',
+                'phone'         => '<path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/>',
+                'building'      => '<rect width="16" height="20" x="4" y="2" rx="2"/><path d="M9 22v-4h6v4"/><path d="M8 6h.01"/><path d="M16 6h.01"/><path d="M12 6h.01"/><path d="M12 10h.01"/><path d="M12 14h.01"/><path d="M16 10h.01"/><path d="M16 14h.01"/><path d="M8 10h.01"/><path d="M8 14h.01"/>',
+                'chevron-right' => '<path d="m9 18 6-6-6-6"/>',
+                'arrow-left'    => '<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>',
+        );
+
         public function __construct() {
                 add_shortcode( 'ldap_directory', array( $this, 'render' ) );
@@ -56 +79 @@
         /**
          * Render the directory HTML.
+         *
+         * Renders one of two views depending on whether a department is selected:
+         * - No department (ldap_dept empty): department menu (department-menu.php).
+         * - Department present: department detail — filtered/paginated employee
+         *   grid (directory.php), unchanged from the pre-existing behavior.
          *
          * @param array $atts Shortcode attributes.
@@ -99 +127 @@
                 }
 
-                // Extract department list from the full (unfiltered) set for correct chip counts.
+                // Extract department list (with counts) from the full, unfiltered set.
                 $ldap_ed_department_order = $settings['department_order'] ?? 'alpha';
                 $ldap_ed_departments      = $this->extract_departments( $all_users, $ldap_ed_department_order );
                 $ldap_ed_all_count        = count( $all_users );
 
+                // No department selected: render the department menu. No filtering or
+                // pagination runs for this state — it's a flat list of all departments.
+                if ( '' === $ldap_ed_current_dept ) {
+                        ob_start();
+                        include LDAP_ED_DIR . 'public/views/department-menu.php';
+                        return ob_get_clean();
+                }
+
                 // Apply department and search filters in PHP.
                 $filtered_users = $this->filter_users( $all_users, $ldap_ed_search_query, $ldap_ed_current_dept );
+
+                // Sort the filtered result before paginating, so order is consistent across pages.
+                $ldap_ed_employee_order = $settings['employee_order'] ?? 'name_asc';
+                $filtered_users         = $this->sort_users( $filtered_users, $ldap_ed_employee_order );
 
                 // Paginate the filtered result.
@@ -121 +161 @@
                 include LDAP_ED_DIR . 'public/views/directory.php';
                 return ob_get_clean();
+        }
+
+        // -------------------------------------------------------------------------
+        // Shared display helpers (avatars, icons) — used by both views' templates.
+
+        /**
+         * Computes deterministic initials and an avatar background color for a
+         * name (employee or department). Same color formula for both: crc32( $name )
+         * modulo the shared 8-color palette.
+         *
+         * @param string $name            Employee or department name.
+         * @param bool   $force_two_chars When true, a single-word name still yields
+         *                                2-letter initials (used for department
+         *                                abbreviations). Employee avatars keep the
+         *                                pre-existing 1-letter behavior by default.
+         * @return array{initials:string,color:string}
+         */
+        public function get_initials_and_color( string $name, bool $force_two_chars = false ): array {
+                $parts    = preg_split( '/\s+/', trim( $name ), 2 );
+                $initials = strtoupper( substr( $parts[0] ?? '', 0, 1 ) );
+
+                if ( ! empty( $parts[1] ) ) {
+                        $initials .= strtoupper( substr( $parts[1], 0, 1 ) );
+                } elseif ( $force_two_chars ) {
+                        $initials .= strtoupper( substr( $parts[0] ?? '', 1, 1 ) );
+                }
+
+                $color = self::AVATAR_PALETTE[ abs( crc32( $name ) ) % count( self::AVATAR_PALETTE ) ];
+
+                return array(
+                        'initials' => $initials,
+                        'color'    => $color,
+                );
+        }
+
+        /**
+         * Returns inline SVG markup for a static, trusted icon (Lucide-style).
+         * Never built from user input — safe to echo without escaping.
+         *
+         * @param string $name Icon key, see self::ICONS.
+         * @return string SVG markup, or '' when the icon name is unknown.
+         */
+        public function get_icon_svg( string $name ): string {
+                if ( ! isset( self::ICONS[ $name ] ) ) {
+                        return '';
+                }
+
+                return sprintf(
+                        '<svg class="ldap-icon ldap-icon-%1$s" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">%2$s</svg>',
+                        esc_attr( $name ),
+                        self::ICONS[ $name ]
+                );
         }
 
@@ -207 +299 @@
 
         /**
+         * Sort a user array for display, per the employee_order setting.
+         *
+         * Ties on title (including empty title) are always broken by name ascending,
+         * regardless of the primary order's direction — this is intentional, not a bug.
+         * Falls back to 'name_asc' for any value outside the known whitelist.
+         *
+         * @param array  $users Filtered user array.
+         * @param string $order 'name_asc' (default), 'name_desc', 'title_asc', or 'title_desc'.
+         * @return array Sorted array (re-indexed).
+         */
+        private function sort_users( array $users, string $order = 'name_asc' ): array {
+                $allowed_orders = array( 'name_asc', 'name_desc', 'title_asc', 'title_desc' );
+                if ( ! in_array( $order, $allowed_orders, true ) ) {
+                        $order = 'name_asc';
+                }
+
+                usort(
+                        $users,
+                        static function ( $a, $b ) use ( $order ) {
+                                if ( 'name_desc' === $order ) {
+                                        return strcmp( $b['name'] ?? '', $a['name'] ?? '' );
+                                }
+
+                                if ( 'title_asc' === $order || 'title_desc' === $order ) {
+                                        $result = strcmp( $a['title'] ?? '', $b['title'] ?? '' );
+                                        if ( 'title_desc' === $order ) {
+                                                $result = -$result;
+                                        }
+                                        // Tie on title: always break by name ascending, regardless of direction.
+                                        return 0 !== $result ? $result : strcmp( $a['name'] ?? '', $b['name'] ?? '' );
+                                }
+
+                                // name_asc (default).
+                                return strcmp( $a['name'] ?? '', $b['name'] ?? '' );
+                        }
+                );
+
+                return array_values( $users );
+        }
+
+        /**
          * Slice a filtered user array for the requested page.
          *

ldap-staff-directory/tags/1.4.0/ldap-staff-directory.php

@@ -4 +4 @@
  * Plugin URI:  https://wordpress.org/plugins/ldap-staff-directory/
  * Description: Connects to LDAP or LDAPS to display an employee directory from an OU. Supports Elementor, Beaver Builder and a native shortcode.
- * Version:     1.2.1
+ * Version:     1.4.0
  * Requires at least: 5.8
  * Requires PHP: 7.4
@@ -19 +19 @@
 
 // Plugin constants.
-define( 'LDAP_ED_VERSION',     '1.2.1' );
+define( 'LDAP_ED_VERSION',     '1.4.0' );
 define( 'LDAP_ED_FILE',        __FILE__ );
 define( 'LDAP_ED_DIR',         plugin_dir_path( __FILE__ ) );

ldap-staff-directory/tags/1.4.0/public/css/directory.css

@@ -25 +25 @@
         --ldap-dept-badge-bg:    rgba( 0, 115, 170, .08 );
         --ldap-dept-badge-color: #005a87;
+
+        /* Inline field icons */
+        --ldap-icon-color:       #8c8f94;
 }
 
@@ -33 +36 @@
         font-size: var( --ldap-font-size );
         color: var( --ldap-text-color );
-}
-
-/* ── Department filter bar ──────────────────────────────────────────────── */
-
-.ldap-dept-filters {
-        display: flex;
-        flex-wrap: nowrap;
-        gap: 8px;
-        overflow-x: auto;
-        white-space: nowrap;
-        padding-bottom: 4px;
-        margin-bottom: 24px;
-        /* Hide scrollbar visually while keeping it functional */
-        -ms-overflow-style: none;
-        scrollbar-width: none;
-}
-
-.ldap-dept-filters::-webkit-scrollbar {
-        display: none;
-}
-
-.ldap-dept-chip {
-        display: inline-flex;
-        align-items: center;
-        gap: 5px;
-        padding: 5px 14px;
-        font-size: .82em;
-        font-family: inherit;
-        font-weight: 500;
-        color: var( --ldap-text-color );
-        background: transparent;
-        border: 1px solid var( --ldap-card-border );
-        border-radius: 20px;
-        text-decoration: none;
-        cursor: pointer;
-        white-space: nowrap;
-        transition: border-color .15s ease, background-color .15s ease, color .15s ease;
-        flex-shrink: 0;
-}
-
-a.ldap-dept-chip:hover {
-        border-color: var( --ldap-primary-color );
-        color: var( --ldap-primary-color );
-}
-
-.ldap-dept-chip.is-active {
-        background: var( --ldap-primary-color );
-        border-color: var( --ldap-primary-color );
-        color: #fff;
-        cursor: default;
-}
-
-.ldap-dept-chip-clear {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        margin-left: 2px;
-        font-size: 1.1em;
-        font-weight: 700;
-        color: inherit;
-        text-decoration: none;
-        opacity: .75;
-        cursor: pointer;
-        transition: opacity .15s ease;
-}
-
-.ldap-dept-chip-clear:hover {
-        opacity: 1;
 }
 
@@ -236 +171 @@
 }
 
+.ldap-title,
+.ldap-email,
+.ldap-phone,
+.ldap-extension {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+}
+
 .ldap-email {
         margin-top: 10px;
@@ -265 +209 @@
 
 .ldap-extension {
-        display: block;
         margin-top: 4px;
         font-size: .88em;
         color: var( --ldap-muted-color );
+}
+
+/* ── Inline field icons (employee card, breadcrumb, department rows) ───── */
+
+.ldap-icon {
+        width: 12px;
+        height: 12px;
+        flex-shrink: 0;
+        color: var( --ldap-icon-color );
 }
 
@@ -341 +293 @@
         font-variant-numeric: tabular-nums;
 }
+
+/* ── Department menu (root view) ───────────────────────────────────────── */
+
+.ldap-menu-header {
+        margin-bottom: 20px;
+}
+
+.ldap-menu-title {
+        margin: 0 0 4px;
+        font-size: 1.4em;
+        font-weight: 700;
+        color: var( --ldap-text-color );
+}
+
+.ldap-menu-sub {
+        margin: 0;
+        font-size: .85em;
+        color: var( --ldap-muted-color );
+}
+
+.ldap-dept-search-wrap {
+        max-width: 320px;
+}
+
+.ldap-dept-search {
+        max-width: none;
+}
+
+.ldap-menu-eyebrow {
+        margin: 0 0 12px;
+        font-size: .72em;
+        font-weight: 700;
+        letter-spacing: .08em;
+        text-transform: uppercase;
+        color: var( --ldap-muted-color );
+}
+
+/* Two columns on desktop (matches the prototype); pure CSS, no JS balancing. */
+.ldap-dept-menu-list {
+        columns: 2;
+        column-gap: 10px;
+}
+
+.ldap-dept-row {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        break-inside: avoid;
+        margin-bottom: 8px;
+        padding: 10px 14px;
+        background: var( --ldap-card-bg );
+        border: 1px solid var( --ldap-card-border );
+        border-radius: var( --ldap-card-radius );
+        color: inherit;
+        text-decoration: none;
+        transition: box-shadow .15s ease, border-color .15s ease;
+}
+
+.ldap-dept-row:hover {
+        box-shadow: 0 4px 14px rgba( 0, 0, 0, .1 );
+        border-color: #c3c4c7;
+}
+
+.ldap-dept-row[hidden] {
+        display: none;
+}
+
+.ldap-dept-row-avatar {
+        flex-shrink: 0;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        background-color: var( --ldap-avatar-bg );
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        font-weight: 700;
+        user-select: none;
+}
+
+.ldap-dept-row-info {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+}
+
+.ldap-dept-row-name {
+        font-size: .93em;
+        font-weight: 600;
+        color: var( --ldap-text-color );
+}
+
+.ldap-dept-row-count {
+        font-size: .8em;
+        color: var( --ldap-muted-color );
+}
+
+.ldap-dept-row .ldap-icon {
+        width: 14px;
+        height: 14px;
+        color: var( --ldap-search-border );
+}
+
+@media ( max-width: 540px ) {
+        .ldap-dept-menu-list {
+                columns: 1;
+        }
+}
+
+/* ── Breadcrumb + department header (detail view) ──────────────────────── */
+
+.ldap-breadcrumb {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        margin-bottom: 16px;
+        font-size: .93em;
+        font-weight: 500;
+        color: var( --ldap-primary-color );
+        text-decoration: none;
+}
+
+.ldap-breadcrumb:hover {
+        text-decoration: underline;
+}
+
+.ldap-breadcrumb .ldap-icon {
+        width: 13px;
+        height: 13px;
+        color: var( --ldap-primary-color );
+}
+
+.ldap-dept-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 16px;
+        margin-bottom: 20px;
+}
+
+.ldap-dept-header-name {
+        margin: 0 0 4px;
+        font-size: 1.25em;
+        font-weight: 700;
+        color: var( --ldap-text-color );
+}
+
+.ldap-dept-header-sub {
+        margin: 0;
+        font-size: .82em;
+        color: var( --ldap-muted-color );
+}
+
+.ldap-dept-header-badge {
+        flex-shrink: 0;
+        width: 44px;
+        height: 44px;
+        border-radius: 50%;
+        background-color: var( --ldap-avatar-bg );
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        font-weight: 700;
+        user-select: none;
+}
+
+@media ( max-width: 540px ) {
+        .ldap-dept-header {
+                flex-direction: column;
+                align-items: flex-start;
+        }
+
+        .ldap-dept-header-badge {
+                width: 36px;
+                height: 36px;
+                font-size: 12px;
+        }
+}

ldap-staff-directory/tags/1.4.0/public/js/directory.js

@@ -1 +1 @@
 /**
  * LDAP Staff Directory — public JS
- * Filtering and pagination are now server-side. This file strips empty
- * ldap_search from the form submission to keep URLs clean.
+ *
+ * Two independent, small pieces of behavior:
+ * 1. Employee search (department detail view) is server-side — this only
+ *    strips an empty ldap_search from the form submission to keep URLs clean.
+ * 2. Department search (department menu view) is client-side — it filters
+ *    the already-rendered .ldap-dept-row elements by substring match, with
+ *    no network request. Scoped to at most the total number of departments;
+ *    it never touches employee cards or pagination.
  */
 ( function () {
@@ -16 +22 @@
                         } );
                 } );
+
+                var deptSearchInput = document.getElementById( 'ldap-dept-search-input' );
+                if ( ! deptSearchInput ) {
+                        return;
+                }
+
+                var wrap = deptSearchInput.closest( '.ldap-directory-wrap' );
+                if ( ! wrap ) {
+                        return;
+                }
+
+                var deptRows      = Array.prototype.slice.call( wrap.querySelectorAll( '.ldap-dept-row' ) );
+                var deptNoResults = wrap.querySelector( '.ldap-dept-no-results' );
+
+                deptSearchInput.addEventListener( 'input', function () {
+                        var query   = deptSearchInput.value.trim().toLowerCase();
+                        var visible = 0;
+
+                        deptRows.forEach( function ( row ) {
+                                var matches = '' === query || row.dataset.name.toLowerCase().indexOf( query ) !== -1;
+                                row.hidden  = ! matches;
+                                if ( matches ) {
+                                        visible++;
+                                }
+                        } );
+
+                        if ( deptNoResults ) {
+                                deptNoResults.hidden = visible > 0;
+                        }
+                } );
         } );
 } () );

ldap-staff-directory/tags/1.4.0/public/views/directory.php

@@ -1 +1 @@
 <?php
 /**
- * Public directory template.
+ * Department detail template — rendered when a department is selected
+ * (ldap_dept present). Shows a breadcrumb back to the department menu, the
+ * active department's header, and the existing filtered/paginated employee
+ * grid.
  *
  * Variables available from class-shortcode.php:
@@ -7 +10 @@
  *   $ldap_ed_fields        — array of field keys to display
  *   $ldap_ed_per_page      — int, items per page
- *   $ldap_ed_enable_search — bool, show search input and filter bar
- *   $ldap_ed_departments   — array [ 'Department' => count ] sorted alphabetically
- *   $ldap_ed_current_dept  — string, active department filter ('' = none)
+ *   $ldap_ed_enable_search — bool, show the employee search input
+ *   $ldap_ed_current_dept  — string, active department (always non-empty here)
  *   $ldap_ed_search_query  — string, active search term
  *   $ldap_ed_current_page  — int, current page number
  *   $ldap_ed_total_pages   — int, total page count
- *   $ldap_ed_total_count   — int, total filtered employee count
- *   $ldap_ed_all_count     — int, total unfiltered employee count
+ *   $ldap_ed_total_count   — int, total filtered employee count (this department)
  *   $ldap_ed_prev_url      — string|null, URL for previous page (null = disabled)
  *   $ldap_ed_next_url      — string|null, URL for next page (null = disabled)
@@ -25 +26 @@
 }
 
-// Palette for avatar backgrounds — one color is deterministically assigned per employee.
-$ldap_avatar_palette = array(
-        '#4f7df3', '#7c5cbf', '#0e9b8a',
-        '#2e9e4f', '#c0392b', '#d35400',
-        '#1a7bbf', '#8e44ad',
-);
+$ldap_ed_dept_avatar = $this->get_initials_and_color( $ldap_ed_current_dept, true );
 ?>
 <div class="ldap-directory-wrap">
+
+        <a
+                href="<?php echo esc_url( remove_query_arg( array( 'ldap_dept', 'ldap_page' ) ) ); ?>"
+                class="ldap-breadcrumb"
+        >
+                <?php echo $this->get_icon_svg( 'arrow-left' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static trusted SVG markup, no user input ?>
+                <?php esc_html_e( 'Departments', 'ldap-staff-directory' ); ?>
+        </a>
+
+        <div class="ldap-dept-header">
+                <div class="ldap-dept-header-info">
+                        <h2 class="ldap-dept-header-name"><?php echo esc_html( $ldap_ed_current_dept ); ?></h2>
+                        <p class="ldap-dept-header-sub">
+                        <?php
+                        echo esc_html(
+                                sprintf(
+                                        /* translators: %s: number of employees in this department */
+                                        _n( '%s employee in this department', '%s employees in this department', $ldap_ed_total_count, 'ldap-staff-directory' ),
+                                        absint( $ldap_ed_total_count )
+                                )
+                        );
+                        ?>
+                        </p>
+                </div>
+                <span
+                        class="ldap-dept-header-badge"
+                        aria-hidden="true"
+                        style="--ldap-avatar-bg:<?php echo esc_attr( $ldap_ed_dept_avatar['color'] ); ?>"
+                ><?php echo esc_html( $ldap_ed_dept_avatar['initials'] ); ?></span>
+        </div>
 
         <?php if ( $ldap_ed_enable_search ) : ?>
@@ -45 +71 @@
                                 <?php esc_html_e( 'Search employees', 'ldap-staff-directory' ); ?>
                         </label>
-                        <?php if ( '' !== $ldap_ed_current_dept ) : ?>
                         <input type="hidden" name="ldap_dept" value="<?php echo esc_attr( $ldap_ed_current_dept ); ?>">
-                        <?php endif; ?>
                         <input
                                 type="search"
@@ -53 +77 @@
                                 name="ldap_search"
                                 class="ldap-search"
-                                placeholder="<?php esc_attr_e( 'Search employee…', 'ldap-staff-directory' ); ?>"
+                                placeholder="<?php
+                                echo esc_attr(
+                                        sprintf(
+                                                /* translators: %s: department name */
+                                                __( 'Search in %s…', 'ldap-staff-directory' ),
+                                                $ldap_ed_current_dept
+                                        )
+                                );
+                                ?>"
                                 aria-label="<?php esc_attr_e( 'Search employee', 'ldap-staff-directory' ); ?>"
                                 value="<?php echo esc_attr( $ldap_ed_search_query ); ?>"
@@ -59 +91 @@
                 </form>
         </div>
-
-        <?php if ( count( $ldap_ed_departments ) >= 2 ) : ?>
-        <div class="ldap-dept-filters" role="list" aria-label="<?php esc_attr_e( 'Filter by department', 'ldap-staff-directory' ); ?>">
-
-                <?php // "All" chip — active when no department filter is set. ?>
-                <?php $ldap_ed_all_url = esc_url( add_query_arg( 'ldap_page', 1, remove_query_arg( array( 'ldap_dept', 'ldap_page' ) ) ) ); ?>
-                <?php if ( '' === $ldap_ed_current_dept ) : ?>
-                <span class="ldap-dept-chip is-active" role="listitem" aria-pressed="true">
-                        <?php
-                        echo esc_html(
-                                sprintf(
-                                        /* translators: %s: total employee count */
-                                        __( 'All (%s)', 'ldap-staff-directory' ),
-                                        absint( $ldap_ed_all_count )
-                                )
-                        );
-                        ?>
-                </span>
-                <?php else : ?>
-                <a
-                        href="<?php echo $ldap_ed_all_url; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- already passed through esc_url() above ?>"
-                        class="ldap-dept-chip"
-                        role="listitem"
-                        aria-pressed="false"
-                >
-                        <?php
-                        echo esc_html(
-                                sprintf(
-                                        /* translators: %s: total employee count */
-                                        __( 'All (%s)', 'ldap-staff-directory' ),
-                                        absint( $ldap_ed_all_count )
-                                )
-                        );
-                        ?>
-                </a>
-                <?php endif; ?>
-
-                <?php foreach ( $ldap_ed_departments as $ldap_ed_dept_name => $ldap_ed_dept_count ) : ?>
-                        <?php
-                        $ldap_ed_is_active  = ( 0 === strcasecmp( $ldap_ed_dept_name, $ldap_ed_current_dept ) );
-                        $ldap_ed_chip_url   = esc_url( add_query_arg( array( 'ldap_dept' => $ldap_ed_dept_name, 'ldap_page' => 1 ) ) );
-                        $ldap_ed_clear_url  = esc_url( add_query_arg( 'ldap_page', 1, remove_query_arg( array( 'ldap_dept', 'ldap_page' ) ) ) );
-                        $ldap_ed_chip_label = esc_html( $ldap_ed_dept_name ) . ' (' . absint( $ldap_ed_dept_count ) . ')';
-                        ?>
-                        <?php if ( $ldap_ed_is_active ) : ?>
-                        <span class="ldap-dept-chip is-active" role="listitem" aria-pressed="true">
-                                <?php echo $ldap_ed_chip_label; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- esc_html() + absint() applied above ?>
-                                <a
-                                        href="<?php echo $ldap_ed_clear_url; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- already passed through esc_url() above ?>"
-                                        class="ldap-dept-chip-clear"
-                                        aria-label="<?php esc_attr_e( 'Clear department filter', 'ldap-staff-directory' ); ?>"
-                                >×</a>
-                        </span>
-                        <?php else : ?>
-                        <a
-                                href="<?php echo $ldap_ed_chip_url; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- already passed through esc_url() above ?>"
-                                class="ldap-dept-chip"
-                                role="listitem"
-                                aria-pressed="false"
-                        >
-                                <?php echo $ldap_ed_chip_label; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- esc_html() + absint() applied above ?>
-                        </a>
-                        <?php endif; ?>
-                <?php endforeach; ?>
-
-        </div>
-        <?php endif; ?>
         <?php endif; ?>
 
@@ -134 +99 @@
                 <?php else : ?>
                         <?php foreach ( $ldap_ed_users as $ldap_ed_user ) :
-                                // Compute initials (up to 2 characters) from the display name.
-                                $ldap_name     = $ldap_ed_user['name'] ?? '';
-                                $ldap_parts    = preg_split( '/\s+/', trim( $ldap_name ), 2 );
-                                $ldap_initials = strtoupper( substr( $ldap_parts[0] ?? '', 0, 1 ) );
-                                if ( ! empty( $ldap_parts[1] ) ) {
-                                        $ldap_initials .= strtoupper( substr( $ldap_parts[1], 0, 1 ) );
-                                }
+                                $ldap_ed_name   = $ldap_ed_user['name'] ?? '';
+                                $ldap_ed_avatar = $this->get_initials_and_color( $ldap_ed_name );
+                                $ldap_initials  = $ldap_ed_avatar['initials'];
+
                                 // Fall back to first letter of email when name is absent.
                                 if ( '' === $ldap_initials && ! empty( $ldap_ed_user['email'] ) ) {
@@ -146 +108 @@
                                 }
 
-                                // Deterministic background color derived from the name.
-                                $ldap_color_idx = abs( crc32( $ldap_name ) ) % count( $ldap_avatar_palette );
-                                $ldap_avatar_bg = $ldap_avatar_palette[ $ldap_color_idx ];
+                                $ldap_avatar_bg = $ldap_ed_avatar['color'];
                         ?>
                         <article class="ldap-staff-card">
@@ -162 +122 @@
 
                                 <?php if ( in_array( 'title', $ldap_ed_fields, true ) && ! empty( $ldap_ed_user['title'] ) ) : ?>
-                                <p class="ldap-title"><?php echo esc_html( $ldap_ed_user['title'] ); ?></p>
+                                <p class="ldap-title">
+                                        <?php echo $this->get_icon_svg( 'briefcase' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static trusted SVG markup, no user input ?>
+                                        <?php echo esc_html( $ldap_ed_user['title'] ); ?>
+                                </p>
                                 <?php endif; ?>
 
@@ -173 +136 @@
                                 <?php if ( in_array( 'email', $ldap_ed_fields, true ) && ! empty( $ldap_ed_user['email'] ) ) : ?>
                                 <a class="ldap-email" href="mailto:<?php echo esc_attr( $ldap_ed_user['email'] ); ?>">
+                                        <?php echo $this->get_icon_svg( 'mail' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static trusted SVG markup, no user input ?>
                                         <?php echo esc_html( $ldap_ed_user['email'] ); ?>
                                 </a>
@@ -179 +143 @@
                                 <?php if ( in_array( 'phone', $ldap_ed_fields, true ) && ! empty( $ldap_ed_user['phone'] ) ) : ?>
                                 <a class="ldap-phone" href="tel:<?php echo esc_attr( $ldap_ed_user['phone'] ); ?>">
+                                        <?php echo $this->get_icon_svg( 'phone' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static trusted SVG markup, no user input ?>
                                         <?php echo esc_html( $ldap_ed_user['phone'] ); ?>
                                 </a>
@@ -184 +149 @@
 
                                 <?php if ( in_array( 'extension', $ldap_ed_fields, true ) && ! empty( $ldap_ed_user['extension'] ) ) : ?>
-                                <span class="ldap-extension"><?php echo esc_html( $ldap_ed_user['extension'] ); ?></span>
+                                <span class="ldap-extension">
+                                        <?php echo $this->get_icon_svg( 'building' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static trusted SVG markup, no user input ?>
+                                        <?php echo esc_html( $ldap_ed_user['extension'] ); ?>
+                                </span>
                                 <?php endif; ?>
                         </article>
@@ -209 +177 @@
                         $ldap_ed_from = absint( ( $ldap_ed_current_page - 1 ) * $ldap_ed_per_page + 1 );
                         $ldap_ed_to   = absint( min( $ldap_ed_current_page * $ldap_ed_per_page, $ldap_ed_total_count ) );
-                        if ( '' !== $ldap_ed_current_dept ) :
-                                echo esc_html(
-                                        sprintf(
-                                                /* translators: 1: first record number on page, 2: last record number on page, 3: total filtered records, 4: department name */
-                                                __( 'Showing %1$s–%2$s of %3$s in %4$s', 'ldap-staff-directory' ),
-                                                absint( $ldap_ed_from ),
-                                                absint( $ldap_ed_to ),
-                                                absint( $ldap_ed_total_count ),
-                                                $ldap_ed_current_dept
-                                        )
-                                );
-                        else :
-                                echo esc_html(
-                                        sprintf(
-                                                /* translators: 1: first record number on page, 2: last record number on page, 3: total records */
-                                                __( 'Showing %1$s–%2$s of %3$s', 'ldap-staff-directory' ),
-                                                absint( $ldap_ed_from ),
-                                                absint( $ldap_ed_to ),
-                                                absint( $ldap_ed_total_count )
-                                        )
-                                );
-                        endif;
+                        echo esc_html(
+                                sprintf(
+                                        /* translators: 1: first record number on page, 2: last record number on page, 3: total filtered records, 4: department name */
+                                        __( 'Showing %1$s–%2$s of %3$s in %4$s', 'ldap-staff-directory' ),
+                                        absint( $ldap_ed_from ),
+                                        absint( $ldap_ed_to ),
+                                        absint( $ldap_ed_total_count ),
+                                        $ldap_ed_current_dept
+                                )
+                        );
                 endif; ?>
                 </span>

ldap-staff-directory/tags/1.4.0/readme.txt

@@ -3 +3 @@
 Tags:              ldap, directory, wpbeaverbuilder, staff, elementor
 Requires at least: 5.8
-Tested up to:      7.0
+Tested up to:      7.1
 Requires PHP:      7.4
-Stable tag:        1.2.1
+Stable tag:        1.4.0
 License:           GPLv2 or later
 License URI:       https://www.gnu.org/licenses/gpl-2.0.html
@@ -23 +23 @@
 * Native Elementor widget with full style controls
 * Native Beaver Builder module with General and Style tabs
-* Department filter bar with configurable chip order (alphabetical or by contact count)
+* Public directory browses department-first: a menu of departments (with employee counts) leads to each department's contact list, in configurable order (alphabetical or by contact count)
+* Employee cards within a department can be ordered by name or job title, ascending or descending, from the admin — no code changes needed
 * Exclude specific departments — or employees with no department assigned — from the public directory, enforced at the LDAP query level so those employees are never fetched
 * Exclude disabled Active Directory accounts
@@ -77 +78 @@
 By default 60 minutes. Change the TTL under **Settings → LDAP Directory → Fields → Advanced settings**, or flush immediately with the **Clear Cache** button on that same tab.
 
+= Why do I now see a list of departments instead of all employees? =
+
+Starting in 1.3.0, the public directory browses department-first: visitors see a menu of departments with employee counts, and click into one to see its contacts. This replaces the previous single-page grid with a department filter bar. There is no setting to restore the old flat grid.
+
 == Screenshots ==
 
@@ -85 +90 @@
 
 == Changelog ==
+
+= 1.4.0 =
+* Feature: New **Employee order** setting under **Settings → LDAP Directory → Fields** lets you choose how employee cards are ordered within a department: by name or job title, ascending or descending. Ties on job title (including employees with no title) are always broken by name (A–Z).
+
+= 1.3.0 =
+* Feature: The public directory now browses department-first. The root view shows a menu of departments (name, employee count, color-coded avatar) instead of the full employee grid; clicking a department opens its filtered, paginated contact list with a breadcrumb back to the menu.
+* Feature: Employee cards in the department view show a small icon next to job title, email, phone, and extension for easier scanning.
+* Breaking change: The department filter chip bar has been removed and replaced by the department menu described above. There is no setting to restore the previous single-page grid.
+* Chore: "Tested up to" updated to WordPress 7.1.
 
 = 1.2.1 =

ldap-staff-directory/trunk/admin/views/settings-page.php

@@ -145 +145 @@
                                 printf( '</div>' );
                                 $this->row( __( 'Department order', 'ldap-staff-directory' ), 'ldap_ed_department_order', array( $this, 'render_field_department_order' ) );
+                                $this->row( __( 'Employee order', 'ldap-staff-directory' ), 'ldap_ed_employee_order', array( $this, 'render_field_employee_order' ) );
                                 ?>
                         </div>

ldap-staff-directory/trunk/includes/class-admin.php

@@ -147 +147 @@
                                 ? $raw_department_order
                                 : 'alpha';
+
+                        $allowed_employee_orders = array( 'name_asc', 'name_desc', 'title_asc', 'title_desc' );
+                        $raw_employee_order      = sanitize_text_field( $input['employee_order'] ?? 'name_asc' );
+                        $clean['employee_order'] = in_array( $raw_employee_order, $allowed_employee_orders, true )
+                                ? $raw_employee_order
+                                : 'name_asc';
 
                         $clean['cache_ttl'] = absint( $input['cache_ttl'] ?? 60 );
@@ -588 +594 @@
         }
 
+        public function render_field_employee_order() {
+                $saved   = $this->get_option( 'employee_order', 'name_asc' );
+                $options = array(
+                        'name_asc'   => __( 'Name (A–Z)', 'ldap-staff-directory' ),
+                        'name_desc'  => __( 'Name (Z–A)', 'ldap-staff-directory' ),
+                        'title_asc'  => __( 'Title (A–Z)', 'ldap-staff-directory' ),
+                        'title_desc' => __( 'Title (Z–A)', 'ldap-staff-directory' ),
+                );
+
+                printf(
+                        '<select id="ldap_ed_employee_order" name="%1$s[employee_order]">',
+                        esc_attr( LDAP_ED_OPTION_KEY )
+                );
+                foreach ( $options as $ldap_ed_order_value => $ldap_ed_order_label ) {
+                        printf(
+                                '<option value="%1$s" %2$s>%3$s</option>',
+                                esc_attr( $ldap_ed_order_value ),
+                                selected( $saved, $ldap_ed_order_value, false ),
+                                esc_html( $ldap_ed_order_label )
+                        );
+                }
+                printf(
+                        '</select><p class="description">%s</p>',
+                        esc_html__( 'Order of the employee cards within a department on the public directory. Ties on title are broken by name (A–Z).', 'ldap-staff-directory' )
+                );
+        }
+
         public function render_field_enable_search() {
                 printf(

ldap-staff-directory/trunk/includes/class-ldap-connector.php

@@ -239 +239 @@
          * Search the LDAP directory and return an array of user data.
          *
+         * The returned array's order is NOT guaranteed — it reflects whatever order
+         * the LDAP server returned entries in. Callers that need a specific display
+         * order (e.g. the shortcode's employee_order setting) must sort explicitly.
+         *
          * @return array|\WP_Error
          */
@@ -277 +281 @@
                 }
 
-                // Sort alphabetically by name.
-                usort( $users, function ( $a, $b ) {
-                        return strcmp( $a['name'], $b['name'] );
-                } );
-
                 $this->disconnect();
                 return $users;

ldap-staff-directory/trunk/includes/class-shortcode.php

@@ -12 +12 @@
 class LDAP_ED_Shortcode {
 
+        /**
+         * Deterministic avatar background colors, shared between employee and
+         * department avatars. Color is picked via crc32( $name ) % count( palette ).
+         */
+        private const AVATAR_PALETTE = array(
+                '#4f7df3', '#7c5cbf', '#0e9b8a',
+                '#2e9e4f', '#c0392b', '#d35400',
+                '#1a7bbf', '#8e44ad',
+        );
+
+        /**
+         * Inline SVG icon paths (Lucide), keyed by icon name. Static, trusted
+         * markup — never built from user input.
+         */
+        private const ICONS = array(
+                'briefcase'     => '<path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/><rect width="20" height="14" x="2" y="6" rx="2"/>',
+                'mail'          => '<rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>',
+                'phone'         => '<path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/>',
+                'building'      => '<rect width="16" height="20" x="4" y="2" rx="2"/><path d="M9 22v-4h6v4"/><path d="M8 6h.01"/><path d="M16 6h.01"/><path d="M12 6h.01"/><path d="M12 10h.01"/><path d="M12 14h.01"/><path d="M16 10h.01"/><path d="M16 14h.01"/><path d="M8 10h.01"/><path d="M8 14h.01"/>',
+                'chevron-right' => '<path d="m9 18 6-6-6-6"/>',
+                'arrow-left'    => '<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>',
+        );
+
         public function __construct() {
                 add_shortcode( 'ldap_directory', array( $this, 'render' ) );
@@ -56 +79 @@
         /**
          * Render the directory HTML.
+         *
+         * Renders one of two views depending on whether a department is selected:
+         * - No department (ldap_dept empty): department menu (department-menu.php).
+         * - Department present: department detail — filtered/paginated employee
+         *   grid (directory.php), unchanged from the pre-existing behavior.
          *
          * @param array $atts Shortcode attributes.
@@ -99 +127 @@
                 }
 
-                // Extract department list from the full (unfiltered) set for correct chip counts.
+                // Extract department list (with counts) from the full, unfiltered set.
                 $ldap_ed_department_order = $settings['department_order'] ?? 'alpha';
                 $ldap_ed_departments      = $this->extract_departments( $all_users, $ldap_ed_department_order );
                 $ldap_ed_all_count        = count( $all_users );
 
+                // No department selected: render the department menu. No filtering or
+                // pagination runs for this state — it's a flat list of all departments.
+                if ( '' === $ldap_ed_current_dept ) {
+                        ob_start();
+                        include LDAP_ED_DIR . 'public/views/department-menu.php';
+                        return ob_get_clean();
+                }
+
                 // Apply department and search filters in PHP.
                 $filtered_users = $this->filter_users( $all_users, $ldap_ed_search_query, $ldap_ed_current_dept );
+
+                // Sort the filtered result before paginating, so order is consistent across pages.
+                $ldap_ed_employee_order = $settings['employee_order'] ?? 'name_asc';
+                $filtered_users         = $this->sort_users( $filtered_users, $ldap_ed_employee_order );
 
                 // Paginate the filtered result.
@@ -121 +161 @@
                 include LDAP_ED_DIR . 'public/views/directory.php';
                 return ob_get_clean();
+        }
+
+        // -------------------------------------------------------------------------
+        // Shared display helpers (avatars, icons) — used by both views' templates.
+
+        /**
+         * Computes deterministic initials and an avatar background color for a
+         * name (employee or department). Same color formula for both: crc32( $name )
+         * modulo the shared 8-color palette.
+         *
+         * @param string $name            Employee or department name.
+         * @param bool   $force_two_chars When true, a single-word name still yields
+         *                                2-letter initials (used for department
+         *                                abbreviations). Employee avatars keep the
+         *                                pre-existing 1-letter behavior by default.
+         * @return array{initials:string,color:string}
+         */
+        public function get_initials_and_color( string $name, bool $force_two_chars = false ): array {
+                $parts    = preg_split( '/\s+/', trim( $name ), 2 );
+                $initials = strtoupper( substr( $parts[0] ?? '', 0, 1 ) );
+
+                if ( ! empty( $parts[1] ) ) {
+                        $initials .= strtoupper( substr( $parts[1], 0, 1 ) );
+                } elseif ( $force_two_chars ) {
+                        $initials .= strtoupper( substr( $parts[0] ?? '', 1, 1 ) );
+                }
+
+                $color = self::AVATAR_PALETTE[ abs( crc32( $name ) ) % count( self::AVATAR_PALETTE ) ];
+
+                return array(
+                        'initials' => $initials,
+                        'color'    => $color,
+                );
+        }
+
+        /**
+         * Returns inline SVG markup for a static, trusted icon (Lucide-style).
+         * Never built from user input — safe to echo without escaping.
+         *
+         * @param string $name Icon key, see self::ICONS.
+         * @return string SVG markup, or '' when the icon name is unknown.
+         */
+        public function get_icon_svg( string $name ): string {
+                if ( ! isset( self::ICONS[ $name ] ) ) {
+                        return '';
+                }
+
+                return sprintf(
+                        '<svg class="ldap-icon ldap-icon-%1$s" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">%2$s</svg>',
+                        esc_attr( $name ),
+                        self::ICONS[ $name ]
+                );
         }
 
@@ -207 +299 @@
 
         /**
+         * Sort a user array for display, per the employee_order setting.
+         *
+         * Ties on title (including empty title) are always broken by name ascending,
+         * regardless of the primary order's direction — this is intentional, not a bug.
+         * Falls back to 'name_asc' for any value outside the known whitelist.
+         *
+         * @param array  $users Filtered user array.
+         * @param string $order 'name_asc' (default), 'name_desc', 'title_asc', or 'title_desc'.
+         * @return array Sorted array (re-indexed).
+         */
+        private function sort_users( array $users, string $order = 'name_asc' ): array {
+                $allowed_orders = array( 'name_asc', 'name_desc', 'title_asc', 'title_desc' );
+                if ( ! in_array( $order, $allowed_orders, true ) ) {
+                        $order = 'name_asc';
+                }
+
+                usort(
+                        $users,
+                        static function ( $a, $b ) use ( $order ) {
+                                if ( 'name_desc' === $order ) {
+                                        return strcmp( $b['name'] ?? '', $a['name'] ?? '' );
+                                }
+
+                                if ( 'title_asc' === $order || 'title_desc' === $order ) {
+                                        $result = strcmp( $a['title'] ?? '', $b['title'] ?? '' );
+                                        if ( 'title_desc' === $order ) {
+                                                $result = -$result;
+                                        }
+                                        // Tie on title: always break by name ascending, regardless of direction.
+                                        return 0 !== $result ? $result : strcmp( $a['name'] ?? '', $b['name'] ?? '' );
+                                }
+
+                                // name_asc (default).
+                                return strcmp( $a['name'] ?? '', $b['name'] ?? '' );
+                        }
+                );
+
+                return array_values( $users );
+        }
+
+        /**
          * Slice a filtered user array for the requested page.
          *

ldap-staff-directory/trunk/ldap-staff-directory.php

@@ -4 +4 @@
  * Plugin URI:  https://wordpress.org/plugins/ldap-staff-directory/
  * Description: Connects to LDAP or LDAPS to display an employee directory from an OU. Supports Elementor, Beaver Builder and a native shortcode.
- * Version:     1.2.1
+ * Version:     1.4.0
  * Requires at least: 5.8
  * Requires PHP: 7.4
@@ -19 +19 @@
 
 // Plugin constants.
-define( 'LDAP_ED_VERSION',     '1.2.1' );
+define( 'LDAP_ED_VERSION',     '1.4.0' );
 define( 'LDAP_ED_FILE',        __FILE__ );
 define( 'LDAP_ED_DIR',         plugin_dir_path( __FILE__ ) );

ldap-staff-directory/trunk/public/css/directory.css

@@ -25 +25 @@
         --ldap-dept-badge-bg:    rgba( 0, 115, 170, .08 );
         --ldap-dept-badge-color: #005a87;
+
+        /* Inline field icons */
+        --ldap-icon-color:       #8c8f94;
 }
 
@@ -33 +36 @@
         font-size: var( --ldap-font-size );
         color: var( --ldap-text-color );
-}
-
-/* ── Department filter bar ──────────────────────────────────────────────── */
-
-.ldap-dept-filters {
-        display: flex;
-        flex-wrap: nowrap;
-        gap: 8px;
-        overflow-x: auto;
-        white-space: nowrap;
-        padding-bottom: 4px;
-        margin-bottom: 24px;
-        /* Hide scrollbar visually while keeping it functional */
-        -ms-overflow-style: none;
-        scrollbar-width: none;
-}
-
-.ldap-dept-filters::-webkit-scrollbar {
-        display: none;
-}
-
-.ldap-dept-chip {
-        display: inline-flex;
-        align-items: center;
-        gap: 5px;
-        padding: 5px 14px;
-        font-size: .82em;
-        font-family: inherit;
-        font-weight: 500;
-        color: var( --ldap-text-color );
-        background: transparent;
-        border: 1px solid var( --ldap-card-border );
-        border-radius: 20px;
-        text-decoration: none;
-        cursor: pointer;
-        white-space: nowrap;
-        transition: border-color .15s ease, background-color .15s ease, color .15s ease;
-        flex-shrink: 0;
-}
-
-a.ldap-dept-chip:hover {
-        border-color: var( --ldap-primary-color );
-        color: var( --ldap-primary-color );
-}
-
-.ldap-dept-chip.is-active {
-        background: var( --ldap-primary-color );
-        border-color: var( --ldap-primary-color );
-        color: #fff;
-        cursor: default;
-}
-
-.ldap-dept-chip-clear {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        margin-left: 2px;
-        font-size: 1.1em;
-        font-weight: 700;
-        color: inherit;
-        text-decoration: none;
-        opacity: .75;
-        cursor: pointer;
-        transition: opacity .15s ease;
-}
-
-.ldap-dept-chip-clear:hover {
-        opacity: 1;
 }
 
@@ -236 +171 @@
 }
 
+.ldap-title,
+.ldap-email,
+.ldap-phone,
+.ldap-extension {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+}
+
 .ldap-email {
         margin-top: 10px;
@@ -265 +209 @@
 
 .ldap-extension {
-        display: block;
         margin-top: 4px;
         font-size: .88em;
         color: var( --ldap-muted-color );
+}
+
+/* ── Inline field icons (employee card, breadcrumb, department rows) ───── */
+
+.ldap-icon {
+        width: 12px;
+        height: 12px;
+        flex-shrink: 0;
+        color: var( --ldap-icon-color );
 }
 
@@ -341 +293 @@
         font-variant-numeric: tabular-nums;
 }
+
+/* ── Department menu (root view) ───────────────────────────────────────── */
+
+.ldap-menu-header {
+        margin-bottom: 20px;
+}
+
+.ldap-menu-title {
+        margin: 0 0 4px;
+        font-size: 1.4em;
+        font-weight: 700;
+        color: var( --ldap-text-color );
+}
+
+.ldap-menu-sub {
+        margin: 0;
+        font-size: .85em;
+        color: var( --ldap-muted-color );
+}
+
+.ldap-dept-search-wrap {
+        max-width: 320px;
+}
+
+.ldap-dept-search {
+        max-width: none;
+}
+
+.ldap-menu-eyebrow {
+        margin: 0 0 12px;
+        font-size: .72em;
+        font-weight: 700;
+        letter-spacing: .08em;
+        text-transform: uppercase;
+        color: var( --ldap-muted-color );
+}
+
+/* Two columns on desktop (matches the prototype); pure CSS, no JS balancing. */
+.ldap-dept-menu-list {
+        columns: 2;
+        column-gap: 10px;
+}
+
+.ldap-dept-row {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        break-inside: avoid;
+        margin-bottom: 8px;
+        padding: 10px 14px;
+        background: var( --ldap-card-bg );
+        border: 1px solid var( --ldap-card-border );
+        border-radius: var( --ldap-card-radius );
+        color: inherit;
+        text-decoration: none;
+        transition: box-shadow .15s ease, border-color .15s ease;
+}
+
+.ldap-dept-row:hover {
+        box-shadow: 0 4px 14px rgba( 0, 0, 0, .1 );
+        border-color: #c3c4c7;
+}
+
+.ldap-dept-row[hidden] {
+        display: none;
+}
+
+.ldap-dept-row-avatar {
+        flex-shrink: 0;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        background-color: var( --ldap-avatar-bg );
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        font-weight: 700;
+        user-select: none;
+}
+
+.ldap-dept-row-info {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+}
+
+.ldap-dept-row-name {
+        font-size: .93em;
+        font-weight: 600;
+        color: var( --ldap-text-color );
+}
+
+.ldap-dept-row-count {
+        font-size: .8em;
+        color: var( --ldap-muted-color );
+}
+
+.ldap-dept-row .ldap-icon {
+        width: 14px;
+        height: 14px;
+        color: var( --ldap-search-border );
+}
+
+@media ( max-width: 540px ) {
+        .ldap-dept-menu-list {
+                columns: 1;
+        }
+}
+
+/* ── Breadcrumb + department header (detail view) ──────────────────────── */
+
+.ldap-breadcrumb {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        margin-bottom: 16px;
+        font-size: .93em;
+        font-weight: 500;
+        color: var( --ldap-primary-color );
+        text-decoration: none;
+}
+
+.ldap-breadcrumb:hover {
+        text-decoration: underline;
+}
+
+.ldap-breadcrumb .ldap-icon {
+        width: 13px;
+        height: 13px;
+        color: var( --ldap-primary-color );
+}
+
+.ldap-dept-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 16px;
+        margin-bottom: 20px;
+}
+
+.ldap-dept-header-name {
+        margin: 0 0 4px;
+        font-size: 1.25em;
+        font-weight: 700;
+        color: var( --ldap-text-color );
+}
+
+.ldap-dept-header-sub {
+        margin: 0;
+        font-size: .82em;
+        color: var( --ldap-muted-color );
+}
+
+.ldap-dept-header-badge {
+        flex-shrink: 0;
+        width: 44px;
+        height: 44px;
+        border-radius: 50%;
+        background-color: var( --ldap-avatar-bg );
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        font-weight: 700;
+        user-select: none;
+}
+
+@media ( max-width: 540px ) {
+        .ldap-dept-header {
+                flex-direction: column;
+                align-items: flex-start;
+        }
+
+        .ldap-dept-header-badge {
+                width: 36px;
+                height: 36px;
+                font-size: 12px;
+        }
+}

ldap-staff-directory/trunk/public/js/directory.js

@@ -1 +1 @@
 /**
  * LDAP Staff Directory — public JS
- * Filtering and pagination are now server-side. This file strips empty
- * ldap_search from the form submission to keep URLs clean.
+ *
+ * Two independent, small pieces of behavior:
+ * 1. Employee search (department detail view) is server-side — this only
+ *    strips an empty ldap_search from the form submission to keep URLs clean.
+ * 2. Department search (department menu view) is client-side — it filters
+ *    the already-rendered .ldap-dept-row elements by substring match, with
+ *    no network request. Scoped to at most the total number of departments;
+ *    it never touches employee cards or pagination.
  */
 ( function () {
@@ -16 +22 @@
                         } );
                 } );
+
+                var deptSearchInput = document.getElementById( 'ldap-dept-search-input' );
+                if ( ! deptSearchInput ) {
+                        return;
+                }
+
+                var wrap = deptSearchInput.closest( '.ldap-directory-wrap' );
+                if ( ! wrap ) {
+                        return;
+                }
+
+                var deptRows      = Array.prototype.slice.call( wrap.querySelectorAll( '.ldap-dept-row' ) );
+                var deptNoResults = wrap.querySelector( '.ldap-dept-no-results' );
+
+                deptSearchInput.addEventListener( 'input', function () {
+                        var query   = deptSearchInput.value.trim().toLowerCase();
+                        var visible = 0;
+
+                        deptRows.forEach( function ( row ) {
+                                var matches = '' === query || row.dataset.name.toLowerCase().indexOf( query ) !== -1;
+                                row.hidden  = ! matches;
+                                if ( matches ) {
+                                        visible++;
+                                }
+                        } );
+
+                        if ( deptNoResults ) {
+                                deptNoResults.hidden = visible > 0;
+                        }
+                } );
         } );
 } () );

ldap-staff-directory/trunk/public/views/directory.php

@@ -1 +1 @@
 <?php
 /**
- * Public directory template.
+ * Department detail template — rendered when a department is selected
+ * (ldap_dept present). Shows a breadcrumb back to the department menu, the
+ * active department's header, and the existing filtered/paginated employee
+ * grid.
  *
  * Variables available from class-shortcode.php:
@@ -7 +10 @@
  *   $ldap_ed_fields        — array of field keys to display
  *   $ldap_ed_per_page      — int, items per page
- *   $ldap_ed_enable_search — bool, show search input and filter bar
- *   $ldap_ed_departments   — array [ 'Department' => count ] sorted alphabetically
- *   $ldap_ed_current_dept  — string, active department filter ('' = none)
+ *   $ldap_ed_enable_search — bool, show the employee search input
+ *   $ldap_ed_current_dept  — string, active department (always non-empty here)
  *   $ldap_ed_search_query  — string, active search term
  *   $ldap_ed_current_page  — int, current page number
  *   $ldap_ed_total_pages   — int, total page count
- *   $ldap_ed_total_count   — int, total filtered employee count
- *   $ldap_ed_all_count     — int, total unfiltered employee count
+ *   $ldap_ed_total_count   — int, total filtered employee count (this department)
  *   $ldap_ed_prev_url      — string|null, URL for previous page (null = disabled)
  *   $ldap_ed_next_url      — string|null, URL for next page (null = disabled)
@@ -25 +26 @@
 }
 
-// Palette for avatar backgrounds — one color is deterministically assigned per employee.
-$ldap_avatar_palette = array(
-        '#4f7df3', '#7c5cbf', '#0e9b8a',
-        '#2e9e4f', '#c0392b', '#d35400',
-        '#1a7bbf', '#8e44ad',
-);
+$ldap_ed_dept_avatar = $this->get_initials_and_color( $ldap_ed_current_dept, true );
 ?>
 <div class="ldap-directory-wrap">
+
+        <a
+                href="<?php echo esc_url( remove_query_arg( array( 'ldap_dept', 'ldap_page' ) ) ); ?>"
+                class="ldap-breadcrumb"
+        >
+                <?php echo $this->get_icon_svg( 'arrow-left' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static trusted SVG markup, no user input ?>
+                <?php esc_html_e( 'Departments', 'ldap-staff-directory' ); ?>
+        </a>
+
+        <div class="ldap-dept-header">
+                <div class="ldap-dept-header-info">
+                        <h2 class="ldap-dept-header-name"><?php echo esc_html( $ldap_ed_current_dept ); ?></h2>
+                        <p class="ldap-dept-header-sub">
+                        <?php
+                        echo esc_html(
+                                sprintf(
+                                        /* translators: %s: number of employees in this department */
+                                        _n( '%s employee in this department', '%s employees in this department', $ldap_ed_total_count, 'ldap-staff-directory' ),
+                                        absint( $ldap_ed_total_count )
+                                )
+                        );
+                        ?>
+                        </p>
+                </div>
+                <span
+                        class="ldap-dept-header-badge"
+                        aria-hidden="true"
+                        style="--ldap-avatar-bg:<?php echo esc_attr( $ldap_ed_dept_avatar['color'] ); ?>"
+                ><?php echo esc_html( $ldap_ed_dept_avatar['initials'] ); ?></span>
+        </div>
 
         <?php if ( $ldap_ed_enable_search ) : ?>
@@ -45 +71 @@
                                 <?php esc_html_e( 'Search employees', 'ldap-staff-directory' ); ?>
                         </label>
-                        <?php if ( '' !== $ldap_ed_current_dept ) : ?>
                         <input type="hidden" name="ldap_dept" value="<?php echo esc_attr( $ldap_ed_current_dept ); ?>">
-                        <?php endif; ?>
                         <input
                                 type="search"
@@ -53 +77 @@
                                 name="ldap_search"
                                 class="ldap-search"
-                                placeholder="<?php esc_attr_e( 'Search employee…', 'ldap-staff-directory' ); ?>"
+                                placeholder="<?php
+                                echo esc_attr(
+                                        sprintf(
+                                                /* translators: %s: department name */
+                                                __( 'Search in %s…', 'ldap-staff-directory' ),
+                                                $ldap_ed_current_dept
+                                        )
+                                );
+                                ?>"
                                 aria-label="<?php esc_attr_e( 'Search employee', 'ldap-staff-directory' ); ?>"
                                 value="<?php echo esc_attr( $ldap_ed_search_query ); ?>"
@@ -59 +91 @@
                 </form>
         </div>
-
-        <?php if ( count( $ldap_ed_departments ) >= 2 ) : ?>
-        <div class="ldap-dept-filters" role="list" aria-label="<?php esc_attr_e( 'Filter by department', 'ldap-staff-directory' ); ?>">
-
-                <?php // "All" chip — active when no department filter is set. ?>
-                <?php $ldap_ed_all_url = esc_url( add_query_arg( 'ldap_page', 1, remove_query_arg( array( 'ldap_dept', 'ldap_page' ) ) ) ); ?>
-                <?php if ( '' === $ldap_ed_current_dept ) : ?>
-                <span class="ldap-dept-chip is-active" role="listitem" aria-pressed="true">
-                        <?php
-                        echo esc_html(
-                                sprintf(
-                                        /* translators: %s: total employee count */
-                                        __( 'All (%s)', 'ldap-staff-directory' ),
-                                        absint( $ldap_ed_all_count )
-                                )
-                        );
-                        ?>
-                </span>
-                <?php else : ?>
-                <a
-                        href="<?php echo $ldap_ed_all_url; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- already passed through esc_url() above ?>"
-                        class="ldap-dept-chip"
-                        role="listitem"
-                        aria-pressed="false"
-                >
-                        <?php
-                        echo esc_html(
-                                sprintf(
-                                        /* translators: %s: total employee count */
-                                        __( 'All (%s)', 'ldap-staff-directory' ),
-                                        absint( $ldap_ed_all_count )
-                                )
-                        );
-                        ?>
-                </a>
-                <?php endif; ?>
-
-                <?php foreach ( $ldap_ed_departments as $ldap_ed_dept_name => $ldap_ed_dept_count ) : ?>
-                        <?php
-                        $ldap_ed_is_active  = ( 0 === strcasecmp( $ldap_ed_dept_name, $ldap_ed_current_dept ) );
-                        $ldap_ed_chip_url   = esc_url( add_query_arg( array( 'ldap_dept' => $ldap_ed_dept_name, 'ldap_page' => 1 ) ) );
-                        $ldap_ed_clear_url  = esc_url( add_query_arg( 'ldap_page', 1, remove_query_arg( array( 'ldap_dept', 'ldap_page' ) ) ) );
-                        $ldap_ed_chip_label = esc_html( $ldap_ed_dept_name ) . ' (' . absint( $ldap_ed_dept_count ) . ')';
-                        ?>
-                        <?php if ( $ldap_ed_is_active ) : ?>
-                        <span class="ldap-dept-chip is-active" role="listitem" aria-pressed="true">
-                                <?php echo $ldap_ed_chip_label; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- esc_html() + absint() applied above ?>
-                                <a
-                                        href="<?php echo $ldap_ed_clear_url; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- already passed through esc_url() above ?>"
-                                        class="ldap-dept-chip-clear"
-                                        aria-label="<?php esc_attr_e( 'Clear department filter', 'ldap-staff-directory' ); ?>"
-                                >×</a>
-                        </span>
-                        <?php else : ?>
-                        <a
-                                href="<?php echo $ldap_ed_chip_url; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- already passed through esc_url() above ?>"
-                                class="ldap-dept-chip"
-                                role="listitem"
-                                aria-pressed="false"
-                        >
-                                <?php echo $ldap_ed_chip_label; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- esc_html() + absint() applied above ?>
-                        </a>
-                        <?php endif; ?>
-                <?php endforeach; ?>
-
-        </div>
-        <?php endif; ?>
         <?php endif; ?>
 
@@ -134 +99 @@
                 <?php else : ?>
                         <?php foreach ( $ldap_ed_users as $ldap_ed_user ) :
-                                // Compute initials (up to 2 characters) from the display name.
-                                $ldap_name     = $ldap_ed_user['name'] ?? '';
-                                $ldap_parts    = preg_split( '/\s+/', trim( $ldap_name ), 2 );
-                                $ldap_initials = strtoupper( substr( $ldap_parts[0] ?? '', 0, 1 ) );
-                                if ( ! empty( $ldap_parts[1] ) ) {
-                                        $ldap_initials .= strtoupper( substr( $ldap_parts[1], 0, 1 ) );
-                                }
+                                $ldap_ed_name   = $ldap_ed_user['name'] ?? '';
+                                $ldap_ed_avatar = $this->get_initials_and_color( $ldap_ed_name );
+                                $ldap_initials  = $ldap_ed_avatar['initials'];
+
                                 // Fall back to first letter of email when name is absent.
                                 if ( '' === $ldap_initials && ! empty( $ldap_ed_user['email'] ) ) {
@@ -146 +108 @@
                                 }
 
-                                // Deterministic background color derived from the name.
-                                $ldap_color_idx = abs( crc32( $ldap_name ) ) % count( $ldap_avatar_palette );
-                                $ldap_avatar_bg = $ldap_avatar_palette[ $ldap_color_idx ];
+                                $ldap_avatar_bg = $ldap_ed_avatar['color'];
                         ?>
                         <article class="ldap-staff-card">
@@ -162 +122 @@
 
                                 <?php if ( in_array( 'title', $ldap_ed_fields, true ) && ! empty( $ldap_ed_user['title'] ) ) : ?>
-                                <p class="ldap-title"><?php echo esc_html( $ldap_ed_user['title'] ); ?></p>
+                                <p class="ldap-title">
+                                        <?php echo $this->get_icon_svg( 'briefcase' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static trusted SVG markup, no user input ?>
+                                        <?php echo esc_html( $ldap_ed_user['title'] ); ?>
+                                </p>
                                 <?php endif; ?>
 
@@ -173 +136 @@
                                 <?php if ( in_array( 'email', $ldap_ed_fields, true ) && ! empty( $ldap_ed_user['email'] ) ) : ?>
                                 <a class="ldap-email" href="mailto:<?php echo esc_attr( $ldap_ed_user['email'] ); ?>">
+                                        <?php echo $this->get_icon_svg( 'mail' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static trusted SVG markup, no user input ?>
                                         <?php echo esc_html( $ldap_ed_user['email'] ); ?>
                                 </a>
@@ -179 +143 @@
                                 <?php if ( in_array( 'phone', $ldap_ed_fields, true ) && ! empty( $ldap_ed_user['phone'] ) ) : ?>
                                 <a class="ldap-phone" href="tel:<?php echo esc_attr( $ldap_ed_user['phone'] ); ?>">
+                                        <?php echo $this->get_icon_svg( 'phone' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static trusted SVG markup, no user input ?>
                                         <?php echo esc_html( $ldap_ed_user['phone'] ); ?>
                                 </a>
@@ -184 +149 @@
 
                                 <?php if ( in_array( 'extension', $ldap_ed_fields, true ) && ! empty( $ldap_ed_user['extension'] ) ) : ?>
-                                <span class="ldap-extension"><?php echo esc_html( $ldap_ed_user['extension'] ); ?></span>
+                                <span class="ldap-extension">
+                                        <?php echo $this->get_icon_svg( 'building' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static trusted SVG markup, no user input ?>
+                                        <?php echo esc_html( $ldap_ed_user['extension'] ); ?>
+                                </span>
                                 <?php endif; ?>
                         </article>
@@ -209 +177 @@
                         $ldap_ed_from = absint( ( $ldap_ed_current_page - 1 ) * $ldap_ed_per_page + 1 );
                         $ldap_ed_to   = absint( min( $ldap_ed_current_page * $ldap_ed_per_page, $ldap_ed_total_count ) );
-                        if ( '' !== $ldap_ed_current_dept ) :
-                                echo esc_html(
-                                        sprintf(
-                                                /* translators: 1: first record number on page, 2: last record number on page, 3: total filtered records, 4: department name */
-                                                __( 'Showing %1$s–%2$s of %3$s in %4$s', 'ldap-staff-directory' ),
-                                                absint( $ldap_ed_from ),
-                                                absint( $ldap_ed_to ),
-                                                absint( $ldap_ed_total_count ),
-                                                $ldap_ed_current_dept
-                                        )
-                                );
-                        else :
-                                echo esc_html(
-                                        sprintf(
-                                                /* translators: 1: first record number on page, 2: last record number on page, 3: total records */
-                                                __( 'Showing %1$s–%2$s of %3$s', 'ldap-staff-directory' ),
-                                                absint( $ldap_ed_from ),
-                                                absint( $ldap_ed_to ),
-                                                absint( $ldap_ed_total_count )
-                                        )
-                                );
-                        endif;
+                        echo esc_html(
+                                sprintf(
+                                        /* translators: 1: first record number on page, 2: last record number on page, 3: total filtered records, 4: department name */
+                                        __( 'Showing %1$s–%2$s of %3$s in %4$s', 'ldap-staff-directory' ),
+                                        absint( $ldap_ed_from ),
+                                        absint( $ldap_ed_to ),
+                                        absint( $ldap_ed_total_count ),
+                                        $ldap_ed_current_dept
+                                )
+                        );
                 endif; ?>
                 </span>

ldap-staff-directory/trunk/readme.txt

@@ -3 +3 @@
 Tags:              ldap, directory, wpbeaverbuilder, staff, elementor
 Requires at least: 5.8
-Tested up to:      7.0
+Tested up to:      7.1
 Requires PHP:      7.4
-Stable tag:        1.2.1
+Stable tag:        1.4.0
 License:           GPLv2 or later
 License URI:       https://www.gnu.org/licenses/gpl-2.0.html
@@ -23 +23 @@
 * Native Elementor widget with full style controls
 * Native Beaver Builder module with General and Style tabs
-* Department filter bar with configurable chip order (alphabetical or by contact count)
+* Public directory browses department-first: a menu of departments (with employee counts) leads to each department's contact list, in configurable order (alphabetical or by contact count)
+* Employee cards within a department can be ordered by name or job title, ascending or descending, from the admin — no code changes needed
 * Exclude specific departments — or employees with no department assigned — from the public directory, enforced at the LDAP query level so those employees are never fetched
 * Exclude disabled Active Directory accounts
@@ -77 +78 @@
 By default 60 minutes. Change the TTL under **Settings → LDAP Directory → Fields → Advanced settings**, or flush immediately with the **Clear Cache** button on that same tab.
 
+= Why do I now see a list of departments instead of all employees? =
+
+Starting in 1.3.0, the public directory browses department-first: visitors see a menu of departments with employee counts, and click into one to see its contacts. This replaces the previous single-page grid with a department filter bar. There is no setting to restore the old flat grid.
+
 == Screenshots ==
 
@@ -85 +90 @@
 
 == Changelog ==
+
+= 1.4.0 =
+* Feature: New **Employee order** setting under **Settings → LDAP Directory → Fields** lets you choose how employee cards are ordered within a department: by name or job title, ascending or descending. Ties on job title (including employees with no title) are always broken by name (A–Z).
+
+= 1.3.0 =
+* Feature: The public directory now browses department-first. The root view shows a menu of departments (name, employee count, color-coded avatar) instead of the full employee grid; clicking a department opens its filtered, paginated contact list with a breadcrumb back to the menu.
+* Feature: Employee cards in the department view show a small icon next to job title, email, phone, and extension for easier scanning.
+* Breaking change: The department filter chip bar has been removed and replaced by the department menu described above. There is no setting to restore the previous single-page grid.
+* Chore: "Tested up to" updated to WordPress 7.1.
 
 = 1.2.1 =