From 2ecd446dd0d2332b954e2d827fdff4680bda9cc8 Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Sat, 18 Jul 2026 16:35:13 +0200
Subject: [PATCH 01/19] search-results.js
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ohne JS: search-results.php sortiert/filtert/paginiert komplett serverseitig anhand der GET-Parameter (?sort=&category=&page=) und cached dabei den Session-Datensatz — es wird keine neue Suche ausgelöst, nur der bestehende $_SESSION["search_results"]-Datensatz neu aufbereitet. Echte <a href>-Links für die Pagination, ein <noscript>-Submit-Button für Sortierung/Filter.
Mit JS: results-app.js lädt den kompletten Datensatz einmalig per fetch() von einem neuen schlanken JSON-Endpoint nach und übernimmt Sortierung, Filterung und Pagination danach zu 100% im Browser — keine weiteren Serveranfragen mehr, kein Page-Reload.
sorter.js, filter.js, paginator.js werden durch die eine Datei results-app.js ersetzt (löst den Button-Konflikt).
---
 content/search-results.php                   | 171 +++++++------
 includes/resultsHelper.php                   | 108 +++++++++
 index.php                                    |   5 +-
 js/search-results.js                         | 238 +++++++++++++++++++
 php/controller/search-results-controller.php |  55 ++---
 php/controller/search-results-data.php       |  32 +++
 6 files changed, 495 insertions(+), 114 deletions(-)
 create mode 100644 includes/resultsHelper.php
 create mode 100644 js/search-results.js
 create mode 100644 php/controller/search-results-data.php

diff --git a/content/search-results.php b/content/search-results.php
index c4793b5..5cd0a40 100644
--- a/content/search-results.php
+++ b/content/search-results.php
@@ -2,20 +2,37 @@
 if (session_status() === PHP_SESSION_NONE) {
     session_start();
 }
+require_once __DIR__ . '/../includes/resultsHelper.php';
 
-$all_results = $_SESSION["search_results"] ?? [];
+$rawResults = $_SESSION["search_results"] ?? [];
 $query = $_SESSION["search_query"] ?? "";
-$totalResultsCount = count($all_results);
 
-$limit = isset($_GET['limit']) ? (int)$_GET['limit'] : 10;
+// Sortierung / Kategorie / Limit: GET-Parameter haben Vorrang, sonst
+// Rückfall auf die zuletzt in der Session gemerkten Werte. So bleibt
+// z.B. ein reiner Pagination-Link (?page=2) bei der aktuellen
+// Sortierung/Filterung.
+$currentSort = $_GET['sort'] ?? ($_SESSION['search_sort'] ?? 'alphabet');
+if (!in_array($currentSort, ['alphabet', 'likes', 'newest', 'oldest'])) {
+    $currentSort = 'alphabet';
+}
+$_SESSION['search_sort'] = $currentSort;
+
+$currentCategory = strtolower($_GET['category'] ?? ($_SESSION['search_category'] ?? 'all'));
+$_SESSION['search_category'] = $currentCategory;
+
+$limit = isset($_GET['limit']) ? (int)$_GET['limit'] : ($_SESSION['search_limit'] ?? 10);
 if (!in_array($limit, [10, 20, 50, 100])) {
     $limit = 10;
 }
+$_SESSION['search_limit'] = $limit;
 
-// Gesamtseitenzahl
-$totalPages = max(1, ceil($totalResultsCount / $limit));
+// Serverseitig sortieren + filtern (gleiche Logik wie im JSON-Endpoint für JS-Nutzer)
+$filteredResults = sortSearchResults($rawResults, $currentSort);
+$filteredResults = filterSearchResultsByCategory($filteredResults, $currentCategory);
+
+$totalResultsCount = count($filteredResults);
+$totalPages = max(1, (int)ceil($totalResultsCount / $limit));
 
-// Aktuelle Seite auslesen und validieren
 $currentPage = isset($_GET['page']) ? (int)$_GET['page'] : 1;
 if ($currentPage < 1) {
     $currentPage = 1;
@@ -23,42 +40,59 @@ if ($currentPage < 1) {
     $currentPage = $totalPages;
 }
 
-// Startpunkt im Array berechnen (Offset)
 $offset = ($currentPage - 1) * $limit;
 
-// Nur die Ergebnisse für die aktuelle Seite ausschneiden
-//$results = array_slice($all_results, $offset, $limit);
-$results = $all_results;
+// Dies ist die No-JS-Basisversion: nur die aktuelle Seite wird gerendert.
+// Bei aktiviertem JS lädt js/results-app.js zusätzlich den kompletten
+// Datensatz nach (ein einziger Request) und übernimmt Sortierung, Filter
+// und Pagination danach komplett im Browser, ohne weitere Serveranfragen.
+$results = array_slice($filteredResults, $offset, $limit);
 $resultCount = count($results);
 
+// Kategorien für das Auswahlfeld (Wert => Label)
+$categories = [
+        'Deutsch' => 'Deutsch', 'Englisch' => 'Englisch', 'Franzoesisch' => 'Französisch',
+        'Latein' => 'Latein', 'Literatur' => 'Literatur', 'Mathematik' => 'Mathematik',
+        'Biologie' => 'Biologie', 'Informatik' => 'Informatik', 'Chemie' => 'Chemie',
+        'Physik' => 'Physik', 'Astronomie' => 'Astronomie', 'Geschichte' => 'Geschichte',
+        'Erdkunde' => 'Erdkunde', 'Sozialkunde' => 'Sozialkunde', 'Wirtschaftskunde' => 'Wirtschaftskunde',
+        'Religion' => 'Religion', 'Ethikunterricht' => 'Ethikunterricht', 'Philosophie' => 'Philosophie',
+        'Psychologie' => 'Psychologie', 'Kunst' => 'Kunst', 'Musik' => 'Musik', 'Theater' => 'Theater',
+        'Technik' => 'Technik', 'Werken' => 'Werken', 'Hauswirtschaft' => 'Hauswirtschaft', 'Sport' => 'Sport',
+];
 ?>
-<noscript>
-    Bitte JavaScript aktivieren!
-</noscript>
 <!--
     Seite: Suchergebnisse
-    Inhalt: Zeigt die Ergebnisse einer Suche an
+    Inhalt: Zeigt die Ergebnisse einer Suche an.
+    Funktioniert ohne JavaScript (serverseitige Sortierung/Filter/Pagination
+    über echte Links + Formulare) und wird bei aktiviertem JS von
+    js/results-app.js vollständig client-seitig übernommen.
 -->
 <div class="s-res-layout-grid">
-    <?php include_once "includes/alertMessages.php"?>
+    <?php include_once "includes/alertMessages.php" ?>
 
     <!-- Links: Seitenleiste für Filter und Suche -->
     <aside class="s-res-sidebar">
 
-    <!-- Sortierfuntion Box und Such Box-->
+        <!-- Formular 1: startet eine NEUE Suche (löst immer einen Server-Request aus) -->
         <form action="php/controller/search-results-controller.php" method="GET" id="search-form-id" class="s-res-sidebar-form">
-            
-            <input type="hidden" id="s-res-page-input" name="page" value="<?php echo $_GET['page'] ?? 1; ?>">
-
             <div class="s-res-sidebar-box">
                 <h3 class="s-res-sidebar-title">Suche anpassen</h3>
                 <input type="search" id="site-search" name="q" placeholder="Suchen..." class="nav__search" value="<?php echo htmlspecialchars($query); ?>" maxlength="50" required>
                 <button type="submit" class="nav__search-button">Suchen</button>
             </div>
+        </form>
+
+        <!-- Formular 2: sortiert/filtert die BEREITS gefundenen Ergebnisse.
+             Ohne JS: echter Reload dieser Seite, aber ohne erneute Datenbank-Suche.
+             Mit JS: results-app.js übernimmt das live im Browser, der Submit-Button
+             wird dafür nicht benötigt und über <noscript> versteckt. -->
+        <form action="index.php" method="GET" id="s-res-filter-form" class="s-res-sidebar-form">
+            <input type="hidden" name="pfad" value="search-results">
+            <input type="hidden" name="q" value="<?php echo htmlspecialchars($query); ?>">
 
             <div class="s-res-sidebar-box">
                 <h3 class="s-res-sidebar-title">Sortierung</h3>
-                <?php $currentSort = $_SESSION['search_sort'] ?? 'alphabet'; ?>
                 <div class="s-res-filter-group">
                     <label class="s-res-filter-option">
                         <input type="radio" name="sort" value="alphabet" class="sort-radio" <?php echo $currentSort === 'alphabet' ? 'checked' : ''; ?>>
@@ -81,37 +115,17 @@ $resultCount = count($results);
 
             <div class="s-res-sidebar-box">
                 <h3 class="s-res-sidebar-title">Kategorie filtern</h3>
-                <select id="category-filter" class="s-res-limit-select" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #cbd5e1;">
-                    <option value="all">Alle Kategorien</option>
-                    <option value="Deutsch">Deutsch</option>
-                    <option value="Englisch">Englisch</option>
-                    <option value="Franzoesisch">Französisch</option>
-                    <option value="Latein">Latein</option>
-                    <option value="Literatur">Literatur</option>
-                    <option value="Mathematik">Mathematik</option>
-                    <option value="Biologie">Biologie</option>
-                    <option value="Informatik">Informatik</option>
-                    <option value="Chemie">Chemie</option>
-                    <option value="Physik">Physik</option>
-                    <option value="Astronomie">Astronomie</option>
-                    <option value="Geschichte">Geschichte</option>
-                    <option value="Erdkunde">Erdkunde</option>
-                    <option value="Sozialkunde">Sozialkunde</option>
-                    <option value="Wirtschaftskunde">Wirtschaftskunde</option>
-                    <option value="Religion">Religion</option>
-                    <option value="Ethikunterricht">Ethikunterricht</option>
-                    <option value="Philosophie">Philosophie</option>
-                    <option value="Psychologie">Psychologie</option>
-                    <option value="Kunst">Kunst</option>
-                    <option value="Musik">Musik</option>
-                    <option value="Theater">Theater</option>
-                    <option value="Technik">Technik</option>
-                    <option value="Werken">Werken</option>
-                    <option value="Hauswirtschaft">Hauswirtschaft</option>
-                    <option value="Sport">Sport</option>
+                <select id="category-filter" name="category" class="s-res-limit-select" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #cbd5e1;">
+                    <option value="all" <?php echo $currentCategory === 'all' ? 'selected' : ''; ?>>Alle Kategorien</option>
+                    <?php foreach ($categories as $value => $label): ?>
+                        <option value="<?php echo htmlspecialchars($value); ?>" <?php echo $currentCategory === strtolower($value) ? 'selected' : ''; ?>><?php echo htmlspecialchars($label); ?></option>
+                    <?php endforeach; ?>
                 </select>
             </div>
 
+            <noscript>
+                <button type="submit" class="nav__search-button">Filter anwenden</button>
+            </noscript>
         </form>
 
     </aside>
@@ -120,18 +134,16 @@ $resultCount = count($results);
 
         <div class="s-res-header">
             <h1 class="s-res-main-title">Suchergebnisse</h1>
-            <p class="s-res-meta"><?php echo $totalResultsCount; ?> Treffer für Ihre Suchanfrage "<?php echo htmlspecialchars($query); ?>"</p>
+            <p class="s-res-meta"><span id="s-res-result-count"><?php echo $totalResultsCount; ?></span> Treffer für Ihre Suchanfrage "<?php echo htmlspecialchars($query); ?>"</p>
         </div>
 
         <!-- Ergebnisliste -->
         <div class="s-res-list">
-            <?php 
-            if (!empty($results)): ?>
-    
-                <?php foreach ($results as $item): 
-                    // Anzahl der Likes ermitteln (falls es ein Array ist, zählen; falls Zahl, direkt nutzen)
-                    $likesCount = isset($item['likes']) && is_array($item['likes']) ? count($item['likes']) : ($item['likes'] ?? 0);
-                ?>
+            <?php if (!empty($results)): ?>
+
+                <?php foreach ($results as $item):
+                    $likesCount = getLikeCount($item);
+                    ?>
                     <div class="s-res-item" data-likes="<?php echo $likesCount; ?>" data-category="<?php echo strtolower($item['category'] ?? ''); ?>">
                         <div class="s-res-content">
                             <h2 class="s-res-item-title">
@@ -151,41 +163,50 @@ $resultCount = count($results);
                     </div>
                 <?php endforeach; ?>
 
-            <?php 
-            elseif (isset($_SESSION["search_query"]) && $_SESSION["search_query"] !== "" && $resultCount === 0): ?>
-                <p>Keine Beiträge zu diesem Suchbegriff gefunden.</p>  
-            <?php 
-            elseif (isset($_SESSION["message"]) && $_SESSION["message"] == "invalid_search_query"): ?>
+            <?php elseif (isset($_SESSION["message"]) && $_SESSION["message"] === "invalid_search_query"): ?>
                 <p>Unzulässige Suchanfrage</p>
-                
+
+            <?php elseif ($query !== "" && $totalResultsCount === 0 && count($rawResults) > 0): ?>
+                <p>Keine Beiträge in dieser Kategorie gefunden.</p>
+
+            <?php elseif ($query !== "" && $totalResultsCount === 0): ?>
+                <p>Keine Beiträge zu diesem Suchbegriff gefunden.</p>
+
             <?php endif; ?>
-            <?php
-            unset($_SESSION["message"]);
-            ?>
+            <?php unset($_SESSION["message"]); ?>
 
         </div>
+
         <div class="s-res-pagination-footer">
 
-            <!-- Auswahl der Ergebnisse pro Seite -->
+            <!-- Auswahl der Ergebnisse pro Seite. Gehört per form="..." logisch
+                 zum Filterformular oben, bleibt aber optisch am Fuß der Liste. -->
             <div class="s-res-limit-selector">
                 <label for="s-res-per-page" class="s-res-limit-label">Ergebnisse pro Seite:</label>
-                <select id="s-res-per-page" name="limit" class="s-res-limit-select">
+                <select id="s-res-per-page" name="limit" form="s-res-filter-form" class="s-res-limit-select">
                     <option value="10" <?php echo $limit === 10 ? 'selected' : ''; ?>>10</option>
                     <option value="20" <?php echo $limit === 20 ? 'selected' : ''; ?>>20</option>
                     <option value="50" <?php echo $limit === 50 ? 'selected' : ''; ?>>50</option>
                     <option value="100" <?php echo $limit === 100 ? 'selected' : ''; ?>>100</option>
                 </select>
+                <noscript><button type="submit" form="s-res-filter-form" class="nav__search-button">Übernehmen</button></noscript>
             </div>
 
-            <div class="s-res-page-navigation">
-                <button type="button" class="s-res-page-btn" id="prev-page-btn" data-page="0">«</button>
-                
-                <span id="dynamic-page-numbers"></span>
-                
-                <button type="button" class="s-res-page-btn" id="next-page-btn" data-page="2">»</button>
-            </div>
+            <nav class="s-res-page-navigation" aria-label="Seitennavigation">
+                <!-- No-JS-Fallback: echte, funktionierende Links -->
+                <noscript>
+                    <?php echo renderNoJsPagination($currentPage, $totalPages, $query, $currentSort, $currentCategory, $limit); ?>
+                </noscript>
+
+                <!-- JS-Version: wird per results-app.js befüllt/eingeblendet -->
+                <div id="js-page-navigation" style="display:none;">
+                    <button type="button" class="s-res-page-btn" id="prev-page-btn">«</button>
+                    <span id="dynamic-page-numbers"></span>
+                    <button type="button" class="s-res-page-btn" id="next-page-btn">»</button>
+                </div>
+            </nav>
 
         </div>
     </main>
 
-</div>
+</div>
\ No newline at end of file
diff --git a/includes/resultsHelper.php b/includes/resultsHelper.php
new file mode 100644
index 0000000..c9dadb1
--- /dev/null
+++ b/includes/resultsHelper.php
@@ -0,0 +1,108 @@
+<?php
+/**
+ * Hilfsfunktionen rund um die Suchergebnisse.
+ *
+ * Werden sowohl von content/search-results.php (No-JS-Rendering)
+ * als auch von php/controller/search-results-data.php (JSON für
+ * die JS-Hydration) genutzt, damit Sortier-/Filterlogik nur an
+ * einer Stelle gepflegt werden muss.
+ */
+
+/**
+ * Anzahl der Likes robust ermitteln (Array von Likes ODER bereits eine Zahl).
+ */
+function getLikeCount($item): int
+{
+    if (isset($item['likes']) && is_array($item['likes'])) {
+        return count($item['likes']);
+    }
+    return (int)($item['likes'] ?? 0);
+}
+
+/**
+ * Sortiert ein Array von Ergebnis-Assoziativarrays (wie in $_SESSION["search_results"] abgelegt).
+ */
+function sortSearchResults(array $results, string $sortStyle): array
+{
+    switch ($sortStyle) {
+        case 'likes':
+            usort($results, function ($a, $b) {
+                return getLikeCount($b) <=> getLikeCount($a);
+            });
+            break;
+        case 'newest':
+            usort($results, function ($a, $b) {
+                return strcmp($b['creationDate'] ?? '', $a['creationDate'] ?? '');
+            });
+            break;
+        case 'oldest':
+            usort($results, function ($a, $b) {
+                return strcmp($a['creationDate'] ?? '', $b['creationDate'] ?? '');
+            });
+            break;
+        case 'alphabet':
+        default:
+            usort($results, function ($a, $b) {
+                return strcasecmp($a['title'] ?? '', $b['title'] ?? '');
+            });
+            break;
+    }
+    return $results;
+}
+
+/**
+ * Filtert ein Array von Ergebnissen nach Kategorie ('all' = kein Filter).
+ */
+function filterSearchResultsByCategory(array $results, string $category): array
+{
+    $category = strtolower(trim($category));
+    if ($category === '' || $category === 'all') {
+        return $results;
+    }
+    return array_values(array_filter($results, function ($item) use ($category) {
+        return strtolower($item['category'] ?? '') === $category;
+    }));
+}
+
+/**
+ * Baut eine Such-Ergebnis-URL für einen bestimmten Seitenwechsel (No-JS-Pagination).
+ */
+function buildSearchResultsUrl(int $page, string $query, string $sort, string $category, int $limit): string
+{
+    return "index.php?pfad=search-results"
+        . "&q=" . urlencode($query)
+        . "&sort=" . urlencode($sort)
+        . "&category=" . urlencode($category)
+        . "&limit=" . $limit
+        . "&page=" . $page;
+}
+
+/**
+ * Rendert eine rein serverseitige Pagination (echte <a>-Links) für den No-JS-Fall.
+ */
+function renderNoJsPagination(int $currentPage, int $totalPages, string $query, string $sort, string $category, int $limit): string
+{
+    $html = '';
+
+    if ($currentPage > 1) {
+        $html .= '<a class="s-res-page-btn" href="' . htmlspecialchars(buildSearchResultsUrl($currentPage - 1, $query, $sort, $category, $limit)) . '">&laquo;</a> ';
+    } else {
+        $html .= '<span class="s-res-page-btn" aria-disabled="true">&laquo;</span> ';
+    }
+
+    for ($i = 1; $i <= $totalPages; $i++) {
+        if ($i === $currentPage) {
+            $html .= '<span class="s-res-page-btn s-res-page-btn-active">' . $i . '</span> ';
+        } else {
+            $html .= '<a class="s-res-page-btn" href="' . htmlspecialchars(buildSearchResultsUrl($i, $query, $sort, $category, $limit)) . '">' . $i . '</a> ';
+        }
+    }
+
+    if ($currentPage < $totalPages) {
+        $html .= '<a class="s-res-page-btn" href="' . htmlspecialchars(buildSearchResultsUrl($currentPage + 1, $query, $sort, $category, $limit)) . '">&raquo;</a>';
+    } else {
+        $html .= '<span class="s-res-page-btn" aria-disabled="true">&raquo;</span>';
+    }
+
+    return $html;
+}
\ No newline at end of file
diff --git a/index.php b/index.php
index c9a5cfb..3efa72a 100644
--- a/index.php
+++ b/index.php
@@ -65,11 +65,10 @@ if ($pfad === "deleteAccount") {
         <link rel="stylesheet" href="css/message.css">
         <link rel="stylesheet" href="css/showCategory.css">
 
-        <script src="js/paginator.js" async></script>
-        <script src="js/sorter.js" async></script>
         <script src="js/comments.js" defer></script>
         <script src="js/editor.js" async></script>
-        <script src="js/filter.js" async></script>
+        <script src="js/search-results.js" async></script>
+
 
         <title>EduForge</title>
     </head>
diff --git a/js/search-results.js b/js/search-results.js
new file mode 100644
index 0000000..e085110
--- /dev/null
+++ b/js/search-results.js
@@ -0,0 +1,238 @@
+/**
+ * Übernimmt Sortierung, Kategorie-Filter und Pagination der Suchergebnisse
+ * vollständig im Browser (kein Reload, keine erneute Suche).
+ *
+ * Ablauf:
+ * 1. Kompletten Ergebnis-Datensatz einmalig per fetch() nachladen
+ *    (php/controller/search-results-data.php, liest nur die Session-Daten,
+ *    keine erneute Datenbank-Suche).
+ * 2. Sortieren + filtern + paginieren rein im Speicher (JS-Array).
+ * 3. Ergebnisliste + Pagination-UI daraus neu rendern.
+ *
+ * Ersetzt sorter.js, filter.js und paginator.js, deren Klick-Handler sich
+ * gegenseitig ins Gehege kamen (Formular-Submit vs. clientseitiges Hiden).
+ * Ohne JS bleibt die serverseitig gerenderte Seite (echte Links/Formulare)
+ * voll funktionsfähig.
+ */
+(function () {
+    const state = {
+        allItems: [],
+        sort: 'alphabet',
+        category: 'all',
+        itemsPerPage: 10,
+        currentPage: 1,
+    };
+
+    let listContainer, sortRadios, categorySelect, limitSelect;
+    let prevBtn, nextBtn, numbersContainer, jsNav, resultCountEl;
+
+    function init() {
+        listContainer = document.querySelector('.s-res-list');
+        if (!listContainer) return;
+
+        sortRadios = document.querySelectorAll('.sort-radio');
+        categorySelect = document.getElementById('category-filter');
+        limitSelect = document.getElementById('s-res-per-page');
+        prevBtn = document.getElementById('prev-page-btn');
+        nextBtn = document.getElementById('next-page-btn');
+        numbersContainer = document.getElementById('dynamic-page-numbers');
+        jsNav = document.getElementById('js-page-navigation');
+        resultCountEl = document.getElementById('s-res-result-count');
+
+        const checkedRadio = document.querySelector('.sort-radio:checked');
+        state.sort = checkedRadio ? checkedRadio.value : 'alphabet';
+        state.category = categorySelect ? categorySelect.value : 'all';
+        state.itemsPerPage = limitSelect ? (parseInt(limitSelect.value, 10) || 10) : 10;
+
+        fetchFullDataset()
+            .then(function (data) {
+                state.allItems = data.results || [];
+                attachEvents();
+                render();
+                if (jsNav) jsNav.style.display = 'flex';
+            })
+            .catch(function (err) {
+                // JSON-Endpoint nicht erreichbar: die serverseitig gerenderte
+                // (No-JS-)Ansicht bleibt sichtbar und funktioniert weiter.
+                console.error('Suchergebnisse konnten nicht nachgeladen werden:', err);
+            });
+    }
+
+    function fetchFullDataset() {
+        return fetch('php/controller/search-results-data.php', { credentials: 'same-origin' })
+            .then(function (res) {
+                if (!res.ok) throw new Error('HTTP ' + res.status);
+                return res.json();
+            });
+    }
+
+    function getFilteredSortedItems() {
+        let items = state.allItems;
+
+        if (state.category !== 'all') {
+            const wanted = state.category.toLowerCase();
+            items = items.filter(function (item) {
+                return (item.category || '').toLowerCase() === wanted;
+            });
+        }
+
+        items = items.slice().sort(function (a, b) {
+            if (state.sort === 'likes') {
+                return (b.likes || 0) - (a.likes || 0);
+            }
+            if (state.sort === 'newest' || state.sort === 'oldest') {
+                return state.sort === 'newest' ? (b.id - a.id) : (a.id - b.id);
+            }
+            // alphabet (Standard)
+            return (a.title || '').toLowerCase().localeCompare((b.title || '').toLowerCase());
+        });
+
+        return items;
+    }
+
+    function render() {
+        const items = getFilteredSortedItems();
+
+        if (resultCountEl) resultCountEl.textContent = items.length;
+
+        const totalPages = Math.max(1, Math.ceil(items.length / state.itemsPerPage));
+        if (state.currentPage > totalPages) state.currentPage = totalPages;
+        if (state.currentPage < 1) state.currentPage = 1;
+
+        const start = (state.currentPage - 1) * state.itemsPerPage;
+        const pageItems = items.slice(start, start + state.itemsPerPage);
+
+        listContainer.innerHTML = '';
+        if (pageItems.length === 0) {
+            const empty = document.createElement('p');
+            empty.textContent = 'Keine Beiträge gefunden.';
+            listContainer.appendChild(empty);
+        } else {
+            pageItems.forEach(function (item) {
+                listContainer.appendChild(buildCard(item));
+            });
+        }
+
+        updatePaginatorUI(state.currentPage, totalPages);
+    }
+
+    function buildCard(item) {
+        const card = document.createElement('div');
+        card.className = 's-res-item';
+        card.setAttribute('data-likes', item.likes);
+        card.setAttribute('data-category', (item.category || '').toLowerCase());
+
+        const link = document.createElement('a');
+        link.className = 's-res-link';
+        link.href = 'index.php?pfad=showArticle&id=' + encodeURIComponent(item.id);
+        link.textContent = item.title;
+
+        const title = document.createElement('h2');
+        title.className = 's-res-item-title';
+        title.appendChild(link);
+
+        const authorName = document.createElement('span');
+        authorName.className = 's-res-author-name';
+        authorName.textContent = item.author;
+
+        const author = document.createElement('p');
+        author.className = 's-res-author';
+        author.append('Von: ', authorName);
+
+        const likes = document.createElement('span');
+        likes.className = 's-res-likes';
+        likes.textContent = '❤️ ' + item.likes;
+
+        const metaRow = document.createElement('div');
+        metaRow.className = 's-res-meta-row';
+        metaRow.append(author, likes);
+
+        const content = document.createElement('div');
+        content.className = 's-res-content';
+        content.append(title, metaRow);
+
+        const arrow = document.createElement('div');
+        arrow.className = 's-res-arrow';
+        arrow.textContent = '→';
+
+        card.append(content, arrow);
+        return card;
+    }
+
+    function updatePaginatorUI(currentPage, totalPages) {
+        if (!prevBtn || !nextBtn || !numbersContainer) return;
+
+        prevBtn.disabled = currentPage <= 1;
+        nextBtn.disabled = currentPage >= totalPages;
+
+        numbersContainer.innerHTML = '';
+        for (let i = 1; i <= totalPages; i++) {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 's-res-page-btn' + (i === currentPage ? ' s-res-page-btn-active' : '');
+            btn.textContent = i;
+            btn.addEventListener('click', function () {
+                state.currentPage = i;
+                render();
+            });
+            numbersContainer.appendChild(btn);
+        }
+    }
+
+    function attachEvents() {
+        sortRadios.forEach(function (radio) {
+            radio.addEventListener('change', function () {
+                state.sort = this.value;
+                state.currentPage = 1;
+                render();
+            });
+        });
+
+        if (categorySelect) {
+            categorySelect.addEventListener('change', function () {
+                state.category = this.value;
+                state.currentPage = 1;
+                render();
+            });
+        }
+
+        if (limitSelect) {
+            limitSelect.addEventListener('change', function () {
+                state.itemsPerPage = parseInt(this.value, 10) || 10;
+                state.currentPage = 1;
+                render();
+            });
+        }
+
+        if (prevBtn) {
+            prevBtn.addEventListener('click', function () {
+                if (state.currentPage > 1) {
+                    state.currentPage -= 1;
+                    render();
+                }
+            });
+        }
+
+        if (nextBtn) {
+            nextBtn.addEventListener('click', function () {
+                state.currentPage += 1;
+                render();
+            });
+        }
+
+        // Mit aktivem JS übernimmt render() Sortierung/Filter live;
+        // ein echtes Absenden des Filterformulars (No-JS-Fallback) ist dann nicht mehr nötig.
+        const filterForm = document.getElementById('s-res-filter-form');
+        if (filterForm) {
+            filterForm.addEventListener('submit', function (e) {
+                e.preventDefault();
+            });
+        }
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();
\ No newline at end of file
diff --git a/php/controller/search-results-controller.php b/php/controller/search-results-controller.php
index 5e6d125..91237ba 100644
--- a/php/controller/search-results-controller.php
+++ b/php/controller/search-results-controller.php
@@ -16,37 +16,15 @@ if ($_SERVER["REQUEST_METHOD"] === "GET" && isset($_GET["q"])) {
         $_SESSION["message"] = "invalid_search_query";
     } else {
         try {
-            
+
             $articleManager = ArticleManager::getInstance();
             $userManager = UserManager::getInstance();
-            
+
             $results = $articleManager->search($search);
 
-            $sortStyle = $_GET['sort'] ?? 'alphabet';
-            $_SESSION['search_sort'] = $sortStyle;
-
-            if ($sortStyle === 'alphabet') {
-                // Titel aufsteigend alphabetiisch sortiert
-                usort($results, function ($a, $b) {
-                    return strcasecmp($a->getTitle(), $b->getTitle());
-                });
-            } elseif ($sortStyle === 'likes') {
-                usort($results, function($a, $b) {
-                    return $b->getLikeCount() <=> $a->getLikeCount();
-                });
-            } elseif ($sortStyle === 'newest') {
-                // Datum neu zu alt sortiert
-                usort($results, function($a, $b) {
-                    return strcmp($b->getCreationDate(), $a->getCreationDate());
-                });
-            } elseif ($sortStyle === 'oldest') {
-                // Datum alt zu neu sortiert
-                usort($results, function($a, $b) {
-                    return strcmp($a->getCreationDate(), $b->getCreationDate());
-                });
-            }
-
-            // Ergebnisse werden in ein flaches array umgewandelt, da sont incomplete-PHP error im Ergebnis
+            // Sortierung/Filterung passiert nicht mehr hier, sondern zentral in
+            // content/search-results.php (No-JS) bzw. search-results-data.php (JS),
+            // damit ein Sortier-/Filterwechsel keine erneute Suche mehr braucht.
             $safeArrayResults = [];
             foreach ($results as $obj) {
                 $safeArrayResults[] = [
@@ -60,25 +38,30 @@ if ($_SERVER["REQUEST_METHOD"] === "GET" && isset($_GET["q"])) {
                     "likes" => $obj->getLikes(),
                 ];
             }
-            
+
             $_SESSION["search_results"] = $safeArrayResults;
             $_SESSION["search_query"] = $search;
             $_SESSION["message"] = "new_search_results";
 
-        } catch (Exception $e){
+        } catch (Exception $e) {
             $_SESSION["message"] = "internal_error";
         }
     }
 
-    $sort  = $_GET['sort'] ?? 'alphabet';
+    $sort = $_GET['sort'] ?? 'alphabet';
+    $_SESSION['search_sort'] = $sort;
+
+    $category = $_GET['category'] ?? 'all';
+    $_SESSION['search_category'] = $category;
+
     $limit = isset($_GET['limit']) ? (int)$_GET['limit'] : 10;
     if (!searchLimitValidator($limit)) {
         $limit = 10;
     }
-    $page  = isset($_GET['page']) ? (int)$_GET['page'] : 1;
-    header("Location: ../../index.php?pfad=search-results&q=" . urlencode($search) . "&sort=" . urlencode($sort) . "&limit=" . $limit . "&page=" . $page);
-    exit();
-    
-}
+    $_SESSION['search_limit'] = $limit;
 
-?>
\ No newline at end of file
+    // Neue Suche -> immer wieder bei Seite 1 beginnen
+    header("Location: ../../index.php?pfad=search-results&q=" . urlencode($search) . "&sort=" . urlencode($sort) . "&category=" . urlencode($category) . "&limit=" . $limit . "&page=1");
+    exit();
+
+}
\ No newline at end of file
diff --git a/php/controller/search-results-data.php b/php/controller/search-results-data.php
new file mode 100644
index 0000000..36b492d
--- /dev/null
+++ b/php/controller/search-results-data.php
@@ -0,0 +1,32 @@
+<?php
+/**
+ * Liefert den vollständigen, zuletzt gefundenen Ergebnis-Datensatz als JSON.
+ *
+ * Wird von js/results-app.js EINMALIG per fetch() geladen, damit Sortierung,
+ * Filterung und Pagination danach komplett im Browser laufen können, ohne
+ * weitere Serveranfragen oder eine erneute Datenbank-Suche auszulösen.
+ */
+if (session_status() === PHP_SESSION_NONE) {
+    session_start();
+}
+
+header('Content-Type: application/json; charset=utf-8');
+
+require_once __DIR__ . '/../../includes/resultsHelper.php';
+
+$rawResults = $_SESSION['search_results'] ?? [];
+
+$payload = array_map(function ($item) {
+    return [
+        'id'       => $item['id'],
+        'title'    => $item['title'],
+        'author'   => $item['author'],
+        'category' => $item['category'] ?? '',
+        'likes'    => getLikeCount($item),
+    ];
+}, $rawResults);
+
+echo json_encode([
+    'query'   => $_SESSION['search_query'] ?? '',
+    'results' => array_values($payload),
+]);
\ No newline at end of file

From 2126d076d572b94e8eff6ce45b3f129848cdc4e3 Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Sat, 18 Jul 2026 16:47:01 +0200
Subject: [PATCH 02/19] Entfernung alter js

---
 js/filter.js         | 116 -------------------------------------------
 js/paginator.js      |  27 ----------
 js/search-results.js |  10 ++--
 js/sorter.js         |  50 -------------------
 4 files changed, 5 insertions(+), 198 deletions(-)
 delete mode 100644 js/filter.js
 delete mode 100644 js/paginator.js
 delete mode 100644 js/sorter.js

diff --git a/js/filter.js b/js/filter.js
deleted file mode 100644
index 72d21fc..0000000
--- a/js/filter.js
+++ /dev/null
@@ -1,116 +0,0 @@
-let currentClientPage = 1;
-let itemsPerPage = 10;
-
-function initFilter() {
-    const filterSelect = document.getElementById('category-filter');
-    const listContainer = document.querySelector('.s-res-list');
-    const limitSelect = document.getElementById('s-res-per-page');
-
-    if (!filterSelect || !listContainer) return;
-
-    if (limitSelect) {
-        itemsPerPage = parseInt(limitSelect.value, 10) || 10;
-    }
-
-    updateVisibility();
-
-    if (limitSelect) {
-        limitSelect.addEventListener('change', function() {
-
-            //neues limit einlesen
-            itemsPerPage = parseInt(this.value, 10); 
-            currentClientPage = 1;
-            updateVisibility(); 
-        });
-    }
-
-    filterSelect.addEventListener('change', function() {
-        currentClientPage = 1; 
-        updateVisibility();
-    });
-
-    const navigationContainer = document.querySelector('.s-res-page-navigation');
-    if (navigationContainer) {
-        navigationContainer.addEventListener('click', function(e) {
-            const button = e.target.closest('.s-res-page-btn');
-            if (!button || button.disabled) return;
-
-            e.preventDefault();
-            
-            const targetPage = button.getAttribute('data-page');
-            if (targetPage) {
-                currentClientPage = parseInt(targetPage, 10);
-                updateVisibility();
-            }
-        });
-    }
-}
-
-function updateVisibility() {
-    const filterSelect = document.getElementById('category-filter');
-    const listContainer = document.querySelector('.s-res-list');
-    const selectedCategory = filterSelect.value.toLowerCase().trim();
-    const cards = listContainer.querySelectorAll('.s-res-item');
-
-    let visibleCards = [];
-    cards.forEach(card => {
-        const cardCategory = (card.getAttribute('data-category') || '').toLowerCase().trim();
-        if (selectedCategory === 'all' || cardCategory.includes(selectedCategory) || selectedCategory.includes(cardCategory)) {
-            visibleCards.push(card);
-        } else {
-            card.style.display = 'none';
-        }
-    });
-
-    const totalVisible = visibleCards.length;
-    const totalPages = Math.max(1, Math.ceil(totalVisible / itemsPerPage));
-    
-    if (currentClientPage < 1) currentClientPage = 1;
-    if (currentClientPage > totalPages) currentClientPage = totalPages;
-
-    const startOffset = (currentClientPage - 1) * itemsPerPage;
-    const endOffset = startOffset + itemsPerPage;
-
-    visibleCards.forEach((card, index) => {
-        if (index >= startOffset && index < endOffset) {
-            card.style.display = 'flex';
-        } else {
-            card.style.display = 'none';
-        }
-    });
-
-    updatePaginatorUI(currentClientPage, totalPages);
-}
-
-function updatePaginatorUI(currentPage, totalPages) {
-    const prevBtn = document.getElementById('prev-page-btn');
-    const nextBtn = document.getElementById('next-page-btn');
-    const numbersContainer = document.getElementById('dynamic-page-numbers');
-
-    if (!prevBtn || !nextBtn || !numbersContainer) return;
-
-    prevBtn.setAttribute('data-page', currentPage - 1);
-    prevBtn.disabled = (currentPage <= 1);
-
-    nextBtn.setAttribute('data-page', currentPage + 1);
-    nextBtn.disabled = (currentPage >= totalPages);
-
-    let buttonsHTML = '';
-    for (let i = 1; i <= totalPages; i++) {
-        const activeClass = (i === currentPage) ? 's-res-page-btn-active' : '';
-        buttonsHTML += `<button type="button" class="s-res-page-btn ${activeClass}" data-page="${i}">${i}</button> `;
-    }
-    numbersContainer.innerHTML = buttonsHTML;
-}
-
-// Hilfsfunktion für Math.ceil in JS
-function ceil(val) { return Math.ceil(val); }
-
-// ist das DOM bereits vollständig aufgebaut?
-if (document.readyState === 'loading') {
-    // Falls noch geladen wird, auf das Event warten
-    document.addEventListener('DOMContentLoaded', initFilter);
-} else {
-    // Falls das HTML bereits komplett da ist, sofort ausführen
-    initFilter();
-}
\ No newline at end of file
diff --git a/js/paginator.js b/js/paginator.js
deleted file mode 100644
index 378174b..0000000
--- a/js/paginator.js
+++ /dev/null
@@ -1,27 +0,0 @@
-function initPaginator() {
-    const form = document.getElementById('search-form-id');
-    const pageInput = document.getElementById('s-res-page-input');
-    const pageButtons = document.querySelectorAll('.s-res-page-navigation .s-res-page-btn');
-
-    pageButtons.forEach(button => {
-        button.addEventListener('click', function() {
-            if (this.disabled) return;
-
-            const targetPage = this.getAttribute('data-page');
-
-            if (targetPage && form && pageInput) {
-                pageInput.value = targetPage;
-                form.submit();
-            }
-        });
-    });
-}
-
-// ist das DOM bereits vollständig aufgebaut?
-if (document.readyState === 'loading') {
-    // Falls noch geladen wird, auf das Event warten
-    document.addEventListener('DOMContentLoaded', initPaginator);
-} else {
-    // Falls das HTML bereits komplett da ist, sofort ausführen
-    initPaginator();
-}
\ No newline at end of file
diff --git a/js/search-results.js b/js/search-results.js
index e085110..9461e39 100644
--- a/js/search-results.js
+++ b/js/search-results.js
@@ -1,16 +1,16 @@
 /**
  * Übernimmt Sortierung, Kategorie-Filter und Pagination der Suchergebnisse
- * vollständig im Browser (kein Reload, keine erneute Suche).
+ * vollständig clientseitig
  *
  * Ablauf:
  * 1. Kompletten Ergebnis-Datensatz einmalig per fetch() nachladen
  *    (php/controller/search-results-data.php, liest nur die Session-Daten,
  *    keine erneute Datenbank-Suche).
- * 2. Sortieren + filtern + paginieren rein im Speicher (JS-Array).
+ * 2. Sortieren + filtern (JS-Array).
  * 3. Ergebnisliste + Pagination-UI daraus neu rendern.
  *
  * Ersetzt sorter.js, filter.js und paginator.js, deren Klick-Handler sich
- * gegenseitig ins Gehege kamen (Formular-Submit vs. clientseitiges Hiden).
+ * gegenseitig ins Gehege kamen.
  * Ohne JS bleibt die serverseitig gerenderte Seite (echte Links/Formulare)
  * voll funktionsfähig.
  */
@@ -220,8 +220,8 @@
             });
         }
 
-        // Mit aktivem JS übernimmt render() Sortierung/Filter live;
-        // ein echtes Absenden des Filterformulars (No-JS-Fallback) ist dann nicht mehr nötig.
+        // Mit aktivem JS übernimmt render() Sortierung/Filter live
+        // ein echtes Absenden des Formulars (No-JS-Fallback) ist dann nicht mehr nötig.
         const filterForm = document.getElementById('s-res-filter-form');
         if (filterForm) {
             filterForm.addEventListener('submit', function (e) {
diff --git a/js/sorter.js b/js/sorter.js
deleted file mode 100644
index 5a1ee59..0000000
--- a/js/sorter.js
+++ /dev/null
@@ -1,50 +0,0 @@
-
-function initSorter() {
-    const listContainer = document.querySelector('.s-res-list');
-    const sortRadios = document.querySelectorAll('.sort-radio');
-
-    // wenn keine liste vorhanden, abbrechen
-    if (!listContainer || sortRadios.length === 0) return;
-
-    sortRadios.forEach(radio => {
-        radio.addEventListener('change', function() {
-            const cards = Array.from(listContainer.querySelectorAll('.s-res-item'));
-            const sortValue = this.value;
-
-            cards.sort((a, b) => {
-                if (sortValue === 'likes') {
-                    const likesA = parseInt(a.getAttribute('data-likes') || '0', 10);
-                    const likesB = parseInt(b.getAttribute('data-likes') || '0', 10);
-                    return likesB - likesA; 
-                }
-                else if (sortValue === 'alphabet') {
-                    // alphabetische sortierung
-                    const titleA = a.querySelector('.s-res-link').textContent.trim().toLowerCase();
-                    const titleB = b.querySelector('.s-res-link').textContent.trim().toLowerCase();
-                    return titleA.localeCompare(titleB);
-                } 
-                else if (sortValue === 'newest' || sortValue === 'oldest') {
-                    // hoehere ID wird als neuer gesehen
-                    const urlA = a.querySelector('.s-res-link').getAttribute('href');
-                    const urlB = b.querySelector('.s-res-link').getAttribute('href');
-                    
-                    const idA = parseInt(urlA.match(/id=(\d+)/)[1], 10);
-                    const idB = parseInt(urlB.match(/id=(\d+)/)[1], 10);
-
-                    return sortValue === 'newest' ? idB - idA : idA - idB;
-                }
-                return 0;
-            });
-
-            listContainer.innerHTML = '';
-            cards.forEach(card => listContainer.appendChild(card));
-        });
-    });
-}
-
-// ist das DOM bereits vollständig aufgebaut?
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initSorter);
-} else {
-    initSorter();
-}
\ No newline at end of file

From 71a1b029cb46e3495779626a9299005bc295b720 Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Sat, 18 Jul 2026 16:47:09 +0200
Subject: [PATCH 03/19] refactoring

---
 content/search-results.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/search-results.php b/content/search-results.php
index 5cd0a40..fd28d18 100644
--- a/content/search-results.php
+++ b/content/search-results.php
@@ -26,7 +26,7 @@ if (!in_array($limit, [10, 20, 50, 100])) {
 }
 $_SESSION['search_limit'] = $limit;
 
-// Serverseitig sortieren + filtern (gleiche Logik wie im JSON-Endpoint für JS-Nutzer)
+// Serverseitig sortieren + filtern
 $filteredResults = sortSearchResults($rawResults, $currentSort);
 $filteredResults = filterSearchResultsByCategory($filteredResults, $currentCategory);
 

From ba11c216bd5d2a6164b8b953e58e6b37f819513c Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Sat, 18 Jul 2026 16:56:41 +0200
Subject: [PATCH 04/19] refactoring

---
 content/search-results.php |  8 +++---
 content/showCategory.php   | 51 +++++++++++++++++++++++++++++++++++---
 includes/resultsHelper.php | 11 +++-----
 3 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/content/search-results.php b/content/search-results.php
index fd28d18..f70298e 100644
--- a/content/search-results.php
+++ b/content/search-results.php
@@ -85,7 +85,7 @@ $categories = [
 
         <!-- Formular 2: sortiert/filtert die BEREITS gefundenen Ergebnisse.
              Ohne JS: echter Reload dieser Seite, aber ohne erneute Datenbank-Suche.
-             Mit JS: results-app.js übernimmt das live im Browser, der Submit-Button
+             Mit JS: search-results.js übernimmt das live im Browser, der Submit-Button
              wird dafür nicht benötigt und über <noscript> versteckt. -->
         <form action="index.php" method="GET" id="s-res-filter-form" class="s-res-sidebar-form">
             <input type="hidden" name="pfad" value="search-results">
@@ -180,7 +180,7 @@ $categories = [
         <div class="s-res-pagination-footer">
 
             <!-- Auswahl der Ergebnisse pro Seite. Gehört per form="..." logisch
-                 zum Filterformular oben, bleibt aber optisch am Fuß der Liste. -->
+                 zum Filterformular oben -->
             <div class="s-res-limit-selector">
                 <label for="s-res-per-page" class="s-res-limit-label">Ergebnisse pro Seite:</label>
                 <select id="s-res-per-page" name="limit" form="s-res-filter-form" class="s-res-limit-select">
@@ -193,12 +193,12 @@ $categories = [
             </div>
 
             <nav class="s-res-page-navigation" aria-label="Seitennavigation">
-                <!-- No-JS-Fallback: echte, funktionierende Links -->
+                <!-- No-JS-Fallback: -->
                 <noscript>
                     <?php echo renderNoJsPagination($currentPage, $totalPages, $query, $currentSort, $currentCategory, $limit); ?>
                 </noscript>
 
-                <!-- JS-Version: wird per results-app.js befüllt/eingeblendet -->
+                <!-- JS-Version: wird per search-results.js befüllt/eingeblendet: -->
                 <div id="js-page-navigation" style="display:none;">
                     <button type="button" class="s-res-page-btn" id="prev-page-btn">«</button>
                     <span id="dynamic-page-numbers"></span>
diff --git a/content/showCategory.php b/content/showCategory.php
index 7b83df5..064acc7 100644
--- a/content/showCategory.php
+++ b/content/showCategory.php
@@ -1,8 +1,53 @@
 <?php
-include_once "php/controller/showCategory-controller.php";
+if (session_status() === PHP_SESSION_NONE) {
+    session_start();
+}
+require_once __DIR__ . '/../includes/resultsHelper.php';
 
-$currentSort = isset($sortStyle) ? $sortStyle : 'alphabet';
-$currentPage = isset($page) ? $page : 1;
+$rawResults = $_SESSION["search_results"] ?? [];
+$query = $_SESSION["search_query"] ?? "";
+
+// Sortierung / Kategorie / Limit: GET-Parameter haben Vorrang, sonst
+// Rückfall auf die zuletzt in der Session gemerkten Werte. So bleibt
+// z.B. ein reiner Pagination-Link (?page=2) bei der aktuellen
+// Sortierung/Filterung.
+$currentSort = $_GET['sort'] ?? ($_SESSION['search_sort'] ?? 'alphabet');
+if (!in_array($currentSort, ['alphabet', 'likes', 'newest', 'oldest'])) {
+    $currentSort = 'alphabet';
+}
+$_SESSION['search_sort'] = $currentSort;
+
+$currentCategory = strtolower($_GET['category'] ?? ($_SESSION['search_category'] ?? 'all'));
+$_SESSION['search_category'] = $currentCategory;
+
+$limit = isset($_GET['limit']) ? (int)$_GET['limit'] : ($_SESSION['search_limit'] ?? 10);
+if (!in_array($limit, [10, 20, 50, 100])) {
+    $limit = 10;
+}
+$_SESSION['search_limit'] = $limit;
+
+// Serverseitig sortieren + filtern
+$filteredResults = sortSearchResults($rawResults, $currentSort);
+$filteredResults = filterSearchResultsByCategory($filteredResults, $currentCategory);
+
+$totalResultsCount = count($filteredResults);
+$totalPages = max(1, (int)ceil($totalResultsCount / $limit));
+
+$currentPage = isset($_GET['page']) ? (int)$_GET['page'] : 1;
+if ($currentPage < 1) {
+    $currentPage = 1;
+} elseif ($currentPage > $totalPages) {
+    $currentPage = $totalPages;
+}
+
+$offset = ($currentPage - 1) * $limit;
+
+// Dies ist die No-JS-Basisversion: nur die aktuelle Seite wird gerendert.
+// Bei aktiviertem JS lädt js/results-app.js zusätzlich den kompletten
+// Datensatz nach (ein einziger Request) und übernimmt Sortierung, Filter
+// und Pagination danach komplett im Browser, ohne weitere Serveranfragen.
+$results = array_slice($filteredResults, $offset, $limit);
+$resultCount = count($results);
 ?>
 
 <noscript>
diff --git a/includes/resultsHelper.php b/includes/resultsHelper.php
index c9dadb1..68db72b 100644
--- a/includes/resultsHelper.php
+++ b/includes/resultsHelper.php
@@ -5,12 +5,9 @@
  * Werden sowohl von content/search-results.php (No-JS-Rendering)
  * als auch von php/controller/search-results-data.php (JSON für
  * die JS-Hydration) genutzt, damit Sortier-/Filterlogik nur an
- * einer Stelle gepflegt werden muss.
+ * einer Stelle gepflegt werden muss
  */
 
-/**
- * Anzahl der Likes robust ermitteln (Array von Likes ODER bereits eine Zahl).
- */
 function getLikeCount($item): int
 {
     if (isset($item['likes']) && is_array($item['likes'])) {
@@ -20,7 +17,7 @@ function getLikeCount($item): int
 }
 
 /**
- * Sortiert ein Array von Ergebnis-Assoziativarrays (wie in $_SESSION["search_results"] abgelegt).
+ * Sortiert die Ergebnisse
  */
 function sortSearchResults(array $results, string $sortStyle): array
 {
@@ -51,7 +48,7 @@ function sortSearchResults(array $results, string $sortStyle): array
 }
 
 /**
- * Filtert ein Array von Ergebnissen nach Kategorie ('all' = kein Filter).
+ * Filtert die Ergebnisse ('all' = kein Filter).
  */
 function filterSearchResultsByCategory(array $results, string $category): array
 {
@@ -78,7 +75,7 @@ function buildSearchResultsUrl(int $page, string $query, string $sort, string $c
 }
 
 /**
- * Rendert eine rein serverseitige Pagination (echte <a>-Links) für den No-JS-Fall.
+ * Rendert eine rein serverseitige Pagination (echte <a>-Links) für den No-JS-Fall:
  */
 function renderNoJsPagination(int $currentPage, int $totalPages, string $query, string $sort, string $category, int $limit): string
 {

From d590561ade6f3e5bbb6be9c827fe72bcdad362eb Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Sat, 18 Jul 2026 16:59:23 +0200
Subject: [PATCH 05/19] refactoring

---
 php/controller/search-results-controller.php | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/php/controller/search-results-controller.php b/php/controller/search-results-controller.php
index 91237ba..3929627 100644
--- a/php/controller/search-results-controller.php
+++ b/php/controller/search-results-controller.php
@@ -22,9 +22,6 @@ if ($_SERVER["REQUEST_METHOD"] === "GET" && isset($_GET["q"])) {
 
             $results = $articleManager->search($search);
 
-            // Sortierung/Filterung passiert nicht mehr hier, sondern zentral in
-            // content/search-results.php (No-JS) bzw. search-results-data.php (JS),
-            // damit ein Sortier-/Filterwechsel keine erneute Suche mehr braucht.
             $safeArrayResults = [];
             foreach ($results as $obj) {
                 $safeArrayResults[] = [

From 8836034670bac73fa3798041f29f12582ec503d3 Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Sat, 18 Jul 2026 17:17:44 +0200
Subject: [PATCH 06/19] Kategoriepaginator

---
 content/search-results.php                 |   2 +-
 content/showCategory.php                   | 198 +++++++++++----------
 php/controller/showCategory-controller.php |  69 ++++---
 3 files changed, 143 insertions(+), 126 deletions(-)

diff --git a/content/search-results.php b/content/search-results.php
index f70298e..d9a6399 100644
--- a/content/search-results.php
+++ b/content/search-results.php
@@ -66,7 +66,7 @@ $categories = [
     Inhalt: Zeigt die Ergebnisse einer Suche an.
     Funktioniert ohne JavaScript (serverseitige Sortierung/Filter/Pagination
     über echte Links + Formulare) und wird bei aktiviertem JS von
-    js/results-app.js vollständig client-seitig übernommen.
+    js/search-results.js vollständig client-seitig übernommen.
 -->
 <div class="s-res-layout-grid">
     <?php include_once "includes/alertMessages.php" ?>
diff --git a/content/showCategory.php b/content/showCategory.php
index 064acc7..95e3941 100644
--- a/content/showCategory.php
+++ b/content/showCategory.php
@@ -5,7 +5,6 @@ if (session_status() === PHP_SESSION_NONE) {
 require_once __DIR__ . '/../includes/resultsHelper.php';
 
 $rawResults = $_SESSION["search_results"] ?? [];
-$query = $_SESSION["search_query"] ?? "";
 
 // Sortierung / Kategorie / Limit: GET-Parameter haben Vorrang, sonst
 // Rückfall auf die zuletzt in der Session gemerkten Werte. So bleibt
@@ -26,9 +25,8 @@ if (!in_array($limit, [10, 20, 50, 100])) {
 }
 $_SESSION['search_limit'] = $limit;
 
-// Serverseitig sortieren + filtern
+// Serverseitig sortieren
 $filteredResults = sortSearchResults($rawResults, $currentSort);
-$filteredResults = filterSearchResultsByCategory($filteredResults, $currentCategory);
 
 $totalResultsCount = count($filteredResults);
 $totalPages = max(1, (int)ceil($totalResultsCount / $limit));
@@ -49,108 +47,128 @@ $offset = ($currentPage - 1) * $limit;
 $results = array_slice($filteredResults, $offset, $limit);
 $resultCount = count($results);
 ?>
+<!--
+    Seite: Kategorie-Seite
+    Inhalt: Zeigt die Ergebnisse einer Kategorie an.
+    Funktioniert ohne JavaScript (serverseitige Sortierung/Filter/Pagination
+    über echte Links + Formulare) und wird bei aktiviertem JS von
+    js/search-results.js vollständig client-seitig übernommen.
+-->
+<div class="s-res-layout-grid">
+    <?php include_once "includes/alertMessages.php" ?>
 
-<noscript>
-    Bitte JavaScript aktivieren!
-</noscript>
+    <!-- Links: Seitenleiste für Filter und Suche -->
+    <aside class="s-res-sidebar">
+        <!-- Formular: sortiert die BEREITS gefundenen Ergebnisse.
+             Ohne JS: echter Reload dieser Seite, aber ohne erneute Datenbank-Suche.
+             Mit JS: search-results.js übernimmt das live im Browser, der Submit-Button
+             wird dafür nicht benötigt und über <noscript> versteckt. -->
+        <form action="index.php" method="GET" id="s-res-filter-form" class="s-res-sidebar-form">
+            <input type="hidden" name="pfad" value="search-results">
+            <input type="hidden" name="q" value="<?php echo htmlspecialchars($query); ?>">
 
-<!-- Das Formular umschließt jetzt das gesamte Layout -->
-<form id="search-form-id" action="index.php" method="GET" style="display: contents;">
-    <input type="hidden" name="pfad" value="showCategory">
-    <input type="hidden" name="category" value="<?php echo (isset($category) && !empty($category)) ? htmlspecialchars($category) : ''; ?>">
-    <input type="hidden" id="s-res-page-input" name="page" value="<?php echo $currentPage; ?>">
-
-    <div class="cat-view-container">
-
-        <!-- LINKE SPALTE: SEITENLEISTE FÜR SORTIERUNG -->
-        <aside class="cat-sidebar">
-            <div class="cat-sidebar-box">
-                <h3 class="cat-sidebar-title">Sortierung</h3>
-                <div class="cat-filter-group">
-                    <label class="cat-filter-option">
-                        <input type="radio" name="sort" value="alphabet" <?php echo ($currentSort === 'alphabet') ? 'checked' : ''; ?> onchange="this.form.submit();">
-                        Alphabetisch
+            <div class="s-res-sidebar-box">
+                <h3 class="s-res-sidebar-title">Sortierung</h3>
+                <div class="s-res-filter-group">
+                    <label class="s-res-filter-option">
+                        <input type="radio" name="sort" value="alphabet" class="sort-radio" <?php echo $currentSort === 'alphabet' ? 'checked' : ''; ?>>
+                        <span>Alphabetisch</span>
                     </label>
-                    <label class="cat-filter-option">
-                        <input type="radio" name="sort" value="likes" <?php echo ($currentSort === 'likes') ? 'checked' : ''; ?> onchange="this.form.submit();">
-                        Beliebtheit (Likes)
+                    <label class="s-res-filter-option">
+                        <input type="radio" name="sort" value="likes" class="sort-radio" <?php echo $currentSort === 'likes' ? 'checked' : ''; ?>>
+                        <span>Beliebtheit (Likes)</span>
                     </label>
-                    <label class="cat-filter-option">
-                        <input type="radio" name="sort" value="newest" <?php echo ($currentSort === 'newest') ? 'checked' : ''; ?> onchange="this.form.submit();">
-                        Neueste Beiträge
+                    <label class="s-res-filter-option">
+                        <input type="radio" name="sort" value="newest" class="sort-radio" <?php echo $currentSort === 'newest' ? 'checked' : ''; ?>>
+                        <span>Neueste Beiträge</span>
                     </label>
-                    <label class="cat-filter-option">
-                        <input type="radio" name="sort" value="oldest" <?php echo ($currentSort === 'oldest') ? 'checked' : ''; ?> onchange="this.form.submit();">
-                        Älteste Beiträge
+                    <label class="s-res-filter-option">
+                        <input type="radio" name="sort" value="oldest" class="sort-radio" <?php echo $currentSort === 'oldest' ? 'checked' : ''; ?>>
+                        <span>Älteste Beiträge</span>
                     </label>
                 </div>
             </div>
-        </aside>
 
-        <!-- RECHTE SPALTE: INHALT & PAGINATOR -->
-        <main class="cat-view-main">
-            <div class="cat-view-header">
-                <h1 class="cat-view-title">Kategorie: <?php echo (isset($category) && !empty($category)) ? htmlspecialchars($category) : 'Unbekannt'; ?></h1>
-                <p class="cat-view-meta-text">
-                    <?php echo (isset($totalArticles)) ? $totalArticles : 0; ?> Treffer in dieser Kategorie
-                </p>
-            </div>
+            <noscript>
+                <button type="submit" class="nav__search-button">Filter anwenden</button>
+            </noscript>
+        </form>
 
-            <!-- Beiträge -->
-            <div class="cat-view-list">
-                <?php if (isset($articles) && !empty($articles)): ?>
-                    <?php foreach ($articles as $article): ?>
-                        <div class="cat-view-item">
-                            <div class="cat-view-content">
-                                <h2 class="cat-view-item-title">
-                                    <a href="index.php?pfad=showArticle&id=<?php echo htmlspecialchars($article->getID()); ?>" class="cat-view-link">
-                                        <?php echo (isset($article) && !empty($article->getTitle())) ? htmlspecialchars($article->getTitle()) : 'Kein Titel'; ?>
-                                    </a>
-                                </h2>
+    </aside>
 
-                                <div class="cat-view-meta-row">
-                                    <p class="cat-view-author">
-                                        von <span class="cat-view-author-name"><?php echo (isset($article) && !empty($article->getAuthor())) ? htmlspecialchars($article->getAuthor()) : 'Anonym'; ?></span>
-                                    </p>
-                                    <span class="cat-view-likes">
-                                        ❤️ <?php echo (isset($article) && !empty($article->getLikes())) ? htmlspecialchars($article->getLikes()) : '0'; ?>
-                                    </span>
-                                </div>
-                                
+    <main class="s-res-main-content">
+
+        <div class="s-res-header">
+            <h1 class="s-res-main-title">Ergebnisse</h1>
+            <p class="s-res-meta"><span id="s-res-result-count"><?php echo $totalResultsCount; ?></span> Treffer in dieser Kategorie "<?php echo htmlspecialchars($query); ?>"</p>
+        </div>
+
+        <!-- Ergebnisliste -->
+        <div class="s-res-list">
+            <?php if (!empty($results)): ?>
+
+                <?php foreach ($results as $item):
+                    $likesCount = getLikeCount($item);
+                    ?>
+                    <div class="s-res-item" data-likes="<?php echo $likesCount; ?>" data-category="<?php echo strtolower($item['category'] ?? ''); ?>">
+                        <div class="s-res-content">
+                            <h2 class="s-res-item-title">
+                                <a href="index.php?pfad=showArticle&id=<?php echo $item['id']; ?>" class="s-res-link">
+                                    <?php echo htmlspecialchars($item['title']); ?>
+                                </a>
+                            </h2>
+                            <div class="s-res-meta-row">
+                                <p class="s-res-author">Von: <span class="s-res-author-name"><?php echo htmlspecialchars($item['author']); ?></span></p>
+
+                                <span class="s-res-likes">
+                                    ❤️ <?php echo $likesCount; ?>
+                                </span>
                             </div>
-                            <div class="cat-view-arrow">&rarr;</div>
                         </div>
-                    <?php endforeach; ?>
-                <?php else: ?>
-                    <p class="cat-view-meta-text">Keine Artikel in dieser Kategorie gefunden.</p>
-                <?php endif; ?>
+                        <div class="s-res-arrow">&rarr;</div>
+                    </div>
+                <?php endforeach; ?>
+
+            <?php elseif (isset($_SESSION["message"]) && $_SESSION["message"] === "invalid_search_query"): ?>
+                <p>Unzulässige Suchanfrage</p>
+
+            <?php elseif ($query !== "" && $totalResultsCount === 0 && count($rawResults) > 0): ?>
+                <p>Keine Beiträge in dieser Kategorie gefunden.</p>
+            <?php endif; ?>
+            <?php unset($_SESSION["message"]); ?>
+
+        </div>
+
+        <div class="s-res-pagination-footer">
+
+            <!-- Auswahl der Ergebnisse pro Seite. Gehört per form="..." logisch
+                 zum Filterformular oben -->
+            <div class="s-res-limit-selector">
+                <label for="s-res-per-page" class="s-res-limit-label">Ergebnisse pro Seite:</label>
+                <select id="s-res-per-page" name="limit" form="s-res-filter-form" class="s-res-limit-select">
+                    <option value="10" <?php echo $limit === 10 ? 'selected' : ''; ?>>10</option>
+                    <option value="20" <?php echo $limit === 20 ? 'selected' : ''; ?>>20</option>
+                    <option value="50" <?php echo $limit === 50 ? 'selected' : ''; ?>>50</option>
+                    <option value="100" <?php echo $limit === 100 ? 'selected' : ''; ?>>100</option>
+                </select>
+                <noscript><button type="submit" form="s-res-filter-form" class="nav__search-button">Übernehmen</button></noscript>
             </div>
 
-            <!-- Footer Paginator -->
-            <?php if (isset($totalPages) && $totalPages > 1): ?>
-                <div class="cat-view-pagination-footer">
-                    <div></div>
-                    <div class="s-res-page-navigation">
-                        <button type="button" class="s-res-page-btn" data-page="<?php echo $currentPage - 1; ?>" <?php echo ($currentPage <= 1) ? 'disabled' : ''; ?>>
-                            &laquo;
-                        </button>
+            <nav class="s-res-page-navigation" aria-label="Seitennavigation">
+                <!-- No-JS-Fallback: -->
+                <noscript>
+                    <?php echo renderNoJsPagination($currentPage, $totalPages, $query, $currentSort, $currentCategory, $limit); ?>
+                </noscript>
 
-                        <?php for ($i = 1; $i <= $totalPages; $i++): ?>
-                            <button type="button"
-                                    class="s-res-page-btn <?php echo ($i === $currentPage) ? 'cat-active-btn' : ''; ?>"
-                                    data-page="<?php echo $i; ?>"
-                                    <?php echo ($i === $currentPage) ? 'disabled' : ''; ?>>
-                                <?php echo $i; ?>
-                            </button>
-                        <?php endfor; ?>
-
-                        <button type="button" class="s-res-page-btn" data-page="<?php echo $currentPage + 1; ?>" <?php echo ($currentPage >= $totalPages) ? 'disabled' : ''; ?>>
-                            &raquo;
-                        </button>
-                    </div>
+                <!-- JS-Version: wird per search-results.js befüllt/eingeblendet: -->
+                <div id="js-page-navigation" style="display:none;">
+                    <button type="button" class="s-res-page-btn" id="prev-page-btn">«</button>
+                    <span id="dynamic-page-numbers"></span>
+                    <button type="button" class="s-res-page-btn" id="next-page-btn">»</button>
                 </div>
-            <?php endif; ?>
-        </main>
+            </nav>
 
-    </div>
-</form>
+        </div>
+    </main>
+
+</div>
diff --git a/php/controller/showCategory-controller.php b/php/controller/showCategory-controller.php
index 938fca0..8414723 100644
--- a/php/controller/showCategory-controller.php
+++ b/php/controller/showCategory-controller.php
@@ -9,59 +9,58 @@ require_once 'php/model/UserManager.php';
 require_once 'php/validator/article-validator.php';
 
 if (isset($_GET["category"]) && !empty($_GET["category"]) && articleCategoryValidator($_GET["category"])){
-    $category = $_GET["category"];
+    $category = $_GET['category'] ?? 'all';
 
     // Sortierung auslesen (Standard: alphabet)
     $sortStyle = isset($_GET['sort']) ? trim($_GET['sort']) : 'alphabet';
 
-    // Aktuelle Seite auslesen
-    $page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
-    if ($page < 1) { $page = 1; }
-
-    try {
+    try{
         $articleManager = ArticleManager::getInstance();
         $userManager = UserManager::getInstance();
-        $allArticles = $articleManager->getArticlesByCategory($category);
-        foreach ($allArticles as $article) {
-            $article->setAuthor($userManager->findUser($article->getAuthor())["vorname"] . " " . $userManager->findUser($article->getAuthor())["nachname"]);
-        }
-        $totalArticles = count($allArticles);
 
-        // --- SORTIERUNG LOGIK ---
-        if ($sortStyle === 'alphabet') {
-            usort($allArticles, function($a, $b) {
-                return strcasecmp($a->getTitle(), $b->getTitle());
-            });
-        } elseif ($sortStyle === 'likes') {
-            usort($allArticles, function($a, $b) {
-                return $b->getLikes() <=> $a->getLikes(); // Absteigend nach Likes
-            });
-        } elseif ($sortStyle === 'newest') {
-            usort($allArticles, function($a, $b) {
-                return strtotime($b->getCreationDate()) <=> strtotime($a->getCreationDate()); // Neueste zuerst
-            });
-        } elseif ($sortStyle === 'oldest') {
-            usort($allArticles, function($a, $b) {
-                return strtotime($a->getCreationDate()) <=> strtotime($b->getCreationDate()); // Älteste zuerst
-            });
+        $results = $articleManager->getArticlesByCategory($category);
+
+        $safeArrayResults = [];
+        foreach ($results as $obj) {
+            $safeArrayResults[] = [
+                "id" => $obj->getId(),
+                "title" => $obj->getTitle(),
+                "content" => $obj->getContent(),
+                "author" => $userManager->findUser($obj->getAuthor())["vorname"] . " " . $userManager->findUser($obj->getAuthor())["nachname"],
+                "category" => $obj->getCategory(),
+                "tags" => $obj->getTags(),
+                "creationDate" => $obj->getCreationDate(),
+                "likes" => $obj->getLikes(),
+            ];
         }
 
-        // Paginierung konfigurieren
-        $limit = 10;
-        $totalPages = ceil($totalArticles / $limit);
-        if ($page > $totalPages && $totalPages > 0) { $page = $totalPages; }
-
-        $offset = ($page - 1) * $limit;
-        $articles = array_slice($allArticles, $offset, $limit);
+        $_SESSION["search_results"] = $safeArrayResults;
+        $_SESSION["message"] = "new_search_results";
 
     } catch (Exception $e) {
         $_SESSION["message"] = "internal_error";
         include_once "content/404.php";
         exit();
     }
+
+    $sort = $_GET['sort'] ?? 'alphabet';
+    $_SESSION['search_sort'] = $sort;
+
+    $_SESSION['search_category'] = $category;
+
+    $limit = isset($_GET['limit']) ? (int)$_GET['limit'] : 10;
+    if (!searchLimitValidator($limit)) {
+        $limit = 10;
+    }
+    $_SESSION['search_limit'] = $limit;
+
+    // Neue Suche -> immer wieder bei Seite 1 beginnen
+    header("Location: ../../index.php?pfad=showCategory&category=" . urlencode($category) . "&sort=" . urlencode($sort) . "&limit=" . $limit . "&page=1");
+    exit();
 } else {
     $_SESSION["message"] = "invalid_category";
     include_once "content/404.php";
     exit();
 }
+
 ?>
\ No newline at end of file

From 6897a295743b3b43af405ad9f11a0c9c2c5da941 Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Sat, 18 Jul 2026 17:23:30 +0200
Subject: [PATCH 07/19] Update search-results-data.php

---
 php/controller/search-results-data.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/php/controller/search-results-data.php b/php/controller/search-results-data.php
index 36b492d..1c513d5 100644
--- a/php/controller/search-results-data.php
+++ b/php/controller/search-results-data.php
@@ -2,7 +2,7 @@
 /**
  * Liefert den vollständigen, zuletzt gefundenen Ergebnis-Datensatz als JSON.
  *
- * Wird von js/results-app.js EINMALIG per fetch() geladen, damit Sortierung,
+ * Wird von js/search-results.js EINMALIG per fetch() geladen, damit Sortierung,
  * Filterung und Pagination danach komplett im Browser laufen können, ohne
  * weitere Serveranfragen oder eine erneute Datenbank-Suche auszulösen.
  */

From e0fb04794d074b2977b993a5ae81183a0e600eb5 Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Sat, 18 Jul 2026 17:28:53 +0200
Subject: [PATCH 08/19] Update resultsHelper.php

---
 includes/resultsHelper.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/resultsHelper.php b/includes/resultsHelper.php
index 68db72b..8d5db6b 100644
--- a/includes/resultsHelper.php
+++ b/includes/resultsHelper.php
@@ -75,7 +75,7 @@ function buildSearchResultsUrl(int $page, string $query, string $sort, string $c
 }
 
 /**
- * Rendert eine rein serverseitige Pagination (echte <a>-Links) für den No-JS-Fall:
+ * Rendert eine rein serverseitige Pagination für den No-JS-Fall:
  */
 function renderNoJsPagination(int $currentPage, int $totalPages, string $query, string $sort, string $category, int $limit): string
 {

From de1ba888607ab031f6d031e33cbf5f7bb40b3bf5 Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Sat, 18 Jul 2026 17:30:17 +0200
Subject: [PATCH 09/19] Update showCategory.php

---
 content/showCategory.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/showCategory.php b/content/showCategory.php
index 95e3941..1475b8a 100644
--- a/content/showCategory.php
+++ b/content/showCategory.php
@@ -100,7 +100,7 @@ $resultCount = count($results);
 
         <div class="s-res-header">
             <h1 class="s-res-main-title">Ergebnisse</h1>
-            <p class="s-res-meta"><span id="s-res-result-count"><?php echo $totalResultsCount; ?></span> Treffer in dieser Kategorie "<?php echo htmlspecialchars($query); ?>"</p>
+            <p class="s-res-meta"><span id="s-res-result-count"><?php echo $totalResultsCount; ?></span> Treffer in der Kategorie "<?php echo htmlspecialchars($currentCategory); ?>"</p>
         </div>
 
         <!-- Ergebnisliste -->

From 2666d2d14f595d4b4274be4d392140026e93117e Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Sat, 18 Jul 2026 17:32:01 +0200
Subject: [PATCH 10/19] Update navbar.php

---
 includes/navbar.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/navbar.php b/includes/navbar.php
index c62204e..b2693ba 100644
--- a/includes/navbar.php
+++ b/includes/navbar.php
@@ -56,7 +56,7 @@ Globales Menü, wird via PHP später in alle Seiten eingebunden
                 <li><a href="index.php?pfad=showCategory&category=biologie">Biologie</a></li>
                 <li><a href="index.php?pfad=showCategory&category=chemie">Chemie</a></li>
                 <li><a href="index.php?pfad=showCategory&category=physik">Physik</a></li>
-                <li><a href="index.php?pfad=showCategory&category=informatik">Informatik</a></li>
+                <li><a href="index.php?pfad=search-results&category=informatik">Informatik</a></li>
                 <li><a href="index.php?pfad=showCategory&category=astronomie">Astronomie</a></li>
             </ul>
         </li>

From 721bc8d83381342f9f06c905f1ed227e7dce8aac Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Sat, 18 Jul 2026 17:32:37 +0200
Subject: [PATCH 11/19] Update navbar.php

---
 includes/navbar.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/navbar.php b/includes/navbar.php
index b2693ba..58b643e 100644
--- a/includes/navbar.php
+++ b/includes/navbar.php
@@ -109,7 +109,7 @@ Globales Menü, wird via PHP später in alle Seiten eingebunden
                 <a href="index.php?pfad=showCategory&category=biologie">Biologie</a>
                 <a href="index.php?pfad=showCategory&category=chemie">Chemie</a>
                 <a href="index.php?pfad=showCategory&category=physik">Physik</a>
-                <a href="index.php?pfad=showCategory&category=informatik">Informatik</a>
+                <a href="index.php?pfad=search-results&category=informatik">Informatik</a>
                 <a href="index.php?pfad=showCategory&category=astronomie">Astronomie</a>
             </div>
         </div>

From 61d72436c9d33a5f49f05e8debd44746d159a26d Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Sat, 18 Jul 2026 17:33:40 +0200
Subject: [PATCH 12/19] Update navbar.php

---
 includes/navbar.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/navbar.php b/includes/navbar.php
index 58b643e..6d07a2c 100644
--- a/includes/navbar.php
+++ b/includes/navbar.php
@@ -109,7 +109,7 @@ Globales Menü, wird via PHP später in alle Seiten eingebunden
                 <a href="index.php?pfad=showCategory&category=biologie">Biologie</a>
                 <a href="index.php?pfad=showCategory&category=chemie">Chemie</a>
                 <a href="index.php?pfad=showCategory&category=physik">Physik</a>
-                <a href="index.php?pfad=search-results&category=informatik">Informatik</a>
+                <a href="index.php?pfad=search-results&category=informatik&q=">Informatik</a>
                 <a href="index.php?pfad=showCategory&category=astronomie">Astronomie</a>
             </div>
         </div>

From 63c213bae75b26f2f4d38e59505e6ce3cdd6ba11 Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Sat, 18 Jul 2026 17:34:24 +0200
Subject: [PATCH 13/19] Update navbar.php

---
 includes/navbar.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/navbar.php b/includes/navbar.php
index 6d07a2c..ad07216 100644
--- a/includes/navbar.php
+++ b/includes/navbar.php
@@ -109,7 +109,7 @@ Globales Menü, wird via PHP später in alle Seiten eingebunden
                 <a href="index.php?pfad=showCategory&category=biologie">Biologie</a>
                 <a href="index.php?pfad=showCategory&category=chemie">Chemie</a>
                 <a href="index.php?pfad=showCategory&category=physik">Physik</a>
-                <a href="index.php?pfad=search-results&category=informatik&q=">Informatik</a>
+                <a href="index.php?pfad=search-results&category=informatik&q=informatik">Informatik</a>
                 <a href="index.php?pfad=showCategory&category=astronomie">Astronomie</a>
             </div>
         </div>

From 41d8ac67219d922af95d44b82e17d774866b7fc0 Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Sat, 18 Jul 2026 17:35:38 +0200
Subject: [PATCH 14/19] Update navbar.php

---
 includes/navbar.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/navbar.php b/includes/navbar.php
index ad07216..2ba012c 100644
--- a/includes/navbar.php
+++ b/includes/navbar.php
@@ -109,7 +109,7 @@ Globales Menü, wird via PHP später in alle Seiten eingebunden
                 <a href="index.php?pfad=showCategory&category=biologie">Biologie</a>
                 <a href="index.php?pfad=showCategory&category=chemie">Chemie</a>
                 <a href="index.php?pfad=showCategory&category=physik">Physik</a>
-                <a href="index.php?pfad=search-results&category=informatik&q=informatik">Informatik</a>
+                <a href="index.php?pfad=search-results-controller&category=informatik&q=informatik">Informatik</a>
                 <a href="index.php?pfad=showCategory&category=astronomie">Astronomie</a>
             </div>
         </div>

From 6595a3d78d1a32d1a19e8cc24f5b518bbb45df74 Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Sat, 18 Jul 2026 17:36:52 +0200
Subject: [PATCH 15/19] Update index.php

---
 index.php | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/index.php b/index.php
index 3efa72a..374ee62 100644
--- a/index.php
+++ b/index.php
@@ -15,6 +15,10 @@ if ($pfad === "login") {
     include_once "php/controller/login-controller.php";
 }
 
+if ($pfad === "search-results-controller") {
+    include_once "php/controller/search-results-controller.php";
+}
+
 if ($pfad === "register") {
     include_once "php/controller/register-controller.php";
 }

From fcb9289d806f5b39d24079b52dafb3bce82ce872 Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Sat, 18 Jul 2026 17:38:27 +0200
Subject: [PATCH 16/19] Update navbar.php

---
 includes/navbar.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/navbar.php b/includes/navbar.php
index 2ba012c..0f32246 100644
--- a/includes/navbar.php
+++ b/includes/navbar.php
@@ -109,7 +109,7 @@ Globales Menü, wird via PHP später in alle Seiten eingebunden
                 <a href="index.php?pfad=showCategory&category=biologie">Biologie</a>
                 <a href="index.php?pfad=showCategory&category=chemie">Chemie</a>
                 <a href="index.php?pfad=showCategory&category=physik">Physik</a>
-                <a href="index.php?pfad=search-results-controller&category=informatik&q=informatik">Informatik</a>
+                <a href="index.php?pfad=search-results-controller&q=informatik">Informatik</a>
                 <a href="index.php?pfad=showCategory&category=astronomie">Astronomie</a>
             </div>
         </div>

From 35e50060633867e63b1431f865711f32885f0a2f Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Sat, 18 Jul 2026 17:39:14 +0200
Subject: [PATCH 17/19] Update navbar.php

---
 includes/navbar.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/includes/navbar.php b/includes/navbar.php
index 0f32246..c62204e 100644
--- a/includes/navbar.php
+++ b/includes/navbar.php
@@ -56,7 +56,7 @@ Globales Menü, wird via PHP später in alle Seiten eingebunden
                 <li><a href="index.php?pfad=showCategory&category=biologie">Biologie</a></li>
                 <li><a href="index.php?pfad=showCategory&category=chemie">Chemie</a></li>
                 <li><a href="index.php?pfad=showCategory&category=physik">Physik</a></li>
-                <li><a href="index.php?pfad=search-results&category=informatik">Informatik</a></li>
+                <li><a href="index.php?pfad=showCategory&category=informatik">Informatik</a></li>
                 <li><a href="index.php?pfad=showCategory&category=astronomie">Astronomie</a></li>
             </ul>
         </li>
@@ -109,7 +109,7 @@ Globales Menü, wird via PHP später in alle Seiten eingebunden
                 <a href="index.php?pfad=showCategory&category=biologie">Biologie</a>
                 <a href="index.php?pfad=showCategory&category=chemie">Chemie</a>
                 <a href="index.php?pfad=showCategory&category=physik">Physik</a>
-                <a href="index.php?pfad=search-results-controller&q=informatik">Informatik</a>
+                <a href="index.php?pfad=showCategory&category=informatik">Informatik</a>
                 <a href="index.php?pfad=showCategory&category=astronomie">Astronomie</a>
             </div>
         </div>

From eca664607178ebef72541d43b0fcc3faf713d006 Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Sat, 18 Jul 2026 18:23:11 +0200
Subject: [PATCH 18/19] showCategory.js

---
 content/showCategory.php                   |  88 ++++----
 includes/resultsHelper.php                 |  66 ++++++
 js/showCategory.js                         | 242 +++++++++++++++++++++
 php/controller/showCategory-controller.php |  56 ++---
 php/controller/showCategory-data.php       |  35 +++
 5 files changed, 413 insertions(+), 74 deletions(-)
 create mode 100644 js/showCategory.js
 create mode 100644 php/controller/showCategory-data.php

diff --git a/content/showCategory.php b/content/showCategory.php
index 1475b8a..2f8a4a9 100644
--- a/content/showCategory.php
+++ b/content/showCategory.php
@@ -2,31 +2,32 @@
 if (session_status() === PHP_SESSION_NONE) {
     session_start();
 }
+include_once "php/controller/showCategory-controller.php";
 require_once __DIR__ . '/../includes/resultsHelper.php';
 
-$rawResults = $_SESSION["search_results"] ?? [];
+$rawResults = $_SESSION['category_results'] ?? [];
+$category = $_SESSION['category_name'] ?? ($_GET['category'] ?? '');
 
-// Sortierung / Kategorie / Limit: GET-Parameter haben Vorrang, sonst
-// Rückfall auf die zuletzt in der Session gemerkten Werte. So bleibt
-// z.B. ein reiner Pagination-Link (?page=2) bei der aktuellen
-// Sortierung/Filterung.
-$currentSort = $_GET['sort'] ?? ($_SESSION['search_sort'] ?? 'alphabet');
+// Sortierung / Suche / Limit: GET-Parameter haben Vorrang, sonst Rückfall auf
+// die zuletzt in der Session gemerkten Werte (analog zu search-results.php).
+$currentSort = $_GET['sort'] ?? ($_SESSION['cat_sort'] ?? 'alphabet');
 if (!in_array($currentSort, ['alphabet', 'likes', 'newest', 'oldest'])) {
     $currentSort = 'alphabet';
 }
-$_SESSION['search_sort'] = $currentSort;
+$_SESSION['cat_sort'] = $currentSort;
 
-$currentCategory = strtolower($_GET['category'] ?? ($_SESSION['search_category'] ?? 'all'));
-$_SESSION['search_category'] = $currentCategory;
+$query = trim($_GET['q'] ?? ($_SESSION['cat_query'] ?? ''));
+$_SESSION['cat_query'] = $query;
 
-$limit = isset($_GET['limit']) ? (int)$_GET['limit'] : ($_SESSION['search_limit'] ?? 10);
+$limit = isset($_GET['limit']) ? (int)$_GET['limit'] : ($_SESSION['cat_limit'] ?? 10);
 if (!in_array($limit, [10, 20, 50, 100])) {
     $limit = 10;
 }
-$_SESSION['search_limit'] = $limit;
+$_SESSION['cat_limit'] = $limit;
 
-// Serverseitig sortieren
+// Serverseitig sortieren + nach Suchbegriff filtern (Kategorie steht bereits fest)
 $filteredResults = sortSearchResults($rawResults, $currentSort);
+$filteredResults = filterResultsByQuery($filteredResults, $query);
 
 $totalResultsCount = count($filteredResults);
 $totalPages = max(1, (int)ceil($totalResultsCount / $limit));
@@ -41,31 +42,38 @@ if ($currentPage < 1) {
 $offset = ($currentPage - 1) * $limit;
 
 // Dies ist die No-JS-Basisversion: nur die aktuelle Seite wird gerendert.
-// Bei aktiviertem JS lädt js/results-app.js zusätzlich den kompletten
-// Datensatz nach (ein einziger Request) und übernimmt Sortierung, Filter
-// und Pagination danach komplett im Browser, ohne weitere Serveranfragen.
+// Bei aktiviertem JS lädt js/showCategory.js zusätzlich den kompletten
+// Kategorie-Datensatz nach (ein einziger Request) und übernimmt Sortierung,
+// Suche und Pagination danach komplett im Browser, ohne weitere Serveranfragen.
 $results = array_slice($filteredResults, $offset, $limit);
 $resultCount = count($results);
 ?>
 <!--
-    Seite: Kategorie-Seite
-    Inhalt: Zeigt die Ergebnisse einer Kategorie an.
-    Funktioniert ohne JavaScript (serverseitige Sortierung/Filter/Pagination
+    Seite: Kategorie-Ansicht
+    Inhalt: Zeigt alle Beiträge einer Kategorie an, sortierbar und innerhalb
+    der Kategorie durchsuchbar.
+    Funktioniert ohne JavaScript (serverseitige Sortierung/Suche/Pagination
     über echte Links + Formulare) und wird bei aktiviertem JS von
-    js/search-results.js vollständig client-seitig übernommen.
+    js/showCategory.js vollständig client-seitig übernommen.
 -->
 <div class="s-res-layout-grid">
     <?php include_once "includes/alertMessages.php" ?>
 
-    <!-- Links: Seitenleiste für Filter und Suche -->
+    <!-- Links: Seitenleiste für Suche (innerhalb der Kategorie) und Sortierung -->
     <aside class="s-res-sidebar">
-        <!-- Formular: sortiert die BEREITS gefundenen Ergebnisse.
-             Ohne JS: echter Reload dieser Seite, aber ohne erneute Datenbank-Suche.
-             Mit JS: search-results.js übernimmt das live im Browser, der Submit-Button
+
+        <!-- Sortiert/durchsucht die BEREITS geladenen Kategorie-Beiträge.
+             Ohne JS: echter Reload dieser Seite, aber ohne erneute Datenbank-Abfrage.
+             Mit JS: js/showCategory.js übernimmt das live im Browser, der Submit-Button
              wird dafür nicht benötigt und über <noscript> versteckt. -->
-        <form action="index.php" method="GET" id="s-res-filter-form" class="s-res-sidebar-form">
-            <input type="hidden" name="pfad" value="search-results">
-            <input type="hidden" name="q" value="<?php echo htmlspecialchars($query); ?>">
+        <form action="index.php" method="GET" id="cat-filter-form" class="s-res-sidebar-form">
+            <input type="hidden" name="pfad" value="showCategory">
+            <input type="hidden" name="category" value="<?php echo htmlspecialchars($category); ?>">
+
+            <div class="s-res-sidebar-box">
+                <h3 class="s-res-sidebar-title">In dieser Kategorie suchen</h3>
+                <input type="search" id="cat-search-input" name="q" placeholder="Suchen..." class="nav__search" value="<?php echo htmlspecialchars($query); ?>" maxlength="50">
+            </div>
 
             <div class="s-res-sidebar-box">
                 <h3 class="s-res-sidebar-title">Sortierung</h3>
@@ -90,7 +98,7 @@ $resultCount = count($results);
             </div>
 
             <noscript>
-                <button type="submit" class="nav__search-button">Filter anwenden</button>
+                <button type="submit" class="nav__search-button">Anwenden</button>
             </noscript>
         </form>
 
@@ -99,8 +107,10 @@ $resultCount = count($results);
     <main class="s-res-main-content">
 
         <div class="s-res-header">
-            <h1 class="s-res-main-title">Ergebnisse</h1>
-            <p class="s-res-meta"><span id="s-res-result-count"><?php echo $totalResultsCount; ?></span> Treffer in der Kategorie "<?php echo htmlspecialchars($currentCategory); ?>"</p>
+            <h1 class="s-res-main-title">Kategorie: <?php echo htmlspecialchars($category); ?></h1>
+            <p class="s-res-meta">
+                <span id="s-res-result-count"><?php echo $totalResultsCount; ?></span> Treffer in dieser Kategorie<?php echo $query !== '' ? ' für "' . htmlspecialchars($query) . '"' : ''; ?>
+            </p>
         </div>
 
         <!-- Ergebnisliste -->
@@ -129,11 +139,12 @@ $resultCount = count($results);
                     </div>
                 <?php endforeach; ?>
 
-            <?php elseif (isset($_SESSION["message"]) && $_SESSION["message"] === "invalid_search_query"): ?>
-                <p>Unzulässige Suchanfrage</p>
+            <?php elseif ($query !== ''): ?>
+                <p>Keine Beiträge in dieser Kategorie zu diesem Suchbegriff gefunden.</p>
 
-            <?php elseif ($query !== "" && $totalResultsCount === 0 && count($rawResults) > 0): ?>
+            <?php else: ?>
                 <p>Keine Beiträge in dieser Kategorie gefunden.</p>
+
             <?php endif; ?>
             <?php unset($_SESSION["message"]); ?>
 
@@ -141,26 +152,25 @@ $resultCount = count($results);
 
         <div class="s-res-pagination-footer">
 
-            <!-- Auswahl der Ergebnisse pro Seite. Gehört per form="..." logisch
-                 zum Filterformular oben -->
+            <!-- Auswahl der Ergebnisse pro Seite -->
             <div class="s-res-limit-selector">
                 <label for="s-res-per-page" class="s-res-limit-label">Ergebnisse pro Seite:</label>
-                <select id="s-res-per-page" name="limit" form="s-res-filter-form" class="s-res-limit-select">
+                <select id="s-res-per-page" name="limit" form="cat-filter-form" class="s-res-limit-select">
                     <option value="10" <?php echo $limit === 10 ? 'selected' : ''; ?>>10</option>
                     <option value="20" <?php echo $limit === 20 ? 'selected' : ''; ?>>20</option>
                     <option value="50" <?php echo $limit === 50 ? 'selected' : ''; ?>>50</option>
                     <option value="100" <?php echo $limit === 100 ? 'selected' : ''; ?>>100</option>
                 </select>
-                <noscript><button type="submit" form="s-res-filter-form" class="nav__search-button">Übernehmen</button></noscript>
+                <noscript><button type="submit" form="cat-filter-form" class="nav__search-button">Übernehmen</button></noscript>
             </div>
 
             <nav class="s-res-page-navigation" aria-label="Seitennavigation">
                 <!-- No-JS-Fallback: -->
                 <noscript>
-                    <?php echo renderNoJsPagination($currentPage, $totalPages, $query, $currentSort, $currentCategory, $limit); ?>
+                    <?php echo renderNoJsPaginationCategory($currentPage, $totalPages, $category, $currentSort, $query, $limit); ?>
                 </noscript>
 
-                <!-- JS-Version: wird per search-results.js befüllt/eingeblendet: -->
+                <!-- JS-Version: wird per js/showCategory.js befüllt/eingeblendet: -->
                 <div id="js-page-navigation" style="display:none;">
                     <button type="button" class="s-res-page-btn" id="prev-page-btn">«</button>
                     <span id="dynamic-page-numbers"></span>
@@ -171,4 +181,4 @@ $resultCount = count($results);
         </div>
     </main>
 
-</div>
+</div>
\ No newline at end of file
diff --git a/includes/resultsHelper.php b/includes/resultsHelper.php
index 8d5db6b..3926cb2 100644
--- a/includes/resultsHelper.php
+++ b/includes/resultsHelper.php
@@ -101,5 +101,71 @@ function renderNoJsPagination(int $currentPage, int $totalPages, string $query,
         $html .= '<span class="s-res-page-btn" aria-disabled="true">&raquo;</span>';
     }
 
+    return $html;
+}
+
+
+/**
+ * Filtert Ergebnisse anhand eines Suchbegriffs
+ *
+ * Wird von content/showCategory.php genutzt, um innerhalb einer bereits
+ * geladenen Kategorie zu suchen.
+ */
+function filterResultsByQuery(array $results, string $query): array
+{
+    $query = trim($query);
+    if ($query === '') {
+        return $results;
+    }
+    $needle = mb_strtolower($query);
+    return array_values(array_filter($results, function ($item) use ($needle) {
+        $haystack = mb_strtolower(($item['title'] ?? '') . ' ' . ($item['content'] ?? ''));
+        return mb_strpos($haystack, $needle) !== false;
+    }));
+}
+
+/**
+ * Baut eine Kategorie-URL für einen bestimmten Seitenwechsel (No-JS-Pagination).
+ * Analog zu buildSearchResultsUrl, aber für pfad=showCategory (feste Kategorie,
+ * dafür mit Freitext-Suche innerhalb der Kategorie statt Kategorie-Filter).
+ */
+function buildCategoryUrl(int $page, string $category, string $sort, string $query, int $limit): string
+{
+    return "index.php?pfad=showCategory"
+        . "&category=" . urlencode($category)
+        . "&sort=" . urlencode($sort)
+        . "&q=" . urlencode($query)
+        . "&limit=" . $limit
+        . "&page=" . $page;
+}
+
+/**
+ * Rendert eine rein serverseitige Pagination für showCategory (No-JS-Fall).
+ * Analog zu renderNoJsPagination.
+ */
+function renderNoJsPaginationCategory(int $currentPage, int $totalPages, string $category, string $sort, string $query, int $limit): string
+{
+    $html = '';
+
+    if ($currentPage > 1) {
+        $html .= '<a class="s-res-page-btn" href="' . htmlspecialchars(buildCategoryUrl($currentPage - 1, $category, $sort, $query, $limit)) . '">&laquo;</a> ';
+    } else {
+        $html .= '<span class="s-res-page-btn" aria-disabled="true">&laquo;</span> ';
+    }
+
+    for ($i = 1; $i <= $totalPages; $i++) {
+        if ($i === $currentPage) {
+            $html .= '<span class="s-res-page-btn s-res-page-btn-active">' . $i . '</span> ';
+        } else {
+            $html .= '<a class="s-res-page-btn" href="' . htmlspecialchars(buildCategoryUrl($i, $category, $sort, $query, $limit)) . '">' . $i . '</a> ';
+        }
+    }
+
+    if ($currentPage < $totalPages) {
+        $html .= '<a class="s-res-page-btn" href="' . htmlspecialchars(buildCategoryUrl($currentPage + 1, $category, $sort, $query, $limit)) . '">&raquo;</a>';
+    } else {
+        $html .= '<span class="s-res-page-btn" aria-disabled="true">&raquo;</span>';
+    }
+
     return $html;
 }
\ No newline at end of file
diff --git a/js/showCategory.js b/js/showCategory.js
new file mode 100644
index 0000000..08b07ff
--- /dev/null
+++ b/js/showCategory.js
@@ -0,0 +1,242 @@
+/**
+ * Übernimmt Sortierung, Suche (innerhalb der Kategorie) und Pagination der
+ * Kategorie-Ansicht vollständig clientseitig.
+ *
+ * Ablauf:
+ * 1. Kompletten Kategorie-Datensatz einmalig per fetch() nachladen
+ * 2. Sortieren + nach Suchbegriff filtern (JS-Array).
+ * 3. Ergebnisliste + Pagination-UI daraus neu rendern.
+ *
+ * Ohne JS bleibt die serverseitig gerenderte Seite (echte Links/Formulare)
+ * voll funktionsfähig
+ */
+(function () {
+    const state = {
+        allItems: [],
+        sort: 'alphabet',
+        query: '',
+        itemsPerPage: 10,
+        currentPage: 1,
+    };
+
+    let listContainer, sortRadios, searchInput, limitSelect;
+    let prevBtn, nextBtn, numbersContainer, jsNav, resultCountEl;
+    let searchDebounceTimer;
+
+    function init() {
+        listContainer = document.querySelector('.s-res-list');
+        if (!listContainer) return;
+
+        sortRadios = document.querySelectorAll('.sort-radio');
+        searchInput = document.getElementById('cat-search-input');
+        limitSelect = document.getElementById('s-res-per-page');
+        prevBtn = document.getElementById('prev-page-btn');
+        nextBtn = document.getElementById('next-page-btn');
+        numbersContainer = document.getElementById('dynamic-page-numbers');
+        jsNav = document.getElementById('js-page-navigation');
+        resultCountEl = document.getElementById('s-res-result-count');
+
+        const checkedRadio = document.querySelector('.sort-radio:checked');
+        state.sort = checkedRadio ? checkedRadio.value : 'alphabet';
+        state.query = searchInput ? searchInput.value : '';
+        state.itemsPerPage = limitSelect ? (parseInt(limitSelect.value, 10) || 10) : 10;
+
+        fetchFullDataset()
+            .then(function (data) {
+                state.allItems = data.results || [];
+                attachEvents();
+                render();
+                if (jsNav) jsNav.style.display = 'flex';
+            })
+            .catch(function (err) {
+                // JSON-Endpoint nicht erreichbar: die serverseitig gerenderte
+                // (No-JS-)Ansicht bleibt sichtbar und funktioniert weiter.
+                console.error('Kategorie-Beiträge konnten nicht nachgeladen werden:', err);
+            });
+    }
+
+    function fetchFullDataset() {
+        return fetch('php/controller/showCategory-data.php', { credentials: 'same-origin' })
+            .then(function (res) {
+                if (!res.ok) throw new Error('HTTP ' + res.status);
+                return res.json();
+            });
+    }
+
+    function getFilteredSortedItems() {
+        let items = state.allItems;
+
+        const needle = state.query.trim().toLowerCase();
+        if (needle !== '') {
+            items = items.filter(function (item) {
+                const haystack = ((item.title || '') + ' ' + (item.content || '')).toLowerCase();
+                return haystack.indexOf(needle) !== -1;
+            });
+        }
+
+        items = items.slice().sort(function (a, b) {
+            if (state.sort === 'likes') {
+                return (b.likes || 0) - (a.likes || 0);
+            }
+            if (state.sort === 'newest' || state.sort === 'oldest') {
+                return state.sort === 'newest' ? (b.id - a.id) : (a.id - b.id);
+            }
+            // alphabet (Standard)
+            return (a.title || '').toLowerCase().localeCompare((b.title || '').toLowerCase());
+        });
+
+        return items;
+    }
+
+    function render() {
+        const items = getFilteredSortedItems();
+
+        if (resultCountEl) resultCountEl.textContent = items.length;
+
+        const totalPages = Math.max(1, Math.ceil(items.length / state.itemsPerPage));
+        if (state.currentPage > totalPages) state.currentPage = totalPages;
+        if (state.currentPage < 1) state.currentPage = 1;
+
+        const start = (state.currentPage - 1) * state.itemsPerPage;
+        const pageItems = items.slice(start, start + state.itemsPerPage);
+
+        listContainer.innerHTML = '';
+        if (pageItems.length === 0) {
+            const empty = document.createElement('p');
+            empty.textContent = 'Keine Beiträge gefunden.';
+            listContainer.appendChild(empty);
+        } else {
+            pageItems.forEach(function (item) {
+                listContainer.appendChild(buildCard(item));
+            });
+        }
+
+        updatePaginatorUI(state.currentPage, totalPages);
+    }
+
+    function buildCard(item) {
+        const card = document.createElement('div');
+        card.className = 's-res-item';
+        card.setAttribute('data-likes', item.likes);
+        card.setAttribute('data-category', (item.category || '').toLowerCase());
+
+        const link = document.createElement('a');
+        link.className = 's-res-link';
+        link.href = 'index.php?pfad=showArticle&id=' + encodeURIComponent(item.id);
+        link.textContent = item.title;
+
+        const title = document.createElement('h2');
+        title.className = 's-res-item-title';
+        title.appendChild(link);
+
+        const authorName = document.createElement('span');
+        authorName.className = 's-res-author-name';
+        authorName.textContent = item.author;
+
+        const author = document.createElement('p');
+        author.className = 's-res-author';
+        author.append('Von: ', authorName);
+
+        const likes = document.createElement('span');
+        likes.className = 's-res-likes';
+        likes.textContent = '❤️ ' + item.likes;
+
+        const metaRow = document.createElement('div');
+        metaRow.className = 's-res-meta-row';
+        metaRow.append(author, likes);
+
+        const content = document.createElement('div');
+        content.className = 's-res-content';
+        content.append(title, metaRow);
+
+        const arrow = document.createElement('div');
+        arrow.className = 's-res-arrow';
+        arrow.textContent = '→';
+
+        card.append(content, arrow);
+        return card;
+    }
+
+    function updatePaginatorUI(currentPage, totalPages) {
+        if (!prevBtn || !nextBtn || !numbersContainer) return;
+
+        prevBtn.disabled = currentPage <= 1;
+        nextBtn.disabled = currentPage >= totalPages;
+
+        numbersContainer.innerHTML = '';
+        for (let i = 1; i <= totalPages; i++) {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 's-res-page-btn' + (i === currentPage ? ' s-res-page-btn-active' : '');
+            btn.textContent = i;
+            btn.addEventListener('click', function () {
+                state.currentPage = i;
+                render();
+            });
+            numbersContainer.appendChild(btn);
+        }
+    }
+
+    function attachEvents() {
+        sortRadios.forEach(function (radio) {
+            radio.addEventListener('change', function () {
+                state.sort = this.value;
+                state.currentPage = 1;
+                render();
+            });
+        });
+
+        if (searchInput) {
+            // Live-Filterung während des Tippens (leicht entprellt), da der
+            // Datensatz bereits vollständig im Browser liegt.
+            searchInput.addEventListener('input', function () {
+                clearTimeout(searchDebounceTimer);
+                const value = this.value;
+                searchDebounceTimer = setTimeout(function () {
+                    state.query = value;
+                    state.currentPage = 1;
+                    render();
+                }, 150);
+            });
+        }
+
+        if (limitSelect) {
+            limitSelect.addEventListener('change', function () {
+                state.itemsPerPage = parseInt(this.value, 10) || 10;
+                state.currentPage = 1;
+                render();
+            });
+        }
+
+        if (prevBtn) {
+            prevBtn.addEventListener('click', function () {
+                if (state.currentPage > 1) {
+                    state.currentPage -= 1;
+                    render();
+                }
+            });
+        }
+
+        if (nextBtn) {
+            nextBtn.addEventListener('click', function () {
+                state.currentPage += 1;
+                render();
+            });
+        }
+
+        // Mit aktivem JS übernimmt render() Sortierung/Suche live
+        // ein echtes Absenden des Formulars (No-JS-Fallback) ist dann nicht mehr nötig.
+        const filterForm = document.getElementById('cat-filter-form');
+        if (filterForm) {
+            filterForm.addEventListener('submit', function (e) {
+                e.preventDefault();
+            });
+        }
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();
\ No newline at end of file
diff --git a/php/controller/showCategory-controller.php b/php/controller/showCategory-controller.php
index 8414723..72f20f4 100644
--- a/php/controller/showCategory-controller.php
+++ b/php/controller/showCategory-controller.php
@@ -2,40 +2,42 @@
 if (session_status() === PHP_SESSION_NONE) {
     session_start();
 }
-
 require_once 'php/model/Article.php';
 require_once 'php/model/ArticleManager.php';
 require_once 'php/model/UserManager.php';
 require_once 'php/validator/article-validator.php';
+require_once __DIR__ . '/../../includes/resultsHelper.php';
 
-if (isset($_GET["category"]) && !empty($_GET["category"]) && articleCategoryValidator($_GET["category"])){
-    $category = $_GET['category'] ?? 'all';
+if (isset($_GET["category"]) && !empty($_GET["category"]) && articleCategoryValidator($_GET["category"])) {
 
-    // Sortierung auslesen (Standard: alphabet)
-    $sortStyle = isset($_GET['sort']) ? trim($_GET['sort']) : 'alphabet';
+    $category = $_GET["category"];
 
-    try{
+    try {
         $articleManager = ArticleManager::getInstance();
         $userManager = UserManager::getInstance();
 
-        $results = $articleManager->getArticlesByCategory($category);
+        $allArticles = $articleManager->getArticlesByCategory($category);
 
         $safeArrayResults = [];
-        foreach ($results as $obj) {
+        foreach ($allArticles as $article) {
+            $authorName = $userManager->findUser($article->getAuthor())["vorname"] . " " . $userManager->findUser($article->getAuthor())["nachname"];
             $safeArrayResults[] = [
-                "id" => $obj->getId(),
-                "title" => $obj->getTitle(),
-                "content" => $obj->getContent(),
-                "author" => $userManager->findUser($obj->getAuthor())["vorname"] . " " . $userManager->findUser($obj->getAuthor())["nachname"],
-                "category" => $obj->getCategory(),
-                "tags" => $obj->getTags(),
-                "creationDate" => $obj->getCreationDate(),
-                "likes" => $obj->getLikes(),
+                "id" => $article->getID(),
+                "title" => $article->getTitle(),
+                "content" => $article->getContent(),
+                "author" => $authorName,
+                "category" => $article->getCategory(),
+                "tags" => $article->getTags(),
+                "creationDate" => $article->getCreationDate(),
+                "likes" => $article->getLikes(),
             ];
         }
 
-        $_SESSION["search_results"] = $safeArrayResults;
-        $_SESSION["message"] = "new_search_results";
+        // Session dient hier (wie bei search-results) als Zwischenspeicher, damit
+        // js/showCategory.js den kompletten Datensatz per showCategory-data.php
+        // nachladen kann, ohne die Kategorie-Abfrage ein zweites Mal auszuführen.
+        $_SESSION['category_results'] = $safeArrayResults;
+        $_SESSION['category_name'] = $category;
 
     } catch (Exception $e) {
         $_SESSION["message"] = "internal_error";
@@ -43,24 +45,8 @@ if (isset($_GET["category"]) && !empty($_GET["category"]) && articleCategoryVali
         exit();
     }
 
-    $sort = $_GET['sort'] ?? 'alphabet';
-    $_SESSION['search_sort'] = $sort;
-
-    $_SESSION['search_category'] = $category;
-
-    $limit = isset($_GET['limit']) ? (int)$_GET['limit'] : 10;
-    if (!searchLimitValidator($limit)) {
-        $limit = 10;
-    }
-    $_SESSION['search_limit'] = $limit;
-
-    // Neue Suche -> immer wieder bei Seite 1 beginnen
-    header("Location: ../../index.php?pfad=showCategory&category=" . urlencode($category) . "&sort=" . urlencode($sort) . "&limit=" . $limit . "&page=1");
-    exit();
 } else {
     $_SESSION["message"] = "invalid_category";
     include_once "content/404.php";
     exit();
-}
-
-?>
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/php/controller/showCategory-data.php b/php/controller/showCategory-data.php
new file mode 100644
index 0000000..bdf66f9
--- /dev/null
+++ b/php/controller/showCategory-data.php
@@ -0,0 +1,35 @@
+<?php
+/**
+ * Liefert den vollständigen, zuletzt geladenen Kategorie-Datensatz als JSON.
+ *
+ * Wird von js/showCategory.js EINMALIG per fetch() geladen, damit Sortierung,
+ * Suche und Pagination danach komplett im Browser laufen können, ohne
+ * weitere Serveranfragen oder eine erneute Datenbank-Abfrage auszulösen
+ *
+ * Analog zu php/controller/search-results-data.php
+ */
+if (session_status() === PHP_SESSION_NONE) {
+    session_start();
+}
+
+header('Content-Type: application/json; charset=utf-8');
+
+require_once __DIR__ . '/../../includes/resultsHelper.php';
+
+$rawResults = $_SESSION['category_results'] ?? [];
+
+$payload = array_map(function ($item) {
+    return [
+        'id'       => $item['id'],
+        'title'    => $item['title'],
+        'content'  => $item['content'] ?? '',
+        'author'   => $item['author'],
+        'category' => $item['category'] ?? '',
+        'likes'    => getLikeCount($item),
+    ];
+}, $rawResults);
+
+echo json_encode([
+    'category' => $_SESSION['category_name'] ?? '',
+    'results'  => array_values($payload),
+]);
\ No newline at end of file

From 0aca76d2f42cf805a5bf6f2ef9d41fbdfdc5d9e0 Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Sat, 18 Jul 2026 18:26:42 +0200
Subject: [PATCH 19/19] Update index.php

---
 index.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/index.php b/index.php
index 374ee62..be79999 100644
--- a/index.php
+++ b/index.php
@@ -72,6 +72,7 @@ if ($pfad === "deleteAccount") {
         <script src="js/comments.js" defer></script>
         <script src="js/editor.js" async></script>
         <script src="js/search-results.js" async></script>
+        <script src="js/showCategory.js" async></script>
 
 
         <title>EduForge</title>