news sort control in sidebar

public/admin.php

@@ -334,9 +334,9 @@ $counts['total'] = count($all_contributions);
                                         <i class="fa-solid fa-trash"></i> Löschen
                                     </button>
 
-                                    <a class="btn btn-map" href="index.php" target="_blank">
+                                    <!-- <a class="btn btn-map" href="index.php" target="_blank">
                                         <i class="fa-solid fa-map-location-dot"></i> Karte
-                                    </a>
+                                    </a> -->
                                 </div>
                             </div>
                         </div>
@@ -457,11 +457,23 @@ $counts['total'] = count($all_contributions);
         <!-- News Article Tab                                      -->
         <!-- ========================================================= -->
         <div id="tab-news" class="page-tab-content" style="display:none;">
-            <div class="tab-header">
-                <h2><i class="fa-solid fa-newspaper"></i> Neuigkeiten</h2>
-                <button class="btn btn-approve" onclick="createNews()">
-                    <i class="fa-solid fa-plus"></i> Nachricht hinzufügen
-                </button>
+
+            <!-- Filter -->
+            <div class="filter-tabs" id="news-filter-tabs">
+                    <button class="filter-tab active" onclick="filterNewsByStatus('all', this)">
+                        Alle <span class="tab-count"><?= count($news_items) ?></span>
+                    </button>
+                </div>
+
+            <!-- Sort Controls -->
+            <div class="sort-controls">
+                <span id="news-visible-count"><?= count($news_items) ?> Neuigkeiten</span>
+                <div style="display:flex;gap:var(--space-sm);align-items:center;">
+                    <select onchange="sortNewsRows(this.value)">
+                        <option value="date-desc">Neueste zuerst</option>
+                        <option value="date-asc">Älteste zuerst</option>
+                    </select>
+                </div>
             </div>
 
             <?php if (empty($news_items)): ?>
@@ -471,7 +483,7 @@ $counts['total'] = count($all_contributions);
                 </div>
             <?php else: ?>
                 <?php foreach ($news_items as $news): ?>
-                    <div class="contribution-row" data-id="<?= $news['news_id'] ?>">
+                    <div class="contribution-row" data-id="<?= $news['news_id'] ?>" data-date="<?= $news['published_at'] ?>">
                         <div class="contribution-row-header" onclick="toggleRow(this.parentElement)">
                             <div class="contribution-row-summary">
                                 <span class="title"><?= htmlspecialchars($news['title']) ?></span>
@@ -498,6 +510,12 @@ $counts['total'] = count($all_contributions);
                     </div>
                 <?php endforeach; ?>
             <?php endif; ?>
+
+            <div class="tab-footer-action">
+                    <button class="btn btn-approve" onclick="createNews()">
+                        <i class="fa-solid fa-plus"></i> Neuigkeit hinzufügen
+                    </button>
+            </div>
         </div>
 
 
@@ -520,6 +538,74 @@ $counts['total'] = count($all_contributions);
 
     </div>
 
+    
+    <!-- ============================================================= -->
+    <!-- Edit Contribution Modal (Admin)                               -->
+    <!-- ============================================================= -->
+    <div id="admin-edit-modal" class="modal-overlay" style="display:none;">
+        <div class="modal-content">
+            <h2><i class="fa-solid fa-pen"></i> Beitrag bearbeiten</h2>
+            <div class="form-group">
+                <label for="admin-edit-title">Titel</label>
+                <input type="text" id="admin-edit-title" class="form-input">
+            </div>
+            <div class="form-group">
+                <label for="admin-edit-description">Beschreibung</label>
+                <textarea id="admin-edit-description" class="form-input" rows="4"></textarea>
+            </div>
+            <input type="hidden" id="admin-edit-id">
+            <div class="modal-actions">
+                <button class="btn btn-secondary" onclick="closeAdminModal('admin-edit-modal')">Abbrechen</button>
+                <button class="btn btn-primary" onclick="submitAdminEdit()">Speichern</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- ============================================================= -->
+    <!-- Edit Comment Modal (Admin)                                    -->
+    <!-- ============================================================= -->
+    <div id="admin-comment-modal" class="modal-overlay" style="display:none;">
+        <div class="modal-content">
+            <h2><i class="fa-solid fa-pen"></i> Kommentar bearbeiten</h2>
+            <div class="form-group">
+                <label for="admin-comment-content">Inhalt</label>
+                <textarea id="admin-comment-content" class="form-input" rows="4"></textarea>
+            </div>
+            <input type="hidden" id="admin-comment-id">
+            <div class="modal-actions">
+                <button class="btn btn-secondary" onclick="closeAdminModal('admin-comment-modal')">Abbrechen</button>
+                <button class="btn btn-primary" onclick="submitAdminComment()">Speichern</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- ============================================================= -->
+    <!-- Create/Edit News Modal (Admin)                                -->
+    <!-- ============================================================= -->
+    <div id="admin-news-modal" class="modal-overlay" style="display:none;">
+        <div class="modal-content">
+            <h2 id="admin-news-modal-title"><i class="fa-solid fa-newspaper"></i> Neuigkeit hinzufügen</h2>
+            <div class="form-group">
+                <label for="admin-news-title">Titel</label>
+                <input type="text" id="admin-news-title" class="form-input" placeholder="Titel der Neuigkeit">
+            </div>
+            <div class="form-group">
+                <label for="admin-news-content">Inhalt</label>
+                <textarea id="admin-news-content" class="form-input" rows="4" placeholder="Neuigkeit verfassen..."></textarea>
+            </div>
+            <div class="form-group">
+                <label for="admin-news-author">Autor</label>
+                <input type="text" id="admin-news-author" class="form-input" value="Stadtverwaltung">
+            </div>
+            <input type="hidden" id="admin-news-id">
+            <input type="hidden" id="admin-news-mode">
+            <div class="modal-actions">
+                <button class="btn btn-secondary" onclick="closeAdminModal('admin-news-modal')">Abbrechen</button>
+                <button class="btn btn-primary" onclick="submitAdminNews()">Speichern</button>
+            </div>
+        </div>
+    </div>
+
 
     <!-- ============================================================= -->
     <!-- Loads JavaScript Dependencies                                 -->

public/index.php

@@ -167,6 +167,16 @@ $news_items = $stmt->fetchAll();
                         <div class="list-search">
                             <input type="text" id="list-search-input" placeholder="Beiträge durchsuchen..." class="form-input">
                         </div>
+                        <div class="list-controls">
+                            <select id="list-sort" class="form-input list-sort-select" onchange="updateContributionsList()">
+                                <option value="date-desc">Neueste zuerst</option>
+                                <option value="date-asc">Älteste zuerst</option>
+                                <option value="category">Nach Kategorie</option>
+                                <option value="likes">Meiste Bewertungen</option>
+                                <option value="comments">Meiste Kommentare</option>
+                            </select>
+                            <span id="list-count" class="list-count"></span>
+                        </div>
                         <div id="contributions-list">
                             <!-- Contribution Cards — populated by app.js -->
                         </div>
@@ -185,6 +195,14 @@ $news_items = $stmt->fetchAll();
                             <input type="text" id="news-search-input" placeholder="Neuigkeiten durchsuchen..." class="form-input" oninput="filterNews()">
                         </div>
 
+                        <div class="list-controls">
+                            <select id="news-sort" class="form-input list-sort-select" onchange="sortNews()">
+                                <option value="date-desc">Neueste zuerst</option>
+                                <option value="date-asc">Älteste zuerst</option>
+                            </select>
+                            <span class="list-count"><?= count($news_items) ?> Neuigkeiten</span>
+                        </div>
+
                         <!-- News Items Container -->
                         <div id="news-list">
                             <?php if (empty($news_items)): ?>
@@ -192,9 +210,10 @@ $news_items = $stmt->fetchAll();
                             <?php else: ?>
                                 <?php foreach ($news_items as $news): ?>
                                     <div class="news-item"
-                                         data-title="<?= htmlspecialchars(strtolower($news['title'])) ?>"
-                                         data-content="<?= htmlspecialchars(strtolower($news['content'])) ?>"
-                                         data-author="<?= htmlspecialchars(strtolower($news['author_name'])) ?>">
+                                        data-title="<?= htmlspecialchars(strtolower($news['title'])) ?>"
+                                        data-content="<?= htmlspecialchars(strtolower($news['content'])) ?>"
+                                        data-author="<?= htmlspecialchars(strtolower($news['author_name'])) ?>"
+                                        data-date="<?= $news['published_at'] ?>">
                                         <h3><?= htmlspecialchars($news['title']) ?></h3>
                                         <p><?= nl2br(htmlspecialchars($news['content'])) ?></p>
                                         <span class="news-date">
@@ -348,6 +367,33 @@ $news_items = $stmt->fetchAll();
         </div>
     </div>
 
+    
+    <!-- ============================================================= -->
+    <!-- Edit Contribution Modal                                       -->
+    <!-- ============================================================= -->
+    <div id="edit-modal" class="modal-overlay" style="display:none;">
+        <div class="modal-content">
+            <h2><i class="fa-solid fa-pen"></i> Beitrag bearbeiten</h2>
+
+            <div class="form-group">
+                <label for="edit-title">Titel</label>
+                <input type="text" id="edit-title" class="form-input">
+            </div>
+
+            <div class="form-group">
+                <label for="edit-description">Beschreibung</label>
+                <textarea id="edit-description" class="form-input" rows="4"></textarea>
+            </div>
+
+            <input type="hidden" id="edit-contribution-id">
+
+            <div class="modal-actions">
+                <button class="btn btn-secondary" onclick="closeEditModal()">Abbrechen</button>
+                <button class="btn btn-primary" onclick="submitEdit()">Speichern</button>
+            </div>
+        </div>
+    </div>
+
 
     <!-- ============================================================= -->
     <!-- Loads JavaScript Dependencies                                 -->

public/js/admin.js

@@ -275,7 +275,26 @@ function sortCommentRows(sortBy) {
 
 
 // =====================================================================
-// Block 7: Helper Functions
+// Block 7: News Filter and Sorting
+// =====================================================================
+
+// Sorts News
+function sortNewsRows(sortBy) {
+    var container = document.getElementById('tab-news');
+    var rows = Array.from(container.querySelectorAll('.contribution-row'));
+
+    rows.sort(function (a, b) {
+        if (sortBy === 'date-desc') return new Date(b.dataset.date || 0) - new Date(a.dataset.date || 0);
+        if (sortBy === 'date-asc')  return new Date(a.dataset.date || 0) - new Date(b.dataset.date || 0);
+        return 0;
+    });
+
+    rows.forEach(function (row) { row.parentNode.appendChild(row); });
+}
+
+
+// =====================================================================
+// Block 8: Helper Functions
 // =====================================================================
 
 // Sends a POST request to API
@@ -300,8 +319,24 @@ function escapeHtml(text) {
     return div.innerHTML;
 }
 
+
+// Closes Admin Modals by ID
+function closeAdminModal(modalId) {
+    document.getElementById(modalId).style.display = 'none';
+}
+
+// Closes Admin Modals on Escape Key
+document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape') {
+        document.querySelectorAll('.modal-overlay').forEach(function (modal) {
+            modal.style.display = 'none';
+        });
+    }
+});
+
+
 // =====================================================================
-// Block 8: CRUD Operations for Contributions
+// Block 9: CRUD Operations for Contributions
 // =====================================================================
 
 // STATUS: Changes Contribution Status
@@ -335,45 +370,36 @@ function changeStatus(contributionId, newStatus) {
 
 // UPDATE: Edits existing Contributions
 function editContribution(contributionId, currentTitle, currentDescription) {
-    Swal.fire({
-        title: 'Beitrag bearbeiten',
-        html:
-            '<div class="swal-form">' +
-                '<div class="swal-group">' +
-                    '<label class="swal-label">Titel</label>' +
-                    '<input id="swal-title" class="swal2-input" value="' + escapeHtml(currentTitle) + '">' +
-                '</div>' +
-                '<div>' +
-                    '<label class="swal-label">Beschreibung</label>' +
-                    '<textarea id="swal-description" class="swal2-textarea">' + escapeHtml(currentDescription) + '</textarea>' +
-                '</div>' +
-            '</div>',
-        showCancelButton: true,
-        confirmButtonText: 'Speichern',
-        cancelButtonText: 'Abbrechen',
-        confirmButtonColor: ADMIN_CONFIG.primaryColor,
-        preConfirm: function () {
-            return {
-                title: document.getElementById('swal-title').value.trim(),
-                description: document.getElementById('swal-description').value.trim()
-            };
-        }
-    }).then(function (result) {
-        if (!result.isConfirmed) return;
+    document.getElementById('admin-edit-id').value = contributionId;
+    document.getElementById('admin-edit-title').value = currentTitle;
+    document.getElementById('admin-edit-description').value = currentDescription;
+    document.getElementById('admin-edit-modal').style.display = 'flex';
+}
 
-        apiCall({
-            action: 'update',
-            contribution_id: contributionId,
-            title: result.value.title,
-            description: result.value.description
-        }).then(function (response) {
-            if (response.error) {
-                Swal.fire('Fehler', response.error, 'error');
-                return;
-            }
-            Swal.fire('Gespeichert!', 'Beitrag wurde aktualisiert.', 'success')
-                .then(function () { location.reload(); });
-        });
+// Submits Edit from Custom Modal
+function submitAdminEdit() {
+    var id = document.getElementById('admin-edit-id').value;
+    var title = document.getElementById('admin-edit-title').value.trim();
+    var description = document.getElementById('admin-edit-description').value.trim();
+
+    if (!title) {
+        Swal.fire('Titel fehlt', 'Bitte geben Sie einen Titel ein.', 'warning');
+        return;
+    }
+
+    apiCall({
+        action: 'update',
+        contribution_id: id,
+        title: title,
+        description: description
+    }).then(function (response) {
+        if (response.error) {
+            Swal.fire('Fehler', response.error, 'error');
+            return;
+        }
+        closeAdminModal('admin-edit-modal');
+        Swal.fire('Gespeichert!', 'Beitrag wurde aktualisiert.', 'success')
+            .then(function () { location.reload(); });
     });
 }
 
@@ -387,7 +413,7 @@ function deleteContribution(contributionId) {
         showCancelButton: true,
         confirmButtonText: 'Beitrag löschen',
         cancelButtonText: 'Abbrechen',
-        confirmButtonColor: '#c62828'
+        customClass: { confirmButton: 'swal-btn-danger' },
     }).then(function (result) {
         if (!result.isConfirmed) return;
 
@@ -406,7 +432,7 @@ function deleteContribution(contributionId) {
 }
 
 // =====================================================================
-// Block 9: CRUD Operations for Comments
+// Block 10: CRUD Operations for Comments
 // =====================================================================
 
 // STATUS: Changes Comment Status
@@ -439,35 +465,33 @@ function changeCommentStatus(commentId, newStatus) {
 
 // UPDATE: Edits existing Comments
 function editModComment(commentId, currentContent) {
-    Swal.fire({
-        title: 'Kommentar bearbeiten',
-        html:
-            '<div class="swal-form">' +
-                '<label class="swal-label">Inhalt</label>' +
-                '<textarea id="swal-comment-content" class="swal2-textarea">' + escapeHtml(currentContent) + '</textarea>' +
-            '</div>',
-        showCancelButton: true,
-        confirmButtonText: 'Speichern',
-        cancelButtonText: 'Abbrechen',
-        confirmButtonColor: ADMIN_CONFIG.primaryColor,
-        preConfirm: function () {
-            return { content: document.getElementById('swal-comment-content').value.trim() };
-        }
-    }).then(function (result) {
-        if (!result.isConfirmed) return;
+    document.getElementById('admin-comment-id').value = commentId;
+    document.getElementById('admin-comment-content').value = currentContent;
+    document.getElementById('admin-comment-modal').style.display = 'flex';
+}
 
-        apiCall({
-            action: 'update_comment',
-            comment_id: commentId,
-            content: result.value.content
-        }).then(function (response) {
-            if (response.error) {
-                Swal.fire('Fehler', response.error, 'error');
-                return;
-            }
-            Swal.fire('Gespeichert!', 'Kommentar wurde aktualisiert.', 'success')
-                .then(function () { location.reload(); });
-        });
+// Submits Comment Edit from Custom Modal
+function submitAdminComment() {
+    var id = document.getElementById('admin-comment-id').value;
+    var content = document.getElementById('admin-comment-content').value.trim();
+
+    if (!content) {
+        Swal.fire('Inhalt fehlt', 'Bitte geben Sie einen Inhalt ein.', 'warning');
+        return;
+    }
+
+    apiCall({
+        action: 'update_comment',
+        comment_id: id,
+        content: content
+    }).then(function (response) {
+        if (response.error) {
+            Swal.fire('Fehler', response.error, 'error');
+            return;
+        }
+        closeAdminModal('admin-comment-modal');
+        Swal.fire('Gespeichert!', 'Kommentar wurde aktualisiert.', 'success')
+            .then(function () { location.reload(); });
     });
 }
 
@@ -481,7 +505,7 @@ function deleteModComment(commentId) {
         showCancelButton: true,
         confirmButtonText: 'Löschen',
         cancelButtonText: 'Abbrechen',
-        confirmButtonColor: '#c62828'
+        customClass: { confirmButton: 'swal-btn-danger' },
     }).then(function (result) {
         if (!result.isConfirmed) return;
 
@@ -501,110 +525,71 @@ function deleteModComment(commentId) {
 
 
 // =====================================================================
-// Block 10: CRUD Operations for News
+// Block 11: CRUD Operations for News
 // =====================================================================
 
-// CREATE: Submits new News Article
+// CREATE: Creates News
 function createNews() {
-    Swal.fire({
-        title: 'Neuigkeit hinzufügen',
-        html:
-            '<div class="swal-form">' +
-                '<div class="swal-group">' +
-                    '<label class="swal-label">Titel</label>' +
-                    '<input id="swal-news-title" class="swal2-input" placeholder="Titel der Neuigkeit">' +
-                '</div>' +
-                '<div class="swal-group">' +
-                    '<label class="swal-label">Inhalt</label>' +
-                    '<textarea id="swal-news-content" class="swal2-textarea" placeholder="Neuigkeit verfassen..."></textarea>' +
-                '</div>' +
-                '<div>' +
-                    '<label class="swal-label">Autor</label>' +
-                    '<input id="swal-news-author" class="swal2-input" value="Stadtverwaltung">' +
-                '</div>' +
-            '</div>',
-        showCancelButton: true,
-        confirmButtonText: 'Veröffentlichen',
-        cancelButtonText: 'Abbrechen',
-        confirmButtonColor: ADMIN_CONFIG.primaryColor,
-        preConfirm: function () {
-            const title   = document.getElementById('swal-news-title').value.trim();
-            const content = document.getElementById('swal-news-content').value.trim();
-            const author  = document.getElementById('swal-news-author').value.trim() || 'Stadtverwaltung';
-            if (!title || !content) {
-                Swal.showValidationMessage('Titel und Inhalt sind Pflichtfelder.');
-                return false;
-            }
-            return { title, content, author_name: author };
-        }
-    }).then(function (result) {
-        if (!result.isConfirmed) return;
-
-        apiCall({
-            action: 'create_news',
-            municipality_id: ADMIN_CONFIG.id,
-            title: result.value.title,
-            content: result.value.content,
-            author_name: result.value.author_name
-        }).then(function (response) {
-            if (response.error) {
-                Swal.fire('Fehler', response.error, 'error');
-                return;
-            }
-            Swal.fire('Veröffentlicht!', 'Neuigkeit wurde veröffentlicht.', 'success')
-                .then(function () { location.reload(); });
-        });
-    });
+    document.getElementById('admin-news-modal-title').innerHTML = '<i class="fa-solid fa-newspaper"></i> Neuigkeit hinzufügen';
+    document.getElementById('admin-news-id').value = '';
+    document.getElementById('admin-news-mode').value = 'create';
+    document.getElementById('admin-news-title').value = '';
+    document.getElementById('admin-news-content').value = '';
+    document.getElementById('admin-news-author').value = 'Stadtverwaltung';
+    document.getElementById('admin-news-modal').style.display = 'flex';
 }
 
-
 // UPDATE: Edits existing News
 function editNews(newsId, currentTitle, currentContent, currentAuthor) {
-    Swal.fire({
-        title: 'Neuigkeit bearbeiten',
-        html:
-            '<div class="swal-form">' +
-                '<div class="swal-group">' +
-                    '<label class="swal-label">Titel</label>' +
-                    '<input id="swal-news-title" class="swal2-input" value="' + escapeHtml(currentTitle) + '">' +
-                '</div>' +
-                '<div class="swal-group">' +
-                    '<label class="swal-label">Inhalt</label>' +
-                    '<textarea id="swal-news-content" class="swal2-textarea">' + escapeHtml(currentContent) + '</textarea>' +
-                '</div>' +
-                '<div>' +
-                    '<label class="swal-label">Autor</label>' +
-                    '<input id="swal-news-author" class="swal2-input" value="' + escapeHtml(currentAuthor) + '">' +
-                '</div>' +
-            '</div>',
-        showCancelButton: true,
-        confirmButtonText: 'Speichern',
-        cancelButtonText: 'Abbrechen',
-        confirmButtonColor: ADMIN_CONFIG.primaryColor,
-        preConfirm: function () {
-            return {
-                title:       document.getElementById('swal-news-title').value.trim(),
-                content:     document.getElementById('swal-news-content').value.trim(),
-                author_name: document.getElementById('swal-news-author').value.trim() || 'Stadtverwaltung'
-            };
-        }
-    }).then(function (result) {
-        if (!result.isConfirmed) return;
+    document.getElementById('admin-news-modal-title').innerHTML = '<i class="fa-solid fa-pen"></i> Neuigkeit bearbeiten';
+    document.getElementById('admin-news-id').value = newsId;
+    document.getElementById('admin-news-mode').value = 'edit';
+    document.getElementById('admin-news-title').value = currentTitle;
+    document.getElementById('admin-news-content').value = currentContent;
+    document.getElementById('admin-news-author').value = currentAuthor;
+    document.getElementById('admin-news-modal').style.display = 'flex';
+}
 
-        apiCall({
+// Submits News from Custom Modal (Create or Edit)
+function submitAdminNews() {
+    var mode = document.getElementById('admin-news-mode').value;
+    var title = document.getElementById('admin-news-title').value.trim();
+    var content = document.getElementById('admin-news-content').value.trim();
+    var author = document.getElementById('admin-news-author').value.trim() || 'Stadtverwaltung';
+
+    if (!title || !content) {
+        Swal.fire('Pflichtfelder', 'Titel und Inhalt sind Pflichtfelder.', 'warning');
+        return;
+    }
+
+    var data;
+    if (mode === 'create') {
+        data = {
+            action: 'create_news',
+            municipality_id: ADMIN_CONFIG.id,
+            title: title,
+            content: content,
+            author_name: author
+        };
+    } else {
+        data = {
             action: 'update_news',
-            news_id: newsId,
-            title: result.value.title,
-            content: result.value.content,
-            author_name: result.value.author_name
-        }).then(function (response) {
-            if (response.error) {
-                Swal.fire('Fehler', response.error, 'error');
-                return;
-            }
-            Swal.fire('Gespeichert!', 'Neuigkeit wurde aktualisiert.', 'success')
-                .then(function () { location.reload(); });
-        });
+            news_id: document.getElementById('admin-news-id').value,
+            title: title,
+            content: content,
+            author_name: author
+        };
+    }
+
+    apiCall(data).then(function (response) {
+        if (response.error) {
+            Swal.fire('Fehler', response.error, 'error');
+            return;
+        }
+        closeAdminModal('admin-news-modal');
+        var msg = mode === 'create' ? 'Neuigkeit wurde veröffentlicht.' : 'Neuigkeit wurde aktualisiert.';
+        Swal.fire('Gespeichert!', msg, 'success')
+            .then(function () { location.reload(); });
     });
 }
 
@@ -618,7 +603,7 @@ function deleteNews(newsId) {
         showCancelButton: true,
         confirmButtonText: 'Löschen',
         cancelButtonText: 'Abbrechen',
-        confirmButtonColor: '#c62828'
+        customClass: { confirmButton: 'swal-btn-danger' },
     }).then(function (result) {
         if (!result.isConfirmed) return;
 

public/js/app.js

@@ -653,58 +653,55 @@ function closeCreateModal() {
 }
 
 // UPDATE: Edits existing Contributions
+// UPDATE: Opens Edit Modal for existing Contributions
 function editContribution(contributionId) {
-    // Finds Contribution in local Data
     const contribution = contributionsData.find(function (f) {
         return f.properties.contribution_id === contributionId;
     });
-
     if (!contribution) return;
 
     const props = contribution.properties;
+    document.getElementById('edit-contribution-id').value = contributionId;
+    document.getElementById('edit-title').value = props.title;
+    document.getElementById('edit-description').value = props.description || '';
+    document.getElementById('edit-modal').style.display = 'flex';
+}
 
-    Swal.fire({
-        title: 'Beitrag bearbeiten',
-        html:
-            '<div class="swal-form">' +
-                '<div class="swal-group">' +
-                    '<label class="swal-label">Titel</label>' +
-                    '<input id="swal-title" class="swal2-input" value="' + escapeHtml(props.title) + '">' +
-                '</div>' +
-                '<div>' +
-                    '<label class="swal-label">Beschreibung</label>' +
-                    '<textarea id="swal-description" class="swal2-textarea">' + escapeHtml(props.description || '') + '</textarea>' +
-                '</div>' +
-            '</div>',
-        showCancelButton: true,
-        confirmButtonText: 'Speichern',
-        cancelButtonText: 'Abbrechen',
-        confirmButtonColor: MUNICIPALITY.primaryColor,
-        preConfirm: function () {
-            return {
-                title: document.getElementById('swal-title').value.trim(),
-                description: document.getElementById('swal-description').value.trim()
-            };
+// Submits Edit from Custom Modal
+function submitEdit() {
+    const contributionId = document.getElementById('edit-contribution-id').value;
+    const title = document.getElementById('edit-title').value.trim();
+    const description = document.getElementById('edit-description').value.trim();
+
+    if (!title) {
+        Swal.fire('Titel fehlt', 'Bitte geben Sie einen Titel ein.', 'warning');
+        return;
+    }
+
+    apiCall({
+        action: 'update',
+        contribution_id: contributionId,
+        title: title,
+        description: description
+    }, function (response) {
+        if (response.error) {
+            Swal.fire('Fehler', response.error, 'error');
+            return;
         }
-    }).then(function (result) {
-        if (!result.isConfirmed) return;
-
-        apiCall({
-            action: 'update',
-            contribution_id: contributionId,
-            title: result.value.title,
-            description: result.value.description
-        }, function (response) {
-            if (response.error) {
-                Swal.fire('Fehler', response.error, 'error');
-                return;
-            }
-            Swal.fire('Gespeichert!', 'Der Beitrag wurde aktualisiert.', 'success');
-            loadContributions();
-        });
+        closeEditModal();
+        Swal.fire('Gespeichert!', 'Der Beitrag wurde aktualisiert.', 'success');
+        loadContributions();
     });
 }
 
+// Closes Edit Modal
+function closeEditModal() {
+    document.getElementById('edit-modal').style.display = 'none';
+    document.getElementById('edit-contribution-id').value = '';
+    document.getElementById('edit-title').value = '';
+    document.getElementById('edit-description').value = '';
+}
+
 // DELETE: Deletes existing Contributions
 function deleteContribution(contributionId) {
     Swal.fire({
@@ -714,7 +711,7 @@ function deleteContribution(contributionId) {
         showCancelButton: true,
         confirmButtonText: 'Löschen',
         cancelButtonText: 'Abbrechen',
-        confirmButtonColor: '#c62828'
+        customClass: { confirmButton: 'swal-btn-danger' },
     }).then(function (result) {
         if (!result.isConfirmed) return;
 
@@ -832,11 +829,25 @@ function updateContributionsList() {
         return matchesCategory && matchesSearch;
     });
 
-    // Sorts by Date (newest first)
+    // Sorts by selected Option
+    var sortBy = document.getElementById('list-sort') ? document.getElementById('list-sort').value : 'date-desc';
     filtered.sort(function (a, b) {
-        return new Date(b.properties.created_at) - new Date(a.properties.created_at);
+        if (sortBy === 'date-desc')  return new Date(b.properties.created_at) - new Date(a.properties.created_at);
+        if (sortBy === 'date-asc')   return new Date(a.properties.created_at) - new Date(b.properties.created_at);
+        if (sortBy === 'likes')      return b.properties.likes_count - a.properties.likes_count;
+        if (sortBy === 'comments')   return (b.properties.comment_count || 0) - (a.properties.comment_count || 0);
+        if (sortBy === 'category') {
+            var catA = (CATEGORIES[a.properties.category] || CATEGORIES.other).label;
+            var catB = (CATEGORIES[b.properties.category] || CATEGORIES.other).label;
+            return catA.localeCompare(catB);
+        }
+        return 0;
     });
 
+    // Updates Count Display
+    var countEl = document.getElementById('list-count');
+    if (countEl) countEl.textContent = filtered.length + ' Beiträge';
+
     // Builds HTML
     if (filtered.length === 0) {
         container.innerHTML = '<p class="empty-state">Keine Beiträge gefunden.</p>';
@@ -1082,6 +1093,7 @@ document.addEventListener('keydown', function (e) {
         document.getElementById('welcome-modal').style.display = 'none';
         document.getElementById('login-modal').style.display = 'none';
         document.getElementById('create-modal').style.display = 'none';
+        document.getElementById('edit-modal').style.display = 'none';
     }
 });
 
@@ -1147,6 +1159,21 @@ function filterNews() {
     });
 }
 
+// Sorts News Items in Sidebar by Date
+function sortNews() {
+    var sortBy = document.getElementById('news-sort').value;
+    var container = document.getElementById('news-list');
+    var items = Array.from(container.querySelectorAll('.news-item'));
+
+    items.sort(function (a, b) {
+        if (sortBy === 'date-desc') return new Date(b.dataset.date) - new Date(a.dataset.date);
+        if (sortBy === 'date-asc')  return new Date(a.dataset.date) - new Date(b.dataset.date);
+        return 0;
+    });
+
+    items.forEach(function (item) { container.appendChild(item); });
+}
+
 // Loads and Displays Comments forContributions in Popups
 function loadComments(contributionId) {
     apiCall({

public/styles.css

@@ -286,10 +286,12 @@ select.form-input { cursor: pointer; }
 }
 
 /* SweetAlert2 Portal Theme */
+/* SweetAlert2 Portal Theme — Notifications */
 .swal2-popup {
     font-family: var(--font-body) !important;
     border-radius: var(--radius-lg) !important;
     font-size: var(--font-base) !important;
+    padding: var(--space-xl) !important;
 }
 
 .swal2-title {
@@ -304,31 +306,38 @@ select.form-input { cursor: pointer; }
     line-height: 1.6 !important;
 }
 
+.swal2-actions {
+    gap: var(--space-sm) !important;
+}
+
 .swal2-confirm {
     border-radius: var(--radius-md) !important;
     font-size: var(--font-sm) !important;
     font-weight: 600 !important;
     font-family: var(--font-body) !important;
     padding: var(--space-sm) var(--space-lg) !important;
+    min-height: 40px !important;
+    box-shadow: none !important;
+    background-color: var(--color-primary) !important;
 }
 
-.swal2-cancel {
-    border-radius: var(--radius-md) !important;
-    font-size: var(--font-sm) !important;
-    font-weight: 600 !important;
-    font-family: var(--font-body) !important;
-    padding: var(--space-sm) var(--space-lg) !important;
-    background: var(--color-bg) !important;
-    color: var(--color-text) !important;
-    border: 1px solid var(--color-border) !important;
-}
-
+.swal2-cancel,
 .swal2-deny {
     border-radius: var(--radius-md) !important;
     font-size: var(--font-sm) !important;
     font-weight: 600 !important;
     font-family: var(--font-body) !important;
     padding: var(--space-sm) var(--space-lg) !important;
+    min-height: 40px !important;
+    background: var(--color-bg) !important;
+    color: var(--color-text) !important;
+    border: 1px solid var(--color-border) !important;
+    box-shadow: none !important;
+}
+
+.swal2-cancel:hover,
+.swal2-deny:hover {
+    background: var(--color-border) !important;
 }
 
 .swal-label {
@@ -365,6 +374,10 @@ select.form-input { cursor: pointer; }
     color: #999;
 }
 
+.swal-btn-danger {
+    background-color: var(--color-error) !important;
+}
+
 
 /* -----------------------------------------------------------------
    3.7 Warning Notices
@@ -644,12 +657,39 @@ select.form-input { cursor: pointer; }
     font-size: var(--font-sm);
 }
 
+.leaflet-sidebar-close {
+    color: white;
+    font-size: var(--font-lg);
+}
+
 
 /* -----------------------------------------------------------------
    4.4 Sidebar Contributions List
    ----------------------------------------------------------------- */
 .list-search { margin-bottom: var(--space-md); }
 
+.list-controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--space-md);
+    gap: var(--space-sm);
+}
+
+.list-sort-select {
+    width: auto;
+    min-width:185px;
+    padding: 6px var(--space-sm);
+    font-size: var(--font-sm);
+    flex-shrink: 0;
+}
+
+.list-count {
+    font-size: var(--font-sm);
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+}
+
 .contribution-card {
     padding: var(--space-md);
     margin-bottom: var(--space-sm);
@@ -662,7 +702,7 @@ select.form-input { cursor: pointer; }
 
 .contribution-card:hover {
     border-color: var(--color-primary);
-    box-shadow: var(--shadow-sm);
+    box-shadow: var(--shadow-md);
 }
 
 .contribution-card-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
@@ -697,6 +737,10 @@ select.form-input { cursor: pointer; }
     color: var(--color-text-secondary);
 }
 
+.category-filter-label input[type="checkbox"] {
+    accent-color: var(--color-primary);
+}
+
 .category-filter-total {
     margin-top: 10px;
     font-size: var(--font-sm);
@@ -716,6 +760,12 @@ select.form-input { cursor: pointer; }
     border-radius: var(--radius-md);
 }
 
+.news-item:hover {
+    border-color: var(--color-primary);
+    box-shadow: var(--shadow-sm);
+    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
+}
+
 .news-date { font-size: var(--font-sm); color: var(--color-text-secondary); }
 .news-item h3 { font-size: var(--font-md); margin: var(--space-xs) 0; color: var(--color-text); }
 
@@ -1374,6 +1424,12 @@ select.form-input { cursor: pointer; }
     border-top: 1px solid #f0f0f0;
 }
 
+.tab-footer-action {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: var(--space-md);
+}
+
 
 /* News and Comments Tab Headers */
 .tab-header {