feat: update troubleshooting filters and navigation

public/navigation.json

@@ -18244,8 +18244,8 @@
       "slugPrefix": "docs/troubleshooting",
       "categories": [
         {
-          "name": "API",
-          "slug": "api",
+          "name": "API and integrations",
+          "slug": "api-and-integrations",
           "origin": "",
           "type": "category",
           "children": [
@@ -18259,28 +18259,28 @@
           ]
         },
         {
-          "name": "Development",
-          "slug": "development",
+          "name": "VTEX IO and app development",
+          "slug": "vtex-io-and-app-development",
           "origin": "",
           "type": "category",
           "children": [
             {
-              "name": "I am getting 500 errors in VTEX IO CLI",
-              "slug": "i-am-getting-500-errors-in-vtex-io-cli",
+              "name": "`vtex release` CLI command returns an EBADF message",
+              "slug": "vtex-release-cli-command-returns-ebadf-message",
               "origin": "",
               "type": "markdown",
               "children": []
             },
             {
-              "name": "I am getting errors with my service configuration app",
-              "slug": "i-am-getting-errors-with-my-service-configuration-app",
+              "name": "I am getting 500 errors in VTEX IO CLI",
+              "slug": "i-am-getting-500-errors-in-vtex-io-cli",
               "origin": "",
               "type": "markdown",
               "children": []
             },
             {
-              "name": "I can't access the Headless CMS",
-              "slug": "unable-to-access-headless-cms",
+              "name": "I am getting errors with my service configuration app",
+              "slug": "i-am-getting-errors-with-my-service-configuration-app",
               "origin": "",
               "type": "markdown",
               "children": []
@@ -18299,27 +18299,13 @@
               "type": "markdown",
               "children": []
             },
-            {
-              "name": "I can't install the Headless CMS plugins in my account",
-              "slug": "i-cant-install-the-headless-cms-plugins-in-my-account",
-              "origin": "",
-              "type": "markdown",
-              "children": []
-            },
             {
               "name": "I can't install VTEX IO CLI",
               "slug": "i-cant-install-vtex-io-cli",
               "origin": "",
               "type": "markdown",
               "children": []
             },
-            {
-              "name": "I can't integrate my external Search Provider",
-              "slug": "i-cant-integrate-my-external-search-provider",
-              "origin": "",
-              "type": "markdown",
-              "children": []
-            },
             {
               "name": "I can't publish my theme due to app dependency",
               "slug": "i-cant-publish-my-theme-due-to-app-dependency",
@@ -18333,6 +18319,21 @@
               "origin": "",
               "type": "markdown",
               "children": []
+            }
+          ]
+        },
+        {
+          "name": "Storefront",
+          "slug": "storefront",
+          "origin": "",
+          "type": "category",
+          "children": [
+            {
+              "name": "I can’t integrate my external Search Provider",
+              "slug": "i-cant-integrate-my-external-search-provider",
+              "origin": "",
+              "type": "markdown",
+              "children": []
             },
             {
               "name": "Issues during extending the FastStore API schema",
@@ -18349,15 +18350,15 @@
               "children": []
             },
             {
-              "name": "My multi-language store is not functioning in the development workspace",
+              "name": "My multi-language store is not working in the development workspace",
               "slug": "my-multi-language-store-is-not-working-in-the-development-workspace",
               "origin": "",
               "type": "markdown",
               "children": []
             },
             {
-              "name": "My pages are taking too long to be published on Headless CMS",
-              "slug": "my-pages-are-taking-too-long-to-be-published-on-headless-cms",
+              "name": "My routes are not behaving as expected",
+              "slug": "my-routes-are-not-behaving-as-expected",
               "origin": "",
               "type": "markdown",
               "children": []
@@ -18370,93 +18371,116 @@
               "children": []
             },
             {
-              "name": "My store does not reflect the overrides I created",
-              "slug": "my-store-does-not-reflect-the-overrides-i-created",
+              "name": "My store is presenting price inconsistencies",
+              "slug": "my-store-is-presenting-price-inconsistencies",
               "origin": "",
               "type": "markdown",
               "children": []
             },
             {
-              "name": "The Price in the shelf or in the search results is different from the product page",
-              "slug": "the-price-in-the-shelf-or-in-the-search-results-is-different-from-the-product-page",
+              "name": "My store is slow or unavailable",
+              "slug": "my-store-is-slow-or-unavailable",
               "origin": "",
               "type": "markdown",
               "children": []
             },
             {
-              "name": "The promotion highlight flag does not appear on the product",
-              "slug": "the-promotion-highlight-flag-does-not-appear-on-the-product",
+              "name": "My store translation is not behaving as expected",
+              "slug": "my-store-translation-is-not-behaving-as-expected",
               "origin": "",
               "type": "markdown",
               "children": []
             },
             {
-              "name": "vtex release CLI command returns an EBADF message",
-              "slug": "vtex-release-cli-command-returns-ebadf-message",
+              "name": "The Price in the shelf or in the search results is different from the product page",
+              "slug": "the-price-in-the-shelf-or-in-the-search-results-is-different-from-the-product-page",
               "origin": "",
               "type": "markdown",
               "children": []
-            }            
+            },
+            {
+              "name": "The promotion highlight flag does not appear on the product",
+              "slug": "the-promotion-highlight-flag-does-not-appear-on-the-product",
+              "origin": "",
+              "type": "markdown",
+              "children": []
+            }
           ]
         },
         {
-          "name": "Store performance",
-          "slug": "store-performance",
+          "name": "Content Management (CMS)",
+          "slug": "content-management-cms",
           "origin": "",
           "type": "category",
           "children": [
             {
-              "name": "My Google Tag Assistant is not working with Partytown",
-              "slug": "my-google-tag-assistant-is-not-working-with-partytown",
+              "name": "I can't access the Headless CMS",
+              "slug": "unable-to-access-headless-cms",
               "origin": "",
               "type": "markdown",
               "children": []
             },
             {
-              "name": "I can't complete a purchase on a FastStore website",
-              "slug": "i-cant-complete-a-purchase-on-a-faststore-website",
+              "name": "I can’t install the Headless CMS plugins in my account",
+              "slug": "error-installing-headless-cms-plugins-on-windows",
               "origin": "",
               "type": "markdown",
               "children": []
             },
             {
-              "name": "My store is slow or unavailable",
-              "slug": "my-store-is-slow-or-unavailable",
+              "name": "My pages are taking too long to be published on Headless CMS",
+              "slug": "my-pages-are-taking-too-long-to-be-published-on-headless-cms",
               "origin": "",
               "type": "markdown",
               "children": []
             },
             {
-              "name": "Google Analytics 4 is tracking inconsistent data from my store",
-              "slug": "google-analytics-4-is-tracking-inconsistent-data-from-my-store",
+              "name": "My store does not reflect the overrides I created",
+              "slug": "my-store-does-not-reflect-the-overrides-i-created",
               "origin": "",
               "type": "markdown",
               "children": []
-            },
+            }
+          ]
+        },
+        {
+          "name": "Checkout and shopping experience",
+          "slug": "checkout-and-shopping-experience",
+          "origin": "",
+          "type": "category",
+          "children": [
             {
-              "name": "UTMs are not being applied to the cart at Checkout",
-              "slug": "utms-are-not-being-applied-to-the-cart-at-checkout",
+              "name": "I can't complete a purchase on a FastStore website",
+              "slug": "i-cant-complete-a-purchase-on-a-faststore-website",
               "origin": "",
               "type": "markdown",
               "children": []
             },
             {
-              "name": "My routes are not behaving as expected",
-              "slug": "my-routes-are-not-behaving-as-expected",
+              "name": "UTMs are not being applied to the cart at Checkout",
+              "slug": "utms-are-not-being-applied-to-the-cart-at-checkout",
               "origin": "",
               "type": "markdown",
               "children": []
-            },
+            }
+          ]
+        },
+        {
+          "name": "Analytics and data collection",
+          "slug": "analytics-and-data-collection",
+          "origin": "",
+          "type": "category",
+          "children": [
             {
-              "name": "My store is presenting price inconsistencies",
-              "slug": "my-store-is-presenting-price-inconsistencies",
+              "name": "Google Analytics 4 is tracking inconsistent data from my store",
+              "slug": "google-analytics-4-is-tracking-inconsistent-data-from-my-store",
               "origin": "",
               "type": "markdown",
               "children": []
             },
             {
-              "name": "My store translation is not behaving as expected",
-              "slug": "my-store-translation-is-not-behaving-as-expected",
+              "name": "My Google Tag Assistant is not working with Partytown",
+              "slug": "my-google-tag-assistant-is-not-working-with-partytown",
               "origin": "",
               "type": "markdown",
               "children": []

src/components/filter/index.tsx

@@ -11,6 +11,7 @@ interface Filter {
 
 interface Props {
   tagFilter?: string[]
+  tagFilterName?: string
   checkBoxFilter?: string[]
   selectedCheckboxes?: string[]
   selectedTags?: string[]
@@ -25,6 +26,7 @@ interface SelectedFilters {
 
 const Filter = ({
   tagFilter,
+  tagFilterName,
   checkBoxFilter,
   onApply,
   selectedCheckboxes,
@@ -102,7 +104,7 @@ const Filter = ({
     if (!tagFilter) return <></>
     return (
       <Box sx={styles.filterContainer}>
-        <Text sx={styles.filterTitle}>{tagFilter}</Text>
+        <Text sx={styles.filterTitle}>{tagFilterName}</Text>
         <Flex sx={styles.tagContainer}>
           {tagFilter.map((option, index) => (
             <Tag

src/components/filter/styles.ts

@@ -99,9 +99,7 @@ const filterContainer: SxStyleProp = {
 
 const tagContainer: SxStyleProp = {
   gap: '16px',
-  overflowX: 'auto',
-  overflowY: 'hidden',
-  height: '24px',
+  flexWrap: 'wrap',
 }
 
 const tag: SxStyleProp = {

src/components/tag/index.tsx

@@ -10,7 +10,7 @@ const Tag = ({
 }: {
   sx?: SxStyleProp
   children: React.ReactNode
-  color?: 'Default' | 'Selected' | 'New' | 'Gray'
+  color?: 'Default' | 'Selected' | 'New' | 'Gray' | 'Blue'
   onClick?: () => void
 }) => {
   return (

src/components/tag/styles.ts

@@ -12,7 +12,7 @@ const tag: SxStyleProp = {
 }
 
 const statusColors: {
-  [status in 'Default' | 'Selected' | 'New' | 'Gray']: SxStyleProp
+  [status in 'Default' | 'Selected' | 'New' | 'Gray' | 'Blue']: SxStyleProp
 } = {
   Default: {
     border: '1px solid #A1AAB7',
@@ -42,6 +42,10 @@ const statusColors: {
     color: '#4A596B',
     background: '#E7E9EE',
   },
+  Blue: {
+    color: '#32587A',
+    background: '#DFEAF5',
+  },
 }
 
 export default {

src/components/troubleshooting-card/index.tsx

@@ -9,7 +9,13 @@ const TroubleshootingCard = ({
   description,
   slug,
   tags,
+  domainFilters,
+  symptomFilters,
 }: TroubleshootingItem) => {
+  const resolvedSymptomFilters = symptomFilters?.filter(Boolean) ?? []
+  const resolvedDomainFilters = domainFilters?.filter(Boolean) ?? []
+  const fallbackTags = tags?.filter(Boolean) ?? []
+
   return (
     <Link href={`/docs/troubleshooting/${slug}`} sx={styles.container}>
       <Box>
@@ -20,14 +26,31 @@ const TroubleshootingCard = ({
           {description}
         </Text>
         <Box sx={styles.tagsContainer}>
-          {tags &&
-            tags
-              .filter((moduleTag: string) => moduleTag !== '')
-              .map((moduleTag: string, index) => (
-                <Tag sx={styles.tag} color={'Gray'} key={`tags-${tags[index]}`}>
-                  {moduleTag}
+          {resolvedSymptomFilters.length > 0 && (
+            <Box sx={styles.tagGroup}>
+              {resolvedSymptomFilters.map((filter) => (
+                <Tag sx={styles.tag} color="Blue" key={`symptom-${filter}`}>
+                  {filter}
+                </Tag>
+              ))}
+            </Box>
+          )}
+          {resolvedDomainFilters.length > 0 && (
+            <Box sx={styles.tagGroup}>
+              {resolvedDomainFilters.map((filter) => (
+                <Tag sx={styles.tag} color="Gray" key={`domain-${filter}`}>
+                  {filter}
                 </Tag>
               ))}
+            </Box>
+          )}
+          {!resolvedSymptomFilters.length &&
+            !resolvedDomainFilters.length &&
+            fallbackTags.map((moduleTag) => (
+              <Tag sx={styles.tag} color="Gray" key={`tags-${moduleTag}`}>
+                {moduleTag}
+              </Tag>
+            ))}
         </Box>
       </Box>
     </Link>