Pdf Processor
Hot Take: Your Batch UI Doesn't Need a Dedicated View Tab
TLDR
Dedicated top-level tabs for batch operations fragment user workflows. When batch processing sits in a separate primary tab, users are forced to constantly tab-switch between managing files and inspecting results. Moving the batch engine into an embedded navigation panel view (nav-view-batch) keeps file queuing contextual, allows background extraction off-thread, and turns multi-document processing into a focused navigation drawer.
| Design Approach | UI Layout Location | Context Switching Cost | Workflow Impact |
|---|---|---|---|
| Legacy Batch Tab | Main view tab bar (#view-batch) | High — obscures active editor/PDF view | Fragmented workspace |
| Embedded Nav Drawer | Navigation panel (#nav-view-batch) | Zero — stays visible alongside active view | Fluid context switching |
Problem statement: the top-level tab anti-pattern
Top-level tabs should represent primary workspace view modes (PDF Viewer, Doc Editor, Visual Diff, Schema Editor). Putting secondary utility tools—like batch file dropzones—into the top tab strip introduces three architectural defects:
- Workspace Displacement: Opening the batch manager hides the document currently being inspected or edited.
- Context Loss: Users cannot monitor queue progress while reading or diffing extracted documents.
- Redundant Top Navigation: The header tab bar becomes cluttered with utility tools rather than active document views.
Technical architecture: navigation panel queue integration
Shift the batch queue into the left navigation panel as a dedicated navigation tab (data-tab="batch"):
<!-- Nav Panel Tab Button -->
<button class="nav-tab-btn" data-tab="batch" title="Batch Documents & Queue">
<span class="iconify" data-icon="material-symbols:folder-zip-outline"></span>
</button>
// navPanel.js — Lazy UI rendering on navigation tab activation
export function renderNavPanel() {
const activeTab = getActiveNavTab();
if (activeTab === 'batch') {
// Hydrate compact batch UI only when panel drawer is open
updateBatchUI();
}
}
Why embedded navigation drawers win
- Parallel Monitoring: Users can keep the batch drawer open in the side panel while reviewing extracted HTML, editing Monaco code, or diffing files.
- One-Click Context Switching: Clicking any batch item card in the drawer immediately mounts its
gxDocIR into Slot 1 or Slot 2 (+ Slot 2), updating the main view instantly without losing panel context. - Headless Worker Delegation: Multi-file ingestion runs quietly off the main thread in background Web Workers, updating status badges in real time.
Rule of thumb: Reserve top-level header tabs for document view surfaces. Place document management, queues, and metadata drawers inside navigation panels.
Read this post in the full Engineering Journal →