From d982bfda3c67552d2fc954c8967c329e757c6f26 Mon Sep 17 00:00:00 2001
From: Nathanael Liu <supernathanliu@gmail.com>
Date: Fri, 3 May 2024 03:38:22 +0000
Subject: [PATCH] fix: restore classname for active tab in categories tab

---
 .../shared/category-tabs/category-link.tsx    | 15 +++++----
 .../shared/category-tabs/category-tabs.tsx    | 31 ++++++++++++++++++-
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/apps/masterbots.ai/components/shared/category-tabs/category-link.tsx b/apps/masterbots.ai/components/shared/category-tabs/category-link.tsx
index 7c5bcb3e..51ccffca 100644
--- a/apps/masterbots.ai/components/shared/category-tabs/category-link.tsx
+++ b/apps/masterbots.ai/components/shared/category-tabs/category-link.tsx
@@ -5,15 +5,18 @@ import { toSlug } from '@/lib/url'
 
 export function CategoryLink({
   category,
-  id
+  id,
+  activeTab
 }: {
   category: Category | 'all'
   id: string
+  activeTab: string
 }) {
   return (
     <Link
       className={`${
-        category === 'all'
+        (activeTab === 'all' && category === 'all') ||
+        (category !== 'all' && activeTab === toSlug(category.name))
           ? 'dark:text-white'
           : 'dark:hover:text-white dark:text-[#F4F4F580] text-zinc-500 hover:text-black'
       } relative rounded-full px-3 py-1.5 text-sm font-medium  outline-sky-400 transition focus-visible:outline-2`}
@@ -24,14 +27,14 @@ export function CategoryLink({
         WebkitTapHighlightColor: 'transparent'
       }}
     >
-      {/* {((activeTab === null && category === 'all') ||
-        (category !== 'all' && activeTab === category.categoryId)) && (
+      {((activeTab === 'all' && category === 'all') ||
+        (category !== 'all' && activeTab === toSlug(category.name))) && (
         <motion.span
-          className="absolute inset-0 z-10 bg-transparent border-b-2 border-[#388DE2]"
+          className="absolute inset-0 z-10 bg-transparent border-solid border-b-2 border-[#388DE2]"
           layoutId="bubble"
           transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
         />
-      )} */}
+      )}
       {category === 'all' ? 'All' : category.name}
     </Link>
   )
diff --git a/apps/masterbots.ai/components/shared/category-tabs/category-tabs.tsx b/apps/masterbots.ai/components/shared/category-tabs/category-tabs.tsx
index e7061afe..bd197af7 100644
--- a/apps/masterbots.ai/components/shared/category-tabs/category-tabs.tsx
+++ b/apps/masterbots.ai/components/shared/category-tabs/category-tabs.tsx
@@ -2,6 +2,8 @@
 
 import type { Category } from '@repo/mb-genql'
 import { CategoryLink } from './category-link'
+import { useEffect } from 'react'
+import { toSlug } from '@/lib/url'
 
 export function CategoryTabs({
   categories,
@@ -10,11 +12,38 @@ export function CategoryTabs({
   categories: Category[]
   initialCategory?: string
 }) {
+  useEffect(() => {
+    console.log('TopETH', initialCategory)
+    if (document) {
+      const element = document.getElementById(
+        `browse-category-tab__${
+          initialCategory === 'all'
+            ? 'all'
+            : categories.filter(c => toSlug(c.name) === initialCategory)[0]
+                ?.categoryId
+        }`
+      )
+
+      if (element) {
+        element.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+          inline: 'center'
+        })
+      }
+    }
+  }, [initialCategory])
+
   return (
     <div className="w-full py-[10px] my-3 !overflow-x-auto overflow-y-hidden whitespace-nowrap scrollbar small-thumb justify-between flex">
-      <CategoryLink category="all" id="browse-category-tab__null" />
+      <CategoryLink
+        activeTab={initialCategory}
+        category="all"
+        id="browse-category-tab__all"
+      />
       {categories.map((category, key) => (
         <CategoryLink
+          activeTab={initialCategory}
           category={category}
           id={`browse-category-tab__${category.categoryId}`}
           key={key}