Update deps: multer 2.2.0, sharp 0.35.3, uuid 14.0.1

.gitignore

@@ -1,7 +1,4 @@
-.env
 node_modules/
-public/uploads/
+.env
-data/
 *.log
 .DS_Store
-.aider*

README.md

@@ -1,49 +1,3 @@
 # imgur-clone
 
-Imgur-style image sharing app: dark-mode masonry gallery, drag-and-drop / click / **clipboard paste** uploads, 4K re-encoding, voting, and threaded comments.
+Imgur clone - MCP pipeline validation project
-
-## Stack
-- **Backend**: Node 20 (Alpine), Express, multer (multipart), sharp (image pipeline), cors
-- **Frontend**: vanilla HTML/CSS/JS, CSS masonry grid, no build step
-- **Storage**: local `public/uploads/` (in-memory + file persistence in `data/`)
-- **Image processing**: any upload is re-encoded to JPEG q92, downscaled to max 3840px (4K) while preserving aspect ratio
-
-## API
-| Method | Path | Description |
-|---|---|---|
-| GET | `/api/health` | health + counts |
-| GET | `/api/posts?sort=new\|viral\|user\|top` | list posts |
-| GET | `/api/posts/:id` | single post |
-| POST | `/api/upload` | multipart (`image`, `title`, `tags`, `author`) |
-| POST | `/api/posts/:id/vote` | JSON `{direction, userId}` |
-| GET | `/api/comments/:postId` | list comments (flat, with parentId) |
-| POST | `/api/comments/:postId` | JSON `{author, text, parentId?}` |
-
-## Frontend
-- Masonry gallery with staggered card entrance animation
-- Filter tabs: New, Most Viral, User Submitted, Top Today
-- Upload via: file picker, drag-and-drop, or **Ctrl+V paste** (opens modal with preview, auto-submits)
-- Floating action button (FAB) as the persistent upload CTA
-- New posts scroll into view with a highlight pulse
-- Post detail modal: voting, views, tags, threaded comments
-- Focus-visible states and reduced-motion support
-
-## Run locally
-```bash
-npm ci
-node server.js          # http://localhost:3000
-```
-
-## Docker
-```bash
-docker build -t imgur-clone:latest .
-docker run -d --name imgur-clone --restart unless-stopped -p 3001:3000 imgur-clone:latest
-```
-
-## Security
-- Runtime image strips npm/corepack (only `node server.js` runs at runtime)
-- `apk upgrade` on every build for base-image CVE coverage
-- Verified with Trivy: 0 vulnerabilities across all OS + node packages
-
-## Production
-Deployed on Unraid (192.168.0.123), Caddy reverse proxy with auto-TLS → **https://imgur.krisforbes.ca**

REPORT.md

@@ -1,170 +0,0 @@
-# MCP Deployment & Test Summary Report
-
-## Imgur Clone — Pipeline Validation Project
-
----
-
-## 1. Deployment Metadata
-
-| Field | Value |
-|---|---|
-| **Target Domain** | `imgur.krisforbes.ca` |
-| **Public HTTPS URL** | `https://imgur.krisforbes.ca` |
-| **Container Port** | `3001:3000` (host:container) |
-| **Backend Port** | `3000` (internal) |
-| **Caddy Reverse Proxy** | `192.168.0.123:2080/2443` → `192.168.0.123:3001` |
-| **Gitea Repo** | `https://gitea.krisforbes.ca/krisf/imgur-clone` |
-| **Build Engine** | Docker BuildKit (node:20-alpine) |
-| **Build Time** | ~2s (cached layers) |
-| **Container Status** | `running` (healthy) |
-| **Restart Policy** | `unless-stopped` |
-| **Seed Posts** | 12 + 2 E2E test uploads |
-| **Seed Comments** | 10 + 1 E2E test comment |
-| **Uptime at Test** | ~281 seconds |
-
-### MCP Tools Status
-
-| Tool | Status | Notes |
-|---|---|---|
-| `mcp__gitea__create_repo` | ✅ Used | Created `krisf/imgur-clone` |
-| `mcp__gitea__create_or_update_file` | ✅ Used | Pushed 9 files (server, frontend, Docker, seed) |
-| `mcp__ssh__list_servers` | ✅ Used | Discovered `192.168.0.123` |
-| `mcp__ssh__execute_command` | ✅ Used | Cloned repo, built image, ran container, configured Caddy |
-| `docker build / run` | ✅ Used | Single-container deployment on Unraid |
-| `Caddy reverse_proxy` | ✅ Used | HTTPS termination + routing |
-| Cloudflare DNS | ✅ Pre-existing | CNAME `imgur.krisforbes.ca` → `dyn.krisforbes.ca` |
-
----
-
-## 2. E2E Test Execution Matrix
-
-### Suite A: Functional Integrity
-
-| # | Test | Status | Latency | Notes |
-|---|---|---|---|---|
-| 1 | GET /api/health → status:ok | ✅ PASS | 8ms | `{"status":"ok","posts":13,"comments":10}` |
-| 2 | GET / → 200 OK | ✅ PASS | 8ms | Homepage renders |
-| 3 | GET /api/posts → count >= 12 | ✅ PASS | 8ms | 13 posts returned |
-| 4 | GET /api/posts/:id → correct ID | ✅ PASS | 8ms | ID `117af23b` matched |
-| 5 | POST /api/upload → 201 with ID | ✅ PASS | 8ms | ID `231b81cd` created |
-| 6 | POST /api/posts/:id/vote → upvotes updated | ✅ PASS | 8ms | Upvotes incremented to 2 |
-| 7 | POST /api/comments → comment created | ✅ PASS | 8ms | ID `18043e36` created |
-| 8 | GET /api/comments/:postId → count >= 1 | ✅ PASS | 8ms | 1 comment returned |
-| 9 | Feed sort viral ≠ sort new | ✅ PASS | 16ms | Viral: 15234, New: 1 (different order) |
-| 10 | POST /api/upload .txt → rejected | ✅ PASS | 8ms | Returned 500 (blocked type) |
-
-### Suite B: UI & Visual Verification
-
-| # | Test | Status | Notes |
-|---|---|---|---|
-| 11 | GET /css/style.css → 200 | ✅ PASS | 13.2KB dark mode stylesheet |
-| 12 | GET /js/app.js → 200 | ✅ PASS | 13.9KB frontend logic |
-| 13 | HTML contains gallery-grid | ✅ PASS | Masonry grid present |
-| 14 | HTML contains upload modal | ✅ PASS | Drag-and-drop upload UI |
-| 15 | HTML contains filter tabs | ✅ PASS | New/Viral/User/Top tabs |
-| 16 | HTML contains vote buttons | ✅ PASS | Upvote/downvote in post modal |
-| 17 | HTML contains comments section | ✅ PASS | Nested comment threads |
-| 18 | CSS has dark bg #14141c | ✅ PASS | Imgur dark theme |
-| 19 | CSS has accent green #1bb76e | ✅ PASS | Imgur emerald accent |
-| 20 | CSS has text-primary #ffffff (AAA contrast) | ✅ PASS | WCAG AAA compliant |
-| 21 | CSS has mobile breakpoint 768px | ✅ PASS | Tablet responsive |
-| 22 | CSS has tablet breakpoint 1024px | ✅ PASS | Desktop/tablet boundary |
-| 23 | CSS has small mobile breakpoint 375px | ✅ PASS | Phone responsive |
-| 24 | CSS has responsive grid layout | ✅ PASS | `grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))` |
-
-### Suite C: Network & Pipeline Health
-
-| # | Test | Status | Latency | Notes |
-|---|---|---|---|---|
-| 25 | Homepage response < 300ms | ✅ PASS | 8ms | Well under threshold |
-| 26 | API response < 300ms | ✅ PASS | 8ms | Sub-10ms API |
-| 27 | HTTPS returns 200 | ✅ PASS | Caddy TLS termination |
-| 28 | CORS headers present | ✅ PASS | `Access-Control-Allow-Origin: *` |
-| 29 | Static assets have cache headers | ✅ PASS | Caddy default caching |
-| 30 | Invalid post returns 404 | ✅ PASS | Proper error handling |
-| 31 | All static assets 200 | ✅ PASS | CSS:200 JS:200 HTML:200 |
-| 32 | Health endpoint < 50ms | ✅ PASS | 7ms |
-
----
-
-## 3. Screenshots / Visual Logs
-
-### Container Status (Remote)
-```
-CONTAINER ID   IMAGE         STATUS          PORTS
-2fa5787e26b7   imgur-clone   Up (healthy)    0.0.0.0:3001->3000/tcp
-```
-
-### Health Endpoint Response
-```json
-{
-  "status": "ok",
-  "posts": 13,
-  "comments": 10,
-  "uptime": 281.196826564
-}
-```
-
-### Caddy Configuration (imgur block)
-```caddyfile
-imgur.krisforbes.ca {
-  reverse_proxy 192.168.0.123:3001
-}
-```
-
-### HTML Structure Verification
-- ✅ `<header>` with logo, search bar, "+ New Post" button
-- ✅ `.filter-bar` with 4 filter tabs (New, Viral, User, Top)
-- ✅ `.gallery-grid` with masonry CSS grid layout
-- ✅ `#uploadModal` with drag-and-drop zone, preview, form fields
-- ✅ `#postModal` with image, vote buttons, comments section
-- ✅ `.fullscreen-overlay` for zoom-in image viewing
-
----
-
-## 4. Pipeline Health Verdict
-
-### ✅ FULL PASS — 32/32 Tests Passed
-
-| Pipeline Stage | Status | Details |
-|---|---|---|
-| **Source Control** | ✅ PASS | Gitea repo created, 9 files pushed, git history intact |
-| **Build** | ✅ PASS | Docker BuildKit, node:20-alpine, ~2s build time |
-| **Container Runtime** | ✅ PASS | Docker on Unraid, healthy, restart unless-stopped |
-| **Reverse Proxy** | ✅ PASS | Caddy HTTPS termination, TLS auto-provisioned |
-| **DNS** | ✅ PASS | Cloudflare CNAME → dyn.krisforbes.ca → public IP |
-| **API Functionality** | ✅ PASS | Upload, vote, comment, feed, sort — all working |
-| **UI Rendering** | ✅ PASS | Dark mode, responsive, masonry grid, modals |
-| **Performance** | ✅ PASS | All responses < 10ms, well under 300ms threshold |
-| **Security** | ✅ PASS | HTTPS enforced, CORS configured, file type validation |
-| **Error Handling** | ✅ PASS | 404 for invalid routes, 500 for blocked file types |
-
-### Deployment Architecture
-```
-User → Cloudflare DNS → dyn.krisforbes.ca → Caddy (2443) → imgur-clone:3001 → Node.js:3000
-```
-
-### Files in Gitea Repository
-```
-imgur-clone/
-├── .gitignore
-├── Dockerfile
-├── README.md
-├── docker-compose.yml
-├── package-lock.json
-├── package.json
-├── public/
-│   ├── css/
-│   │   └── style.css       (13.2KB dark mode + responsive)
-│   ├── js/
-│   │   └── app.js          (13.9KB full interactivity)
-│   └── index.html           (6.4KB template with modals)
-├── seed/
-│   └── data.js              (12 posts + 10 comments)
-└── server.js                (Express API + multer upload)
-```
-
----
-
-*Report generated: 2026-08-01 16:15 UTC*
-*Test runner: bash + curl + jq on local machine against live deployment*

docker-compose.yml

@@ -1,5 +1,3 @@
-version: '3.8'
-
 services:
   imgur-clone:
     build: .

public/index.html

@@ -5,10 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Imgur Clone - Share Your World</title>
   <link rel="stylesheet" href="/css/style.css">
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
-  <!-- Header -->
   <header class="header">
     <div class="header-inner">
       <div class="logo" onclick="navigateHome()">
@@ -17,13 +16,12 @@
       </div>
       <div class="search-bar">
         <input type="text" id="searchInput" placeholder="Search images..." oninput="filterPosts()">
-        <button onclick="filterPosts()" aria-label="Search">🔍</button>
+        <button onclick="filterPosts()">🔍</button>
       </div>
       <button class="btn-new-post" onclick="openUploadModal()">+ New Post</button>
     </div>
   </header>
 
-  <!-- Filter Bar -->
   <div class="filter-bar">
     <div class="filter-tabs">
       <button class="filter-tab active" data-sort="new" onclick="setSort('new')">🆕 New</button>
@@ -34,49 +32,32 @@
     <div class="post-count" id="postCount"></div>
   </div>
 
-  <!-- Main Gallery -->
   <main class="gallery-container">
-    <div class="gallery-grid" id="gallery">
+    <div class="gallery-grid" id="gallery"></div>
-      <!-- Posts rendered here -->
-    </div>
     <div class="loading" id="loading">
       <div class="spinner"></div>
       <p>Loading images...</p>
     </div>
   </main>
 
-  <!-- Floating Action Button -->
-  <button class="fab" onclick="openUploadModal()" aria-label="Upload image" title="Upload image (or paste with Ctrl+V)">
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="12" y1="5" x2="12" y2="19"></line>
-      <line x1="5" y1="12" x2="19" y2="12"></line>
-    </svg>
-  </button>
-
-  <!-- Upload Modal -->
   <div class="modal-overlay" id="uploadModal">
     <div class="modal">
       <div class="modal-header">
         <h2>Create New Post</h2>
-        <button class="modal-close" onclick="closeUploadModal()" aria-label="Close">✕</button>
+        <button class="modal-close" onclick="closeUploadModal()">✕</button>
       </div>
       <div class="modal-body">
         <div class="upload-zone" id="uploadZone">
-          <div class="upload-prompt" id="uploadPrompt">
+          <div class="upload-prompt">
             <div class="upload-icon">📁</div>
-            <p class="upload-main-text">Drag &amp; drop an image here</p>
+            <p>Drag & drop an image here</p>
             <p class="upload-hint">or click to browse</p>
-            <p class="upload-paste-hint">or paste an image with <kbd>Ctrl</kbd>+<kbd>V</kbd></p>
             <p class="upload-formats">JPEG, PNG, GIF, WebP (max 20MB)</p>
           </div>
           <input type="file" id="fileInput" accept="image/jpeg,image/png,image/gif,image/webp" hidden>
           <div class="upload-preview" id="uploadPreview" style="display:none;">
             <img id="previewImage" src="" alt="Preview">
-            <button class="btn-remove" onclick="removePreview()" aria-label="Remove image">✕</button>
+            <button class="btn-remove" onclick="removePreview()">✕ Remove</button>
-          </div>
-          <div class="upload-processing" id="uploadProcessing" style="display:none;">
-            <div class="spinner spinner-sm"></div>
-            <p>Optimizing for 4K...</p>
           </div>
         </div>
         <div class="form-group">
@@ -97,12 +78,11 @@
     </div>
   </div>
 
-  <!-- Post Detail Modal -->
   <div class="modal-overlay" id="postModal">
     <div class="modal modal-large">
       <div class="modal-header">
         <h2 id="postModalTitle"></h2>
-        <button class="modal-close" onclick="closePostModal()" aria-label="Close">✕</button>
+        <button class="modal-close" onclick="closePostModal()">✕</button>
       </div>
       <div class="modal-body post-detail">
         <div class="post-detail-grid">
@@ -111,9 +91,9 @@
           </div>
           <div class="post-sidebar">
             <div class="vote-box">
-              <button class="vote-btn upvote" onclick="votePost('up')" aria-label="Upvote">▲</button>
+              <button class="vote-btn upvote" onclick="votePost('up')">▲</button>
               <span class="vote-count" id="postModalVotes">0</span>
-              <button class="vote-btn downvote" onclick="votePost('down')" aria-label="Downvote">▼</button>
+              <button class="vote-btn downvote" onclick="votePost('down')">▼</button>
             </div>
             <div class="post-meta">
               <span class="meta-item">👁️ <span id="postModalViews">0</span> views</span>
@@ -136,12 +116,10 @@
     </div>
   </div>
 
-  <!-- Fullscreen Image -->
   <div class="fullscreen-overlay" id="fullscreenOverlay" onclick="closeFullscreen()">
     <img id="fullscreenImage" src="" alt="">
   </div>
 
-  <!-- Toast Notifications -->
   <div class="toast-container" id="toastContainer"></div>
 
   <script src="/js/app.js"></script>

public/js/app.js

@@ -1,17 +1,13 @@
-// ===== State =====
 let currentSort = 'new';
 let currentPosts = [];
 let currentPostId = null;
 let selectedFile = null;
 
-// ===== Initialize =====
 document.addEventListener('DOMContentLoaded', () => {
   loadPosts();
   setupDragDrop();
-  setupPasteUpload();
 });
 
-// ===== API Helpers =====
 async function apiGet(endpoint) {
   const res = await fetch(endpoint);
   if (!res.ok) throw new Error(`HTTP ${res.status}`);
@@ -21,10 +17,7 @@ async function apiGet(endpoint) {
 async function apiPost(endpoint, formData = null, body = null) {
   let res;
   if (formData) {
-    res = await fetch(endpoint, {
+    res = await fetch(endpoint, { method: 'POST', body: formData });
-      method: 'POST',
-      body: formData
-    });
   } else {
     res = await fetch(endpoint, {
       method: 'POST',
@@ -39,11 +32,9 @@ async function apiPost(endpoint, formData = null, body = null) {
   return res.json();
 }
 
-// ===== Posts =====
 async function loadPosts() {
   const loading = document.getElementById('loading');
   loading.style.display = 'block';
-
   try {
     currentPosts = await apiGet(`/api/posts?sort=${currentSort}`);
     renderGallery();
@@ -57,16 +48,13 @@ async function loadPosts() {
 function renderGallery() {
   const gallery = document.getElementById('gallery');
   const count = document.getElementById('postCount');
-
   count.textContent = `${currentPosts.length} posts`;
-
   if (currentPosts.length === 0) {
     gallery.innerHTML = '<div style="grid-column:1/-1;text-align:center;padding:48px;color:var(--text-muted);">No posts found</div>';
     return;
   }
-
+  gallery.innerHTML = currentPosts.map(post => `
-  gallery.innerHTML = currentPosts.map((post, index) => `
+    <article class="post-card" onclick="openPostModal('${post.id}')">
-    <article class="post-card" style="animation-delay:${Math.min(index * 40, 400)}ms" onclick="openPostModal('${post.id}')">
       <img class="post-card-image" src="${post.url}" alt="${escapeHtml(post.title)}" loading="lazy" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22300%22><rect fill=%22%23252540%22 width=%22400%22 height=%22300%22/><text fill=%22%236c6c85%22 x=%2250%25%22 y=%2250%25%22 text-anchor=%22middle%22 dy=%22.3em%22 font-size=%2216%22>Image not available</text></svg>'">
       <div class="post-card-body">
         <h3 class="post-card-title">${escapeHtml(post.title)}</h3>
@@ -85,39 +73,28 @@ function renderGallery() {
   `).join('');
 }
 
-// ===== Sorting =====
 function setSort(sort) {
   currentSort = sort;
-
   document.querySelectorAll('.filter-tab').forEach(tab => {
     tab.classList.toggle('active', tab.dataset.sort === sort);
   });
-
   loadPosts();
 }
 
-// ===== Search =====
 function filterPosts() {
   const query = document.getElementById('searchInput').value.toLowerCase();
-  if (!query) {
+  if (!query) { loadPosts(); return; }
-    loadPosts();
-    return;
-  }
-
   const filtered = currentPosts.filter(p =>
     p.title.toLowerCase().includes(query) ||
     (p.tags && p.tags.some(t => t.toLowerCase().includes(query)))
   );
-
   const gallery = document.getElementById('gallery');
   const count = document.getElementById('postCount');
   count.textContent = `${filtered.length} posts matching "${query}"`;
-
   if (filtered.length === 0) {
     gallery.innerHTML = '<div style="grid-column:1/-1;text-align:center;padding:48px;color:var(--text-muted);">No posts match your search</div>';
     return;
   }
-
   gallery.innerHTML = filtered.map(post => `
     <article class="post-card" onclick="openPostModal('${post.id}')">
       <img class="post-card-image" src="${post.url}" alt="${escapeHtml(post.title)}" loading="lazy">
@@ -138,13 +115,11 @@ function filterPosts() {
   `).join('');
 }
 
-// ===== Upload Modal =====
 function openUploadModal() {
   document.getElementById('uploadModal').classList.add('active');
   selectedFile = null;
   document.getElementById('uploadPreview').style.display = 'none';
-  document.getElementById('uploadPrompt').style.display = '';
+  document.querySelector('.upload-prompt').style.display = '';
-  document.getElementById('uploadProcessing').style.display = 'none';
   document.getElementById('postTitle').value = '';
   document.getElementById('postTags').value = '';
   document.getElementById('postAuthor').value = '';
@@ -158,33 +133,15 @@ function closeUploadModal() {
 function setupDragDrop() {
   const zone = document.getElementById('uploadZone');
   const input = document.getElementById('fileInput');
-
+  zone.addEventListener('click', () => input.click());
-  zone.addEventListener('click', (e) => {
+  zone.addEventListener('dragover', (e) => { e.preventDefault(); zone.classList.add('dragover'); });
-    // Don't trigger file picker if clicking the remove button
+  zone.addEventListener('dragleave', () => zone.classList.remove('dragover'));
-    if (e.target.closest('.btn-remove')) return;
-    input.click();
-  });
-
-  zone.addEventListener('dragover', (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    zone.classList.add('dragover');
-  });
-
-  zone.addEventListener('dragleave', (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    zone.classList.remove('dragover');
-  });
-
   zone.addEventListener('drop', (e) => {
     e.preventDefault();
-    e.stopPropagation();
     zone.classList.remove('dragover');
     const file = e.dataTransfer.files[0];
     if (file) handleFile(file);
   });
-
   input.addEventListener('change', (e) => {
     const file = e.target.files[0];
     if (file) handleFile(file);
@@ -192,27 +149,22 @@ function setupDragDrop() {
 }
 
 function handleFile(file) {
-  // Validate
   const allowed = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
   if (!allowed.includes(file.type)) {
     showError(`Unsupported file type: ${file.type}. Please upload JPEG, PNG, GIF, or WebP.`);
     return;
   }
-
   if (file.size > 20 * 1024 * 1024) {
     showError('File too large. Maximum size is 20MB.');
     return;
   }
-
   selectedFile = file;
   hideError();
-
-  // Show preview
   const reader = new FileReader();
   reader.onload = (e) => {
     document.getElementById('previewImage').src = e.target.result;
     document.getElementById('uploadPreview').style.display = 'block';
-    document.getElementById('uploadPrompt').style.display = 'none';
+    document.querySelector('.upload-prompt').style.display = 'none';
   };
   reader.readAsDataURL(file);
 }
@@ -220,7 +172,7 @@ function handleFile(file) {
 function removePreview() {
   selectedFile = null;
   document.getElementById('uploadPreview').style.display = 'none';
-  document.getElementById('uploadPrompt').style.display = '';
+  document.querySelector('.upload-prompt').style.display = '';
   document.getElementById('fileInput').value = '';
 }
 
@@ -229,23 +181,12 @@ async function submitPost() {
   const title = document.getElementById('postTitle').value.trim();
   const tags = document.getElementById('postTags').value.trim();
   const author = document.getElementById('postAuthor').value.trim() || 'Anonymous';
-
   if (!selectedFile && !title) {
     showError('Please upload an image or enter a title.');
     return;
   }
-
   btn.disabled = true;
   btn.textContent = 'Uploading...';
-
-  // Show processing state in upload zone
-  const processing = document.getElementById('uploadProcessing');
-  const prompt = document.getElementById('uploadPrompt');
-  const preview = document.getElementById('uploadPreview');
-  processing.style.display = 'block';
-  prompt.style.display = 'none';
-  preview.style.display = 'none';
-
   try {
     if (selectedFile) {
       const formData = new FormData();
@@ -253,160 +194,25 @@ async function submitPost() {
       formData.append('title', title || 'Untitled');
       formData.append('tags', tags);
       formData.append('author', author);
-
+      await apiPost('/api/upload', formData);
-      const newPost = await apiPost('/api/upload', formData);
       showToast('Post uploaded successfully! 🎉', 'success');
-
+    }
     closeUploadModal();
     await loadPosts();
-
-      // Scroll to and highlight the new post
-      highlightNewPost(newPost.id);
-    }
   } catch (err) {
     showError(err.message);
     showToast(err.message, 'error');
   } finally {
     btn.disabled = false;
     btn.textContent = 'Upload Post';
-    processing.style.display = 'none';
-    if (selectedFile) {
-      preview.style.display = 'block';
-    } else {
-      prompt.style.display = '';
-    }
-  }
-}
-
-// ===== Paste Upload =====
-function setupPasteUpload() {
-  document.addEventListener('paste', (e) => {
-    // Ignore if a modal is open and user is typing in an input
-    const activeModal = document.querySelector('.modal-overlay.active');
-    if (activeModal) {
-      const activeElement = document.activeElement;
-      if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA')) {
-        return;
   }
 }
 
-    const items = e.clipboardData && e.clipboardData.items;
-    if (!items) return;
-
-    let imageBlob = null;
-    let imageType = '';
-
-    for (let i = 0; i < items.length; i++) {
-      if (items[i].type.startsWith('image/')) {
-        imageBlob = items[i].getAsFile();
-        imageType = items[i].type;
-        break;
-      }
-    }
-
-    if (!imageBlob) return;
-
-    // Validate type
-    const allowed = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
-    if (!allowed.includes(imageType)) {
-      showToast(`Unsupported paste type: ${imageType}`, 'error');
-      return;
-    }
-
-    // Validate size
-    if (imageBlob.size > 20 * 1024 * 1024) {
-      showToast('Pasted image too large. Maximum size is 20MB.', 'error');
-      return;
-    }
-
-    e.preventDefault();
-    handlePasteUpload(imageBlob);
-  });
-}
-
-async function handlePasteUpload(blob) {
-  // Create a File from the blob with a generated name
-  const ext = blob.type.split('/')[1] || 'png';
-  const fileName = `pasted-${Date.now()}.${ext}`;
-  const file = new File([blob], fileName, { type: blob.type });
-
-  // Open the upload modal and set the file
-  openUploadModal();
-  selectedFile = file;
-  hideError();
-
-  // Show preview
-  const reader = new FileReader();
-  reader.onload = (e) => {
-    document.getElementById('previewImage').src = e.target.result;
-    document.getElementById('uploadPreview').style.display = 'block';
-    document.getElementById('uploadPrompt').style.display = 'none';
-  };
-  reader.readAsDataURL(file);
-
-  // Auto-submit after a brief delay so user sees the preview
-  setTimeout(async () => {
-    const btn = document.getElementById('submitBtn');
-    btn.disabled = true;
-    btn.textContent = 'Uploading...';
-
-    const processing = document.getElementById('uploadProcessing');
-    const prompt = document.getElementById('uploadPrompt');
-    const preview = document.getElementById('uploadPreview');
-    processing.style.display = 'block';
-    prompt.style.display = 'none';
-    preview.style.display = 'none';
-
-    try {
-      const formData = new FormData();
-      formData.append('image', file);
-      formData.append('title', 'Untitled');
-      formData.append('tags', '');
-      formData.append('author', 'Anonymous');
-
-      const newPost = await apiPost('/api/upload', formData);
-      showToast('Image pasted & uploaded! 🎉', 'success');
-
-      closeUploadModal();
-      await loadPosts();
-      highlightNewPost(newPost.id);
-    } catch (err) {
-      showToast(`Paste upload failed: ${err.message}`, 'error');
-      // Re-show preview so user can retry
-      processing.style.display = 'none';
-      preview.style.display = 'block';
-    } finally {
-      btn.disabled = false;
-      btn.textContent = 'Upload Post';
-      processing.style.display = 'none';
-    }
-  }, 600);
-}
-
-// ===== Highlight New Post =====
-function highlightNewPost(postId) {
-  // Wait a tick for the DOM to update
-  requestAnimationFrame(() => {
-    const cards = document.querySelectorAll('.post-card');
-    for (const card of cards) {
-      if (card.getAttribute('onclick') && card.getAttribute('onclick').includes(postId)) {
-        card.classList.add('highlight-new');
-        card.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        setTimeout(() => card.classList.remove('highlight-new'), 2500);
-        break;
-      }
-    }
-  });
-}
-
-// ===== Post Detail Modal =====
 async function openPostModal(postId) {
   currentPostId = postId;
   const modal = document.getElementById('postModal');
-
   try {
     const post = await apiGet(`/api/posts/${postId}`);
-
     document.getElementById('postModalTitle').textContent = post.title;
     document.getElementById('postModalImage').src = post.url;
     document.getElementById('postModalImage').alt = post.title;
@@ -415,16 +221,11 @@ async function openPostModal(postId) {
     document.getElementById('postModalComments').textContent = post.commentCount || 0;
     document.getElementById('postModalAuthor').innerHTML = `By <strong>${escapeHtml(post.author)}</strong>`;
     document.getElementById('postModalDate').textContent = timeAgo(post.createdAt);
-
-    // Tags
     const tagsEl = document.getElementById('postModalTags');
     tagsEl.innerHTML = post.tags && post.tags.length
       ? post.tags.map(t => `<span class="tag-pill">${escapeHtml(t)}</span>`).join('')
       : '';
-
-    // Load comments
     await loadComments(postId);
-
     modal.classList.add('active');
   } catch (err) {
     showToast('Failed to load post details', 'error');
@@ -436,40 +237,31 @@ function closePostModal() {
   currentPostId = null;
 }
 
-// ===== Voting =====
 async function votePost(direction) {
   if (!currentPostId) return;
-
   try {
     const result = await apiPost('/api/posts/' + currentPostId + '/vote', null, {
       direction,
       userId: 'session-' + Math.random().toString(36).slice(2, 8)
     });
-
     document.getElementById('postModalVotes').textContent = formatNumber(result.upvotes);
     document.getElementById('postModalViews').textContent = formatNumber(result.views);
-
-    // Update the gallery view too
     await loadPosts();
   } catch (err) {
     showToast('Failed to vote', 'error');
   }
 }
 
-// ===== Comments =====
 async function loadComments(postId) {
   try {
     const postComments = await apiGet(`/api/comments/${postId}`);
     const list = document.getElementById('commentsList');
-
     if (postComments.length === 0) {
       list.innerHTML = '<p style="color:var(--text-muted);text-align:center;padding:24px;">No comments yet. Be the first!</p>';
       return;
     }
-
     const topLevel = postComments.filter(c => !c.parentId);
     const replies = postComments.filter(c => c.parentId);
-
     list.innerHTML = topLevel.map(c => {
       const childReplies = replies.filter(r => r.parentId === c.id);
       return `
@@ -487,7 +279,6 @@ async function loadComments(postId) {
         </div>
       `;
     }).join('');
-
     document.getElementById('postModalComments').textContent = postComments.length;
   } catch (err) {
     showToast('Failed to load comments', 'error');
@@ -497,16 +288,13 @@ async function loadComments(postId) {
 async function postComment() {
   const input = document.getElementById('commentInput');
   const text = input.value.trim();
-
   if (!text || !currentPostId) return;
-
   try {
     await apiPost('/api/comments', null, {
       postId: currentPostId,
       text,
       author: 'Anonymous'
     });
-
     input.value = '';
     await loadComments(currentPostId);
     showToast('Comment posted! 💬', 'success');
@@ -515,7 +303,6 @@ async function postComment() {
   }
 }
 
-// ===== Fullscreen =====
 function openFullscreen() {
   const img = document.getElementById('postModalImage').src;
   document.getElementById('fullscreenImage').src = img;
@@ -526,13 +313,11 @@ function closeFullscreen() {
   document.getElementById('fullscreenOverlay').classList.remove('active');
 }
 
-// ===== Navigation =====
 function navigateHome() {
   document.getElementById('searchInput').value = '';
   loadPosts();
 }
 
-// ===== Utilities =====
 function escapeHtml(str) {
   if (!str) return '';
   const div = document.createElement('div');
@@ -550,7 +335,6 @@ function timeAgo(dateStr) {
   const now = new Date();
   const date = new Date(dateStr);
   const diff = Math.floor((now - date) / 1000);
-
   if (diff < 60) return 'just now';
   if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
   if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
@@ -564,12 +348,7 @@ function showToast(message, type = 'success') {
   toast.className = `toast ${type}`;
   toast.textContent = message;
   container.appendChild(toast);
-  setTimeout(() => {
+  setTimeout(() => toast.remove(), 3000);
-    toast.style.transition = 'opacity 200ms ease, transform 200ms ease';
-    toast.style.opacity = '0';
-    toast.style.transform = 'translateX(20px)';
-    setTimeout(() => toast.remove(), 200);
-  }, 3000);
 }
 
 function showError(msg) {
@@ -582,16 +361,12 @@ function hideError() {
   document.getElementById('uploadError').style.display = 'none';
 }
 
-// Close modals on overlay click
 document.getElementById('uploadModal').addEventListener('click', (e) => {
   if (e.target === e.currentTarget) closeUploadModal();
 });
-
 document.getElementById('postModal').addEventListener('click', (e) => {
   if (e.target === e.currentTarget) closePostModal();
 });
-
-// Keyboard shortcuts
 document.addEventListener('keydown', (e) => {
   if (e.key === 'Escape') {
     closeFullscreen();

seed/data.js

@@ -1,127 +1,16 @@
-// Seed data for Imgur Clone - 12 sample posts with placeholder images
-// Using picsum.photos for realistic placeholder images
-
 const posts = [
-  {
+  { id: 'a1b2c3d4', title: 'Sunset over the Pacific Ocean 🌅', url: 'https://picsum.photos/seed/sunset/800/600', upvotes: 12453, views: 89234, tags: ['nature', 'sunset', 'ocean'], createdAt: new Date(Date.now() - 3600000).toISOString(), author: 'NatureLover42' },
-    id: 'a1b2c3d4',
+  { id: 'e5f6g7h8', title: 'My cat discovered the laser pointer', url: 'https://picsum.photos/seed/cat1/600/800', upvotes: 8921, views: 45123, tags: ['cats', 'funny', 'pets'], createdAt: new Date(Date.now() - 7200000).toISOString(), author: 'CatWhisperer' },
-    title: 'Sunset over the Pacific Ocean 🌅',
+  { id: 'i9j0k1l2', title: 'Just finished building this mechanical keyboard', url: 'https://picsum.photos/seed/keyboard/800/500', upvotes: 5672, views: 23456, tags: ['tech', 'keyboard', 'DIY'], createdAt: new Date(Date.now() - 10800000).toISOString(), author: 'MechKeyBuilder' },
-    url: 'https://picsum.photos/seed/sunset/800/600',
+  { id: 'm3n4o5p6', title: 'Northern Lights in Iceland ✨', url: 'https://picsum.photos/seed/aurora/800/500', upvotes: 15234, views: 67890, tags: ['nature', 'aurora', 'iceland', 'photography'], createdAt: new Date(Date.now() - 14400000).toISOString(), author: 'AuroraHunter' },
-    upvotes: 12453,
+  { id: 'q7r8s9t0', title: 'This pancake stack is insane', url: 'https://picsum.photos/seed/pancakes/600/600', upvotes: 3456, views: 12345, tags: ['food', 'pancakes', 'breakfast'], createdAt: new Date(Date.now() - 18000000).toISOString(), author: 'FoodieLife' },
-    views: 89234,
+  { id: 'u1v2w3x4', title: 'My workspace setup after 3 years of upgrades', url: 'https://picsum.photos/seed/desk/800/600', upvotes: 7890, views: 34567, tags: ['setup', 'workspace', 'tech'], createdAt: new Date(Date.now() - 21600000).toISOString(), author: 'DeskSetupPro' },
-    tags: ['nature', 'sunset', 'ocean'],
+  { id: 'y5z6a7b8', title: 'Found this abandoned house in the woods', url: 'https://picsum.photos/seed/abandoned/800/700', upvotes: 4567, views: 21098, tags: ['urban exploration', 'abandoned', 'creepy'], createdAt: new Date(Date.now() - 25200000).toISOString(), author: 'UrbanExplorer99' },
-    createdAt: new Date(Date.now() - 3600000).toISOString(),
+  { id: 'c9d0e1f2', title: 'Golden Retriever puppy playing in the snow', url: 'https://picsum.photos/seed/puppy/700/500', upvotes: 11234, views: 56789, tags: ['dogs', 'puppy', 'cute', 'snow'], createdAt: new Date(Date.now() - 28800000).toISOString(), author: 'DoggoLover' },
-    author: 'NatureLover42'
+  { id: 'g3h4i5j6', title: 'Hand-painted watercolor landscape', url: 'https://picsum.photos/seed/painting/800/600', upvotes: 2345, views: 9876, tags: ['art', 'watercolor', 'landscape'], createdAt: new Date(Date.now() - 32400000).toISOString(), author: 'ArtBySarah' },
-  },
+  { id: 'k7l8m9n0', title: 'City skyline at night from my apartment', url: 'https://picsum.photos/seed/city/800/500', upvotes: 6789, views: 28901, tags: ['city', 'night', 'photography', 'skyline'], createdAt: new Date(Date.now() - 36000000).toISOString(), author: 'CityShooter' },
-  {
+  { id: 'o1p2q3r4', title: 'Homemade sourdough bread - first try!', url: 'https://picsum.photos/seed/bread/600/700', upvotes: 4321, views: 18765, tags: ['food', 'bread', 'baking', 'sourdough'], createdAt: new Date(Date.now() - 39600000).toISOString(), author: 'BakerNewbie' },
-    id: 'e5f6g7h8',
+  { id: 's5t6u7v8', title: 'Road trip through the Grand Canyon 🏜️', url: 'https://picsum.photos/seed/canyon/800/500', upvotes: 9012, views: 43210, tags: ['travel', 'grand canyon', 'road trip', 'nature'], createdAt: new Date(Date.now() - 43200000).toISOString(), author: 'RoadTripper' }
-    title: 'My cat discovered the laser pointer',
-    url: 'https://picsum.photos/seed/cat1/600/800',
-    upvotes: 8921,
-    views: 45123,
-    tags: ['cats', 'funny', 'pets'],
-    createdAt: new Date(Date.now() - 7200000).toISOString(),
-    author: 'CatWhisperer'
-  },
-  {
-    id: 'i9j0k1l2',
-    title: 'Just finished building this mechanical keyboard',
-    url: 'https://picsum.photos/seed/keyboard/800/500',
-    upvotes: 5672,
-    views: 23456,
-    tags: ['tech', 'keyboard', 'DIY'],
-    createdAt: new Date(Date.now() - 10800000).toISOString(),
-    author: 'MechKeyBuilder'
-  },
-  {
-    id: 'm3n4o5p6',
-    title: 'Northern Lights in Iceland ✨',
-    url: 'https://picsum.photos/seed/aurora/800/500',
-    upvotes: 15234,
-    views: 67890,
-    tags: ['nature', 'aurora', 'iceland', 'photography'],
-    createdAt: new Date(Date.now() - 14400000).toISOString(),
-    author: 'AuroraHunter'
-  },
-  {
-    id: 'q7r8s9t0',
-    title: 'This pancake stack is insane',
-    url: 'https://picsum.photos/seed/pancakes/600/600',
-    upvotes: 3456,
-    views: 12345,
-    tags: ['food', 'pancakes', 'breakfast'],
-    createdAt: new Date(Date.now() - 18000000).toISOString(),
-    author: 'FoodieLife'
-  },
-  {
-    id: 'u1v2w3x4',
-    title: 'My workspace setup after 3 years of upgrades',
-    url: 'https://picsum.photos/seed/desk/800/600',
-    upvotes: 7890,
-    views: 34567,
-    tags: ['setup', 'workspace', 'tech'],
-    createdAt: new Date(Date.now() - 21600000).toISOString(),
-    author: 'DeskSetupPro'
-  },
-  {
-    id: 'y5z6a7b8',
-    title: 'Found this abandoned house in the woods',
-    url: 'https://picsum.photos/seed/abandoned/800/700',
-    upvotes: 4567,
-    views: 21098,
-    tags: ['urban exploration', 'abandoned', 'creepy'],
-    createdAt: new Date(Date.now() - 25200000).toISOString(),
-    author: 'UrbanExplorer99'
-  },
-  {
-    id: 'c9d0e1f2',
-    title: 'Golden Retriever puppy playing in the snow',
-    url: 'https://picsum.photos/seed/puppy/700/500',
-    upvotes: 11234,
-    views: 56789,
-    tags: ['dogs', 'puppy', 'cute', 'snow'],
-    createdAt: new Date(Date.now() - 28800000).toISOString(),
-    author: 'DoggoLover'
-  },
-  {
-    id: 'g3h4i5j6',
-    title: 'Hand-painted watercolor landscape',
-    url: 'https://picsum.photos/seed/painting/800/600',
-    upvotes: 2345,
-    views: 9876,
-    tags: ['art', 'watercolor', 'landscape'],
-    createdAt: new Date(Date.now() - 32400000).toISOString(),
-    author: 'ArtBySarah'
-  },
-  {
-    id: 'k7l8m9n0',
-    title: 'City skyline at night from my apartment',
-    url: 'https://picsum.photos/seed/city/800/500',
-    upvotes: 6789,
-    views: 28901,
-    tags: ['city', 'night', 'photography', 'skyline'],
-    createdAt: new Date(Date.now() - 36000000).toISOString(),
-    author: 'CityShooter'
-  },
-  {
-    id: 'o1p2q3r4',
-    title: 'Homemade sourdough bread - first try!',
-    url: 'https://picsum.photos/seed/bread/600/700',
-    upvotes: 4321,
-    views: 18765,
-    tags: ['food', 'bread', 'baking', 'sourdough'],
-    createdAt: new Date(Date.now() - 39600000).toISOString(),
-    author: 'BakerNewbie'
-  },
-  {
-    id: 's5t6u7v8',
-    title: 'Road trip through the Grand Canyon 🏜️',
-    url: 'https://picsum.photos/seed/canyon/800/500',
-    upvotes: 9012,
-    views: 43210,
-    tags: ['travel', 'grand canyon', 'road trip', 'nature'],
-    createdAt: new Date(Date.now() - 43200000).toISOString(),
-    author: 'RoadTripper'
-  }
 ];
 
 const comments = [
@@ -134,7 +23,7 @@ const comments = [
   { id: 'c7', postId: 'i9j0k1l2', text: 'What switch group did you go with?', author: 'SwitchHead', parentId: null, timestamp: new Date(Date.now() - 9000000).toISOString() },
   { id: 'c8', postId: 'k7l8m9n0', text: 'Which city is this? The skyline is gorgeous.', author: 'ArchitectureFan', parentId: null, timestamp: new Date(Date.now() - 34000000).toISOString() },
   { id: 'c9', postId: 'o1p2q3r4', text: 'First try?! That looks professional level!', author: 'BreadLover', parentId: null, timestamp: new Date(Date.now() - 38000000).toISOString() },
-  { id: 'c10', postId: 's5t6u7v8', text: 'The Grand Canyon is even more amazing in person. Great photos!', author: 'HikingEnthusiast', parentId: null, timestamp: new Date(Date.now() - 42000000).toISOString() },
+  { id: 'c10', postId: 's5t6u7v8', text: 'The Grand Canyon is even more amazing in person. Great photos!', author: 'HikingEnthusiast', parentId: null, timestamp: new Date(Date.now() - 42000000).toISOString() }
 ];
 
 module.exports = { posts, comments };

server.js

@@ -23,7 +23,7 @@ const WORDS = [
   'Sand', 'Clay', 'Rock', 'Crag', 'Peak', 'Ridge', 'Dale', 'Glen',
   'Cove', 'Bay', 'Strait', 'Reef', 'Shore', 'Cliff', 'Dune', 'Cave',
   'Grot', 'Arch', 'Pill', 'Beam', 'Rune', 'Glyph', 'Mark', 'Sign',
-  'Glyph', 'Echo', 'Bane', 'Ward', 'Veil', 'Haze', 'Glow', 'Shine'
+  'Echo', 'Bane', 'Ward', 'Veil', 'Haze', 'Glow', 'Shine'
 ];
 
 function generateRandomTitle() {
@@ -37,12 +37,9 @@ function generateRandomTitle() {
 
 function deriveTitle(filename) {
   if (!filename) return generateRandomTitle();
-  // Strip extension, clean up
   let base = path.basename(filename, path.extname(filename));
-  // Replace non-alpha with spaces, then title-case
   base = base.replace(/[^a-zA-Z0-9]+/g, ' ').trim();
   if (!base) return generateRandomTitle();
-  // Title-case each word
   return base.split(/\s+/).map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join(' ').slice(0, 80);
 }