Fix duplicate search box in plugin edit mode

assets/css/abps-main.css

@@ -4,16 +4,16 @@
  */
 
 /* ==========================================================================
-   Filter Box
+   ABPS Filter Box
    ========================================================================== */
 
+/* ABPS filter box that replaces native WordPress search */
 .abps-filter-container {
-    margin-bottom: 20px;
-    background: #fff;
-    border: 1px solid #c3c4c7;
-    border-radius: 4px;
-    padding: 15px;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    border: none;
+    box-shadow: none;
 }
 
 .abps-filter-wrapper {
@@ -22,9 +22,10 @@
 }
 
 .abps-filter-input {
-    width: 100%;
-    padding: 8px 40px 8px 12px;
-    font-size: 14px;
+    width: 280px;
+    padding: 3px 30px 3px 10px;
+    font-size: 13px;
+    line-height: 2.15384615;
     border: 1px solid #8c8f94;
     border-radius: 4px;
     box-shadow: 0 0 0 transparent;
@@ -39,15 +40,15 @@
 
 .abps-filter-clear {
     position: absolute;
-    right: 5px;
+    right: 2px;
     top: 50%;
     transform: translateY(-50%);
     background: transparent;
     border: none;
     color: #646970;
-    font-size: 24px;
+    font-size: 20px;
     line-height: 1;
-    padding: 5px 10px;
+    padding: 2px 6px;
     cursor: pointer;
     border-radius: 3px;
     transition: all 0.15s ease-in-out;
@@ -191,16 +192,27 @@
     display: none !important;
 }
 
+/* Hide update notification rows in Edit Mode to reduce clutter */
+.abps-edit-mode .plugin-update-tr {
+    display: none !important;
+}
+
 /* Edit Mode Row - Full Width */
 .abps-edit-row {
     background: #f6f7f7;
     display: none;
 }
 
+/* In edit mode, show edit rows */
 .abps-edit-mode .abps-edit-row {
     display: table-row;
 }
 
+/* Hidden by filtering takes precedence */
+.abps-edit-mode .abps-edit-row.abps-filtered-out {
+    display: none !important;
+}
+
 .abps-edit-controls-container {
     padding: 0 !important;
 }

assets/js/abps-config.js

@@ -53,7 +53,7 @@
         filterBox: {
             enabled: true,
             placement: 'above_plugins_list',
-            placeholder: 'Search plugins...',
+            placeholder: 'Search plugins (powered by A Better Plugins Screen)',
             searchableFields: ['name', 'slug', 'description', 'author'],
             matchType: 'partial',
             caseSensitive: false,

assets/js/abps-features.js

@@ -18,6 +18,7 @@
             this.discovery = discovery;
             this.pluginRows = [];
             this.filterTimeout = null;
+            this.filterBoxCreated = false;
         }
 
         /**
@@ -53,8 +54,10 @@
 
             const rows = table.querySelectorAll('#the-list tr.active');
             this.pluginRows = Array.from(rows).filter(row => {
-                // Exclude update rows and ABPS itself
-                return !row.classList.contains('plugin-update-tr');
+                // Exclude update rows, ABPS itself, and edit mode rows
+                return !row.classList.contains('plugin-update-tr') &&
+                       !row.classList.contains('abps-edit-row') &&
+                       row.dataset.slug !== 'a-better-plugins-screen';
             });
 
             this.log(`Collected ${this.pluginRows.length} plugin rows`);
@@ -230,19 +233,27 @@
             this.log('Initializing plugin filtering');
 
             const filterConfig = this.config.get('filterBox');
-            const table = document.querySelector('table.plugins');
 
-            if (!table) return;
+            // Check if filter box already exists
+            if (this.filterBoxCreated) {
+                this.log('Filter box already created, skipping');
+                return;
+            }
+
+            // Find the native WordPress search box paragraph element
+            const searchBox = document.querySelector('.search-form.search-plugins .search-box');
+            if (!searchBox) {
+                this.log('Native search box not found');
+                return;
+            }
 
-            // Create filter box
+            // Create custom ABPS filter box
             const filterBox = this.createFilterBox(filterConfig);
 
-            // Insert filter box based on placement
-            if (filterConfig.placement === 'above_plugins_list') {
-                table.parentNode.insertBefore(filterBox, table);
-            }
+            // Replace the native search box with ABPS search box
+            searchBox.parentNode.replaceChild(filterBox, searchBox);
 
-            // Set up filter event
+            // Set up filter events
             const filterInput = filterBox.querySelector('.abps-filter-input');
             const clearButton = filterBox.querySelector('.abps-filter-clear');
 
@@ -269,6 +280,9 @@
                     filterInput.focus();
                 });
             }
+
+            this.filterBoxCreated = true;
+            this.log('Custom ABPS filter box created');
         }
 
         /**
@@ -306,8 +320,32 @@
                 if (matches || !term) {
                     row.style.display = '';
                     visibleCount++;
+
+                    // Show corresponding update row if it exists
+                    const updateRow = this.getUpdateRow(row);
+                    if (updateRow) {
+                        updateRow.style.display = '';
+                    }
+
+                    // Show corresponding edit row if it exists
+                    const editRow = this.getEditRow(row);
+                    if (editRow) {
+                        editRow.classList.remove('abps-filtered-out');
+                    }
                 } else {
                     row.style.display = 'none';
+
+                    // Hide corresponding update row if it exists
+                    const updateRow = this.getUpdateRow(row);
+                    if (updateRow) {
+                        updateRow.style.display = 'none';
+                    }
+
+                    // Hide corresponding edit row if it exists
+                    const editRow = this.getEditRow(row);
+                    if (editRow) {
+                        editRow.classList.add('abps-filtered-out');
+                    }
                 }
             });
 
@@ -320,6 +358,42 @@
             this.log(`Filter: "${term}", visible: ${visibleCount}`);
         }
 
+        /**
+         * Get the update notification row for a plugin row
+         */
+        getUpdateRow(pluginRow) {
+            const nextRow = pluginRow.nextElementSibling;
+            if (nextRow && nextRow.classList.contains('plugin-update-tr')) {
+                return nextRow;
+            }
+            return null;
+        }
+
+        /**
+         * Get the edit row for a plugin row
+         */
+        getEditRow(pluginRow) {
+            const slug = pluginRow.dataset.slug;
+            if (!slug) return null;
+
+            // Edit row could be next sibling or after update row
+            let currentRow = pluginRow.nextElementSibling;
+
+            // Skip update row if present
+            if (currentRow && currentRow.classList.contains('plugin-update-tr')) {
+                currentRow = currentRow.nextElementSibling;
+            }
+
+            // Check if this is the edit row for our plugin
+            if (currentRow &&
+                currentRow.classList.contains('abps-edit-row') &&
+                currentRow.dataset.pluginSlug === slug) {
+                return currentRow;
+            }
+
+            return null;
+        }
+
         /**
          * Check if plugin matches filter criteria
          */

assets/js/abps-ui.js

@@ -53,10 +53,19 @@
             if (!settingsSpan) {
                 settingsSpan = document.createElement('span');
                 settingsSpan.className = 'settings';
-                // Insert after deactivate link
+
+                // Insert after deactivate link with proper separator
                 const deactivateSpan = rowActions.querySelector('span.deactivate');
-                if (deactivateSpan && deactivateSpan.nextSibling) {
-                    rowActions.insertBefore(settingsSpan, deactivateSpan.nextSibling);
+                if (deactivateSpan) {
+                    // Add pipe separator before inserting
+                    const separator = document.createTextNode(' | ');
+                    if (deactivateSpan.nextSibling) {
+                        rowActions.insertBefore(separator, deactivateSpan.nextSibling);
+                        rowActions.insertBefore(settingsSpan, deactivateSpan.nextSibling);
+                    } else {
+                        rowActions.appendChild(separator);
+                        rowActions.appendChild(settingsSpan);
+                    }
                 } else {
                     rowActions.appendChild(settingsSpan);
                 }
@@ -403,7 +412,7 @@
                 body.classList.add('abps-edit-mode');
                 if (toggleLink) toggleLink.textContent = 'Exit Edit Mode';
                 this.renderEditModeUI();
-                this.showNotification('Edit Mode enabled - hover over plugins to customize', 'info');
+                this.showNotification('Edit Mode enabled - edit controls displayed below each plugin', 'info');
 
                 // Dispatch event
                 document.dispatchEvent(new CustomEvent('abps:edit_mode_enabled'));
@@ -422,7 +431,12 @@
          * Render edit mode UI controls
          */
         renderEditModeUI() {
-            const pluginRows = document.querySelectorAll('table.plugins #the-list tr.active:not(.plugin-update-tr)');
+            const allPluginRows = document.querySelectorAll('table.plugins #the-list tr.active:not(.plugin-update-tr)');
+
+            // Filter to only visible rows (not hidden by search/filtering)
+            const pluginRows = Array.from(allPluginRows).filter(row => {
+                return row.style.display !== 'none';
+            });
 
             pluginRows.forEach(row => {
                 const slug = row.dataset.slug;