feat: mobile-friendly camera upload workflow

- Redesigned upload page into single unified card with camera/gallery buttons
- Large touch-friendly capture buttons for mobile devices
- Staging gallery grid (3 columns on mobile, auto-fill on desktop)
- Sticky add-more bar and process button on mobile
- Drag-and-drop support on desktop
- Responsive CSS with mobile-first breakpoints

static/css/main.css

@@ -1466,21 +1466,93 @@ a.stat.active { border-color: rgba(15,118,110,.24); background: var(--primary-so
 }
 
 /* ============================
-   Staging Gallery (two-step upload)
+   Upload & Staging (mobile-first)
    ============================ */
-.stage-controls {
+.desktop-only { display: block; }
+.mobile-only { display: none; }
+@media (max-width: 640px) {
+  .desktop-only { display: none !important; }
+  .mobile-only { display: block !important; }
+}
+
+/* ── Capture buttons (empty state) ── */
+.upload-empty-state {
+  padding: 1.5rem .5rem;
+  text-align: center;
+  transition: var(--transition);
+}
+.upload-empty-state.drag-over {
+  background: var(--primary-soft);
+  border-radius: var(--radius-sm);
+}
+.capture-buttons {
   display: flex;
-  gap: .75rem;
+  gap: 1rem;
+  justify-content: center;
   flex-wrap: wrap;
   margin-bottom: 1rem;
 }
-.stage-capture-btn svg { vertical-align: -.15em; margin-inline-end: .3rem; }
+.capture-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: .6rem;
+  padding: 1.5rem 2rem;
+  border-radius: var(--radius);
+  background: var(--surface-tint);
+  border: 2px dashed var(--border);
+  cursor: pointer;
+  transition: var(--transition);
+  color: var(--text);
+  font-size: .95rem;
+  font-weight: 500;
+  min-width: 160px;
+}
+.capture-btn:hover, .capture-btn:active {
+  border-color: var(--primary);
+  background: var(--primary-soft);
+}
+.capture-btn svg { stroke: var(--primary); }
+.capture-btn-camera { border-color: var(--primary-light); }
+.upload-hint {
+  font-size: .82rem;
+  color: var(--text-muted);
+  margin-top: .5rem;
+}
 
+/* ── Mobile: big touch targets ── */
+@media (max-width: 640px) {
+  .capture-buttons {
+    flex-direction: row;
+    gap: .75rem;
+  }
+  .capture-btn {
+    flex: 1;
+    min-width: 0;
+    padding: 1.2rem .75rem;
+    font-size: .88rem;
+  }
+  .capture-btn svg { width: 28px; height: 28px; }
+}
+
+/* ── Gallery grid ── */
 .staging-gallery {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
-  gap: .75rem;
+  gap: .6rem;
-  margin-bottom: 1rem;
+  margin-bottom: .75rem;
+  transition: var(--transition);
+}
+.staging-gallery.drag-over {
+  outline: 2px dashed var(--primary);
+  outline-offset: 4px;
+  border-radius: var(--radius-sm);
+}
+@media (max-width: 640px) {
+  .staging-gallery {
+    grid-template-columns: repeat(3, 1fr);
+    gap: .5rem;
+  }
 }
 .staging-thumb {
   position: relative;
@@ -1495,27 +1567,20 @@ a.stat.active { border-color: rgba(15,118,110,.24); background: var(--primary-so
   justify-content: center;
   transition: var(--transition);
 }
-.staging-thumb.loading {
+.staging-thumb.loading { opacity: .6; }
-  opacity: .6;
+.staging-thumb.removing { opacity: 0; transform: scale(.9); }
-}
-.staging-thumb.removing {
-  opacity: 0;
-  transform: scale(.9);
-}
 .staging-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 .staging-thumb-name {
-  font-size: .72rem;
+  font-size: .68rem;
   color: var(--text-muted);
-  padding: .25rem .4rem;
+  padding: .2rem .3rem;
   text-align: center;
   position: absolute;
-  bottom: 0;
+  bottom: 0; left: 0; right: 0;
-  left: 0;
-  right: 0;
   background: rgba(255,255,255,.85);
   backdrop-filter: blur(4px);
   overflow: hidden;
@@ -1526,27 +1591,28 @@ a.stat.active { border-color: rgba(15,118,110,.24); background: var(--primary-so
   position: absolute;
   top: 4px;
   left: 4px;
-  width: 26px;
+  width: 28px;
-  height: 26px;
+  height: 28px;
   border-radius: 50%;
   border: none;
-  background: rgba(220,38,38,.85);
+  background: rgba(220,38,38,.9);
   color: #fff;
-  font-size: 1.1rem;
+  font-size: 1.2rem;
   line-height: 1;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  opacity: 0;
+  opacity: 1;       /* always visible on mobile */
   transition: opacity .15s;
 }
-.staging-thumb:hover .staging-remove { opacity: 1; }
+@media (pointer: fine) {
-@media (pointer: coarse) { .staging-remove { opacity: 1; } }
+  .staging-remove { opacity: 0; }
+  .staging-thumb:hover .staging-remove { opacity: 1; }
+}
 
 .staging-thumb-spinner {
-  width: 28px;
+  width: 24px; height: 24px;
-  height: 28px;
   border: 3px solid var(--border);
   border-top-color: var(--primary);
   border-radius: 50%;
@@ -1554,17 +1620,102 @@ a.stat.active { border-color: rgba(15,118,110,.24); background: var(--primary-so
 }
 @keyframes spin { to { transform: rotate(360deg); } }
 
-.staging-count {
+/* ── Add more bar ── */
-  text-align: center;
+.add-more-bar {
+  display: flex;
+  align-items: center;
+  gap: .6rem;
+  flex-wrap: wrap;
+  padding: .5rem 0;
+  margin-bottom: .5rem;
+}
+.add-more-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: .4rem;
+  padding: .55rem 1rem;
+  border-radius: var(--radius-sm);
+  background: var(--surface-tint);
+  border: 1.5px solid var(--border);
+  cursor: pointer;
+  font-size: .85rem;
+  font-weight: 500;
+  color: var(--text);
+  transition: var(--transition);
+}
+.add-more-btn:hover, .add-more-btn:active {
+  border-color: var(--primary);
+  background: var(--primary-soft);
+}
+.add-more-btn svg { stroke: var(--primary); flex-shrink: 0; }
+.staging-count-inline {
+  margin-inline-start: auto;
   font-weight: 600;
   color: var(--primary-dark);
-  margin-bottom: .75rem;
+  font-size: .9rem;
-  font-size: 1rem;
 }
 
+@media (max-width: 640px) {
+  .add-more-bar {
+    position: sticky;
+    bottom: 72px;   /* above mobile dock */
+    background: rgba(248,246,241,.95);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    padding: .6rem .75rem;
+    margin: 0 -1rem;
+    border-top: 1px solid var(--border);
+    z-index: 10;
+  }
+  .add-more-btn {
+    padding: .65rem .85rem;
+    font-size: .82rem;
+  }
+}
+
+/* ── Actions / process bar ── */
+.staging-actions { margin-top: .75rem; }
 .stage-action-buttons {
   display: flex;
   gap: .5rem;
   justify-content: center;
   margin-top: .75rem;
 }
+.btn-process { position: relative; }
+.btn-process-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px; height: 22px;
+  background: #fff;
+  color: var(--primary-dark);
+  border-radius: 99px;
+  font-size: .75rem;
+  font-weight: 700;
+  margin-inline-start: .5rem;
+  padding: 0 .35rem;
+}
+
+@media (max-width: 640px) {
+  .staging-actions {
+    position: sticky;
+    bottom: 0;
+    background: rgba(248,246,241,.97);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    padding: .75rem;
+    margin: 0 -1rem;
+    border-top: 1px solid var(--border);
+    z-index: 11;
+  }
+  .stage-action-buttons {
+    flex-direction: column;
+    gap: .5rem;
+  }
+  .stage-action-buttons .btn {
+    width: 100%;
+    justify-content: center;
+    min-height: 52px;
+    font-size: 1rem;
+  }
+}

templates/index.html

@@ -32,23 +32,49 @@
   <div class="card-heading">
     <div>
       <h2>رفع ملفات جديدة</h2>
-      <p>اختر دفعة صور أو PDF، ثم حدّد محرك الاستخراج قبل بدء المعالجة.</p>
+      <p class="desktop-only">اختر دفعة صور أو PDF، ثم حدّد محرك الاستخراج قبل بدء المعالجة.</p>
+      <p class="mobile-only">التقط صوراً أو اختر ملفات، ثم اضغط «معالجة الكل».</p>
     </div>
   </div>
-  <form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
+
-    <input type="file" name="files" id="fileInput" multiple accept=".jpg,.jpeg,.png,.webp,.pdf" class="file-input">
+  <!-- Hidden file inputs -->
-    <label for="fileInput" class="drop-zone" id="dropZone">
+  <input type="file" id="cameraInput" accept="image/*" capture="environment" class="file-input">
-      <div class="drop-icon">
+  <input type="file" id="galleryInput" multiple accept=".jpg,.jpeg,.png,.webp,.pdf" class="file-input">
-        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+
-      </div>
+  <!-- Empty state: show capture buttons -->
-      <p class="drop-text">اسحب الملفات هنا أو انقر للاختيار</p>
+  <div id="emptyState" class="upload-empty-state">
-      <p class="drop-hint">JPG، PNG، PDF — يمكن رفع عدة ملفات دفعة واحدة</p>
+    <div class="capture-buttons">
+      <label for="cameraInput" class="capture-btn capture-btn-camera" id="cameraBtnLabel">
+        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
+        <span>التقط صورة</span>
       </label>
+      <label for="galleryInput" class="capture-btn capture-btn-gallery">
+        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+        <span>اختر من المعرض</span>
+      </label>
+    </div>
+    <p class="upload-hint">التقط عدة صور، ثم اضغط «معالجة الكل» دفعة واحدة</p>
+  </div>
 
-    <div id="fileList" class="file-list hidden"></div>
+  <!-- Gallery: shown once images are added -->
+  <div id="stagingGallery" class="staging-gallery hidden"></div>
 
-    <!-- Provider selector -->
+  <!-- Floating add-more button (appears after first image) -->
-    <div id="providerSection" class="provider-section hidden">
+  <div id="addMoreBar" class="add-more-bar hidden">
+    <label for="cameraInput" class="add-more-btn" id="addMoreCameraLabel">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
+      التقط المزيد
+    </label>
+    <label for="galleryInput" class="add-more-btn">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+      أضف ملفات
+    </label>
+    <span id="stagingCount" class="staging-count-inline">0 صور</span>
+  </div>
+
+  <!-- Provider + process actions -->
+  <div id="stagingActions" class="staging-actions hidden">
+    <div class="provider-section">
       <label class="provider-label">محرك الاستخراج:</label>
       <div class="provider-options">
         {% for p in providers %}
@@ -63,61 +89,9 @@
         {% endfor %}
       </div>
     </div>
-
-    <div id="uploadActions" class="upload-actions hidden">
-      <button type="submit" class="btn btn-primary btn-large">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
-        رفع ومعالجة
-      </button>
-      <button type="button" class="btn btn-secondary" onclick="clearFiles()">إلغاء</button>
-    </div>
-  </form>
-</div>
-
-<!-- ─── Two-step: Stage pictures then process ─── -->
-<div class="upload-card" id="stagingCard">
-  <div class="card-heading">
-    <div>
-      <h2>التقاط صور ثم معالجة دفعة واحدة</h2>
-      <p>التقط أو أضف صوراً واحدة تلو الأخرى، ثم اضغط على «معالجة الكل» عند الانتهاء.</p>
-    </div>
-  </div>
-
-  <div class="stage-controls">
-    <input type="file" id="stageFileInput" accept=".jpg,.jpeg,.png,.webp,.pdf" capture="environment" class="file-input">
-    <label for="stageFileInput" class="btn btn-secondary btn-large stage-capture-btn">
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
-      التقط صورة / أضف ملف
-    </label>
-    <input type="file" id="stageMultiInput" multiple accept=".jpg,.jpeg,.png,.webp,.pdf" class="file-input">
-    <label for="stageMultiInput" class="btn btn-secondary btn-large">
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
-      اختر عدة ملفات
-    </label>
-  </div>
-
-  <div id="stagingGallery" class="staging-gallery hidden"></div>
-  <div id="stagingCount" class="staging-count hidden"></div>
-
-  <div id="stagingActions" class="upload-actions hidden">
-    <div class="provider-section">
-      <label class="provider-label">محرك الاستخراج:</label>
-      <div class="provider-options">
-        {% for p in providers %}
-        <label class="provider-option">
-          <input type="radio" name="stage_provider" value="{{ p.id }}"
-                 {{ 'checked' if p.id == default_provider else '' }}>
-          <span class="provider-card {{ 'provider-free' if p.id == 'easyocr' else 'provider-ai' }}">
-            <span class="provider-name">{{ p.name }}</span>
-            <span class="provider-model">{{ p.model }}</span>
-          </span>
-        </label>
-        {% endfor %}
-      </div>
-    </div>
     <div class="stage-action-buttons">
-      <button type="button" class="btn btn-primary btn-large" id="processAllBtn" onclick="processStaged()">
+      <button type="button" class="btn btn-primary btn-large btn-process" id="processAllBtn" onclick="processStaged()">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
         معالجة الكل
       </button>
       <button type="button" class="btn btn-secondary" onclick="clearStaged()">مسح الكل</button>
@@ -149,95 +123,87 @@
 
 {% block scripts %}
 <script>
-const dropZone = document.getElementById('dropZone');
+// ─── Unified staging workflow ─────────────────────────────────
-const fileInput = document.getElementById('fileInput');
-const fileList = document.getElementById('fileList');
-const uploadActions = document.getElementById('uploadActions');
-
-// label[for] natively triggers the file input on all platforms including iOS
-
-dropZone.addEventListener('dragover', e => {
-  e.preventDefault();
-  dropZone.classList.add('drag-over');
-});
-dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
-dropZone.addEventListener('drop', e => {
-  e.preventDefault();
-  dropZone.classList.remove('drag-over');
-  fileInput.files = e.dataTransfer.files;
-  showFiles(fileInput.files);
-});
-
-fileInput.addEventListener('change', () => showFiles(fileInput.files));
-
-function showFiles(files) {
-  if (!files.length) return;
-  fileList.innerHTML = Array.from(files).map(f =>
-    `<div class="file-item">${f.name} <span class="file-size">${(f.size/1024).toFixed(0)} KB</span></div>`
-  ).join('');
-  fileList.classList.remove('hidden');
-  document.getElementById('providerSection').classList.remove('hidden');
-  uploadActions.classList.remove('hidden');
-}
-
-function clearFiles() {
-  fileInput.value = '';
-  fileList.innerHTML = '';
-  fileList.classList.add('hidden');
-  document.getElementById('providerSection').classList.add('hidden');
-  uploadActions.classList.add('hidden');
-}
-
-document.getElementById('uploadForm').addEventListener('submit', function() {
-  document.querySelector('.btn-primary').textContent = 'جارٍ الرفع...';
-  document.querySelector('.btn-primary').disabled = true;
-});
-
-// ─── Staging workflow ─────────────────────────────────────────
 const stagedItems = []; // {id, image_path, name}
+let uploading = false;
 
-async function stageFiles(fileInputEl) {
+const cameraInput = document.getElementById('cameraInput');
-  const files = fileInputEl.files;
+const galleryInput = document.getElementById('galleryInput');
+const emptyState = document.getElementById('emptyState');
+const gallery = document.getElementById('stagingGallery');
+const addMoreBar = document.getElementById('addMoreBar');
+const actionsEl = document.getElementById('stagingActions');
+const countEl = document.getElementById('stagingCount');
+
+// Wire up file inputs
+cameraInput.addEventListener('change', () => stageFiles(cameraInput));
+galleryInput.addEventListener('change', () => stageFiles(galleryInput));
+
+// Desktop drag & drop on the empty state
+emptyState.addEventListener('dragover', e => { e.preventDefault(); emptyState.classList.add('drag-over'); });
+emptyState.addEventListener('dragleave', () => emptyState.classList.remove('drag-over'));
+emptyState.addEventListener('drop', e => {
+  e.preventDefault();
+  emptyState.classList.remove('drag-over');
+  stageFileList(e.dataTransfer.files);
+});
+
+// Also allow drag & drop on gallery when it's visible
+gallery.addEventListener('dragover', e => { e.preventDefault(); gallery.classList.add('drag-over'); });
+gallery.addEventListener('dragleave', () => gallery.classList.remove('drag-over'));
+gallery.addEventListener('drop', e => {
+  e.preventDefault();
+  gallery.classList.remove('drag-over');
+  stageFileList(e.dataTransfer.files);
+});
+
+async function stageFiles(inputEl) {
+  const files = inputEl.files;
   if (!files.length) return;
+  await stageFileList(files);
+  inputEl.value = '';
+}
+
+async function stageFileList(files) {
+  if (!files.length) return;
+  uploading = true;
+  refreshUI();
 
   for (const file of files) {
     const formData = new FormData();
     formData.append('files', file);
-
+    const thumb = addPlaceholder(file.name);
-    const thumb = addStagingPlaceholder(file.name);
 
     try {
       const res = await fetch('/upload/stage', { method: 'POST', body: formData });
       const data = await res.json();
       for (const item of data.staged) {
         stagedItems.push(item);
-        updateStagingThumb(thumb, item);
+        finishThumb(thumb, item);
       }
     } catch (e) {
       thumb.remove();
-      alert('خطأ في رفع الملف: ' + file.name);
     }
   }
 
-  fileInputEl.value = '';
+  uploading = false;
-  refreshStagingUI();
+  refreshUI();
 }
 
-function addStagingPlaceholder(name) {
+function addPlaceholder(name) {
-  const gallery = document.getElementById('stagingGallery');
   gallery.classList.remove('hidden');
   const div = document.createElement('div');
   div.className = 'staging-thumb loading';
-  div.innerHTML = `<div class="staging-thumb-spinner"></div><span class="staging-thumb-name">${name}</span>`;
+  div.innerHTML = '<div class="staging-thumb-spinner"></div>';
   gallery.appendChild(div);
   return div;
 }
 
-function updateStagingThumb(thumb, item) {
+function finishThumb(thumb, item) {
   thumb.classList.remove('loading');
   thumb.dataset.id = item.id;
   thumb.innerHTML = `
-    <img src="/uploads/${item.image_path}" alt="${item.name}">
+    <img src="/uploads/${item.image_path}" alt="">
     <span class="staging-thumb-name">${item.name}</span>
     <button type="button" class="staging-remove" onclick="removeStagedItem(${item.id}, this)" title="إزالة">&times;</button>
   `;
@@ -246,36 +212,39 @@ function updateStagingThumb(thumb, item) {
 async function removeStagedItem(id, btn) {
   const thumb = btn.closest('.staging-thumb');
   thumb.classList.add('removing');
-  try {
+  try { await fetch('/upload/staged/' + id, { method: 'DELETE' }); } catch(e) {}
-    await fetch('/upload/staged/' + id, { method: 'DELETE' });
-  } catch (e) { /* ignore */ }
   const idx = stagedItems.findIndex(s => s.id === id);
   if (idx !== -1) stagedItems.splice(idx, 1);
   thumb.remove();
-  refreshStagingUI();
+  refreshUI();
 }
 
-function refreshStagingUI() {
+function refreshUI() {
-  const count = stagedItems.length;
+  const n = stagedItems.length;
-  const countEl = document.getElementById('stagingCount');
+  const hasItems = n > 0 || uploading;
-  const actionsEl = document.getElementById('stagingActions');
-  const gallery = document.getElementById('stagingGallery');
 
-  if (count > 0) {
+  emptyState.classList.toggle('hidden', hasItems);
-    countEl.textContent = `${count} صورة جاهزة للمعالجة`;
+  gallery.classList.toggle('hidden', !hasItems);
-    countEl.classList.remove('hidden');
+  addMoreBar.classList.toggle('hidden', !hasItems);
-    actionsEl.classList.remove('hidden');
+  actionsEl.classList.toggle('hidden', n === 0);
-  } else {
+  countEl.textContent = n === 1 ? 'صورة واحدة' : n + ' صور';
-    countEl.classList.add('hidden');
+
-    actionsEl.classList.add('hidden');
+  const processBtn = document.getElementById('processAllBtn');
-    gallery.classList.add('hidden');
+  if (processBtn) {
+    processBtn.querySelector('.btn-process-count')?.remove();
+    if (n > 0) {
+      const badge = document.createElement('span');
+      badge.className = 'btn-process-count';
+      badge.textContent = n;
+      processBtn.appendChild(badge);
+    }
   }
 }
 
-async function processStaged() {
+function processStaged() {
   if (!stagedItems.length) return;
   const ids = stagedItems.map(s => s.id).join(',');
-  const provider = document.querySelector('input[name="stage_provider"]:checked')?.value || '';
+  const provider = document.querySelector('input[name="provider"]:checked')?.value || '';
 
   const btn = document.getElementById('processAllBtn');
   btn.textContent = 'جارٍ المعالجة...';
@@ -294,11 +263,8 @@ async function clearStaged() {
     try { await fetch('/upload/staged/' + item.id, { method: 'DELETE' }); } catch(e) {}
   }
   stagedItems.length = 0;
-  document.getElementById('stagingGallery').innerHTML = '';
+  gallery.innerHTML = '';
-  refreshStagingUI();
+  refreshUI();
 }
-
-document.getElementById('stageFileInput').addEventListener('change', function() { stageFiles(this); });
-document.getElementById('stageMultiInput').addEventListener('change', function() { stageFiles(this); });
 </script>
 {% endblock %}