refactor: update products.json to replace outdated product entries with new screens and executive desks, enhancing catalog relevance and organization; update product manager script to improve filter UI functionality

scripts/products.js

@@ -54,13 +54,17 @@ class ProductManager {
   }
 
   // Update filter UI to show selected category
-  updateFilterUI(category) {
+  updateFilterUI(categoryId) {
+    // Find the category object to get the display name
+    const category = this.categories.find((c) => c.id === categoryId);
+    const displayName = category ? category.name : categoryId;
+
     // Update filter button text to show active filter
     const filterToggle = document.getElementById("filter-toggle");
     if (filterToggle) {
       const filterText = filterToggle.querySelector("span:last-child");
       if (filterText) {
-        filterText.textContent = `Filter: ${category}`;
+        filterText.textContent = `Filter: ${displayName}`;
       }
     }
 
@@ -68,13 +72,43 @@ class ProductManager {
     setTimeout(() => {
       const checkboxes = document.querySelectorAll(".category-checkbox");
       checkboxes.forEach((checkbox) => {
-        if (checkbox.value === category) {
+        if (checkbox.value === categoryId) {
           checkbox.checked = true;
         }
       });
     }, 100);
   }
 
+  // Update filter button text based on selected categories
+  updateFilterButtonText() {
+    const filterToggle = document.getElementById("filter-toggle");
+    if (!filterToggle) return;
+
+    const filterText = filterToggle.querySelector("span:last-child");
+    if (!filterText) return;
+
+    // If no categories selected or "all" is selected, show default text
+    if (
+      this.selectedCategories.size === 0 ||
+      this.selectedCategories.has("all")
+    ) {
+      filterText.textContent = "Filter";
+      return;
+    }
+
+    // Get the first selected category and find its display name
+    const firstSelectedCategory = Array.from(this.selectedCategories)[0];
+    const category = this.categories.find(
+      (c) => c.id === firstSelectedCategory
+    );
+
+    if (category) {
+      filterText.textContent = `Filter: ${category.name}`;
+    } else {
+      filterText.textContent = "Filter";
+    }
+  }
+
   // Render products in the grid
   renderProducts() {
     const productGrid = document.getElementById("product-grid");
@@ -376,6 +410,10 @@ class ProductManager {
         this.renderProducts();
         this.updatePagination();
         this.updateResultsCount();
+
+        // Update filter button text to show selected category
+        this.updateFilterButtonText();
+
         const dropdown = document.getElementById("filter-dropdown");
         if (dropdown) dropdown.classList.add("hidden");
       });
@@ -392,6 +430,9 @@ class ProductManager {
         this.renderProducts();
         this.updatePagination();
         this.updateResultsCount();
+
+        // Update filter button text to show default
+        this.updateFilterButtonText();
       });
     }
   }