From 9f000e2719a26bd929624b4a76668b44a70fe6f6 Mon Sep 17 00:00:00 2001
From: Thomas Hackner <thomas@hackner.dev>
Date: Tue, 14 Jul 2026 00:56:24 +0200
Subject: [PATCH] Filterbereich entfernt, Suche + Aktionen als Toolbar
 zusammengefasst

- Monat/Jahr-Filter geloescht (Server-Filter bleibt via URL nutzbar)
- Suchfeld und die Buttons 'PDF Export' und 'Bewerbung hinzufuegen'
  in einer gemeinsamen Toolbar zusammengefasst, als Pill-Buttons
- Tote filterForm-CSS und -JS entfernt

Co-Authored-By: Claude <noreply@anthropic.com>
---
 public/css/styles.css | 23 ++--------
 public/js/main.js     | 15 -------
 views/index.ejs       | 99 ++++++++++---------------------------------
 3 files changed, 26 insertions(+), 111 deletions(-)

diff --git a/public/css/styles.css b/public/css/styles.css
index 0a30b46..f8c8619 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -414,38 +414,21 @@ button.loading::after {
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-    /* Make filter section stack on mobile */
-    #filterForm {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    
-    #filterForm > div {
-        margin-bottom: 1rem;
-    }
-    
-    /* Adjust buttons on mobile */
-    #filterForm .flex.space-x-2,
-    #filterForm .ml-auto,
-    #filterForm > div:last-child {
-        margin-bottom: 0 !important;
-    }
-    
     /* Make table scroll horizontally on mobile */
     .overflow-hidden {
         overflow-x: auto;
     }
-    
+
     table {
         min-width: 768px;
     }
-    
+
     /* Adjust modal width on mobile */
     .max-w-lg {
         max-width: 90vw;
         margin: 0 5vw;
     }
-    
+
     .max-w-md {
         max-width: 90vw;
         margin: 0 5vw;
diff --git a/public/js/main.js b/public/js/main.js
index af08b0a..5b2192c 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -13,7 +13,6 @@ const pdfExportModal = document.getElementById('pdfExportModal');
 // Form Elements
 const applicationForm = document.getElementById('applicationForm');
 const pdfExportForm = document.getElementById('pdfExportForm');
-const filterForm = document.getElementById('filterForm');
 
 // Button Elements
 const addApplicationBtn = document.getElementById('addApplicationBtn');
@@ -657,20 +656,6 @@ closePdfModal.addEventListener('click', () => hideModal(pdfExportModal));
 cancelPdfExport.addEventListener('click', () => hideModal(pdfExportModal));
 pdfExportForm.addEventListener('submit', generatePDF);
 
-// Filter Form
-document.getElementById('filterForm').addEventListener('submit', function(e) {
-    e.preventDefault();
-    const month = document.getElementById('filterMonth').value;
-    const year = document.getElementById('filterYear').value;
-    let url = '/';
-    if (month || year) {
-        url += '?';
-        if (month) url += `month=${month}&`;
-        if (year) url += `year=${year}&`;
-    }
-    window.location.href = url;
-});
-
 // Delete buttons (event delegation). Editing opens its own page (/bewerbung/:id).
 document.addEventListener('click', (e) => {
     if (e.target.closest('.delete-btn')) {
diff --git a/views/index.ejs b/views/index.ejs
index d172918..64cc42a 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -7,9 +7,9 @@
     <%- include('partials/header') %>
 
     <main class="flex-1 container mx-auto px-4 py-8">
-        <!-- Search -->
-        <div class="flex justify-center mb-8">
-            <div class="relative w-full max-w-xl">
+        <!-- Toolbar: search + actions -->
+        <div class="flex flex-col gap-3 mb-8 sm:flex-row sm:items-center">
+            <div class="relative flex-1">
                 <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                 </svg>
@@ -20,80 +20,27 @@
                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                 </button>
             </div>
-        </div>
 
-        <!-- Filter Section -->
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-8">
-            <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Filter</h2>
-            <form id="filterForm" class="flex flex-wrap gap-4 items-end">
-                <div class="flex-1 min-w-32">
-                    <label for="filterMonth" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                        Monat
-                    </label>
-                    <select 
-                        id="filterMonth" 
-                        name="month"
-                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
-                        <option value="">-- Alle Monate --</option>
-                        <% availableMonths.forEach(m => { %>
-                            <option value="<%= m.month %>"><%= m.month %> - <%= m.year %></option>
-                        <% }); %>
-                    </select>
-                </div>
-                
-                <div class="flex-1 min-w-32">
-                    <label for="filterYear" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                        Jahr
-                    </label>
-                    <select 
-                        id="filterYear" 
-                        name="year"
-                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
-                        <option value="">-- Alle Jahre --</option>
-                        <% const years = [...new Set(availableMonths.map(m => m.year))].sort().reverse(); %>
-                        <% years.forEach(y => { %>
-                            <option value="<%= y %>"><%= y %></option>
-                        <% }); %>
-                    </select>
-                </div>
-                
-                <div class="flex space-x-2">
-                    <button 
-                        type="submit"
-                        class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors">
-                        Filtern
-                    </button>
-                    <a 
-                        href="/"
-                        class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
-                        Zurücksetzen
-                    </a>
-                </div>
-                
-                <div class="ml-auto">
-                    <button
-                        type="button"
-                        id="exportPdfBtn"
-                        class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors flex items-center space-x-2">
-                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-                        </svg>
-                        <span>PDF Export</span>
-                    </button>
-                </div>
-                
-                <div>
-                    <button
-                        type="button"
-                        id="addApplicationBtn"
-                        class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors flex items-center space-x-2">
-                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
-                        </svg>
-                        <span>Bewerbung hinzufügen</span>
-                    </button>
-                </div>
-            </form>
+            <div class="flex gap-2">
+                <button
+                    type="button"
+                    id="exportPdfBtn"
+                    class="inline-flex items-center gap-2 rounded-full px-4 py-3 text-sm font-medium text-white shadow-sm transition-colors bg-emerald-600 hover:bg-emerald-700">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.9A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13v6m-3-3h6"></path>
+                    </svg>
+                    <span>PDF Export</span>
+                </button>
+                <button
+                    type="button"
+                    id="addApplicationBtn"
+                    class="inline-flex items-center gap-2 rounded-full px-4 py-3 text-sm font-medium text-white shadow-sm transition-colors bg-blue-600 hover:bg-blue-700">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                    </svg>
+                    <span>Bewerbung hinzufügen</span>
+                </button>
+            </div>
         </div>
 
         <!-- Upcoming appointments (from the application calendar) -->