diff --git a/public/index.php b/public/index.php
index 6596bd1..278a638 100644
--- a/public/index.php
+++ b/public/index.php
@@ -167,6 +167,15 @@ $news_items = $stmt->fetchAll();
+
+
+
+
diff --git a/public/js/app.js b/public/js/app.js
index 209c7e5..6c150b1 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -829,11 +829,20 @@ 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);
+ 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 = 'Keine Beiträge gefunden.
';
diff --git a/public/styles.css b/public/styles.css
index 8cd5b88..5511c94 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -663,6 +663,27 @@ select.form-input { cursor: pointer; }
----------------------------------------------------------------- */
.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;
+ 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);