From e93e924ea04f4c72277a3c2dc0d7c4f04b8b765a Mon Sep 17 00:00:00 2001
From: Anuj Agarwal <anuj@Anujs-MacBook-Pro.local>
Date: Sun, 22 Feb 2026 14:48:27 +0530
Subject: [PATCH 1/5] feat: implement native jump-to-section dropdown for
 tooling

---
 pages/tools/components/GroupByMenu.tsx | 67 ++++++++++++++++++++------
 pages/tools/index.page.tsx             |  8 ++-
 2 files changed, 59 insertions(+), 16 deletions(-)

diff --git a/pages/tools/components/GroupByMenu.tsx b/pages/tools/components/GroupByMenu.tsx
index 3af4fe0f0..c45b2e6c5 100644
--- a/pages/tools/components/GroupByMenu.tsx
+++ b/pages/tools/components/GroupByMenu.tsx
@@ -5,11 +5,25 @@ import { Transform } from '../hooks/useToolsTransform';
 interface GroupByMenuProps {
   transform: Transform;
   setTransform: Dispatch<SetStateAction<Transform>>;
+  activeSections?: string[];
 }
 
-const GroupByMenu = ({ transform, setTransform }: GroupByMenuProps) => {
+const GroupByMenu = ({
+  transform,
+  setTransform,
+  activeSections = [],
+}: GroupByMenuProps) => {
   const groupedBy = transform.groupBy;
 
+  const scrollToSection = (section: string) => {
+    const id = `group-${section}`;
+    const element = document.getElementById(id);
+    if (element) {
+      const y = element.getBoundingClientRect().top + window.scrollY - 100;
+      window.scrollTo({ top: y, behavior: 'smooth' });
+    }
+  };
+
   const groupBy = [
     {
       label: 'None',
@@ -36,21 +50,44 @@ const GroupByMenu = ({ transform, setTransform }: GroupByMenuProps) => {
   };
 
   return (
-    <div className='ml-2 my-8 flex items-center space-x-2 max-w-screen overflow-x-auto'>
-      <span className='text-slate-600 dark:text-slate-300'>GROUP BY:</span>
-      {groupBy.map((group) => {
-        return (
-          <Button
-            key={group.accessorKey}
-            value={group.accessorKey}
-            onClick={setGroupBy}
-            variant={groupedBy === group.accessorKey ? 'default' : 'outline'}
-            className={`${groupedBy === group.accessorKey ? 'text-white dark:text-slate-900 dark:bg-[#bfdbfe]' : 'dark:bg-[#0f172a] text-black dark:text-slate-300 dark:border-transparent'}`}
+    <div className='ml-2 my-8 flex flex-col gap-y-4 w-full'>
+      <div className='flex items-center space-x-2 max-w-screen overflow-x-auto'>
+        <span className='text-slate-600 dark:text-slate-300'>GROUP BY:</span>
+        {groupBy.map((group) => {
+          return (
+            <Button
+              key={group.accessorKey}
+              value={group.accessorKey}
+              onClick={setGroupBy}
+              variant={groupedBy === group.accessorKey ? 'default' : 'outline'}
+              className={`${groupedBy === group.accessorKey ? 'text-white dark:text-slate-900 dark:bg-[#bfdbfe]' : 'dark:bg-[#0f172a] text-black dark:text-slate-300 dark:border-transparent'}`}
+            >
+              {group.label}
+            </Button>
+          );
+        })}
+      </div>
+      {activeSections.length > 0 && groupedBy !== 'none' && (
+        <div className='relative inline-block w-48'>
+          <select
+            onChange={(e) => scrollToSection(e.target.value)}
+            defaultValue=''
+            className='w-full h-9 pl-3 pr-8 appearance-none rounded-md text-sm font-medium border bg-white dark:bg-[#0f172a] text-black dark:text-slate-300 dark:border-transparent cursor-pointer outline-none shadow-sm transition-all'
           >
-            {group.label}
-          </Button>
-        );
-      })}
+            <option value='' disabled>
+              Jump to Section
+            </option>
+            {activeSections.map((section) => (
+              <option key={section} value={section}>
+                {section}
+              </option>
+            ))}
+          </select>
+          <div className='pointer-events-none absolute inset-y-0 right-3 flex items-center text-xs text-slate-500'>
+            ▼
+          </div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/pages/tools/index.page.tsx b/pages/tools/index.page.tsx
index 1f49f73a6..f940794a4 100644
--- a/pages/tools/index.page.tsx
+++ b/pages/tools/index.page.tsx
@@ -217,7 +217,13 @@ export default function ToolingPage({
 
           <div className='flex flex-wrap items-center justify-between gap-4 mb-6'>
             <div className='flex items-center gap-4'>
-              <GroupByMenu transform={transform} setTransform={setTransform} />
+              <GroupByMenu
+                transform={transform}
+                setTransform={setTransform}
+                activeSections={Object.keys(toolsByGroup).filter(
+                  (g) => g !== 'none' && toolsByGroup[g].length > 0,
+                )}
+              />
             </div>
             <div className='flex items-center gap-4'>
               <div className='text-sm text-gray-500 hidden sm:block'>

From 1f561aac3320655fa647c102650199bfe24a0a0c Mon Sep 17 00:00:00 2001
From: Anuj Agarwal <anuj@Anujs-MacBook-Pro.local>
Date: Sun, 22 Feb 2026 19:50:50 +0530
Subject: [PATCH 2/5] Updated button position for bigger screens and arrow down
 image

---
 pages/tools/components/GroupByMenu.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/pages/tools/components/GroupByMenu.tsx b/pages/tools/components/GroupByMenu.tsx
index c45b2e6c5..26dba4ebb 100644
--- a/pages/tools/components/GroupByMenu.tsx
+++ b/pages/tools/components/GroupByMenu.tsx
@@ -50,7 +50,7 @@ const GroupByMenu = ({
   };
 
   return (
-    <div className='ml-2 my-8 flex flex-col gap-y-4 w-full'>
+    <div className='ml-2 my-8 flex flex-col lg:flex-row items-start lg:items-center gap-4 w-full'>
       <div className='flex items-center space-x-2 max-w-screen overflow-x-auto'>
         <span className='text-slate-600 dark:text-slate-300'>GROUP BY:</span>
         {groupBy.map((group) => {
@@ -68,7 +68,7 @@ const GroupByMenu = ({
         })}
       </div>
       {activeSections.length > 0 && groupedBy !== 'none' && (
-        <div className='relative inline-block w-48'>
+        <div className='relative inline-block w-48 lg:ml-2'>
           <select
             onChange={(e) => scrollToSection(e.target.value)}
             defaultValue=''
@@ -83,8 +83,10 @@ const GroupByMenu = ({
               </option>
             ))}
           </select>
-          <div className='pointer-events-none absolute inset-y-0 right-3 flex items-center text-xs text-slate-500'>
-            ▼
+          <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-500'>
+            <svg className='h-4 w-4 fill-current' viewBox='0 0 20 20'>
+              <path d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' />
+            </svg>
           </div>
         </div>
       )}

From 5c9c1ba91cc384236bb582f1162550192a867133 Mon Sep 17 00:00:00 2001
From: Anuj Agarwal <anuj@Anujs-MacBook-Pro.local>
Date: Tue, 24 Feb 2026 18:52:10 +0530
Subject: [PATCH 3/5] changed lg class to md for improving layout

---
 pages/tools/components/GroupByMenu.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/tools/components/GroupByMenu.tsx b/pages/tools/components/GroupByMenu.tsx
index 26dba4ebb..e6a6ac46d 100644
--- a/pages/tools/components/GroupByMenu.tsx
+++ b/pages/tools/components/GroupByMenu.tsx
@@ -50,7 +50,7 @@ const GroupByMenu = ({
   };
 
   return (
-    <div className='ml-2 my-8 flex flex-col lg:flex-row items-start lg:items-center gap-4 w-full'>
+    <div className='ml-2 my-8 flex flex-col md:flex-row items-start md:items-center gap-4 w-full'>
       <div className='flex items-center space-x-2 max-w-screen overflow-x-auto'>
         <span className='text-slate-600 dark:text-slate-300'>GROUP BY:</span>
         {groupBy.map((group) => {
@@ -68,7 +68,7 @@ const GroupByMenu = ({
         })}
       </div>
       {activeSections.length > 0 && groupedBy !== 'none' && (
-        <div className='relative inline-block w-48 lg:ml-2'>
+        <div className='relative inline-block w-48'>
           <select
             onChange={(e) => scrollToSection(e.target.value)}
             defaultValue=''

From 480611437b12d0a9bbc5024f4a17d000d92d2020 Mon Sep 17 00:00:00 2001
From: Agnivesh Chaubey <agniveshvapi@gmail.com>
Date: Sun, 1 Mar 2026 18:42:24 +0530
Subject: [PATCH 4/5] refactor: extend the button component to also support
 select element

---
 components/ui/button.tsx               | 42 +++++++++++++++++++++++---
 pages/tools/components/GroupByMenu.tsx | 37 +++++++++++------------
 2 files changed, 54 insertions(+), 25 deletions(-)

diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 151015de1..2b6066e33 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -37,16 +37,46 @@ const buttonVariants = cva(
   },
 );
 
+type ButtonProps = React.ComponentProps<'button'> &
+  React.ComponentProps<'select'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    selectButton?: boolean;
+  };
+
 function Button({
   className,
   variant,
   size,
   asChild = false,
+  selectButton = false,
+  children,
   ...props
-}: React.ComponentProps<'button'> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
+}: ButtonProps) {
+  if (selectButton) {
+    return (
+      <div className='relative inline-flex'>
+        <select
+          data-slot='select-button'
+          className={cn(
+            buttonVariants({ variant, size }),
+            'appearance-none cursor-pointer pr-8',
+            className,
+          )}
+          {...(props as React.ComponentProps<'select'>)}
+        >
+          {children}
+        </select>
+
+        <div className='pointer-events-none absolute inset-y-0 right-2 flex items-center'>
+          <svg className='h-4 w-4 fill-current opacity-70' viewBox='0 0 20 20'>
+            <path d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' />
+          </svg>
+        </div>
+      </div>
+    );
+  }
+
   const Comp = asChild ? Slot : 'button';
 
   return (
@@ -54,7 +84,9 @@ function Button({
       data-slot='button'
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
-    />
+    >
+      {children}
+    </Comp>
   );
 }
 
diff --git a/pages/tools/components/GroupByMenu.tsx b/pages/tools/components/GroupByMenu.tsx
index e6a6ac46d..c6cb99067 100644
--- a/pages/tools/components/GroupByMenu.tsx
+++ b/pages/tools/components/GroupByMenu.tsx
@@ -68,27 +68,24 @@ const GroupByMenu = ({
         })}
       </div>
       {activeSections.length > 0 && groupedBy !== 'none' && (
-        <div className='relative inline-block w-48'>
-          <select
-            onChange={(e) => scrollToSection(e.target.value)}
-            defaultValue=''
-            className='w-full h-9 pl-3 pr-8 appearance-none rounded-md text-sm font-medium border bg-white dark:bg-[#0f172a] text-black dark:text-slate-300 dark:border-transparent cursor-pointer outline-none shadow-sm transition-all'
-          >
-            <option value='' disabled>
-              Jump to Section
+        <Button
+          selectButton
+          variant='outline'
+          defaultValue=''
+          onChange={(e) =>
+            scrollToSection((e.target as HTMLSelectElement).value)
+          }
+          className='dark:bg-[#0f172a] text-black dark:text-slate-300 dark:border-transparent'
+        >
+          <option value='' disabled>
+            Jump to
+          </option>
+          {activeSections.map((section) => (
+            <option key={section} value={section}>
+              {section}
             </option>
-            {activeSections.map((section) => (
-              <option key={section} value={section}>
-                {section}
-              </option>
-            ))}
-          </select>
-          <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-500'>
-            <svg className='h-4 w-4 fill-current' viewBox='0 0 20 20'>
-              <path d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' />
-            </svg>
-          </div>
-        </div>
+          ))}
+        </Button>
       )}
     </div>
   );

From be897f3d969ae6ba6505f3cc88b9dc950a92bfe7 Mon Sep 17 00:00:00 2001
From: Anuj Agarwal <anuj@Anujs-MacBook-Pro.local>
Date: Sun, 1 Mar 2026 19:09:32 +0530
Subject: [PATCH 5/5] Fixed TypeScript type error for button size

---
 components/ui/button.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 2b6066e33..f51f0c0ce 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -37,8 +37,8 @@ const buttonVariants = cva(
   },
 );
 
-type ButtonProps = React.ComponentProps<'button'> &
-  React.ComponentProps<'select'> &
+type ButtonProps = Omit<React.ComponentProps<'button'>, 'size'> &
+  Omit<React.ComponentProps<'select'>, 'size'> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
     selectButton?: boolean;