MythEclipse/9router
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve dashboard responsive layouts (#805)

Browse Source 
* Improve dashboard responsive layouts

* Improve proxy pools mobile layout

* Improve CLI tool card input responsiveness

---------

Co-authored-by: Delynn Assistant <zhen@dkzhen.org>
This commit is contained in:
ZhenandDelynn Assistant authored and GitHub committed 2026-05-01 16:34:07 +07:00
1 parent 9ca388972c
commit 0da61d8f7b
29 files changed
+561 -464
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/(dashboard)/dashboard/proxy-pools/page.js
+16 -16
View File
@@ -325,7 +325,7 @@ export default function ProxyPoolsPage() {
if (loading) {
return (
<div className="flex flex-col gap-6">
<div className="mx-auto flex w-full max-w-5xl flex-col gap-4 px-1 sm:gap-6 sm:px-0">
<CardSkeleton />
<CardSkeleton />
</div>
@@ -333,16 +333,16 @@ export default function ProxyPoolsPage() {
}
return (
<div className="flex flex-col gap-6">
<div className="flex items-center justify-between gap-3">
<div>
<h1 className="text-2xl font-semibold">Proxy Pools</h1>
<div className="mx-auto flex w-full max-w-5xl flex-col gap-4 px-1 sm:gap-6 sm:px-0">
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
<div className="min-w-0">
<h1 className="text-xl font-semibold sm:text-2xl">Proxy Pools</h1>
<p className="text-sm text-text-muted mt-1">
Manage reusable per-connection proxies and bind them to provider connections.
</p>
</div>
<div className="flex items-center gap-2">
<div className="grid grid-cols-1 gap-2 sm:flex sm:items-center">
<Button variant="secondary" icon="cloud_upload" onClick={openVercelModal}>
Vercel Relay
</Button>
@@ -354,8 +354,8 @@ export default function ProxyPoolsPage() {
</div>
<Card>
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2">
<div className="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<div className="flex flex-wrap items-center gap-2">
<Badge variant="default">Total: {proxyPools.length}</Badge>
<Badge variant="success">Active: {activeCount}</Badge>
</div>
@@ -372,10 +372,10 @@ export default function ProxyPoolsPage() {
) : (
<div className="flex flex-col divide-y divide-black/[0.04] dark:divide-white/[0.05]">
{proxyPools.map((pool) => (
<div key={pool.id} className="py-3 flex items-center justify-between gap-3 group">
<div key={pool.id} className="group flex flex-col gap-3 py-3 sm:flex-row sm:items-center sm:justify-between">
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2 flex-wrap">
<p className="text-sm font-medium truncate">{pool.name}</p>
<p className="min-w-0 max-w-full truncate text-sm font-medium sm:max-w-[18rem]">{pool.name}</p>
<Badge variant={getStatusVariant(pool.testStatus)} size="sm" dot>
{pool.testStatus || "unknown"}
</Badge>
@@ -399,7 +399,7 @@ export default function ProxyPoolsPage() {
</p>
</div>
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="flex items-center justify-end gap-1 opacity-100 transition-opacity sm:opacity-0 sm:group-hover:opacity-100">
<button
onClick={() => handleTest(pool.id)}
className="p-2 rounded hover:bg-black/5 dark:hover:bg-white/5 text-text-muted hover:text-primary"
@@ -453,7 +453,7 @@ export default function ProxyPoolsPage() {
</p>
</div>
<div className="flex gap-2">
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
<Button fullWidth onClick={handleBatchImport} disabled={!batchImportText.trim() || importing}>
{importing ? "Importing..." : "Import"}
</Button>
@@ -497,7 +497,7 @@ export default function ProxyPoolsPage() {
placeholder="my-relay"
hint="Unique name for your Vercel project. Leave empty for auto-generated name."
/>
<div className="flex gap-2">
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
<Button
fullWidth
onClick={handleVercelDeploy}
@@ -538,7 +538,7 @@ export default function ProxyPoolsPage() {
hint="Comma-separated hosts/domains to bypass proxy"
/>
<div className="rounded-lg border border-border/50 p-3 flex items-center justify-between">
<div className="flex flex-col gap-3 rounded-lg border border-border/50 p-3 sm:flex-row sm:items-center sm:justify-between">
<div>
<p className="font-medium text-sm">Active</p>
<p className="text-xs text-text-muted">Inactive pools are ignored by runtime resolution.</p>
@@ -550,7 +550,7 @@ export default function ProxyPoolsPage() {
/>
</div>
<div className="rounded-lg border border-border/50 p-3 flex items-center justify-between">
<div className="flex flex-col gap-3 rounded-lg border border-border/50 p-3 sm:flex-row sm:items-center sm:justify-between">
<div>
<p className="font-medium text-sm">Strict Proxy</p>
<p className="text-xs text-text-muted">Fail request if proxy is unreachable instead of falling back to direct.</p>
@@ -562,7 +562,7 @@ export default function ProxyPoolsPage() {
/>
</div>
<div className="flex gap-2">
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
<Button
fullWidth
onClick={handleSave}