Skip to content

fix(#197): document view UX — nav, lock toggle, diff buttons, tooltip#200

Merged
nikazzio merged 6 commits into
mainfrom
fix/panel-ux-197
May 29, 2026
Merged

fix(#197): document view UX — nav, lock toggle, diff buttons, tooltip#200
nikazzio merged 6 commits into
mainfrom
fix/panel-ux-197

Conversation

@nikazzio
Copy link
Copy Markdown
Owner

@nikazzio nikazzio commented May 29, 2026

Summary

  • Chunk nav centrata: layout flex con flex-1 bilanciato a sx/dx, counter sempre al centro della barra
  • Test mode badge: da badge con label a icona sola (FlaskConical 11px, nessun padding), non allunga più la riga eyebrow né disallinea i pannelli
  • Diff mode non-distruttivo: tutti i pulsanti sempre visibili; stage buttons si disabilitano in diff mode, diff pair buttons diventano ChunkIconButton rotondi con icona dello stage "from", si disabilitano fuori diff mode
  • Lock toggle compatto: spostato accanto al titolo del pannello traduzione (dimmed quando sbloccato, verde quando bloccato); rimosso il ChunkIconButton ridondante dal toolbar destro
  • Tooltip: nuovo componente condiviso src/components/ui/Tooltip.tsx
  • ConfirmDialog: backdrop refactored come motion.div con click-to-close e stopPropagation sul dialog
  • Rifiniture manuali: CopyButton, IconButton, PipelineSidebar, stores, i18n

Test plan

  • Barra navigazione: prev/next/counter centrati anche con molti stage indicators a sinistra
  • Pannello traduzione candidata in modalità test: riga eyebrow stessa altezza del pannello sorgente
  • Diff mode: stage buttons grayed out, diff pair buttons attivi e rotondi con icona; uscendo da diff mode si inverte
  • Lock toggle: cliccabile in entrambi gli stati, disabilitato senza draft, stile verde quando locked
  • ConfirmDialog: click sul backdrop chiude il dialogo, click interno non chiude

closes #197
closes #8

nikazzio and others added 5 commits May 29, 2026 08:51
- DocumentView: redesign navbar — chunk progress dots, context-aware
  scroll-sync / diff toggle (Link2 in both mode, GitCompare in single mode)
- Panel header min-height alignment so text baselines match across panels
- usePanelScrollSync: new hook, capture-phase ratio-based sync, anti-loop ref
- useStageDiff: new hook using diff npm lib for word-level HTML diff
- hl-diff-add / hl-diff-rm CSS classes added to index.css
- PipelineStrip: delete pipeline per-tab (×, group hover), confirm dialog
- uiStore: maxPipelines (default 5, persisted, migration v2→v3)
- Diff mode: visible only in single-panel view; replaces MarkdownEditor with
  HighlightedText; stage A/B selectors replace stage tabs in navbar
- i18n: new keys for scrollSync, diffMode, finalDraft, deletePipeline
- Rimuove subtitle stage dal pannello traduzione (modalità normale)
- Stage buttons: aggiunge separatore + nome stage attivo (○○○ | nome)
- CopyButton spostato in titleMeta (visibile anche senza subtitle)
- Bottone audit: aggiunge onClick → apre StageTraceDialog
- StageTraceDialog: gestisce isJudge per mostrare judgeResult
- enabledStages memoizzato con useMemo (fix effect dep instabile)
- Rimossa min-h-[72px] dall'header DocumentPage (poteva schiacciare contenuto)
- Aggiunge token editorial-running (#C49B2A) per stato in esecuzione
- StatusIndicator + CompactStatusIndicator usano editorial-running (giallo) per processing/retrying con animate-pulse
- Stage indicators spostati nella riga del nome pipeline nel run panel (destra, allineati)
- CompactStatusIndicator: aggiunta prop size (sm|md) per varianti dimensionali
- Stage disabilitati mostrati con opacity-25 nel run panel
- Stage indicators rimossi dal nav bar (destra) — solo diff select + lock rimangono
- Chunk dots: h-2.5 w-2.5 (da 6→10px), colore idle editorial-charcoal/25, ring attivo charcoal/50
- DocumentPage header: separatore | tra CopyButton e stage switcher, ml-6
- Stage switcher nome: larghezza fissa w-[8rem] per evitare layout shift al cambio stage
Sposta run panel, stage indicators e controlli pipeline dalla DocumentView
alla nuova PipelineSidebar (w-52), lasciando la nav bar solo per navigazione
chunk e controlli vista.

- Nuovo componente PipelineSidebar con selettore pipeline, run panel,
  indicatori stage colorati (editorial-running per processing/retrying),
  modalità test/produzione, conteggio chunk, pulsanti run/stop
- DocumentView semplificata: rimosso run panel (~190 righe), prop ridotte
  a solo onRetranslateChunk
- uiStore: aggiunto traceStageId/setTraceStageId (non persistito) per
  condivisione stato tra PipelineSidebar e DocumentView
- App.tsx: sostituito PipelineStrip con PipelineSidebar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…, tooltip

- Chunk nav centrata nella barra: layout 3-colonne con flex-1 bilanciato
- Test mode badge: solo icona (FlaskConical 11px), nessun padding che allunga la riga
- Diff mode: tutti i pulsanti sempre visibili; stage buttons disabilitati in diff mode,
  diff pair buttons rotondi con icona (stile ChunkIconButton), disabilitati fuori diff mode
- Lock traduzione: toggle compatto spostato accanto al titolo del pannello (dimmed/verde),
  rimosso ChunkIconButton ridondante dal toolbar destro
- Tooltip: nuovo componente condiviso
- ConfirmDialog: backdrop come motion.div con click-to-close e stopPropagation
- CopyButton, IconButton, PipelineSidebar, stores, i18n: rifiniture manuali
- Tooltip: move unsafe cast inside isValidElement guard
- PipelineSidebar: guard currentChunk when selectedChunkId not found
- DocumentView: use enabledStages in nav bar, hoist no-op onChange
- usePanelScrollSync: remove unused fromCtr param
- useStageDiff: early return on empty inputs

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

@nikazzio nikazzio merged commit 9b1683f into main May 29, 2026
6 checks passed
@nikazzio nikazzio deleted the fix/panel-ux-197 branch May 29, 2026 22:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix: Allineamento pannelli, scroll sincrono e cancellazione pipeline feat: Diff view tra stage della pipeline

2 participants