feat: added sort by time solved at asc and desc

Author: kiing-dom

options/options.html

@@ -31,6 +31,10 @@ <h2>All Solved Problems</h2>
                 <div class="problems-toolbar">
                     <input type="text" id="searchInput" placeholder="Search by title...">
                     <div id="tagDropdownContainer"></div>
+                    <select id="sortDropdown" style="margin-left:8px;">
+                        <option value="recent-desc">Most recently solved</option>
+                        <option value="recent-asc">Least recently solved</option>
+                    </select>
                 </div>
                 <div id="problemsList"></div>
             </section>

options/options.js

@@ -13,13 +13,15 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 
+    const sortDropdown = document.getElementById('sortDropdown');
+
     // All Problems: load and render problems
     const problemsList = document.getElementById('problemsList');
     const searchInput = document.getElementById('searchInput');
     const tagDropdownContainer = document.getElementById('tagDropdownContainer');
     let tagDropdownInstance = null;
 
-    function renderProblems(problems, filterTag, searchTerm) {
+    function renderProblems(problems, filterTag, searchTerm, sortOrder = 'recent-desc') {
         problemsList.innerHTML = '';
         let filtered = problems;
         if (filterTag && filterTag !== 'all') {
@@ -28,31 +30,33 @@ document.addEventListener('DOMContentLoaded', () => {
         if (searchTerm) {
             filtered = filtered.filter(p => p.title.toLowerCase().includes(searchTerm.toLowerCase()));
         }
+        // Sorting
+        if (sortOrder === 'recent-desc') {
+            filtered.sort((a, b) => (b.solvedAt || 0) - (a.solvedAt || 0));
+        } else if (sortOrder === 'recent-asc') {
+            filtered.sort((a, b) => (a.solvedAt || 0) - (b.solvedAt || 0));
+        }
         if (filtered.length === 0) {
             problemsList.innerHTML = '<p>No problems found.</p>';
         }
         filtered.forEach(problem => {
             const item = document.createElement('div');
             item.className = 'problem-item';
             const difficultyClass = problem.difficulty ? problem.difficulty.toLowerCase() : '';
-            // Use DOM methods instead of innerHTML for safety
             const link = document.createElement('a');
             link.href = problem.url;
             link.target = '_blank';
             link.textContent = problem.title;
-
             const diffSpan = document.createElement('span');
             diffSpan.className = `difficulty ${difficultyClass}`;
             diffSpan.textContent = problem.difficulty;
-
             const tagsSpan = document.createElement('span');
             tagsSpan.style.fontSize = '0.85em';
             tagsSpan.style.color = problem.tags && problem.tags.length > 0 ? '#666' : '#bbb';
             tagsSpan.style.marginLeft = '8px';
             tagsSpan.textContent = problem.tags && problem.tags.length > 0
                 ? `[${problem.tags.join(', ')}]`
                 : '[No tags]';
-
             item.appendChild(link);
             item.appendChild(diffSpan);
             item.appendChild(tagsSpan);
@@ -77,20 +81,26 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         });
         const allTags = Array.from(tagSet).sort((a, b) => a.localeCompare(b));
+        let currentProblems = problems; // Store for re-sorting/filtering
+        function rerender() {
+            renderProblems(
+                currentProblems,
+                tagDropdownInstance ? tagDropdownInstance.selectedTag : 'all',
+                searchInput.value,
+                sortDropdown.value
+            );
+        }
         if (tagDropdownInstance) {
             tagDropdownInstance.setTags(allTags);
         } else {
-            tagDropdownInstance = new window.TagDropdown(tagDropdownContainer, allTags, (selectedTag) => {
-                renderProblems(problems, selectedTag, searchInput.value);
-            });
+            tagDropdownInstance = new window.TagDropdown(tagDropdownContainer, allTags, () => rerender());
         }
         // Initial render
-        renderProblems(problems, tagDropdownInstance ? tagDropdownInstance.selectedTag : 'all', searchInput.value);
+        rerender();
         // Event listeners
-        searchInput.addEventListener('input', () => {
-            renderProblems(problems, tagDropdownInstance ? tagDropdownInstance.selectedTag : 'all', searchInput.value);
-        });
-        // set extension version in About section
+        searchInput.addEventListener('input', rerender);
+        sortDropdown.addEventListener('change', rerender);
+
         const extVersionElem = document.getElementById('extVersion');
         if (extVersionElem && browser.runtime.getManifest) {
             const manifest = browser.runtime.getManifest();