From 9c6c05da552e91d51f64acc5786c332bfb9861f2 Mon Sep 17 00:00:00 2001
From: Aviv Keller <me@aviv.sh>
Date: Mon, 21 Jul 2025 08:44:28 -0400
Subject: [PATCH 1/2] fix(CodeTabs): name overrides, duplicate name titles
 (#7994)

* fix(CodeTabs): name overrides, duplicate name titles

* Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Aviv Keller <me@aviv.sh>

---------

Signed-off-by: Aviv Keller <me@aviv.sh>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/ui-components/src/MDX/CodeTabs.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/ui-components/src/MDX/CodeTabs.tsx b/packages/ui-components/src/MDX/CodeTabs.tsx
index 8728b460119f3..ab565767aa303 100644
--- a/packages/ui-components/src/MDX/CodeTabs.tsx
+++ b/packages/ui-components/src/MDX/CodeTabs.tsx
@@ -10,6 +10,10 @@ type MDXCodeTabsProps = {
   defaultTab?: string;
 };
 
+const NAME_OVERRIDES: Record<string, string | undefined> = {
+  mjs: 'ESM',
+};
+
 const MDXCodeTabs: FC<MDXCodeTabsProps> = ({
   languages: rawLanguages,
   displayNames: rawDisplayNames,
@@ -20,12 +24,22 @@ const MDXCodeTabs: FC<MDXCodeTabsProps> = ({
   const languages = rawLanguages.split('|');
   const displayNames = rawDisplayNames?.split('|') ?? [];
 
+  const occurrences: Record<string, number> = {};
+
   const tabs = languages.map((language, index) => {
-    const displayName = displayNames[index];
+    const base =
+      displayNames[index]?.trim() ||
+      NAME_OVERRIDES[language] ||
+      language.toUpperCase();
+
+    const count = occurrences[base] ?? 0;
+    occurrences[base] = count + 1;
+
+    const label = count > 0 ? `${base} (${count + 1})` : base;
 
     return {
       key: `${language}-${index}`,
-      label: displayName?.length ? displayName : language.toUpperCase(),
+      label: label,
     };
   });
 

From 012239765a9df321a3aab5ce6950040886a172f7 Mon Sep 17 00:00:00 2001
From: Mohit5Upadhyay <129863157+Mohit5Upadhyay@users.noreply.github.com>
Date: Mon, 21 Jul 2025 19:42:56 +0530
Subject: [PATCH 2/2] feat(SidebarItem): hover effect (#7934)

* fix: add hover effect to sidebar links (#7893)

* fix(sidebar): update hover to neutral grey for consistency with nav links

* chore: remove unrelated style changes, keep necessary margin and rounded corners

* fix: include right-arrow icon in hover background; remove margin, rounded corners, and clean unrelated styles as per review

* fix(sidebar): move flex styles to CSS file & adding margin , rounded on item

* fix(ui): update sidebar hover effect as per review suggestion for consistency
---
 .../Sidebar/SidebarItem/index.module.css      | 32 +++++++++++++++++++
 .../Containers/Sidebar/SidebarItem/index.tsx  |  7 ++--
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css
index c2ea7c7ff8e41..478de159f39fc 100644
--- a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css
+++ b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css
@@ -4,16 +4,42 @@
   @apply font-regular
     relative
     z-20
+    mb-px
     flex
     w-full
     items-center
     overflow-hidden
+    rounded-md
     text-sm
     text-neutral-800
     dark:text-neutral-200;
 
+  &:hover {
+    &:not(.progression) .label {
+      @apply rounded-sm
+        bg-neutral-100
+        text-neutral-900
+        dark:bg-neutral-800
+        dark:text-neutral-100;
+    }
+
+    .icon {
+      @apply scale-110
+        text-green-600
+        dark:text-green-400;
+    }
+
+    .progressionIcon {
+      @apply fill-green-200
+        dark:fill-green-300;
+    }
+  }
+
   .label {
     @apply font-regular
+      flex
+      items-center
+      gap-1.5
       p-2
       text-sm;
   }
@@ -37,6 +63,12 @@
     .label {
       @apply p-1;
     }
+
+    &:not(.active):hover .label {
+      @apply rounded-sm
+        bg-neutral-100
+        dark:bg-neutral-900;
+    }
   }
 
   &.active {
diff --git a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx
index 0556c11c0d156..7bd4132875cc7 100644
--- a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx
+++ b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.tsx
@@ -34,9 +34,12 @@ const SidebarItem: FC<SidebarItemProps> = ({
     {showProgressionIcons && (
       <ProgressionIcon className={styles.progressionIcon} />
     )}
-    <span className={styles.label}>{label}</span>
 
-    {/^https?:/.test(link) && <ArrowUpRightIcon className={styles.icon} />}
+    <div className={styles.label}>
+      <span>{label}</span>
+
+      {/^https?:/.test(link) && <ArrowUpRightIcon className={styles.icon} />}
+    </div>
   </BaseActiveLink>
 );