Merge pull request steam-bell-92#1416 from jainiksha/feature/enhance-recently-opened-projects

feat: enhance recently opened projects section

Author: steam-bell-92

web-app/css/styles.css

@@ -7188,35 +7188,4 @@ body.sidebar-collapsed .sidebar-dock .sidebar-footer .sidebar-main-controls {
         color:var(--text);
     }
 
-}
-
-.newsletter-form{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 5px;
-  margin-top: 10px;
-}
-
-.footer-input {
-  font-size: larger;
-  border-radius: 10px;
-  outline: none;
-  border: none;
-  padding: 5px;
-  font-family: var(--font-sans);
-}
-
-.newsletter-form button{
-  padding: 8px 20px;
-  border-radius: 10px;
-  font-family: var(--font-sans);
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--text);
-  box-shadow: 0 12px 0 rgba(0, 0, 0, 0.06), 0 16px 32px rgba(34, 197, 94, 0.3);
-    background: linear-gradient(135deg, #22c55e, #14b8a6);
-  border: 1px solid var(--border);
-  transition: all var(--duration-fast) ease;
-  white-space: nowrap;
 }

web-app/index.html

@@ -276,6 +276,52 @@ <h1 class="hero-title">
       </div>
     </div>
 
+    <section class="stats-dashboard-section">
+  <div class="container">
+
+    <div class="section-header">
+      <h2 class="section-heading">
+        📊 Project Statistics Dashboard
+      </h2>
+    </div>
+
+    <div class="stats-dashboard">
+
+      <div class="stats-card" data-filter="all">
+        <h3 id="statsTotal">0</h3>
+        <p>Total Projects</p>
+      </div>
+
+      <div class="stats-card" data-filter="games">
+        <h3 id="statsGames">0</h3>
+        <p>Games</p>
+      </div>
+
+      <div class="stats-card" data-filter="math">
+        <h3 id="statsMath">0</h3>
+        <p>Math</p>
+      </div>
+
+      <div class="stats-card" data-filter="utilities">
+        <h3 id="statsUtilities">0</h3>
+        <p>Utilities</p>
+      </div>
+
+      <div class="stats-card" data-filter="favorites">
+        <h3 id="statsFavorites">0</h3>
+        <p>Favorites</p>
+      </div>
+
+      <div class="stats-card">
+        <h3 id="statsViewed">0</h3>
+        <p>Recently Viewed</p>
+      </div>
+
+    </div>
+
+  </div>
+</section>
+
     <!-- Timeline Section -->
     <section class="hero-timeline-section" id="timelineSection">
       <div class="timeline-background" aria-hidden="true"></div>
@@ -388,8 +434,49 @@ <h3 class="timeline-title">Share</h3>
       </div>
     </section>
 
+    <!-- Bookmarked Projects Section -->
+<section class="projects-section" id="bookmarkedProjectsSection">
+  <div class="container">
+    <div class="section-header">
+      <h2 class="section-heading">
+        ⭐ Bookmarked Projects
+        <span id="bookmarkCountBadge"></span>
+      </h2>
+    </div>
+
+    <div class="projects-grid" id="bookmarkedProjectsGrid"></div>
+
+    <div id="noBookmarksMessage" class="empty-state">
+      <p>No bookmarked projects yet.</p>
+      <p class="empty-state-hint">
+        Click the ⭐ icon on any project to bookmark it.
+      </p>
+    </div>
+  </div>
+</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">
@@ -674,6 +761,15 @@ <h3>Stay Updated</h3>
       const projectsGrid = document.getElementById("projectsGrid");
       if (!projectsGrid) return;
 
+      const bookmarkedGrid =
+document.getElementById("bookmarkedProjectsGrid");
+
+const bookmarkBadge =
+document.getElementById("bookmarkCountBadge");
+
+const noBookmarks =
+document.getElementById("noBookmarksMessage");
+
       // ALL projects from your js/projects/ folder
       const projectsData = [
         // GAMES (20+)
@@ -1050,6 +1146,46 @@ <h3>Stay Updated</h3>
         localStorage.setItem("favorites", JSON.stringify(favorites));
       }
 
+      function renderBookmarkedProjects() {
+
+    if (!bookmarkedGrid) return;
+
+    bookmarkedGrid.innerHTML = "";
+
+    const favs =
+        JSON.parse(localStorage.getItem("favorites") || "[]");
+
+    bookmarkBadge.textContent =
+        "(" + favs.length + ")";
+
+    if (favs.length === 0) {
+
+        noBookmarks.style.display = "block";
+
+        return;
+    }
+
+    noBookmarks.style.display = "none";
+
+    favs.forEach(projectId => {
+
+        const card =
+        document.querySelector(
+            `.project-card[data-project="${projectId}"]`
+        );
+
+        if(card){
+
+            bookmarkedGrid.appendChild(
+                card.cloneNode(true)
+            );
+
+        }
+
+    });
+
+}
+
       projectsData.forEach((proj) => {
         const card = document.createElement("div");
         card.className = "project-card";
@@ -1077,6 +1213,27 @@ <h3>${proj.title}</h3>
 
       // Update counts
       const total = projectsData.length;
+      function animateCounter(id,value){
+
+let start=0;
+
+const element=document.getElementById(id);
+
+const timer=setInterval(()=>{
+
+start++;
+
+element.textContent=start;
+
+if(start>=value){
+
+clearInterval(timer);
+
+}
+
+},25);
+
+}
       const games = projectsData.filter((p) => p.category === "games").length;
       const math = projectsData.filter((p) => p.category === "math").length;
       const utils = projectsData.filter(
@@ -1094,10 +1251,31 @@ <h3>${proj.title}</h3>
       if (heroMath) heroMath.textContent = math;
       if (heroUtils) heroUtils.textContent = utils;
       if (projectBadge) projectBadge.textContent = total + " projects";
+      animateCounter("statsTotal",total);
+
+animateCounter("statsGames",games);
+
+animateCounter("statsMath",math);
+
+animateCounter("statsUtilities",utils);
+
+animateCounter(
+"statsFavorites",
+favorites.length
+);
+
+const viewed=
+JSON.parse(localStorage.getItem("recentlyViewed")||"[]");
+
+animateCounter(
+"statsViewed",
+viewed.length
+);
 
       console.log(
         `✅ Loaded ${total} projects: ${games} games, ${math} math, ${utils} utilities`
       );
+      renderBookmarkedProjects();
 
       // Wire up buttons
       setTimeout(() => {
@@ -1137,6 +1315,7 @@ <h3>${proj.title}</h3>
             }
 
             localStorage.setItem("favorites", JSON.stringify(favs));
+            renderBookmarkedProjects();
 
             // If we're on favorites tab, refresh the view
             const activeCategory = document

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");
+
+}
+
+);
+
+});
+
+}
 });