Sort Admin Board by Name or Newest comment

assets/js/AdminBoard.js

@@ -34,6 +34,11 @@ const loadAdminBoardPage = async () => {
     <p> More functionality will be added over time. One of the first features will be the ability to output the existing card data 'decisions', to a json formatted list in order to allow crowetic to run his script easily until the final Mintership proposal changes are completed, and the MINTER group is transferred to 'null'.</p>
     <button id="publish-card-button" class="publish-card-button" style="margin: 20px; padding: 10px;">Publish Encrypted Card</button>
     <button id="refresh-cards-button" class="refresh-cards-button" style="padding: 10px;">Refresh Cards</button>
+    <select id="sort-select" style="margin-left: 10px; padding: 5px;">
+      <option value="newest" selected>Sort by Date</option>
+      <option value="name">Sort by Name</option>
+      <option value="recent-comments">Newest Comments</option>
+    </select>
     <div id="encrypted-cards-container" class="cards-container" style="margin-top: 20px;"></div>
     <div id="publish-card-view" class="publish-card-view" style="display: none; text-align: left; padding: 20px;">
         <form id="publish-card-form">
@@ -104,6 +109,11 @@ const loadAdminBoardPage = async () => {
     // Pass that boolean to publishEncryptedCard
     await publishEncryptedCard(isTopicChecked)
   })
+
+  document.getElementById("sort-select").addEventListener("change", async () => {
+    // Re-load the cards whenever user chooses a new sort option.
+    await fetchAllEncryptedCards()
+  })
   createScrollToTopButton()
   // await fetchAndValidateAllAdminCards()
   await updateOrSaveAdminGroupsDataLocally()
@@ -308,12 +318,36 @@ const fetchAllEncryptedCards = async (isRefresh = false) => {
     // Convert the map into an array of final cards
     const finalCards = Array.from(mostRecentCardsMap.values());
 
-    // Sort cards by timestamp (most recent first)
-    finalCards.sort((a, b) => {
-      const timestampA = a.card.updated || a.card.created || 0
-      const timestampB = b.card.updated || b.card.created || 0
-      return timestampB - timestampA;
-    })
+    let selectedSort = 'newest'
+    const sortSelect = document.getElementById('sort-select')
+    if (sortSelect) {
+      selectedSort = sortSelect.value
+    }
+
+    if (selectedSort === 'name') {
+      // Sort alphabetically by the minter’s name
+      finalCards.sort((a, b) => {
+        const nameA = a.decryptedCardData.minterName?.toLowerCase() || ''
+        const nameB = b.decryptedCardData.minterName?.toLowerCase() || ''
+        return nameA.localeCompare(nameB)
+      })
+    } else if (selectedSort === 'recent-comments') {
+      // We need each card’s newest comment timestamp for sorting
+      for (let card of finalCards) {
+        card.newestCommentTimestamp = await getNewestAdminCommentTimestamp(card.card.identifier)
+      }
+      // Then sort descending by newest comment
+      finalCards.sort((a, b) =>
+        (b.newestCommentTimestamp || 0) - (a.newestCommentTimestamp || 0)
+      )
+    } else {
+      // Sort cards by timestamp (most recent first)
+      finalCards.sort((a, b) => {
+        const timestampA = a.card.updated || a.card.created || 0
+        const timestampB = b.card.updated || b.card.created || 0
+        return timestampB - timestampA;
+      })
+    }
 
     encryptedCardsContainer.innerHTML = ""
 
@@ -941,6 +975,23 @@ const handleBanMinter = async (minterName) => {
   }
 }
 
+const getNewestAdminCommentTimestamp = async (cardIdentifier) => {
+  try {
+    const comments = await fetchEncryptedComments(cardIdentifier)
+    if (!comments || comments.length === 0) {
+      return 0
+    }
+    const newestTimestamp = comments.reduce((acc, comment) => {
+      const cTime = comment.updated || comment.created || 0
+      return cTime > acc ? cTime : acc
+    }, 0)
+    return newestTimestamp
+  } catch (err) {
+    console.error('Failed to get newest comment timestamp:', err)
+    return 0
+  }
+}
+
 // Create the overall Minter Card HTML -----------------------------------------------
 const createEncryptedCardHTML = async (cardData, pollResults, cardIdentifier, commentCount) => {
   const { minterName, header, content, links, creator, timestamp, poll, topicMode } = cardData