Merge pull request #8 from kiing-dom/feat/options-upgrade

V0.3.0 updates to options page

Author: kiing-dom

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "KeepCode",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Prep smarter for coding interviews: KeepCode tracks your LeetCode progress so you can focus on solving.",
   "permissions": ["storage", "tabs", "activeTab", "https://leetcode.com/*"],
   "background": {

options/options.css

@@ -81,6 +81,12 @@ a:hover {
     gap: 12px;
     margin-bottom: 18px;
 }
+.problems-toolbar #searchInput {
+    width: 240px !important;
+    min-width: 120px !important;
+    max-width: 320px !important;
+    flex: 0 0 auto !important;
+}
 #searchInput {
     flex: 1;
     padding: 7px 12px;
@@ -138,3 +144,133 @@ a:hover {
 .section a:hover {
     text-decoration: underline;
 }
+
+.about-content {
+    background: #fafbfc;
+    border-radius: 8px;
+    padding: 24px 28px;
+    margin-top: 12px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+    font-size: 1.05em;
+    color: #222;
+}
+
+.about-content p {
+    margin-bottom: 12px;
+}
+
+.about-content a {
+    color: #0074d9;
+    text-decoration: none;
+    transition: color 0.2s;
+}
+.about-content a:hover {
+    color: #005fa3;
+    text-decoration: underline;
+}
+
+.about-version {
+    margin: 10px 0 18px 0;
+    font-size: 0.98em;
+    color: #555;
+    font-style: italic;
+}
+
+.faq {
+    margin-top: 10px;
+    background: #f3f6fa;
+    border-left: 3px solid #0074d9;
+    padding: 12px 16px;
+    border-radius: 5px;
+}
+
+/* Custom Tag Dropdown Styles */
+.tag-dropdown,
+.tag-dropdown-selected,
+.tag-dropdown-list {
+    position: relative;
+    font-size: 1em;
+}
+.tag-dropdown-selected {
+    background: #fff;
+    border: 1px solid #d1d5db;
+    border-radius: 5px;
+    padding: 7px 12px;
+    cursor: pointer;
+    user-select: none;
+    min-width: 120px;
+    transition: border-color 0.15s;
+}
+.tag-dropdown-selected:focus {
+    outline: none;
+    border-color: #8868bd;
+}
+.tag-dropdown-list {
+    position: absolute;
+    top: 110%;
+    left: 0;
+    right: 0;
+    background: #fff;
+    border: 1px solid #d1d5db;
+    border-radius: 5px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    z-index: 10;
+    padding: 0;
+}
+.tag-dropdown-search {
+    width: 100%;
+    margin: 0;
+    border-radius: 5px 5px 0 0;
+    border-bottom: 1px solid #e5e7eb;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    box-sizing: border-box;
+    padding: 10px 12px;
+    font-size: 1em;
+    background: #fafbfc;
+}
+.tag-dropdown-options {
+    max-height: 180px;
+    overflow-y: auto;
+    padding-top: 4px;
+}
+.tag-dropdown-list {
+    border-radius: 5px;
+    overflow: hidden;
+}
+.tag-dropdown-option {
+    padding: 7px 16px;
+    cursor: pointer;
+    transition: background 0.13s;
+    color: #374151;
+}
+.tag-dropdown-option.selected,
+.tag-dropdown-option:hover {
+    background: #f3f4f6;
+    color: #8868bd;
+}
+
+#sortDropdown {
+    background: #fff;
+    background-image: url('data:image/svg+xml;utf8,<svg fill="%238868bd" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7.293 8.293a1 1 0 011.414 0L10 9.586l1.293-1.293a1 1 0 111.414 1.414l-2 2a1 1 0 01-1.414 0l-2-2a1 1 0 010-1.414z"/></svg>');
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+    background-size: 18px 18px;
+
+    border: 1px solid #d1d5db;
+    border-radius: 5px;
+    padding: 7px 32px 7px 12px;
+    font-size: 1em;
+    min-width: 160px;
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    transition: border-color 0.15s;
+    position: relative;
+}
+#sortDropdown:focus {
+    outline: none;
+    border-color: #8868bd;
+}

options/options.html

@@ -30,8 +30,10 @@
                 <h2>All Solved Problems</h2>
                 <div class="problems-toolbar">
                     <input type="text" id="searchInput" placeholder="Search by title...">
-                    <select id="tagFilter">
-                        <option value="all">All Tags</option>
+                    <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>
@@ -42,17 +44,26 @@ <h2>Settings</h2>
             </section>
             <section id="section-about" class="section">
                 <h2>FAQ / About</h2>
-                <p>
-                    Made by <a href="https://linktr.ee/267dngi" target="_blank">@dngi</a>.<br>
-                    Star the project on <a href="https://github.com/kiing-dom/leetcode-tracker" target="_blank">GitHub</a>!<br>
-                    If you find this useful, consider <a href="https://www.ko-fi.com/267dngi" target="_blank"> buying me a kebab 😏</a>.<br><br>
-                    <strong>FAQ:</strong><br>
-                    <b>Q:</b> How do I use this extension?<br>
-                    <b>A:</b> Just solve problems on LeetCode as usual! Your progress is tracked automatically.<br>
-                </p>
+                <div class="about-version" style="margin-bottom: 18px;">
+                    <span id="extVersion"></span>
+                </div>
+                <hr style="margin-bottom: 18px;">
+                <div class="about-content">
+                    <p>
+                        Made by <a href="https://linktr.ee/267dngi" target="_blank">@dngi</a>.<br>
+                        Star the project on <a href="https://github.com/kiing-dom/leetcode-tracker" target="_blank">GitHub</a>!<br>
+                        If you find this useful, consider <a href="https://www.ko-fi.com/267dngi" target="_blank"> buying me a kebab 😏</a>.
+                    </p>
+                    <div class="faq">
+                        <strong>FAQ:</strong><br>
+                        <b>Q:</b> How do I use this extension?<br>
+                        <b>A:</b> Just solve problems on LeetCode as usual! Your progress is tracked automatically.<br>
+                    </div>
+                </div>
             </section>
         </main>
     </div>
+    <script src="tagDropdown.js"></script>
     <script src="options.js"></script>
 </body>
 </html>

options/options.js

@@ -1,6 +1,3 @@
-// options.js
-// Handles navigation and basic filtering for the options page
-
 document.addEventListener('DOMContentLoaded', () => {
     // Sidebar navigation
     const navItems = document.querySelectorAll('.nav-item');
@@ -16,12 +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 tagFilter = document.getElementById('tagFilter');
+    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') {
@@ -30,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);
@@ -78,21 +80,31 @@ document.addEventListener('DOMContentLoaded', () => {
                 p.tags.forEach(tag => tagSet.add(tag));
             }
         });
-        tagFilter.innerHTML = '<option value="all">All Tags</option>';
-        Array.from(tagSet).forEach(tag => {
-            const opt = document.createElement('option');
-            opt.value = tag;
-            opt.textContent = tag;
-            tagFilter.appendChild(opt);
-        });
+        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, () => rerender());
+        }
         // Initial render
-        renderProblems(problems, tagFilter.value, searchInput.value);
+        rerender();
         // Event listeners
-        tagFilter.addEventListener('change', () => {
-            renderProblems(problems, tagFilter.value, searchInput.value);
-        });
-        searchInput.addEventListener('input', () => {
-            renderProblems(problems, tagFilter.value, searchInput.value);
-        });
+        searchInput.addEventListener('input', rerender);
+        sortDropdown.addEventListener('change', rerender);
+
+        const extVersionElem = document.getElementById('extVersion');
+        if (extVersionElem && browser.runtime.getManifest) {
+            const manifest = browser.runtime.getManifest();
+            extVersionElem.textContent = manifest.version;
+        }
     });
 });