feat: enhance export interface with improved filtering and mobile design

- Remove unnecessary search bar from export history interface
- Implement server-side filtering for export type and status with URL persistence
- Fix Export All button color consistency with other export buttons
- Add comprehensive mobile responsive design with improved spacing
- Enhance touch-friendly interface with larger tap targets and better spacing
- Improve visual hierarchy with increased margins and padding on mobile devices
- Add filter state persistence in URL parameters for better UX

UI Improvements:
- Export cards: Increased spacing and padding for better readability
- Mobile layout: Single column design with generous spacing
- Tablet layout: Adaptive grid with improved touch targets
- Filters: Server-side processing for better performance
- Buttons: Consistent primary color scheme across all export actions

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: JohanDevl

pkg/web/handlers/exports.go

@@ -224,6 +224,10 @@ func (h *ExportsHandler) prepareExportsData(r *http.Request) *ExportsData {
 	page := h.getIntParam(r, "page", 1)
 	limit := h.getIntParam(r, "limit", 10)
 
+	// Parse filter parameters
+	typeFilter := r.URL.Query().Get("type")
+	statusFilter := r.URL.Query().Get("status")
+	
 	// Validate parameters
 	if page < 1 {
 		page = 1
@@ -234,9 +238,12 @@ func (h *ExportsHandler) prepareExportsData(r *http.Request) *ExportsData {
 		limit = 100
 	}
 
-	// Scan for existing export files with pagination
+	// Scan for existing export files with filtering
 	allExports := h.scanExportFiles()
-	totalItems := len(allExports)
+	
+	// Apply filters
+	filteredExports := h.applyFilters(allExports, typeFilter, statusFilter)
+	totalItems := len(filteredExports)
 	totalPages := (totalItems + limit - 1) / limit
 
 	if totalPages == 0 {
@@ -255,7 +262,7 @@ func (h *ExportsHandler) prepareExportsData(r *http.Request) *ExportsData {
 	}
 
 	if start < totalItems {
-		data.Exports = allExports[start:end]
+		data.Exports = filteredExports[start:end]
 	} else {
 		data.Exports = []ExportItem{}
 	}
@@ -287,6 +294,24 @@ func (h *ExportsHandler) getIntParam(r *http.Request, key string, defaultValue i
 	return defaultValue
 }
 
+func (h *ExportsHandler) applyFilters(exports []ExportItem, typeFilter, statusFilter string) []ExportItem {
+	if typeFilter == "" && statusFilter == "" {
+		return exports
+	}
+	
+	var filtered []ExportItem
+	for _, export := range exports {
+		matchesType := typeFilter == "" || export.Type == typeFilter
+		matchesStatus := statusFilter == "" || export.Status == statusFilter
+		
+		if matchesType && matchesStatus {
+			filtered = append(filtered, export)
+		}
+	}
+	
+	return filtered
+}
+
 func (h *ExportsHandler) buildPaginationData(currentPage, totalPages, totalItems, itemsPerPage int) *PaginationData {
 	pagination := &PaginationData{
 		CurrentPage:  currentPage,

web/static/css/style.css

@@ -520,6 +520,20 @@ body {
   gap: 1rem;
   margin-bottom: 2rem;
   flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.controls-left {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.controls-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .search-input,
@@ -1309,3 +1323,175 @@ body {
     page-break-inside: avoid;
   }
 }
+
+/* Enhanced Mobile Responsive Design for Exports */
+@media (max-width: 768px) {
+  .export-types {
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 1.5rem;
+    padding: 0 1rem;
+    margin-bottom: 2rem;
+  }
+  
+  .export-type-card {
+    width: 100%;
+    min-height: 170px;
+    padding: 1.25rem;
+  }
+  
+  .export-type-card h3 {
+    font-size: 1rem;
+    margin: 0.5rem 0;
+  }
+  
+  .export-type-card p {
+    font-size: 0.85rem;
+    margin-bottom: 1rem;
+  }
+  
+  .history-controls {
+    flex-direction: column;
+    gap: 1.25rem;
+    margin-bottom: 2.5rem;
+  }
+  
+  .controls-left {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+  }
+  
+  .controls-right {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+  
+  .filter-select, .page-size-select {
+    width: 100%;
+    font-size: 1rem;
+    padding: 0.75rem;
+  }
+  
+  .page-size-label {
+    white-space: nowrap;
+    margin-right: 0.5rem;
+  }
+  
+  .export-item {
+    flex-direction: column;
+    gap: 1.25rem;
+    margin-bottom: 1.5rem;
+    padding: 1.25rem;
+  }
+  
+  .export-actions-container {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  
+  .btn {
+    flex: 1;
+    min-width: 120px;
+    text-align: center;
+  }
+  
+  .pagination {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.25rem;
+  }
+  
+  .pagination-btn {
+    min-width: 40px;
+    padding: 0.5rem 0.75rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .container {
+    padding: 1rem 1rem;
+  }
+  
+  .export-actions {
+    margin-bottom: 2.5rem;
+  }
+  
+  .export-types {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+    padding: 0 0.75rem;
+    margin-bottom: 2.5rem;
+  }
+  
+  .export-type-card {
+    width: 100%;
+    min-height: 160px;
+    padding: 1.5rem;
+  }
+  
+  .export-icon {
+    font-size: 1.5rem;
+  }
+  
+  .export-type-card h3 {
+    font-size: 0.95rem;
+  }
+  
+  .export-type-card p {
+    font-size: 0.85rem;
+    margin-bottom: 1rem;
+  }
+  
+  .btn {
+    padding: 0.75rem 1rem;
+    font-size: 0.9rem;
+  }
+  
+  .controls-right {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: stretch;
+  }
+  
+  .page-size-label {
+    text-align: center;
+    margin-right: 0;
+    margin-bottom: 0.5rem;
+  }
+  
+  .export-details {
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: flex-start;
+  }
+  
+  .export-details span {
+    font-size: 0.85rem;
+  }
+  
+  .pagination-btn {
+    min-width: 35px;
+    padding: 0.4rem 0.6rem;
+    font-size: 0.85rem;
+  }
+  
+  .pagination-info {
+    font-size: 0.85rem;
+    text-align: center;
+    margin-top: 1rem;
+  }
+  
+  .export-actions-container {
+    flex-direction: column;
+  }
+  
+  .btn {
+    width: 100%;
+    margin: 0;
+  }
+}

web/templates/exports.html

@@ -105,7 +105,7 @@ <h3>Watchlist</h3>
         <div class="export-icon">📦</div>
         <h3>Complete Export</h3>
         <p>Export all your data</p>
-        <button class="btn btn-secondary export-btn" data-type="all">
+        <button class="btn btn-primary export-btn" data-type="all">
           Export All
         </button>
       </div>
@@ -149,12 +149,6 @@ <h2>📋 Export History</h2>
 
     <div class="history-controls">
       <div class="controls-left">
-        <input
-          type="text"
-          id="search-exports"
-          placeholder="Search exports..."
-          class="search-input"
-        />
         <select id="filter-type" class="filter-select">
           <option value="">All Types</option>
           <option value="watched">Watched</option>
@@ -428,11 +422,9 @@ <h3>No exports found</h3>
     });
 
     // Add current filters
-    const searchValue = document.getElementById('search-exports').value;
     const typeFilter = document.getElementById('filter-type').value;
     const statusFilter = document.getElementById('filter-status').value;
 
-    if (searchValue) params.append('search', searchValue);
     if (typeFilter) params.append('type', typeFilter);
     if (statusFilter) params.append('status', statusFilter);
 
@@ -469,6 +461,20 @@ <h3>No exports found</h3>
       const newUrl = new URL(window.location);
       newUrl.searchParams.set('page', currentPage);
       newUrl.searchParams.set('limit', currentPageSize);
+      
+      // Update filter parameters in URL
+      if (typeFilter) {
+        newUrl.searchParams.set('type', typeFilter);
+      } else {
+        newUrl.searchParams.delete('type');
+      }
+      
+      if (statusFilter) {
+        newUrl.searchParams.set('status', statusFilter);
+      } else {
+        newUrl.searchParams.delete('status');
+      }
+      
       window.history.replaceState({}, '', newUrl);
     })
     .catch(error => {
@@ -739,8 +745,32 @@ <h4>${typeLabel}</h4>
     }
   }
 
+  // Initialize filters from URL parameters
+  function initializeFiltersFromURL() {
+    const urlParams = new URLSearchParams(window.location.search);
+    
+    const typeFilter = urlParams.get('type');
+    const statusFilter = urlParams.get('status');
+    
+    if (typeFilter) {
+      const typeSelect = document.getElementById('filter-type');
+      if (typeSelect) {
+        typeSelect.value = typeFilter;
+      }
+    }
+    
+    if (statusFilter) {
+      const statusSelect = document.getElementById('filter-status');
+      if (statusSelect) {
+        statusSelect.value = statusFilter;
+      }
+    }
+  }
+
   // Export button handlers
   document.addEventListener("DOMContentLoaded", function () {
+    // Initialize filters from URL
+    initializeFiltersFromURL();
     document.querySelectorAll(".export-btn").forEach((btn) => {
       btn.addEventListener("click", function () {
         const type = this.dataset.type;
@@ -772,15 +802,7 @@ <h4>${typeLabel}</h4>
       loadPage(1, newPageSize); // Reset to page 1 when changing page size
     });
 
-    // Search and filter - debounced to avoid too many requests
-    let searchTimeout;
-    document.getElementById("search-exports").addEventListener("input", function() {
-      clearTimeout(searchTimeout);
-      searchTimeout = setTimeout(() => {
-        loadPage(1); // Reset to page 1 when searching
-      }, 500);
-    });
-    
+    // Filter handlers
     document.getElementById("filter-type").addEventListener("change", function() {
       loadPage(1); // Reset to page 1 when filtering
     });
@@ -805,26 +827,6 @@ <h4>${typeLabel}</h4>
       });
   }
 
-  function filterExports() {
-    const search = document
-      .getElementById("search-exports")
-      .value.toLowerCase();
-    const typeFilter = document.getElementById("filter-type").value;
-    const statusFilter = document.getElementById("filter-status").value;
-
-    document.querySelectorAll(".export-item").forEach((item) => {
-      const type = item.dataset.type;
-      const status = item.dataset.status;
-      const text = item.textContent.toLowerCase();
-
-      const matchesSearch = !search || text.includes(search);
-      const matchesType = !typeFilter || type === typeFilter;
-      const matchesStatus = !statusFilter || status === statusFilter;
-
-      item.style.display =
-        matchesSearch && matchesType && matchesStatus ? "block" : "none";
-    });
-  }
 </script>
   </div>
     </main>