Theres currently no place holder posts under the "search Questions" spot and the Unanswered filter is not selected

script.js

@@ -70,9 +70,39 @@ document.addEventListener('DOMContentLoaded', function() {
     document.addEventListener('DOMContentLoaded', function() {
         setActiveNav(unansweredLink);
         showUnansweredPanel();
+        
+        // Add placeholder posts
+        const placeholderPosts = [
+            {
+                title: "How to implement binary search tree?",
+                body: "I'm struggling with implementing the insert function for a BST. Can someone explain the recursive approach?",
+                tags: ["BST", "Data Structures", "Recursion"],
+                responses: 0,
+                time: "30 minutes ago",
+                status: "unanswered"
+            },
+            {
+                title: "Question about HW3 problem 5",
+                body: "The problem asks for O(n) solution but I can only think of O(n^2). Any hints?",
+                tags: ["Homework", "Algorithms"],
+                responses: 0,
+                time: "1 hour ago",
+                status: "unanswered"
+            },
+            {
+                title: "Lecture 8 slides clarification",
+                body: "On slide 25, the time complexity analysis isn't clear to me. Can someone explain?",
+                tags: ["Lecture", "Time Complexity"],
+                responses: 0,
+                time: "2 hours ago",
+                status: "unanswered"
+            }
+        ];
+        
+        // Store for later use
+        window.placeholderPosts = placeholderPosts;
     });
-
-    // Navigation
+// Navigation
     allQuestionsLink.addEventListener('click', function(e) {
         e.preventDefault();
         setActiveNav(allQuestionsLink);
@@ -116,82 +146,39 @@ function setActiveNav(activeElement) {
         feedContainer.className = 'space-y-4';
         feedContainer.id = 'questions-feed';
         
-        // Add user's post as first item
-        const userPostElement = document.createElement('div');
-        userPostElement.className = 'bg-white rounded-lg shadow-sm p-6 transition-all hover:shadow-md border-l-4 border-blue-500';
-        userPostElement.innerHTML = `
-            <div class="flex justify-between items-start mb-2">
-                <h3 class="font-bold text-lg">User's Post</h3>
-                <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full flex items-center">
-                    <i data-feather="help-circle" class="w-3 h-3 mr-1"></i>
-                    Needs help
-                </span>
-            </div>
-            <p class="text-gray-600 mb-3">This is my question about the homework assignment. I'm not sure how to approach problem 3.</p>
-            <div class="flex flex-wrap gap-2 mb-3">
-                <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">Homework</span>
-                <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">Week3</span>
-            </div>
-            <div class="flex justify-between text-sm text-gray-500">
-                <span>0 responses</span>
-                <span>Just now</span>
-            </div>
-        `;
-        feedContainer.appendChild(userPostElement);
-        
-        // Add sample unanswered posts
-        const unansweredPosts = [
-            {
-                title: "Confused about recursion in binary trees",
-                body: "I'm having trouble understanding how recursion works with binary tree traversal. Can someone explain the base case and recursive case?",
-                tags: ["Recursion", "Binary Trees"],
-                responses: 0,
-                time: "2 hours ago"
-            },
-            {
-                title: "Need help with HW3 problem 2",
-                body: "The problem statement says we need to implement a function with O(n) time complexity, but I'm not sure what approach to take.",
-                tags: ["Homework", "Algorithms"],
-                responses: 0,
-                time: "4 hours ago"
-            },
-            {
-                title: "Lecture slides question",
-                body: "On slide 45, there's a notation I don't understand. What does Θ(n log n) mean exactly?",
-                tags: ["Lecture", "Notation"],
-                responses: 0,
-                time: "1 day ago"
-            }
-        ];
-        
-        unansweredPosts.forEach(post => {
-            const postElement = document.createElement('div');
-            postElement.className = 'bg-white rounded-lg shadow-sm p-6 transition-all hover:shadow-md';
-            postElement.innerHTML = `
-                <div class="flex justify-between items-start mb-2">
-                    <h3 class="font-bold text-lg">${post.title}</h3>
-                    <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full flex items-center">
-                        <i data-feather="help-circle" class="w-3 h-3 mr-1"></i>
-                        Needs help
-                    </span>
-                </div>
-                <p class="text-gray-600 mb-3">${post.body}</p>
-                <div class="flex flex-wrap gap-2 mb-3">
-                    ${post.tags.map(tag => `<span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">${tag}</span>`).join('')}
-                </div>
-                <div class="flex justify-between text-sm text-gray-500">
-                    <span>${post.responses} ${post.responses === 1 ? 'response' : 'responses'}</span>
-                    <span>${post.time}</span>
-                </div>
-            `;
+        // Add placeholder posts
+        window.placeholderPosts.forEach(post => {
+            const postElement = document.createElement('custom-post-card');
+            postElement.setAttribute('post', JSON.stringify({
+                title: post.title,
+                content: post.body,
+                tags: post.tags,
+                responses: post.responses,
+                time: post.time,
+                status: post.status,
+                confidence: Math.floor(Math.random() * 100),
+                upvotes: Math.floor(Math.random() * 10),
+                author: "Student " + Math.floor(Math.random() * 100)
+            }));
             feedContainer.appendChild(postElement);
         });
-        
         postsList.appendChild(feedContainer);
         feather.replace();
+        
+        // Highlight unanswered filter in sidebar
+        const sidebar = document.querySelector('custom-sidebar');
+        if (sidebar) {
+            const shadow = sidebar.shadowRoot;
+            const filterItems = shadow.querySelectorAll('.filter-item');
+            filterItems.forEach(item => {
+                item.classList.remove('active');
+                if (item.textContent.includes('Unanswered')) {
+                    item.classList.add('active');
+                }
+            });
+        }
     }
-
-    function showPanel2(newPost) {
+function showPanel2(newPost) {
 // Add fade out animation to form
         postForm.classList.add('fade-out');