From 492bab36ca721497757ed323b3131fafec19dbda Mon Sep 17 00:00:00 2001
From: Ryan <ryantl66@gmail.com>
Date: Wed, 14 May 2025 08:08:18 -0400
Subject: [PATCH] Fix duplicated Upload & Folder cards if they were added to
 header and page was refreshed

---
 CHANGELOG.md             |  2 ++
 public/js/dragAndDrop.js | 36 +++++++++++++++++++++++-------------
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9a50768..1fe2ad4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -101,6 +101,8 @@
 
 ### 10. setAttribute + encodeURI to avoid “DOM text reinterpreted as HTML” alerts
 
+### 11. Fix duplicated Upload & Folder cards if they were added to header and page was refreshed
+
 ---
 
 ## Changes 5/8/2025
diff --git a/public/js/dragAndDrop.js b/public/js/dragAndDrop.js
index 46a0324..e9da526 100644
--- a/public/js/dragAndDrop.js
+++ b/public/js/dragAndDrop.js
@@ -32,23 +32,33 @@ export function loadSidebarOrder() {
     updateSidebarVisibility();
   }
   
-  // NEW: Load header order from localStorage.
+
   export function loadHeaderOrder() {
     const headerDropArea = document.getElementById('headerDropArea');
     if (!headerDropArea) return;
-    const orderStr = localStorage.getItem('headerOrder');
-    if (orderStr) {
-      const order = JSON.parse(orderStr);
-      if (order.length > 0) {
-        order.forEach(id => {
-          const card = document.getElementById(id);
-          // Only load if card is not already in header drop zone.
-          if (card && card.parentNode.id !== 'headerDropArea') {
-            insertCardInHeader(card, null);
-          }
-        });
-      }
+  
+    // 1) Clear out any icons that might already be in the drop area
+    headerDropArea.innerHTML = '';
+  
+    // 2) Read the saved array (or empty array if invalid/missing)
+    let stored;
+    try {
+      stored = JSON.parse(localStorage.getItem('headerOrder') || '[]');
+    } catch {
+      stored = [];
     }
+  
+    // 3) Deduplicate IDs
+    const uniqueIds = Array.from(new Set(stored));
+  
+    // 4) Re-insert exactly one icon per saved card ID
+    uniqueIds.forEach(id => {
+      const card = document.getElementById(id);
+      if (card) insertCardInHeader(card, null);
+    });
+  
+    // 5) Persist the cleaned, deduped list back to storage
+    localStorage.setItem('headerOrder', JSON.stringify(uniqueIds));
   }
   
   // Internal helper: update sidebar visibility based on its content.