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

This commit is contained in:
hamster1963
2025-12-28 16:21:17 +08:00
parent 42f99a6f84
commit c989a67265
2 changed files with 17 additions and 19 deletions
+9
View File
@@ -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
+8 -19
View File
@@ -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",
"text-white": showMap === "1",
"inset-shadow-black/20 bg-blue-600 text-white dark:bg-blue-100 dark:text-blue-600": showMap === "1",
},
{
"bg-opacity-70 dark:bg-opacity-70": customBackgroundImage,
},
)}
>
<MapIcon
className={cn("size-[13px]", {
"text-white": showMap === "1",
})}
/>
<MapIcon className={cn("size-[13px]")} />
</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",
"text-white": showServices === "1",
"inset-shadow-black/20 bg-blue-600 text-white dark:bg-blue-100 dark:text-blue-600": showServices === "1",
},
{
"bg-opacity-70 dark:bg-opacity-70": customBackgroundImage,
},
)}
>
<ChartBarSquareIcon
className={cn("size-[13px]", {
"text-white": showServices === "1",
})}
/>
<ChartBarSquareIcon className={cn("size-[13px]")} />
</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",
"text-white": inline === "1",
"inset-shadow-black/20 bg-blue-600 text-white dark:bg-blue-100 dark:text-blue-600": inline === "1",
},
{
"bg-opacity-70 dark:bg-opacity-70": customBackgroundImage,