From 3059df40141da5e9a569c8396bb053a98c9716e5 Mon Sep 17 00:00:00 2001
From: decolua <decoluadt@example.com>
Date: Thu, 26 Mar 2026 10:48:53 +0700
Subject: [PATCH] chore: - Adjust opacity settings for ConnectionRow to improve
 user experience.

---
 package.json                                  |  2 +-
 src/app/(dashboard)/dashboard/combos/page.js  | 43 ++++++++++---------
 .../dashboard/providers/[id]/page.js          |  2 +-
 src/shared/components/Sidebar.js              |  2 +-
 4 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 25236e9..fe034c3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "9router-app",
-  "version": "0.3.60",
+  "version": "0.3.61",
   "description": "9Router web dashboard",
   "private": true,
   "scripts": {
diff --git a/src/app/(dashboard)/dashboard/combos/page.js b/src/app/(dashboard)/dashboard/combos/page.js
index 0a07a8a..de8144d 100644
--- a/src/app/(dashboard)/dashboard/combos/page.js
+++ b/src/app/(dashboard)/dashboard/combos/page.js
@@ -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>
diff --git a/src/app/(dashboard)/dashboard/providers/[id]/page.js b/src/app/(dashboard)/dashboard/providers/[id]/page.js
index 58eb96c..00f45ed 100644
--- a/src/app/(dashboard)/dashboard/providers/[id]/page.js
+++ b/src/app/(dashboard)/dashboard/providers/[id]/page.js
@@ -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}>
diff --git a/src/shared/components/Sidebar.js b/src/shared/components/Sidebar.js
index 67c4195..8e5f9c7 100644
--- a/src/shared/components/Sidebar.js
+++ b/src/shared/components/Sidebar.js
@@ -12,7 +12,6 @@ import { ConfirmModal } from "./Modal";
 const navItems = [
   { href: "/dashboard/endpoint", label: "Endpoint", icon: "api" },
   { href: "/dashboard/providers", label: "Providers", icon: "dns" },
-  { href: "/dashboard/proxy-pools", label: "Proxy Pools", icon: "lan" },
   // { href: "/dashboard/basic-chat", label: "Basic Chat", icon: "chat" }, // Hidden
   { href: "/dashboard/combos", label: "Combos", icon: "layers" },
   { href: "/dashboard/usage", label: "Usage", icon: "bar_chart" },
@@ -26,6 +25,7 @@ const debugItems = [
 ];
 
 const systemItems = [
+  { href: "/dashboard/proxy-pools", label: "Proxy Pools", icon: "lan" },
   { href: "/dashboard/profile", label: "Settings", icon: "settings" },
 ];