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, Construct). 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 →