From f4996913455be17a4615d6bf458a8d4d5aa2aa45 Mon Sep 17 00:00:00 2001
From: Alihan <alihandikel@gmail.com>
Date: Mon, 13 Oct 2025 00:51:56 +0300
Subject: [PATCH] Improve nginx configuration and compression job UX

- Add security headers (X-Frame-Options, X-Content-Type-Options, X-XSS-Protection)
- Implement proper cache control for static assets and prevent index.html caching
- Fix SSE handling to properly fetch new compression jobs
- Immediately refresh job list after queuing compression for better UX feedback
---
 .claude/settings.local.json              |  3 ++-
 frontend/Dockerfile                      |  3 ++-
 frontend/nginx-main.conf                 | 29 ++++++++++++++++++++++++
 frontend/nginx.conf                      | 20 +++++++++++++++-
 frontend/src/App.jsx                     |  4 +++-
 frontend/src/hooks/useCompressionJobs.js | 12 ++++++++++
 6 files changed, 67 insertions(+), 4 deletions(-)
 create mode 100644 frontend/nginx-main.conf

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index ed4a461..93ab98b 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -5,7 +5,8 @@
       "mcp__playwright__browser_console_messages",
       "mcp__playwright__browser_click",
       "mcp__playwright__browser_evaluate",
-      "mcp__playwright__browser_navigate"
+      "mcp__playwright__browser_navigate",
+      "mcp__playwright__browser_wait_for"
     ],
     "deny": [],
     "ask": []
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 30f5811..20b9950 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -21,7 +21,8 @@ FROM nginx:alpine
 # Copy built assets from builder stage
 COPY --from=builder /app/dist /usr/share/nginx/html
 
-# Copy nginx configuration
+# Copy nginx configurations
+COPY nginx-main.conf /etc/nginx/nginx.conf
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 
 # Expose port
diff --git a/frontend/nginx-main.conf b/frontend/nginx-main.conf
new file mode 100644
index 0000000..3229d8a
--- /dev/null
+++ b/frontend/nginx-main.conf
@@ -0,0 +1,29 @@
+user  nginx;
+worker_processes  2;
+
+error_log  /var/log/nginx/error.log notice;
+pid        /var/run/nginx.pid;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /var/log/nginx/access.log  main;
+
+    sendfile        on;
+    #tcp_nopush     on;
+
+    keepalive_timeout  65;
+
+    #gzip  on;
+
+    include /etc/nginx/conf.d/*.conf;
+}
diff --git a/frontend/nginx.conf b/frontend/nginx.conf
index edfb5bd..07cb0ff 100644
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@@ -5,9 +5,27 @@ server {
     root /usr/share/nginx/html;
     index index.html;
 
-    # Serve static files
+    # Serve static files with proper cache control
     location / {
         try_files $uri $uri/ /index.html;
+
+        # Security headers for all responses
+        add_header X-Content-Type-Options "nosniff" always;
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        add_header X-XSS-Protection "1; mode=block" always;
+
+        # No cache for index.html - always check for updates
+        location = /index.html {
+            add_header Cache-Control "private, no-cache, no-store, must-revalidate";
+            add_header Pragma "no-cache";
+            add_header Expires "0";
+        }
+
+        # Cache assets with hash in filename (private for single-user app)
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+            expires 1y;
+            add_header Cache-Control "private, immutable";
+        }
     }
 
     # Proxy API requests to backend
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 9c576af..307aa31 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -7,7 +7,7 @@ import { formatFileSize } from './utils/formatters'
 
 function App() {
   const { isHealthy, error: healthError } = useSystemHealth()
-  const { jobs } = useCompressionJobs()
+  const { jobs, fetchJobs } = useCompressionJobs()
   const [locations, setLocations] = useState([])
   const [selectedLocation, setSelectedLocation] = useState(null)
   const [dates, setDates] = useState([])
@@ -205,6 +205,8 @@ function App() {
       })
 
       if (response.ok) {
+        // Immediately refresh jobs list to show the new job
+        await fetchJobs()
         const hasActiveJobs = jobs.some(j => ['pending', 'processing', 'validating'].includes(j.status))
         if (hasActiveJobs) {
           showToast('Compression job queued successfully!', 'success')
diff --git a/frontend/src/hooks/useCompressionJobs.js b/frontend/src/hooks/useCompressionJobs.js
index 07ee149..e925994 100644
--- a/frontend/src/hooks/useCompressionJobs.js
+++ b/frontend/src/hooks/useCompressionJobs.js
@@ -31,12 +31,24 @@ export function useCompressionJobs() {
       const updates = JSON.parse(event.data)
       setJobs(prevJobs => {
         const updatedJobs = [...prevJobs]
+        let hasNewJobs = false
+
         updates.forEach(update => {
           const index = updatedJobs.findIndex(j => j.job_id === update.job_id)
           if (index !== -1) {
+            // Update existing job
             updatedJobs[index] = { ...updatedJobs[index], ...update }
+          } else {
+            // New job detected - we need complete data
+            hasNewJobs = true
           }
         })
+
+        // Trigger full fetch if new jobs detected
+        if (hasNewJobs) {
+          fetchJobs()
+        }
+
         return updatedJobs
       })
     })