refactor: polish settings toolbar

This commit is contained in:
Your Name 2026-05-29 15:41:45 +08:00
parent 1abbd740a3
commit 0861a0d87e

View File

@ -11,7 +11,6 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { ADMIN_SETTINGS_NAV_GROUPS } from "../_lib/settings-navigation";
import type { AdminSettingsNavItem } from "../_lib/types";
@ -31,8 +30,8 @@ function SettingsQuickAction({
const Icon = item.icon;
const className =
item.value === activeTab
? "border-foreground/10 bg-foreground text-background shadow-sm hover:bg-foreground/90 dark:border-white/20 dark:bg-white dark:text-black dark:hover:bg-white/90"
: "border-transparent bg-transparent text-muted-foreground hover:border-border/80 hover:bg-background hover:text-foreground";
? "border-foreground/10 bg-foreground text-background shadow-sm hover:!bg-foreground/90 hover:!text-background dark:border-white/20 dark:bg-white dark:text-black dark:hover:!bg-white/90 dark:hover:!text-black"
: "border-transparent bg-transparent text-muted-foreground hover:!border-border/80 hover:!bg-zinc-100 hover:!text-foreground dark:hover:!bg-zinc-900/50";
const layoutClassName = stretched
? "h-10 w-full min-w-0 justify-center gap-2 rounded-2xl border px-4"
: "h-9 shrink-0 gap-2 rounded-full border px-3.5";
@ -126,22 +125,7 @@ export function AdminSettingsNavigation({
</div>
</div>
<div className="hidden min-w-0 items-center gap-2 md:flex">
<div className="shrink-0 text-[11px] text-muted-foreground uppercase tracking-[0.18em]">
Admin Console
</div>
{activeItem ? (
<>
<span className="h-1 w-1 shrink-0 rounded-full bg-border" />
<span className="shrink-0 text-muted-foreground text-xs">
{activeItem.label}
</span>
</>
) : null}
<Separator className="mx-1 h-5 shrink-0" orientation="vertical" />
<div className="hidden min-w-0 items-center gap-3 md:flex">
<div className="flex min-w-0 flex-1 items-center gap-2 overflow-x-auto">
{ALL_SETTINGS_ITEMS.map((item) => (
<div className="min-w-[118px] flex-1" key={item.value}>