improved sidebar structure, layouts and texts

public/index.php

@@ -130,35 +130,71 @@ $news_items = $stmt->fetchAll();
             <!-- Sidebar Tab Icons -->
             <div class="leaflet-sidebar-tabs">
                 <ul role="tablist">
-                    <li><a href="#tab-home" role="tab"><i class="fa-solid fa-house"></i></a></li>
-                    <li><a href="#tab-help" role="tab"><i class="fa-solid fa-circle-question"></i></a></li>
-                    <li><a href="#tab-list" role="tab"><i class="fa-solid fa-list"></i></a></li>
-                    <li><a href="#tab-news" role="tab"><i class="fa-solid fa-newspaper"></i></a></li>
+                    <li><a href="#tab-contributions" role="tab" title="Hinweise"><i class="fa-solid fa-clipboard-list"></i></a></li>
+                    <li><a href="#tab-tasks" role="tab" title="Aufgaben"><i class="fa-solid fa-clipboard-check"></i></a></li>
+                    <li><a href="#tab-list" role="tab" title="Beiträge"><i class="fa-solid fa-list"></i></a></li>
+                    <li><a href="#tab-news" role="tab" title="Neuigkeiten"><i class="fa-solid fa-newspaper"></i></a></li>
+                    <li><a href="#tab-help" role="tab" title="Hilfe"><i class="fa-solid fa-circle-question"></i></a></li>
                 </ul>
             </div>
 
             <!-- Sidebar Tab Content -->
             <div class="leaflet-sidebar-content">
 
-                <!-- Home Tab -->
-                <div class="leaflet-sidebar-pane" id="tab-home">
+                <!-- Contributions Tab -->
+                <div class="leaflet-sidebar-pane" id="tab-contributions">
                     <h2 class="leaflet-sidebar-header">
-                        Start
+                        Hinweise
                         <span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
                     </h2>
                     <div class="sidebar-body">
-                        <p>Willkommen beim Bürgerbeteiligungsportal <strong><?= htmlspecialchars($municipality['name']) ?></strong>.</p>
-                        <p>Verwenden Sie die Karte, um Hinweise und Aufgaben für die Stadtverwaltung hinzuzufügen oder bestehende Beiträge der Bürgerschaft zu betrachten.</p>
+                        <p>Verwenden Sie die Karte, um <strong>Hinweise</strong> für die Stadtverwaltung hinzuzufügen oder bestehende Hinweise zu betrachten, bewerten und kommentieren</p>
 
                         <h3>Kategorien</h3>
                         <div id="category-filter">
-                            <!-- Category Filter Checkboxes — populated by app.js -->
+                            <!-- populated by app.js -->
                         </div>
                         
-                        <h3>Statistik</h3>
-                        <div id="stats-container">
-                            <!-- Contribution Statistics — populated by app.js -->
+                        <p id="stats-container"></p>
+                        <!-- populated by app.js -->
+                    </div>
+                </div>
+
+                <!-- Tasks Tab -->
+                <div class="leaflet-sidebar-pane" id="tab-tasks">
+                    <h2 class="leaflet-sidebar-header">
+                        Aufgaben
+                        <span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
+                    </h2>
+                    <div class="sidebar-body">
+                        <p>Verwenden Sie die Karte, um <strong>Aufgaben</strong> für die Gemeinschaft hinzuzufügen oder bestehende Aufgaben zu betrachten, bewerten und kommentieren.</p>                     
+
+                        <h3>Kategorien</h3>
+                        <div id="task-category-filter">
+                            <!-- populated by app.js -->
                         </div>
+                        <p id="task-stats-container">
+                            <!-- populated by app.js -->
+                        </p>
+
+                        <div class="task-filter-row">
+                            <select id="task-status-filter" class="form-input" onchange="updateTasksList()" style="margin-bottom:8px;">
+                                <option value="open">Offene Aufgaben</option>
+                                <option value="all">Alle Aufgaben</option>
+                                <option value="completed">Wartend auf Prüfung</option>
+                                <option value="verified">Erledigte Aufgaben</option>
+                            </select>
+                        </div>
+
+                        <!-- Leaderboard -->
+                        <div id="leaderboard-container" class="leaderboard-box">
+                            <h3>Rangliste</h3>
+                            <div id="leaderboard-list"></div>
+                            <button class="btn btn-secondary leaderboard-more-btn" onclick="showFullLeaderboard()">
+                                Vollständige Rangliste
+                            </button>
+                        </div>
+
                     </div>
                 </div>
 
@@ -173,7 +209,39 @@ $news_items = $stmt->fetchAll();
                             <input type="text" id="list-search-input" placeholder="Beiträge durchsuchen..." class="form-input">
                         </div>
                         <div id="contributions-list">
-                            <!-- Contribution Cards — populated by app.js -->
+                            <!-- populated by app.js -->
+                        </div>
+                    </div>
+                </div>
+
+                <!-- News Tab -->
+                <div class="leaflet-sidebar-pane" id="tab-news">
+                    <h2 class="leaflet-sidebar-header">
+                        Neuigkeiten
+                        <span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
+                    </h2>
+                    <div class="sidebar-body">
+                        <div class="list-search">
+                            <input type="text" id="news-search-input" placeholder="Neuigkeiten durchsuchen..." class="form-input" oninput="filterNews()">
+                        </div>
+                        <div id="news-list">
+                            <?php if (empty($news_items)): ?>
+                                <p style="text-align:center;color:#999;padding:20px;">Noch keine Neuigkeiten veröffentlicht.</p>
+                            <?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'])) ?>">
+                                        <h3><?= htmlspecialchars($news['title']) ?></h3>
+                                        <p><?= nl2br(htmlspecialchars($news['content'])) ?></p>
+                                        <span class="news-date">
+                                            <?= htmlspecialchars($news['author_name']) ?>
+                                            · <?= date('d.m.Y', strtotime($news['published_at'])) ?>
+                                        </span>
+                                    </div>
+                                <?php endforeach; ?>
+                            <?php endif; ?>
                         </div>
                     </div>
                 </div>
@@ -205,49 +273,16 @@ $news_items = $stmt->fetchAll();
                         <h3><i class="fa-solid fa-comments"></i> Kommentieren</h3>
                         <p>Gerne können Sie Ihre Meinung zu bestehenden Beiträgen auch durch die Kommentarfunktion äußern.</p>
 
+                        <h3><i class="fa-solid fa-clipboard-check"></i> Aufgaben erledigen</h3>
+                        <p>Klicken Sie auf eine offene Aufgabe und melden Sie die Erledigung mit einem Foto-Nachweis.</p>
+
                         <h3><i class="fa-solid fa-magnifying-glass"></i> Suchen</h3>
                         <p>Verwenden Sie die Adresssuche rechts, um schnell den richtigen Ort auf der Mitmachkarte zu finden.</p>
-
-                        
-                    </div>
-                </div>
-
-                <!-- News Tab -->
-                <div class="leaflet-sidebar-pane" id="tab-news">
-                    <h2 class="leaflet-sidebar-header">
-                        Neuigkeiten
-                        <span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
-                    </h2>
-                    <div class="sidebar-body">
-                        <!-- News Search -->
-                        <div class="list-search">
-                            <input type="text" id="news-search-input" placeholder="Neuigkeiten durchsuchen..." class="form-input" oninput="filterNews()">
-                        </div>
-
-                        <!-- News Items Container -->
-                        <div id="news-list">
-                            <?php if (empty($news_items)): ?>
-                                <p style="text-align:center;color:#999;padding:20px;">Noch keine Neuigkeiten veröffentlicht.</p>
-                            <?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'])) ?>">
-                                        <h3><?= htmlspecialchars($news['title']) ?></h3>
-                                        <p><?= nl2br(htmlspecialchars($news['content'])) ?></p>
-                                        <span class="news-date">
-                                            <?= htmlspecialchars($news['author_name']) ?>
-                                            · <?= date('d.m.Y', strtotime($news['published_at'])) ?>
-                                        </span>
-                                    </div>
-                                <?php endforeach; ?>
-                            <?php endif; ?>
-                        </div>
                     </div>
                 </div>
 
             </div>
+
         </div>
 
         <!-- Leaflet Map -->
@@ -404,6 +439,7 @@ $news_items = $stmt->fetchAll();
 
         // Category Definitions from Database
         const CATEGORIES = <?= json_encode(get_categories(), JSON_UNESCAPED_UNICODE) ?>;
+        const TASK_CATEGORIES = <?= json_encode(get_task_categories(), JSON_UNESCAPED_UNICODE) ?>;
 
         // Admin Status from PHP Session
         const IS_ADMIN = <?= (function_exists('is_admin') && is_admin()) ? 'true' : 'false' ?>;

public/js/app.js

@@ -898,24 +898,24 @@ function updateStatistics() {
     const total = contributionsData.length;
 
     // Counts per Category
-    const counts = {};
-    contributionsData.forEach(function (f) {
-        const cat = f.properties.category;
-        counts[cat] = (counts[cat] || 0) + 1;
-    });
+    // const counts = {};
+    // contributionsData.forEach(function (f) {
+    //     const cat = f.properties.category;
+    //     counts[cat] = (counts[cat] || 0) + 1;
+    // });
 
-    let html = '<p style="font-size:0.9rem;"><strong>' + total + '</strong> Beiträge insgesamt</p>';
+    let html = '<p style="font-size:0.8rem;"><strong>' + total + '</strong> Hinweise insgesamt</p>';
 
-    for (const key in CATEGORIES) {
-        const cat = CATEGORIES[key];
-        const count = counts[key] || 0;
-        if (count > 0) {
-            html += '<div style="display:flex;align-items:center;gap:8px;margin:4px 0;font-size:0.85rem;">' +
-                categoryIcon(cat) + ' ' +
-                cat.label + ': ' + count +
-            '</div>';
-        }
-    }
+    // for (const key in CATEGORIES) {
+    //     const cat = CATEGORIES[key];
+    //     const count = counts[key] || 0;
+    //     if (count > 0) {
+    //         html += '<div style="display:flex;align-items:center;gap:8px;margin:4px 0;font-size:0.8rem;">' +
+    //             categoryIcon(cat) + ' ' +
+    //             cat.label + ': ' + count +
+    //         '</div>';
+    //     }
+    // }
 
     container.innerHTML = html;
 }

public/styles.css

@@ -881,6 +881,72 @@ select.form-input { cursor: pointer; }
 }
 
 
+/* -----------------------------------------------------------------
+   4.10 Create Type Toggle (Contribution or Task)
+   ----------------------------------------------------------------- */
+.create-type-toggle {
+    display: flex;
+    gap: 8px;
+}
+
+.create-type-btn {
+    flex: 1;
+    padding: 10px;
+    border: 2px solid var(--color-border);
+    border-radius: 8px;
+    background: var(--color-surface);
+    cursor: pointer;
+    font-family: var(--font-body);
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--color-text-secondary);
+    transition: all var(--transition-fast);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+}
+
+.create-type-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
+.create-type-btn.active { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); }
+
+
+/* -----------------------------------------------------------------
+   4.11 Leaderboard (Sidebar Tasks Tab)
+   ----------------------------------------------------------------- */
+.leaderboard-box {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    padding: var(--space-md);
+    margin-bottom: var(--space-md);
+}
+
+.leaderboard-box h3 { margin-top: 0 !important; }
+
+.leaderboard-entry {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: 6px 0;
+    font-size: 0.85rem;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.leaderboard-entry:last-child { border-bottom: none; }
+.leaderboard-rank { font-size: 1rem; width: 28px; text-align: center; }
+.leaderboard-name { flex: 1; font-weight: 600; }
+.leaderboard-points { color: var(--color-primary); font-weight: 600; }
+
+.leaderboard-more-btn {
+    width: 100%;
+    margin-top: var(--space-sm);
+    font-size: 0.8rem !important;
+    min-height: 32px !important;
+    padding: 4px 12px !important;
+}
+
+
 /* =================================================================
    SECTION 5: Admin-specific Styles (admin.php)
    ================================================================= */