Filtering by language and chain fams (#3153)

* filtering by language and chain fams

* default CCIP sidebar to EVM on initial load

Author: khadni

src/components/DocsNavigation/DocsNavigationMobile/SubProductContent.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useRef } from "react"
 import { useStore } from "@nanostores/react"
 import { selectedLanguage } from "~/lib/languageStore.js"
 import { selectedChainType } from "~/stores/chainType.js"
-import { applyChainTypeFilter } from "~/utils/chainType.js"
 import { BackArrowIcon } from "./BackArrowIcon.js"
 import { Page } from "../../Header/Nav/config.js"
 import styles from "./subProductContent.module.css"
@@ -84,9 +83,25 @@ export const SubProductContent = ({ subProducts, onSubproductClick, currentPath
   const currentLang = useStore(selectedLanguage)
   const currentChain = useStore(selectedChainType)
 
-  // Apply chain type filtering using shared utility (same as desktop sidebar)
+  // Apply unified chain type filtering that respects both language AND chain filters
   useEffect(() => {
-    applyChainTypeFilter(currentChain)
+    const sidebarItems = document.querySelectorAll<HTMLElement>("[data-chain-types]")
+
+    sidebarItems.forEach((item) => {
+      const chainTypesAttr = item.getAttribute("data-chain-types")
+
+      let chainVisible = true
+      if (chainTypesAttr === "universal" || !chainTypesAttr) {
+        chainVisible = true // Always show universal/legacy content
+      } else {
+        const itemChains = chainTypesAttr.split(",")
+        chainVisible = itemChains.includes(currentChain)
+      }
+
+      // Don't overwrite language filtering - only hide if chain doesn't match
+      // Language filtering is already handled in renderPages function above
+      item.style.display = chainVisible ? "" : "none"
+    })
   }, [currentChain])
 
   if (!subProducts) {

src/components/LeftSidebar/LeftSidebar.astro

@@ -161,14 +161,14 @@ const sidebarSections = getSidebarSections(section)
 
 <script>
   import { selectedChainType } from "~/stores/chainType"
-  import { applyChainTypeFilter } from "~/utils/chainType.js"
 
   /**
    * Filters sidebar items based on selected chain type
-   * Uses shared utility function for consistency with mobile drawer
+   * Triggers the unified filter in RecursiveSidebar that respects BOTH chain type AND language
    */
   function filterSidebarByChainType() {
-    applyChainTypeFilter(selectedChainType.get())
+    // trigger a languageChanged event to run the unified filter
+    window.dispatchEvent(new CustomEvent("languageChanged"))
   }
 
   // Run on initial load

src/components/LeftSidebar/RecursiveSidebar.astro

@@ -164,9 +164,49 @@ function shouldExpandSection(item: SectionContent, currentPage: string): boolean
 </ul>
 
 <script>
+  /**
+   * Unified filter that checks BOTH language AND chain type criteria
+   * This prevents one filter from overwriting the other's display property
+   */
+  function shouldShowSidebarItem(item: HTMLElement, currentLang: string, currentChain?: string): boolean {
+    // Check language filter
+    const sdkLang = item.getAttribute("data-sdk-lang")
+    const langVisible =
+      sdkLang === "both" || // Always show language-agnostic items
+      !sdkLang || // Items without sdkLang attribute
+      sdkLang === currentLang // Matches current language
+
+    // Check chain type filter (only if chain filtering is active)
+    let chainVisible = true
+    if (currentChain) {
+      const chainTypesAttr = item.getAttribute("data-chain-types")
+      if (chainTypesAttr === "universal" || !chainTypesAttr) {
+        chainVisible = true // Always show universal/legacy content
+      } else {
+        const itemChains = chainTypesAttr.split(",")
+        chainVisible = itemChains.includes(currentChain)
+      }
+    }
+
+    // Item is visible only if BOTH filters pass
+    return langVisible && chainVisible
+  }
+
+  /**
+   * Detects chain type from URL path
+   * This ensures consistent behavior even before the store initializes
+   */
+  function detectChainFromPath(pathname: string): string | null {
+    if (/\/(evm|ethereum)(\/|$)/i.test(pathname)) return "evm"
+    if (/\/(svm|solana)(\/|$)/i.test(pathname)) return "solana"
+    if (/\/aptos(\/|$)/i.test(pathname)) return "aptos"
+    return null
+  }
+
   /**
    * Filters sidebar items based on selected SDK language
    * - Hides items with data-sdk-lang that don't match current selection
+   * - Respects chain type filtering if active
    * - Runs on initial load and when language changes
    */
   function filterSidebarByLanguage() {
@@ -181,22 +221,38 @@ function shouldExpandSection(item: SectionContent, currentPage: string): boolean
       // Fallback to default
     }
 
+    // Get current chain type if chain filtering is active (for CCIP section)
+    // Priority: URL path detection → localStorage → default (EVM)
+    let currentChain: string | undefined
+    try {
+      // Priority 1: Detect from URL (e.g., /ccip/getting-started/svm → "solana")
+      const detectedChain = detectChainFromPath(window.location.pathname)
+      if (detectedChain) {
+        currentChain = detectedChain
+      } else {
+        // Priority 2: Read from localStorage
+        const chainStore = localStorage.getItem("chainlink-docs-chain-type")
+        if (chainStore) {
+          currentChain = chainStore
+        } else {
+          // Priority 3: Default to EVM if we're in a section that uses chain filtering
+          // Check if any items in the sidebar have chain type attributes
+          const hasChainTypes = document.querySelector("[data-chain-types]:not([data-chain-types='universal'])")
+          if (hasChainTypes) {
+            currentChain = "evm" // Default chain type
+          }
+        }
+      }
+    } catch {
+      // Chain filtering not active in this section
+    }
+
     // Find all sidebar items with data-sdk-lang attribute
     const sidebarItems = document.querySelectorAll<HTMLElement>("[data-sdk-lang]")
 
     sidebarItems.forEach((item) => {
-      const sdkLang = item.getAttribute("data-sdk-lang")
-
-      if (sdkLang === "both") {
-        // Always show items that are language-agnostic
-        item.style.display = ""
-      } else if (sdkLang !== currentLang) {
-        // Hide items that don't match current language
-        item.style.display = "none"
-      } else {
-        // Show items that match current language
-        item.style.display = ""
-      }
+      const visible = shouldShowSidebarItem(item, currentLang, currentChain)
+      item.style.display = visible ? "" : "none"
     })
   }