feat: enhance recently opened projects section

Author: jainiksha

web-app/css/styles.css

@@ -7283,4 +7283,55 @@ color:var(--accent);
 
 .stats-card p{
 color:var(--text-secondary);
+}
+.history-actions{
+display:flex;
+gap:15px;
+align-items:center;
+}
+
+#historySearch{
+
+padding:10px 16px;
+
+border-radius:10px;
+
+border:1px solid var(--border);
+
+background:var(--surface);
+
+color:var(--text);
+
+}
+
+#clearHistoryBtn{
+
+padding:10px 18px;
+
+border-radius:10px;
+
+background:#ef4444;
+
+color:white;
+
+transition:.3s;
+
+}
+
+#clearHistoryBtn:hover{
+
+transform:translateY(-2px);
+
+opacity:.9;
+
+}
+
+#historyCount{
+
+font-size:16px;
+
+color:#22c55e;
+
+margin-left:8px;
+
 }

web-app/index.html

@@ -456,7 +456,27 @@ <h2 class="section-heading">
 </section>
 
     <!-- Recently Viewed Section -->
-    <section class="projects-section" id="recentlyViewedSection">
+    <div class="section-header">
+
+<h2 class="section-heading">
+🕒 Recently Opened Projects
+<span id="historyCount"></span>
+</h2>
+
+<div>
+
+<input
+id="historySearch"
+type="text"
+placeholder="Search history...">
+
+<button id="clearHistoryBtn">
+Clear History
+</button>
+
+</div>
+
+</div>
       <div class="container">
         <div class="section-header">
           <h2 class="section-heading">

web-app/js/main.js

@@ -1567,6 +1567,14 @@ document.addEventListener("DOMContentLoaded", function () {
     var section = document.getElementById("recentlyViewedSection");
     if (!grid || !section) return;
     var recent = JSON.parse(localStorage.getItem("recentProjects") || "[]");
+    const historyBadge =
+document.getElementById("historyCountBadge");
+
+if(historyBadge){
+
+historyBadge.textContent=`(${recent.length})`;
+
+}
     console.log("[DEBUG] recentProjects array:", recent); if (recent.length === 0) {
       section.style.display = "none";
       return;
@@ -1966,4 +1974,29 @@ document.addEventListener("DOMContentLoaded", function () {
   // Initial card filtering state update
   updateProjectVisibility(currentCategory, currentSearchQuery);
   window.updateRecentlyViewed();
+
+  const clearBtn =
+document.getElementById("clearHistoryBtn");
+
+if(clearBtn){
+
+clearBtn.addEventListener("click",()=>{
+
+showConfirm(
+"Clear recently viewed projects?",
+()=>{
+
+localStorage.removeItem("recentProjects");
+
+window.updateRecentlyViewed();
+
+showToast("History Cleared");
+
+}
+
+);
+
+});
+
+}
 });