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

Improve mobile layouts and restore Cloudflare provider (#840)

Browse Source 
Co-authored-by: Delynn Assistant <zhen@dkzhen.org>
This commit is contained in:
ZhenandDelynn Assistant authored and GitHub committed 2026-05-03 14:55:43 +07:00
1 parent ef3abeacf1
commit 14ff538f2e
20 files changed
+223 -210
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/(dashboard)/dashboard/providers/components/ConnectionsCard.js
+12 -12
View File
@@ -104,8 +104,8 @@ function ConnectionRow({ connection, proxyPools, isOAuth, isFirst, isLast, onMov
};
return (
<div className={`group flex items-center justify-between p2 rounded-lg hover:bg-black/[0.02] dark:hover:bg-white/[0.02] transition-colors ${connection.isActive === false ? "opacity-60" : ""}`}>
<div className="flex items-center gap-3 flex-1 min-w-0">
<div className={`group flex flex-col gap-3 p-2 rounded-lg sm:flex-row sm:items-center sm:justify-between hover:bg-black/[0.02] dark:hover:bg-white/[0.02] transition-colors ${connection.isActive === false ? "opacity-60" : ""}`}>
<div className="flex w-full min-w-0 flex-1 items-start gap-3 sm:items-center">
<div className="flex flex-col">
<button onClick={onMoveUp} disabled={isFirst} className={`p-0.5 rounded ${isFirst ? "text-text-muted/30 cursor-not-allowed" : "hover:bg-sidebar text-text-muted hover:text-primary"}`}>
<span className="material-symbols-outlined text-sm">keyboard_arrow_up</span>
@@ -117,7 +117,7 @@ function ConnectionRow({ connection, proxyPools, isOAuth, isFirst, isLast, onMov
<span className="material-symbols-outlined text-base text-text-muted">{isOAuth ? "lock" : "key"}</span>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium truncate">{displayName}</p>
<div className="flex items-center gap-2 mt-1 flex-wrap">
<div className="flex flex-wrap items-center gap-2 mt-1">
<Badge variant={getStatusVariant()} size="sm" dot>
{connection.isActive === false ? "disabled" : (effectiveStatus || "Unknown")}
</Badge>
@@ -129,7 +129,7 @@ function ConnectionRow({ connection, proxyPools, isOAuth, isFirst, isLast, onMov
<span className="text-xs text-text-muted">#{connection.priority}</span>
</div>
{hasAnyProxy && (
<div className="mt-1 flex items-center gap-2 flex-wrap">
<div className="mt-1 flex flex-wrap items-center gap-2">
<span className="text-[11px] text-text-muted truncate max-w-[420px]" title={proxyDisplayText}>{proxyDisplayText}</span>
{maskedProxyUrl && <code className="text-[10px] font-mono bg-black/5 dark:bg-white/5 px-1 py-0.5 rounded text-text-muted">{maskedProxyUrl}</code>}
{noProxyText && <span className="text-[11px] text-text-muted truncate max-w-[320px]" title={noProxyText}>no_proxy: {noProxyText}</span>}
@@ -137,8 +137,8 @@ function ConnectionRow({ connection, proxyPools, isOAuth, isFirst, isLast, onMov
)}
</div>
</div>
<div className="flex items-center gap-2">
<div className="flex gap-1">
<div className="flex w-full flex-wrap items-center justify-between gap-2 sm:w-auto sm:justify-end">
<div className="flex flex-wrap gap-1">
{(proxyPools || []).length > 0 && (
<div className="relative" ref={proxyDropdownRef}>
<button
@@ -398,9 +398,9 @@ export default function ConnectionsCard({ providerId, isOAuth }) {
return (
<>
<Card>
<div className="flex items-center justify-between mb-4">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-4">
<h2 className="text-lg font-semibold">Connections</h2>
<div className="flex items-center gap-2">
<div className="flex flex-wrap items-center gap-2">
<span className="text-xs text-text-muted font-medium">Round Robin</span>
<Toggle
checked={providerStrategy === "round-robin"}
@@ -412,12 +412,12 @@ export default function ConnectionsCard({ providerId, isOAuth }) {
}}
/>
{providerStrategy === "round-robin" && (
<div className="flex items-center gap-1.5">
<div className="flex flex-wrap items-center gap-1.5">
<span className="text-xs text-text-muted">Sticky:</span>
<input
type="number" min={1} value={providerStickyLimit}
onChange={(e) => { setProviderStickyLimit(e.target.value); saveStrategy("round-robin", e.target.value); }}
className="w-14 px-2 py-1 text-xs border border-border rounded-md bg-background focus:outline-none focus:border-primary"
className="w-16 px-2 py-1 text-xs border border-border rounded-md bg-background focus:outline-none focus:border-primary"
/>
</div>
)}
@@ -425,7 +425,7 @@ export default function ConnectionsCard({ providerId, isOAuth }) {
</div>
{connections.length === 0 ? (
<div className="flex items-center justify-between">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<p className="text-sm text-text-muted">No connections yet</p>
<Button size="sm" icon="add" onClick={() => setShowAddModal(true)}>Add Connection</Button>
</div>
@@ -449,7 +449,7 @@ export default function ConnectionsCard({ providerId, isOAuth }) {
/>
))}
</div>
<div className="mt-4">
<div className="mt-4 flex justify-stretch sm:justify-start">
<Button size="sm" icon="add" onClick={() => setShowAddModal(true)}>Add</Button>
</div>
</>