feat: app version set to dynamically update on the option page's about section

Author: kiing-dom

options/options.css

@@ -138,3 +138,42 @@ 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;
+}

options/options.html

@@ -42,14 +42,22 @@ <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>

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');
@@ -96,5 +93,12 @@ document.addEventListener('DOMContentLoaded', () => {
         searchInput.addEventListener('input', () => {
             renderProblems(problems, tagFilter.value, searchInput.value);
         });
+
+        // set extension version in About section
+        const extVersionElem = document.getElementById('extVersion');
+        if (extVersionElem && browser.runtime.getManifest) {
+            const manifest = browser.runtime.getManifest();
+            extVersionElem.textContent = manifest.version;
+        }
     });
 });