chore: - Adjust opacity settings for ConnectionRow to improve user experience.

This commit is contained in:
decolua
2026-03-26 10:48:53 +07:00
parent 99cb9ed11f
commit 3059df4014
4 changed files with 25 additions and 24 deletions
+22 -21
View File
@@ -201,18 +201,7 @@ function ComboCard({ combo, copied, onCopy, onEdit, onDelete, roundRobinEnabled,
<span className="material-symbols-outlined text-primary text-[18px]">layers</span>
</div>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<code className="text-sm font-medium font-mono truncate">{combo.name}</code>
<button
onClick={(e) => { e.stopPropagation(); onCopy(combo.name, `combo-${combo.id}`); }}
className="p-0.5 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary transition-colors opacity-0 group-hover:opacity-100"
title="Copy combo name"
>
<span className="material-symbols-outlined text-[14px]">
{copied === `combo-${combo.id}` ? "check" : "content_copy"}
</span>
</button>
</div>
<code className="text-sm font-medium font-mono truncate">{combo.name}</code>
<div className="flex items-center gap-1 mt-0.5 flex-wrap">
{combo.models.length === 0 ? (
<span className="text-xs text-text-muted italic">No models</span>
@@ -231,9 +220,9 @@ function ComboCard({ combo, copied, onCopy, onEdit, onDelete, roundRobinEnabled,
</div>
{/* Actions */}
<div className="flex items-center gap-2 shrink-0">
{/* Round Robin Toggle */}
<div className="flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="flex items-center gap-3 shrink-0">
{/* Round Robin Toggle — always visible */}
<div className="flex items-center gap-1.5">
<span className="text-xs text-text-muted font-medium">Round Robin</span>
<Toggle
size="sm"
@@ -241,21 +230,33 @@ function ComboCard({ combo, copied, onCopy, onEdit, onDelete, roundRobinEnabled,
onChange={onToggleRoundRobin}
/>
</div>
<div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="flex gap-1">
<button
onClick={(e) => { e.stopPropagation(); onCopy(combo.name, `combo-${combo.id}`); }}
className="flex flex-col items-center px-2 py-1 rounded hover:bg-black/5 dark:hover:bg-white/5 text-text-muted hover:text-primary transition-colors"
title="Copy combo name"
>
<span className="material-symbols-outlined text-[18px]">
{copied === `combo-${combo.id}` ? "check" : "content_copy"}
</span>
<span className="text-[10px] leading-tight">Copy</span>
</button>
<button
onClick={onEdit}
className="p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded text-text-muted hover:text-primary transition-colors"
className="flex flex-col items-center px-2 py-1 rounded hover:bg-black/5 dark:hover:bg-white/5 text-text-muted hover:text-primary transition-colors"
title="Edit"
>
<span className="material-symbols-outlined text-[16px]">edit</span>
<span className="material-symbols-outlined text-[18px]">edit</span>
<span className="text-[10px] leading-tight">Edit</span>
</button>
<button
onClick={onDelete}
className="p-1.5 hover:bg-red-500/10 rounded text-red-500 transition-colors"
className="flex flex-col items-center px-2 py-1 rounded hover:bg-red-500/10 text-red-500 transition-colors"
title="Delete"
>
<span className="material-symbols-outlined text-[16px]">delete</span>
<span className="material-symbols-outlined text-[18px]">delete</span>
<span className="text-[10px] leading-tight">Delete</span>
</button>
</div>
</div>
@@ -1530,7 +1530,7 @@ function ConnectionRow({ connection, proxyPools, isOAuth, isFirst, isLast, onMov
</div>
</div>
<div className="flex items-center gap-2">
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="flex gap-1">
{/* Proxy button with inline dropdown */}
{(proxyPools || []).length > 0 && (
<div className="relative" ref={proxyDropdownRef}>