From 5febc2a8050e19a714ee94e9604f5fa1bf020eae Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Wed, 18 Jun 2025 17:30:49 +0800
Subject: [PATCH] Add update indicator and animation for updated cards in
 VirtualScroller

---
 static/css/components/card.css     | 42 +++++++++++++++++++++++++++++-
 static/js/utils/VirtualScroller.js | 22 ++++++++++++++++
 2 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/static/css/components/card.css b/static/css/components/card.css
index 29b93c5a..6d30437c 100644
--- a/static/css/components/card.css
+++ b/static/css/components/card.css
@@ -520,4 +520,44 @@
     .card-grid.virtual-scroll {
         max-width: 2400px;
     }
-}
\ No newline at end of file
+}
+
+/* Add after the existing .lora-card:hover styles */
+
+@keyframes update-pulse {
+    0% { box-shadow: 0 0 0 0 var(--lora-accent-transparent); }
+    50% { box-shadow: 0 0 0 4px var(--lora-accent-transparent); }
+    100% { box-shadow: 0 0 0 0 var(--lora-accent-transparent); }
+  }
+  
+  /* Add semi-transparent version of accent color for animation */
+  :root {
+    --lora-accent-transparent: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.6);
+  }
+  
+  .lora-card.updated {
+    animation: update-pulse 1.2s ease-out;
+  }
+  
+  /* Add a subtle updated tag that fades in and out */
+  .update-indicator {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: var(--lora-accent);
+    color: white;
+    border-radius: var(--border-radius-xs);
+    padding: 3px 6px;
+    font-size: 0.75em;
+    opacity: 0;
+    transform: translateY(-5px);
+    z-index: 4;
+    animation: update-tag 1.8s ease-out forwards;
+  }
+  
+  @keyframes update-tag {
+    0% { opacity: 0; transform: translateY(-5px); }
+    15% { opacity: 1; transform: translateY(0); }
+    85% { opacity: 1; transform: translateY(0); }
+    100% { opacity: 0; transform: translateY(0); }
+  }
\ No newline at end of file
diff --git a/static/js/utils/VirtualScroller.js b/static/js/utils/VirtualScroller.js
index 34a021d7..c26d15ff 100644
--- a/static/js/utils/VirtualScroller.js
+++ b/static/js/utils/VirtualScroller.js
@@ -822,6 +822,28 @@ export class VirtualScroller {
             
             // Create and render the updated element
             const updatedElement = this.createItemElement(this.items[index], index);
+            
+            // Add update indicator visual effects
+            updatedElement.classList.add('updated');
+            
+            // Add temporary update tag
+            const updateIndicator = document.createElement('div');
+            updateIndicator.className = 'update-indicator';
+            updateIndicator.textContent = 'Updated';
+            updatedElement.querySelector('.card-preview').appendChild(updateIndicator);
+            
+            // Automatically remove the updated class after animation completes
+            setTimeout(() => {
+                updatedElement.classList.remove('updated');
+            }, 1500);
+            
+            // Automatically remove the indicator after animation completes
+            setTimeout(() => {
+                if (updateIndicator && updateIndicator.parentNode) {
+                    updateIndicator.remove();
+                }
+            }, 2000);
+            
             this.renderedItems.set(index, updatedElement);
             this.gridElement.appendChild(updatedElement);
         }