feat: ricerca globale documento + sistema evidenziazioni unificato (#140)

.gitignore

@@ -44,3 +44,5 @@ src/dev/
 .opencode.json
 AGENTS.md
 GEMINI.md
+skills-lock.json
+.mcp.json

docs/ARCHITECTURE.md

@@ -25,7 +25,7 @@
 | `stores/chunksStore.ts` | chunks[], isProcessing, cancelRequested, activeStreamId | RAF batching per token stream; Map O(1) per chunk lookup |
 | `stores/projectStore.ts` | projects[], currentProjectId, pipelines[], activePipelineId | Multi-pipeline per progetto |
 | `stores/operationLogStore.ts` | entries[], currentProjectId | Max 2000 in-memory, resto in DB |
-| `stores/uiStore.ts` | selectedChunkId, pipelineMode, glossaryHighlightEnabled, ollamaStatus | UI-only state |
+| `stores/uiStore.ts` | selectedChunkId, pipelineMode, highlightsEnabled, highlightColors, searchQuery, ollamaStatus | UI-only state. highlightsEnabled + highlightColors persisted; searchQuery transient |
 | `stores/libraryStore.ts` | glossaries[], dictionaries[], selectedDictionary | — |
 | `stores/promptTemplateStore.ts` | templates[], selectedTemplate | — |
 

docs/UI_DESIGN_SYSTEM.md

@@ -27,6 +27,8 @@ when-to-read: prima di creare o modificare qualsiasi componente visivo
 
 **Type scale:** display italic / heading roman wght 560 / body 15px / secondary 13px / label `text-[10px] tracking-[0.35em]` / micro `text-[10px] tracking-[0.12em]`
 
+> **⚠️ Dimensione minima testo contenuto:** `text-xs` (12px). Mai `text-[10px]` o `text-[11px]` per testo leggibile, label di controlli interattivi o descrizioni. `text-[10px]` è **esclusivo** delle etichette sezione uppercase con `tracking-[0.35em]` e badge micro.
+
 ---
 
 ## Regole generali

src/App.tsx

@@ -10,6 +10,19 @@ import { useLibraryStore } from './stores/libraryStore';
 import { useChunksStore } from './stores/chunksStore';
 import { Toaster } from 'sonner';
 
+function HighlightColorSync() {
+  const highlightColors = useUiStore((s) => s.highlightColors);
+  useEffect(() => {
+    const root = document.documentElement;
+    root.style.setProperty('--hl-source-term-color', highlightColors.sourceTerm);
+    root.style.setProperty('--hl-match-bg', highlightColors.matchTerm);
+    root.style.setProperty('--hl-mismatch-bg', highlightColors.mismatchTerm);
+    root.style.setProperty('--hl-search-bg', highlightColors.search);
+    root.style.setProperty('--hl-audit-bg', highlightColors.auditPhrase);
+  }, [highlightColors]);
+  return null;
+}
+
 const PipelineConfig = lazy(() =>
   import('./components/pipeline').then((m) => ({ default: m.PipelineConfig })),
 );
@@ -75,6 +88,7 @@ export default function App() {
 
   return (
     <ErrorBoundary>
+      <HighlightColorSync />
       <div className="h-screen overflow-hidden bg-editorial-bg text-editorial-ink font-sans flex flex-col">
         <div className="flex-shrink-0">
           <Header

src/components/audit/AuditPanel.test.tsx

@@ -26,7 +26,7 @@ describe('AuditPanel', () => {
       chunkDrawerTab: 'audit',
       ollamaModels: [],
       ollamaStatus: 'unknown',
-      glossaryHighlightEnabled: false,
+      highlightsEnabled: false,
       focusedChunkId: null,
       focusedIssueQuery: null,
       focusedIssueRequestId: 0,

src/components/common/EditorialModalShell.tsx

@@ -12,6 +12,7 @@ interface EditorialModalShellProps {
   description?: ReactNode;
   footer?: ReactNode;
   headerActions?: ReactNode;
+  tabBar?: ReactNode;
   widthClassName?: string;
   bodyClassName?: string;
   panelClassName?: string;
@@ -29,6 +30,7 @@ export function EditorialModalShell({
   description,
   footer,
   headerActions,
+  tabBar,
   widthClassName = 'max-w-3xl',
   bodyClassName = 'px-6 py-6 md:px-8',
   panelClassName = '',
@@ -72,6 +74,9 @@ export function EditorialModalShell({
             </button>
           </div>
         </div>
+        {tabBar ? (
+          <div className="mt-4">{tabBar}</div>
+        ) : null}
       </div>
       <div className={`flex-1 overflow-y-auto custom-scrollbar ${bodyClassName}`.trim()}>
         {children}

src/components/common/MarkdownEditor.tsx

@@ -117,11 +117,8 @@ export function MarkdownEditor({
 
     setMode('write');
     requestAnimationFrame(() => {
-      element.focus();
-      element.setSelectionRange(matchIndex, matchIndex + normalizedQuery.length);
       element.scrollTop = Math.max(0, element.scrollHeight * (matchIndex / Math.max(1, value.length)) - 120);
       syncHighlightLayer();
-      updateSelection(matchIndex, matchIndex + normalizedQuery.length);
       onFocusQueryHandled?.();
     });
   }, [focusQuery, focusRequestId, onFocusQueryHandled, value]);

src/components/document/DocumentView.tsx

@@ -6,6 +6,7 @@ import {
   Columns2,
   FileText,
   FlaskConical,
+  Highlighter,
   Info,
   Languages,
   Loader2,
@@ -74,15 +75,16 @@ export function DocumentView({
     selectedChunkId,
     setSelectedChunkId,
     documentLayout,
-    glossaryHighlightEnabled,
+    highlightsEnabled,
+    setHighlightsEnabled,
+    searchQuery,
     pipelineMode,
     setPipelineMode,
     pipelineTestChunkCount,
     setPipelineTestChunkCount,
     focusedChunkId,
     focusedIssueQuery,
     focusedIssueRequestId,
-    clearFocusedIssue,
   } = useUiStore();
 
   const effectivePipelineMode = pipelineMode;
@@ -157,25 +159,29 @@ export function DocumentView({
 
   // Hooks devono essere chiamati prima di qualsiasi return condizionale
   const hasGlossary = config.glossary.length > 0;
-  const showHighlight = glossaryHighlightEnabled && hasGlossary;
+  const showHighlight = highlightsEnabled && hasGlossary;
   const sourceHighlight = useGlossaryHighlight(
     paneFocus !== 'translation' ? deferredSourceText : '',
     showHighlight && paneFocus !== 'translation' ? config.glossary : [],
     'source',
+    highlightsEnabled ? searchQuery : '',
   );
   const translationHighlight = useGlossaryHighlight(
     paneFocus !== 'source' ? deferredStageContent : '',
     showHighlight && paneFocus !== 'source' ? config.glossary : [],
     'translation',
+    highlightsEnabled ? searchQuery : '',
+    focusedIssueQuery ?? '',
   );
 
   const sourceHighlightHtml = useMemo(() => {
     const hasFootnoteMarkers = /\[[⁰¹²³⁴⁵⁶⁷⁸⁹]/.test(deferredSourceText);
     const showGlossary = showHighlight && paneFocus !== 'translation';
-    if (!showGlossary && !hasFootnoteMarkers) return null;
-    const base = showGlossary ? sourceHighlight.html : escapeHtml(deferredSourceText);
+    const hasSearch = highlightsEnabled && !!searchQuery.trim() && paneFocus !== 'translation';
+    if (!showGlossary && !hasSearch && !hasFootnoteMarkers) return null;
+    const base = (showGlossary || hasSearch) ? sourceHighlight.html : escapeHtml(deferredSourceText);
     return hasFootnoteMarkers ? highlightSuperscriptMarkersHtml(base) : base;
-  }, [deferredSourceText, showHighlight, paneFocus, sourceHighlight.html]);
+  }, [deferredSourceText, showHighlight, highlightsEnabled, searchQuery, paneFocus, sourceHighlight.html]);
 
   if (!currentChunk) {
     return (
@@ -412,7 +418,7 @@ export function DocumentView({
               </ChunkIconButton>
             </div>
 
-            {/* Centro: pannelli visualizzazione */}
+            {/* Centro: pannelli visualizzazione + toggle highlights */}
             <div className="flex items-center gap-1">
               <ChunkIconButton
                 onClick={() => setPaneFocus('both')}
@@ -438,6 +444,15 @@ export function DocumentView({
               >
                 <PanelRight size={18} />
               </ChunkIconButton>
+              <span className="mx-1 h-4 w-px bg-editorial-border/60" aria-hidden="true" />
+              <ChunkIconButton
+                onClick={() => setHighlightsEnabled(!highlightsEnabled)}
+                title={t('document.highlightsToggle')}
+                active={highlightsEnabled}
+                ariaPressed={highlightsEnabled}
+              >
+                <Highlighter size={18} />
+              </ChunkIconButton>
             </div>
 
             {/* Destra: stati pipeline + modifica sorgente + blocca */}
@@ -602,10 +617,10 @@ export function DocumentView({
                   textClassName="text-[15px] leading-8 text-editorial-ink"
                   previewClassName="min-h-[280px] text-[15px] leading-8 text-editorial-ink"
                   placeholder={isLastSelected ? t('pipeline.candidatePlaceholder') : ''}
-                  highlightHtml={showHighlight ? translationHighlight.html : null}
+                  highlightHtml={(showHighlight || (highlightsEnabled && !!searchQuery.trim()) || !!focusedIssueQuery) ? translationHighlight.html : null}
                   focusQuery={isLastSelected && focusedChunkId === currentChunk.id ? focusedIssueQuery : null}
                   focusRequestId={isLastSelected && focusedChunkId === currentChunk.id ? focusedIssueRequestId : 0}
-                  onFocusQueryHandled={isLastSelected ? clearFocusedIssue : undefined}
+
                 />
               </DocumentPage>
             );