Sort by Name or Newest comment

assets/js/MinterBoard.js

@@ -28,6 +28,11 @@ const loadMinterBoardPage = async () => {
       <p style="font-size: 1.25em;"> Publish a Minter Card with Information, and obtain and view the support of the community. Welcome to the Minter Board!</p>
       <button id="publish-card-button" class="publish-card-button" style="margin: 20px; padding: 10px; background-color: ${publishButtonColor}">Publish Minter 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="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">
@@ -118,6 +123,11 @@ const loadMinterBoardPage = async () => {
     await publishCard()
   })
 
+  document.getElementById("sort-select").addEventListener("change", async () => {
+    // Re-load the cards whenever user chooses a new sort option.
+    await loadCards()
+  })
+
   await loadCards()
 }
 
@@ -234,6 +244,35 @@ const loadCards = async () => {
 
     const finalCards = await processMinterCards(validCards)
 
+    // finalCards is already sorted by newest (timestamp) by processMinterCards. 
+    // We'll re-sort if "Name" or "Recent Comments" is selected.
+
+    // Grab the selected sort from the dropdown (if it exists).
+    let selectedSort = 'newest'
+    const sortSelect = document.getElementById('sort-select')
+    if (sortSelect) {
+      selectedSort = sortSelect.value
+    }
+
+    if (selectedSort === 'name') {
+      // Sort alphabetically by the creator’s name
+      finalCards.sort((a, b) => {
+        const nameA = a.name?.toLowerCase() || ''
+        const nameB = b.name?.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 getNewestCommentTimestamp(card.identifier)
+      }
+      // Then sort descending by newest comment
+      finalCards.sort((a, b) =>
+        (b.newestCommentTimestamp || 0) - (a.newestCommentTimestamp || 0)
+      )
+    } 
+    // else 'newest' => do nothing, finalCards stays in newest-first order
+
     // Display skeleton cards immediately
     cardsContainer.innerHTML = ""
     finalCards.forEach(card => {
@@ -1268,6 +1307,26 @@ const getMinterAvatar = async (minterName) => {
   }
 }
 
+const getNewestCommentTimestamp = async (cardIdentifier) => {
+  try {
+    // fetchCommentsForCard returns resources each with at least 'created' or 'updated'
+    const comments = await fetchCommentsForCard(cardIdentifier)
+    if (!comments || comments.length === 0) {
+      // No comments => fallback to 0 (or card’s own date, if you like)
+      return 0
+    }
+    // The newest can be determined by comparing 'updated' or 'created'
+    const newestTimestamp = comments.reduce((acc, c) => {
+      const cTime = c.updated || c.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 createCardHTML = async (cardData, pollResults, cardIdentifier, commentCount, cardUpdatedTime, bgColor, address) => {