docs,api-ref: design + algolia fixes (#4775)

* fix algolia results on same page

* fix navigation bar for mobile

* fix eslint configurations

* fix github action

* fix search icon on mobile

* fix code block dark mode

www/api-reference/.eslintrc.json

@@ -1,6 +1,7 @@
 {
   "extends": [
     "next/core-web-vitals",
+    "google",
     "../.eslintrc.js"
   ],
   "rules": {

www/api-reference/components/CodeBlock/index.tsx

@@ -26,7 +26,7 @@ const CodeBlock = ({
     <div
       className={clsx(
         "bg-medusa-code-bg-base dark:bg-medusa-code-bg-base-dark relative mb-1 rounded",
-        "border-medusa-code-border w-full max-w-full border",
+        "border-medusa-code-border dark:border-medusa-code-border-dark w-full max-w-full border",
         "xs:after:content-[''] xs:after:rounded xs:after:absolute xs:after:right-0 xs:after:top-0 xs:after:w-[calc(10%+24px)] xs:after:h-full xs:after:bg-code-fade xs:dark:after:bg-code-fade-dark",
         collapsed && "max-h-[400px] overflow-auto",
         className
@@ -37,7 +37,7 @@ const CodeBlock = ({
           ...themes.vsDark,
           plain: {
             ...themes.vsDark.plain,
-            backgroundColor: colorMode === "light" ? "#111827" : "#1C1C1F",
+            backgroundColor: colorMode === "light" ? "#111827" : "#1B1B1B",
           },
         }}
         code={source.trim()}
@@ -78,7 +78,7 @@ const CodeBlock = ({
                       {tokens.length > 1 && (
                         <span
                           className={clsx(
-                            "text-medusa-fg-subtle mr-1 table-cell select-none",
+                            "text-medusa-code-text-subtle dark:text-medusa-code-text-subtle-dark mr-1 table-cell select-none",
                             "bg-medusa-code-bg-base dark:bg-medusa-code-bg-base-dark sticky left-0 w-[1%] px-1 text-right"
                           )}
                         >

www/api-reference/components/Tags/Operation/CodeSection/index.tsx

@@ -28,7 +28,7 @@ const TagOperationCodeSection = ({
     <div className={clsx("mt-2 flex flex-col gap-2", className)}>
       <div
         className={clsx(
-          "bg-medusa-bg-subtle dark:bg-medusa-bg-subtle-dark border-medusa-border-base dark:border-medusa-border-base-dark px-0.75 rounded border py-0.5",
+          "bg-medusa-code-bg-base dark:bg-medusa-code-bg-base-dark border-medusa-border-base dark:border-medusa-border-base-dark px-0.75 rounded border py-0.5",
           "text-code-body flex w-full justify-between gap-1"
         )}
       >

www/api-reference/components/Tags/Section/index.tsx

@@ -39,7 +39,7 @@ const MDXContentClient = dynamic<MDXContentClientProps>(
 ) as React.FC<MDXContentClientProps>
 
 const TagSection = ({ tag }: TagSectionProps) => {
-  const { setActivePath } = useSidebar()
+  const { activePath, setActivePath } = useSidebar()
   const [loadPaths, setLoadPaths] = useState(false)
   const slugTagName = useMemo(() => getSectionId([tag.name]), [tag])
   const { area } = useArea()
@@ -64,8 +64,8 @@ const TagSection = ({ tag }: TagSectionProps) => {
   })
 
   useEffect(() => {
-    if (location.hash && location.hash.includes(slugTagName)) {
-      const tagName = location.hash.replace("#", "").split("_")
+    if (activePath && activePath.includes(slugTagName)) {
+      const tagName = activePath.split("_")
       if (tagName.length === 1 && tagName[0] === slugTagName) {
         const elm = document.getElementById(tagName[0]) as Element
         elm?.scrollIntoView()
@@ -73,7 +73,7 @@ const TagSection = ({ tag }: TagSectionProps) => {
         setLoadPaths(true)
       }
     }
-  }, [slugTagName])
+  }, [slugTagName, activePath])
 
   return (
     <div

www/api-reference/providers/sidebar.tsx

@@ -259,6 +259,14 @@ const SidebarProvider = ({ children }: SidebarProviderProps) => {
     }
   }
 
+  // this is mainly triggered by Algolia
+  const handleHashChange = useCallback(() => {
+    const currentPath = location.hash.replace("#", "")
+    if (currentPath !== activePath) {
+      setActivePath(currentPath)
+    }
+  }, [activePath])
+
   useEffect(() => {
     init()
 
@@ -271,13 +279,6 @@ const SidebarProvider = ({ children }: SidebarProviderProps) => {
       }
     }
 
-    const handleHashChange = () => {
-      const currentPath = location.hash.replace("#", "")
-      if (currentPath !== activePath) {
-        setActivePath(currentPath)
-      }
-    }
-
     window.addEventListener("scroll", handleScroll)
     window.addEventListener("hashchange", handleHashChange)
 
@@ -285,7 +286,7 @@ const SidebarProvider = ({ children }: SidebarProviderProps) => {
       window.removeEventListener("scroll", handleScroll)
       window.removeEventListener("hashchange", handleHashChange)
     }
-  }, [])
+  }, [handleHashChange])
 
   return (
     <SidebarContext.Provider