Upload 8 files

src/views/StudentView.js

@@ -1,4 +1,4 @@
-import { submitPrompt, getChallenges, startChallenge, getUserProgress, getPeerPrompts, resetProgress } from "../services/classroom.js";
+import { submitPrompt, getChallenges, startChallenge, getUserProgress, getPeerPrompts, resetProgress, toggleLike, subscribeToNotifications, markNotificationRead } from "../services/classroom.js";
 
 // Cache challenges locally
 let cachedChallenges = [];
@@ -357,16 +357,55 @@ window.loadPeerPrompts = async (challengeId) => {
         return;
     }
 
-    container.innerHTML = prompts.map(p => `
+    container.innerHTML = prompts.map(p => {
+        const currentUserId = localStorage.getItem('vibecoding_user_id');
+        const isLiked = p.likedBy && p.likedBy.includes(currentUserId);
+
+        return `
         <div class="bg-gray-700/30 p-4 rounded-xl border border-gray-600">
-            <div class="flex items-center space-x-2 mb-2">
-                <div class="w-6 h-6 rounded-full bg-cyan-600 flex items-center justify-center text-xs font-bold text-white">
-                    ${p.nickname[0]}
+            <div class="flex items-center justify-between mb-2">
+                <div class="flex items-center space-x-2">
+                    <div class="w-6 h-6 rounded-full bg-cyan-600 flex items-center justify-center text-xs font-bold text-white">
+                        ${p.nickname[0]}
+                    </div>
+                    <span class="font-bold text-cyan-300 text-sm">${p.nickname}</span>
+                    <span class="text-gray-500 text-xs">${new Date(p.timestamp.seconds * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
                 </div>
-                <span class="font-bold text-cyan-300 text-sm">${p.nickname}</span>
-                <span class="text-gray-500 text-xs ml-auto">${new Date(p.timestamp.seconds * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
+                
+                <button onclick="handleLike('${p.id}', '${p.userId}')" 
+                    class="flex items-center space-x-1 px-2 py-1 rounded-full transition-colors ${isLiked ? 'bg-pink-900/50 text-pink-400' : 'bg-gray-800 text-gray-400 hover:bg-gray-700'}">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ${isLiked ? 'fill-current' : 'none'}" viewBox="0 0 24 24" stroke="currentColor" fill="${isLiked ? 'currentColor' : 'none'}">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+                    </svg>
+                    <span class="text-xs font-bold">${p.likes}</span>
+                </button>
             </div>
             <p class="text-gray-300 font-mono text-sm bg-black/20 p-3 rounded-lg border border-gray-700/50 whitespace-pre-wrap">${p.prompt}</p>
         </div>
-    `).join('');
+    `}).join('');
+
+    // Attach challenge title for notification context
+    window.currentPeerChallengeTitle = document.querySelector(`#peer-challenge-select option[value="${challengeId}"]`).text;
+};
+
+// Like Handler
+window.handleLike = async (progressId, targetUserId) => {
+    const userId = localStorage.getItem('vibecoding_user_id');
+    const nickname = localStorage.getItem('vibecoding_nickname');
+    const challengeTitle = window.currentPeerChallengeTitle || '挑戰';
+
+    // Optimistic UI update could go here, but for simplicity let's re-load or just fire and forget (the view won't update until reload currently)
+    // To make it responsive, we should probably manually toggle the class on the button immediately.
+    // For now, let's just call service and reload the list to see updated count.
+
+    // Better UX: Find button and toggle 'processing' state? 
+    // Let's just reload the list for data consistency.
+    const { toggleLike } = await import("../services/classroom.js");
+    await toggleLike(progressId, userId, nickname, targetUserId, challengeTitle);
+
+    // Reload to refresh count
+    const select = document.getElementById('peer-challenge-select');
+    if (select && select.value) {
+        loadPeerPrompts(select.value);
+    }
 };