şimdi mail geldiğinde bir bildirim sesi koy - Follow Up Deployment

index.html

@@ -245,9 +245,10 @@
                             </a>
                         </li>
                         <li>
-                            <a href="#" class="flex items-center text-gray-300 hover-text-secondary">
+                            <a href="#starred" id="starred-link" class="flex items-center text-gray-300 hover-text-secondary">
                                 <i class="fas fa-star mr-3 text-secondary"></i>
                                 <span>Yıldız</span>
+                                <span id="starred-count" class="inbox-count ml-auto hidden">0</span>
                             </a>
                         </li>
                         <li>
@@ -373,6 +374,30 @@
                     </div>
                 </div>
 
+                <!-- Starred Container -->
+                <div id="starred-container" class="hidden bg-secondary rounded-lg overflow-hidden">
+                    <div class="p-4 border-b border-gray-700 flex justify-between items-center">
+                        <div class="flex items-center">
+                            <button class="bg-dark hover:bg-gray-800 p-2 rounded mr-3" onclick="goBackToInbox()">
+                                <i class="fas fa-arrow-left text-primary"></i>
+                            </button>
+                            <h2 class="text-lg font-bold text-secondary">Yıldızlı E-postalar</h2>
+                        </div>
+                        <div class="flex space-x-2">
+                            <button id="select-all-starred" class="bg-dark hover:bg-gray-800 p-2 rounded">
+                                <i class="fas fa-check-square text-primary" title="Select All"></i>
+                            </button>
+                            <button id="delete-selected-starred" class="bg-dark hover:bg-gray-800 p-2 rounded" onclick="moveToTrashFromStarred()">
+                                <i class="fas fa-trash text-accent"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div id="starred-emails" class="divide-y divide-gray-700">
+                        <!-- Starred emails will be rendered here -->
+                    </div>
+                </div>
+
                 <!-- Trash Container -->
                 <div id="trash-container" class="hidden bg-secondary rounded-lg overflow-hidden">
                     <div class="p-4 border-b border-gray-700 flex justify-between items-center">
@@ -539,14 +564,43 @@
             btn.addEventListener('click', function(e) {
                 e.stopPropagation();
                 const icon = this.querySelector('i');
+                const emailItem = this.closest('.email-item');
+                const starredCount = document.getElementById('starred-count');
+                
                 if (icon.classList.contains('far')) {
+                    // Star the email
                     icon.classList.remove('far');
                     icon.classList.add('fas', 'text-yellow-400');
-                    // Optional: Move to starred folder or mark in database
+                    
+                    // Add to starred collection
+                    starredEmails.push(emailItem.cloneNode(true));
+                    
+                    // Update count
+                    const currentCount = parseInt(starredCount.textContent) || 0;
+                    starredCount.textContent = currentCount + 1;
+                    starredCount.classList.remove('hidden');
                 } else {
+                    // Unstar the email
                     icon.classList.remove('fas', 'text-yellow-400');
                     icon.classList.add('far');
-                    // Optional: Remove from starred folder or update in database
+                    
+                    // Remove from starred collection
+                    const index = Array.from(starredEmails).findIndex(e => e.isEqualNode(emailItem));
+                    if (index !== -1) {
+                        starredEmails.splice(index, 1);
+                    }
+                    
+                    // Update count
+                    const newCount = starredEmails.length;
+                    starredCount.textContent = newCount;
+                    if (newCount === 0) {
+                        starredCount.classList.add('hidden');
+                    }
+                    
+                    // If viewing starred emails, re-render
+                    if (!document.getElementById('starred-container').classList.contains('hidden')) {
+                        renderStarredEmails();
+                    }
                 }
             });
         });
@@ -587,8 +641,114 @@
             }
         }, 10000); // Check every 10 seconds
 
-        // Trash functionality
+        // Email collections
         const trashEmails = [];
+        const starredEmails = [];
+        
+        // Show starred container when clicking starred link
+        document.getElementById('starred-link').addEventListener('click', function(e) {
+            e.preventDefault();
+            document.querySelector('main > div').classList.add('hidden');
+            document.getElementById('starred-container').classList.remove('hidden');
+            renderStarredEmails();
+        });
+
+        function renderStarredEmails() {
+            const starredContainer = document.getElementById('starred-emails');
+            starredContainer.innerHTML = '';
+            
+            if (starredEmails.length === 0) {
+                starredContainer.innerHTML = `
+                    <div class="p-8 text-center">
+                        <i class="fas fa-star text-4xl text-gray-500 mb-4"></i>
+                        <h3 class="text-xl font-bold text-gray-400 mb-2">Yıldızlı e-posta yok</h3>
+                        <p class="text-gray-500">Yıldızladığınız e-postalar burada görüntülenecek</p>
+                    </div>
+                `;
+                return;
+            }
+
+            starredEmails.forEach(email => {
+                const clonedEmail = email.cloneNode(true);
+                
+                clonedEmail.addEventListener('click', function() {
+                    const content = this.querySelector('.email-content');
+                    content.classList.toggle('open');
+                });
+                
+                const checkbox = clonedEmail.querySelector('input[type="checkbox"]');
+                if (checkbox) {
+                    checkbox.addEventListener('click', function(e) {
+                        e.stopPropagation();
+                        if (this.checked) {
+                            clonedEmail.classList.add('selected');
+                        } else {
+                            clonedEmail.classList.remove('selected');
+                        }
+                    });
+                }
+                
+                starredContainer.appendChild(clonedEmail);
+            });
+        }
+
+        // Move selected emails from starred to trash
+        function moveToTrashFromStarred() {
+            const selectedEmails = document.querySelectorAll('#starred-emails .email-item.selected');
+            const starredCount = document.getElementById('starred-count');
+            const trashCount = document.getElementById('trash-count');
+            
+            selectedEmails.forEach(email => {
+                const index = Array.from(starredEmails).findIndex(e => e.isEqualNode(email));
+                if (index !== -1) {
+                    // Add to trash
+                    trashEmails.push(starredEmails[index]);
+                    // Remove from starred
+                    starredEmails.splice(index, 1);
+                }
+                
+                // Update counts
+                const newStarredCount = starredEmails.length;
+                starredCount.textContent = newStarredCount;
+                if (newStarredCount === 0) {
+                    starredCount.classList.add('hidden');
+                }
+                
+                const newTrashCount = parseInt(trashCount.textContent) || 0;
+                trashCount.textContent = newTrashCount + 1;
+                trashCount.classList.remove('hidden');
+            });
+            
+            renderStarredEmails();
+        }
+
+        // Select all in starred
+        document.getElementById('select-all-starred')?.addEventListener('click', function(e) {
+            e.stopPropagation();
+            const checkboxes = document.querySelectorAll('#starred-emails .email-item input[type="checkbox"]');
+            const anyUnchecked = Array.from(checkboxes).some(checkbox => !checkbox.checked);
+            
+            checkboxes.forEach(checkbox => {
+                checkbox.checked = anyUnchecked;
+                const emailItem = checkbox.closest('.email-item');
+                if (anyUnchecked) {
+                    emailItem.classList.add('selected');
+                } else {
+                    emailItem.classList.remove('selected');
+                }
+            });
+            
+            const icon = this.querySelector('i');
+            if (anyUnchecked) {
+                icon.classList.remove('fa-check-square');
+                icon.classList.add('fa-minus-square');
+            } else {
+                icon.classList.remove('fa-minus-square');
+                icon.classList.add('fa-check-square');
+            }
+        });
+
+        // Trash functionality
         
         // Show trash container when clicking trash link
         document.getElementById('trash-link').addEventListener('click', function(e) {
@@ -600,6 +760,7 @@
 
         function goBackToInbox() {
             document.getElementById('trash-container').classList.add('hidden');
+            document.getElementById('starred-container').classList.add('hidden');
             document.querySelector('main > div').classList.remove('hidden');
         }