Refactor global styles and enhance MITM functionality

- Updated global CSS to implement a new brand color palette and improve light/dark theme consistency.
- Enhanced the MitmServerCard component to provide clearer user feedback regarding admin privileges.
- Filtered LLM combos in the CombosPage to ensure only relevant data is displayed.
- Improved APIPageClient layout for better usability and visual consistency.
- Added functionality to save and load DNS tool states in the MITM manager.
- Updated OAuth configuration URLs for Qwen to reflect the new endpoint structure.
- Refined tunnel management logic to improve reliability and user experience.
This commit is contained in:
decolua
2026-05-03 18:00:35 +07:00
parent 1686adc704
commit 6cdf40b44e
40 changed files with 1029 additions and 762 deletions
+21 -21
View File
@@ -123,7 +123,7 @@ export default function Sidebar({ onClose }) {
return (
<>
<aside className="flex w-72 flex-col border-r border-black/5 dark:border-white/5 bg-vibrancy backdrop-blur-xl transition-colors duration-300 min-h-full">
<aside className="flex w-72 flex-col border-r border-border-subtle bg-vibrancy backdrop-blur-xl transition-colors duration-300 min-h-full">
{/* Traffic lights */}
<div className="flex items-center gap-2 px-6 pt-5 pb-2">
<div className="w-3 h-3 rounded-full bg-[#FF5F56]" />
@@ -134,7 +134,7 @@ export default function Sidebar({ onClose }) {
{/* Logo */}
<div className="px-6 py-4 flex flex-col gap-2">
<Link href="/dashboard" className="flex items-center gap-3">
<div className="flex items-center justify-center size-9 rounded bg-linear-to-br from-[#f97815] to-[#c2590a]">
<div className="flex items-center justify-center size-9 rounded-[10px] bg-gradient-to-br from-brand-500 to-brand-700 shadow-[var(--shadow-warm)]">
<span className="material-symbols-outlined text-white text-[20px]">hub</span>
</div>
<div className="flex flex-col">
@@ -178,10 +178,10 @@ export default function Sidebar({ onClose }) {
href={item.href}
onClick={onClose}
className={cn(
"flex items-center gap-3 px-4 py-2 rounded-lg transition-all group",
"flex items-center gap-3 px-3 py-1.5 rounded-lg transition-all group",
isActive(item.href)
? "bg-primary/10 text-primary"
: "text-text-muted hover:bg-surface/50 hover:text-text-main"
: "text-text-muted hover:bg-surface-2 hover:text-text-main"
)}
>
<span
@@ -192,12 +192,12 @@ export default function Sidebar({ onClose }) {
>
{item.icon}
</span>
<span className="text-sm font-medium">{item.label}</span>
<span className="text-[13px] font-medium">{item.label}</span>
</Link>
))}
{/* System section */}
<div className="pt-4 mt-2">
<div className="pt-4 mt-2 space-y-1">
<p className="px-4 text-xs font-semibold text-text-muted/60 uppercase tracking-wider mb-2">
System
</p>
@@ -206,14 +206,14 @@ export default function Sidebar({ onClose }) {
<button
onClick={() => setMediaOpen((v) => !v)}
className={cn(
"w-full flex items-center gap-3 px-4 py-2 rounded-lg transition-all group",
"w-full flex items-center gap-3 px-3 py-1.5 rounded-lg transition-all group",
pathname.startsWith("/dashboard/media-providers")
? "bg-primary/10 text-primary"
: "text-text-muted hover:bg-surface/50 hover:text-text-main"
: "text-text-muted hover:bg-surface-2 hover:text-text-main"
)}
>
<span className="material-symbols-outlined text-[18px]">perm_media</span>
<span className="text-sm font-medium flex-1 text-left">Media Providers</span>
<span className="text-[13px] font-medium flex-1 text-left">Media Providers</span>
<span className="material-symbols-outlined text-[14px] transition-transform" style={{ transform: mediaOpen ? "rotate(180deg)" : "rotate(0deg)" }}>
expand_more
</span>
@@ -229,7 +229,7 @@ export default function Sidebar({ onClose }) {
"flex items-center gap-3 px-4 py-1.5 rounded-lg transition-all group",
pathname.startsWith(`/dashboard/media-providers/${kind.id}`)
? "bg-primary/10 text-primary"
: "text-text-muted hover:bg-surface/50 hover:text-text-main"
: "text-text-muted hover:bg-surface-2 hover:text-text-main"
)}
>
<span className="material-symbols-outlined text-[16px]">{kind.icon}</span>
@@ -244,7 +244,7 @@ export default function Sidebar({ onClose }) {
"flex items-center gap-3 px-4 py-1.5 rounded-lg transition-all group",
pathname.startsWith(COMBINED_WEB_ITEM.href)
? "bg-primary/10 text-primary"
: "text-text-muted hover:bg-surface/50 hover:text-text-main"
: "text-text-muted hover:bg-surface-2 hover:text-text-main"
)}
>
<span className="material-symbols-outlined text-[16px]">{COMBINED_WEB_ITEM.icon}</span>
@@ -259,10 +259,10 @@ export default function Sidebar({ onClose }) {
href={item.href}
onClick={onClose}
className={cn(
"flex items-center gap-3 px-4 py-2 rounded-lg transition-all group",
"flex items-center gap-3 px-3 py-1.5 rounded-lg transition-all group",
isActive(item.href)
? "bg-primary/10 text-primary"
: "text-text-muted hover:bg-surface/50 hover:text-text-main"
: "text-text-muted hover:bg-surface-2 hover:text-text-main"
)}
>
<span
@@ -273,7 +273,7 @@ export default function Sidebar({ onClose }) {
>
{item.icon}
</span>
<span className="text-sm font-medium">{item.label}</span>
<span className="text-[13px] font-medium">{item.label}</span>
</Link>
))}
@@ -286,10 +286,10 @@ export default function Sidebar({ onClose }) {
href={item.href}
onClick={onClose}
className={cn(
"flex items-center gap-3 px-4 py-2 rounded-lg transition-all group",
"flex items-center gap-3 px-3 py-1.5 rounded-lg transition-all group",
isActive(item.href)
? "bg-primary/10 text-primary"
: "text-text-muted hover:bg-surface/50 hover:text-text-main"
: "text-text-muted hover:bg-surface-2 hover:text-text-main"
)}
>
<span
@@ -300,7 +300,7 @@ export default function Sidebar({ onClose }) {
>
{item.icon}
</span>
<span className="text-sm font-medium">{item.label}</span>
<span className="text-[13px] font-medium">{item.label}</span>
</Link>
) : null;
})}
@@ -310,10 +310,10 @@ export default function Sidebar({ onClose }) {
href="/dashboard/profile"
onClick={onClose}
className={cn(
"flex items-center gap-3 px-4 py-2 rounded-lg transition-all group",
"flex items-center gap-3 px-3 py-1.5 rounded-lg transition-all group",
isActive("/dashboard/profile")
? "bg-primary/10 text-primary"
: "text-text-muted hover:bg-surface/50 hover:text-text-main"
: "text-text-muted hover:bg-surface-2 hover:text-text-main"
)}
>
<span
@@ -324,13 +324,13 @@ export default function Sidebar({ onClose }) {
>
settings
</span>
<span className="text-sm font-medium">Settings</span>
<span className="text-[13px] font-medium">Settings</span>
</Link>
</div>
</nav>
{/* Footer section */}
<div className="p-3 border-t border-black/5 dark:border-white/5">
<div className="p-3 border-t border-border-subtle">
{/* Shutdown button */}
<Button
variant="outline"