fix: update GroupSwitch and Server components for improved tab handling and styling

src/components/GroupSwitch.tsx

@@ -1,5 +1,6 @@
 import { cn } from "@/lib/utils"
 import { m } from "framer-motion"
+import { s } from "node_modules/framer-motion/dist/types.d-6pKw1mTI"
 import { createRef, useEffect, useRef } from "react"
 
 export default function GroupSwitch({
@@ -36,6 +37,10 @@ export default function GroupSwitch({
   }, [])
 
   useEffect(() => {
+    if (tabs.length === 1 && tabs[0] === "All") {
+      setCurrentTab("All")
+      return
+    }
     const savedGroup = sessionStorage.getItem("selectedGroup")
     if (savedGroup && tabs.includes(savedGroup)) {
       setCurrentTab(savedGroup)
@@ -54,6 +59,10 @@ export default function GroupSwitch({
     }
   }, [currentTab])
 
+  if (tabs.length === 1 && tabs[0] === "All") {
+    return null
+  }
+
   return (
     <div ref={scrollRef} className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]">
       <div

src/pages/Server.tsx

@@ -243,21 +243,16 @@ export default function Servers() {
               localStorage.setItem("showMap", showMap === "0" ? "1" : "0")
             }}
             className={cn(
-              "rounded-[50px] bg-white dark:bg-stone-800 cursor-pointer p-[10px] transition-all border dark:border-none border-stone-200 dark:border-stone-700 hover:bg-stone-100 dark:hover:bg-stone-700 shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]",
+              "inset-shadow-2xs inset-shadow-white/20 flex cursor-pointer flex-col items-center gap-0 rounded-[50px] bg-blue-100 p-2.5 text-blue-600 transition-all dark:bg-blue-900 dark:text-blue-100",
               {
-                "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-600! hover:bg-blue-600! border-blue-600 dark:border-blue-600": showMap === "1",
+                "inset-shadow-black/20 bg-blue-600 text-white dark:bg-blue-100 dark:text-blue-600": showMap === "1",
-                "text-white": showMap === "1",
               },
               {
                 "bg-opacity-70 dark:bg-opacity-70": customBackgroundImage,
               },
             )}
           >
-            <MapIcon
+            <MapIcon className={cn("size-[13px]")} />
-              className={cn("size-[13px]", {
-                "text-white": showMap === "1",
-              })}
-            />
           </button>
           <button
             onClick={() => {
@@ -265,21 +260,16 @@ export default function Servers() {
               localStorage.setItem("showServices", showServices === "0" ? "1" : "0")
             }}
             className={cn(
-              "rounded-[50px] bg-white dark:bg-stone-800 cursor-pointer p-[10px] transition-all border dark:border-none border-stone-200 dark:border-stone-700 hover:bg-stone-100 dark:hover:bg-stone-700 shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]",
+              "inset-shadow-2xs inset-shadow-white/20 flex cursor-pointer flex-col items-center gap-0 rounded-[50px] bg-blue-100 p-2.5 text-blue-600 transition-all dark:bg-blue-900 dark:text-blue-100",
               {
-                "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-600! hover:bg-blue-600! border-blue-600 dark:border-blue-600": showServices === "1",
+                "inset-shadow-black/20 bg-blue-600 text-white dark:bg-blue-100 dark:text-blue-600": showServices === "1",
-                "text-white": showServices === "1",
               },
               {
                 "bg-opacity-70 dark:bg-opacity-70": customBackgroundImage,
               },
             )}
           >
-            <ChartBarSquareIcon
+            <ChartBarSquareIcon className={cn("size-[13px]")} />
-              className={cn("size-[13px]", {
-                "text-white": showServices === "1",
-              })}
-            />
           </button>
           <button
             onClick={() => {
@@ -287,10 +277,9 @@ export default function Servers() {
               localStorage.setItem("inline", inline === "0" ? "1" : "0")
             }}
             className={cn(
-              "rounded-[50px] bg-white dark:bg-stone-800 cursor-pointer p-[10px] transition-all border dark:border-none border-stone-200 dark:border-stone-700 hover:bg-stone-100 dark:hover:bg-stone-700 shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]",
+              "inset-shadow-2xs inset-shadow-white/20 flex cursor-pointer flex-col items-center gap-0 rounded-[50px] bg-blue-100 p-2.5 text-blue-600 transition-all dark:bg-blue-900 dark:text-blue-100",
               {
-                "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-600! hover:bg-blue-600! border-blue-600 dark:border-blue-600": inline === "1",
+                "inset-shadow-black/20 bg-blue-600 text-white dark:bg-blue-100 dark:text-blue-600": inline === "1",
-                "text-white": inline === "1",
               },
               {
                 "bg-opacity-70 dark:bg-opacity-70": customBackgroundImage,