From d0e67db0041fd0960d5199eb03f90e707bbe9f49 Mon Sep 17 00:00:00 2001
From: Pulse Monitor <pulse@pulse-monitor.dev>
Date: Tue, 26 Aug 2025 16:30:35 +0000
Subject: [PATCH] feat: add hover animations to node summary tables

- Added subtle scale effect (1.01x) on row hover
- Added shadow and left border indicator on hover
- Smooth 150ms transitions for all animations
- Visual feedback makes it clear rows are clickable
- Applied to both PVE and PBS node tables
---
 frontend-modern/src/components/shared/PBSNodeTable.tsx | 7 ++++---
 frontend-modern/src/components/shared/PVENodeTable.tsx | 7 +++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/frontend-modern/src/components/shared/PBSNodeTable.tsx b/frontend-modern/src/components/shared/PBSNodeTable.tsx
index 054f8d043..9d7254426 100644
--- a/frontend-modern/src/components/shared/PBSNodeTable.tsx
+++ b/frontend-modern/src/components/shared/PBSNodeTable.tsx
@@ -118,10 +118,11 @@ export const PBSNodeTable: Component<PBSNodeTableProps> = (props) => {
                 return (
                   <tr 
                     class={`
-                      border-b border-gray-100 dark:border-gray-700/50 transition-colors
-                      ${isClickable ? 'hover:bg-gray-50 dark:hover:bg-gray-700/30 cursor-pointer' : ''}
+                      border-b border-gray-100 dark:border-gray-700/50 
+                      transition-all duration-150 ease-in-out h-8 relative
+                      ${isClickable ? 'hover:bg-gray-50 dark:hover:bg-gray-700/30 cursor-pointer hover:scale-[1.01] hover:shadow-md hover:z-10 hover:border-l-4 hover:border-l-blue-500 dark:hover:border-l-blue-400' : ''}
                       ${!isOnline() ? 'opacity-60' : ''}
-                      ${isSelected() && isClickable ? 'bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30' : ''}
+                      ${isSelected() && isClickable ? 'bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 scale-[1.005] shadow-sm border-l-4 border-l-blue-600 dark:border-l-blue-500' : ''}
                     `}
                     onClick={() => isClickable && props.onNodeClick(pbs.name)}
                   >
diff --git a/frontend-modern/src/components/shared/PVENodeTable.tsx b/frontend-modern/src/components/shared/PVENodeTable.tsx
index 357116ef4..69a036c37 100644
--- a/frontend-modern/src/components/shared/PVENodeTable.tsx
+++ b/frontend-modern/src/components/shared/PVENodeTable.tsx
@@ -210,9 +210,12 @@ export const PVENodeTable: Component<PVENodeTableProps> = (props) => {
                 return (
                   <tr 
                     class={`
-                      border-b border-gray-100 dark:border-gray-700/50 hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors cursor-pointer h-8
+                      border-b border-gray-100 dark:border-gray-700/50 hover:bg-gray-50 dark:hover:bg-gray-700/30 
+                      transition-all duration-150 ease-in-out cursor-pointer h-8
+                      hover:scale-[1.01] hover:shadow-md hover:z-10 relative
+                      hover:border-l-4 hover:border-l-blue-500 dark:hover:border-l-blue-400
                       ${!isOnline() ? 'opacity-60' : ''}
-                      ${isSelected() ? 'bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30' : ''}
+                      ${isSelected() ? 'bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 scale-[1.005] shadow-sm border-l-4 border-l-blue-600 dark:border-l-blue-500' : ''}
                     `}
                     onClick={() => props.onNodeClick(node.name)}
                   >