// filterSortHelp.jsx — Filter Sort dedicated help page for new users const FilterSortHelp = ({ lang, onNavigate }) => { const mobile = window.useIsMobile(768); const it = lang === 'it'; const base = (window.__DOC_DIR || '') + '../../assets/'; const imgs = [base + 'filtersort-1.jpg', base + 'filtersort-2.jpg']; const imgCaptions = [ it ? 'Filter Sort — interfaccia a tre pannelli con griglia filtri e override inline' : 'Filter Sort — three-panel interface with filter grid and inline overrides', it ? 'Editor regole inline con gruppi logici AND/OR' : 'Inline rule editor with AND/OR logic groups', ]; const [activeImg, setActiveImg] = React.useState(0); const [lightboxOpen, setLightboxOpen] = React.useState(false); const [lbVisible, setLbVisible] = React.useState(false); React.useEffect(() => { if (!lightboxOpen) return; const onKey = (e) => { if (e.key === 'Escape') closeLightbox(); }; window.addEventListener('keydown', onKey); const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = prev; }; }, [lightboxOpen]); React.useEffect(() => { if (lightboxOpen) { const id = requestAnimationFrame(() => setLbVisible(true)); return () => cancelAnimationFrame(id); } }, [lightboxOpen]); const closeLightbox = () => { setLbVisible(false); setTimeout(() => setLightboxOpen(false), 200); }; const pad = mobile ? '48px 20px' : '72px 32px'; const maxW = 1080; const eyebrow = { fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--brand)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 16 }; const h2s = { fontFamily: 'var(--font-sans)', fontSize: mobile ? 22 : 28, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: '-0.02em', lineHeight: 1.25, marginBottom: 16 }; const body = { fontFamily: 'var(--font-sans)', fontSize: mobile ? 15 : 16, color: 'var(--fg-3)', lineHeight: 1.65 }; const dot = { width: 5, height: 5, borderRadius: '50%', background: 'var(--brand)', flexShrink: 0, marginTop: 8 }; /* ── Feature groups ── */ const featureGroups = [ { title: it ? 'Editing visuale in griglia' : 'Visual inline editing', icon: ( ), items: [ it ? 'Campioni colore, anteprime pattern e pesi linea modificabili direttamente nella griglia' : 'Color swatches, pattern previews, and line weight dropdowns — all editable inline in the grid', it ? 'Anteprime pattern di riempimento con rendering FillGrid accurato' : 'Fill pattern previews with accurate FillGrid-based rendering matching Revit\'s native swatches', it ? 'Anteprime pattern di linea con tratteggio e spessore a scala corretta' : 'Line pattern previews — dash/dot patterns rendered at correct scale with line weight', it ? 'Contagocce colore con anteprima ingrandita in tempo reale' : 'Screen color eyedropper — pick any color from anywhere on screen with a live magnified preview', ], }, { title: it ? 'Gestione filtri' : 'Filter management', icon: ( ), items: [ it ? 'Drag-and-drop per riordinare i filtri e impostare la priorità di disegno' : 'Drag-and-drop reorder filters to set draw priority', it ? 'Crea, duplica, rinomina ed elimina filtri senza uscire dallo strumento' : 'Create, duplicate, rename, and delete filters without leaving the tool', it ? 'Duplica e rinomina view template direttamente dall\'interfaccia' : 'Duplicate and rename view templates directly from the interface', it ? 'Supporto filtri di selezione — le selezioni salvate appaiono accanto ai filtri parametrici' : 'Selection filter support — saved element selections appear alongside parameter filters', ], }, { title: it ? 'Operazioni in blocco' : 'Bulk operations', icon: ( ), items: [ it ? 'Multi-selezione: modifica un override e si applica a tutti i filtri selezionati' : 'Multi-select editing — select multiple filters, change one override, it applies to all selected', it ? 'Copia e incolla override tra filtri (singolo o incolla-su-tutti)' : 'Copy/paste overrides between filters — single or paste-to-all', it ? 'Applica a un singolo template o batch Apply All su tutti i template modificati' : 'Apply to a single template or batch Apply All modified templates at once', ], }, { title: it ? 'Regole e categorie' : 'Rules & categories', icon: ( ), items: [ it ? 'Editor regole inline in popup: aggiungi/rimuovi regole, cambia parametri, valutatori e valori' : 'Inline rule editor — edit filter rules in a popup: add/remove rules, change parameters, evaluators, values', it ? 'Supporto gruppi logici AND/OR per condizioni complesse' : 'Supports AND/OR logic groups for complex filter conditions', it ? 'Editor categorie con ricerca e toggle "nascondi deselezionate"' : 'Category editor — check/uncheck which Revit categories the filter applies to, with search and "hide unchecked" toggle', ], }, { title: it ? 'Workflow e tracciamento' : 'Workflow & tracking', icon: ( ), items: [ it ? '50 livelli di undo/redo con cronologia a tendina per template' : '50-step undo/redo with dropdown history per template', it ? 'Badge ambra O/R/C sui template con modifiche non salvate (Override, Rules, Categories)' : 'Unsaved changes tracking — amber O/R/C badges on templates showing what\'s modified (Overrides, Rules, Categories)', it ? 'Prompt alla chiusura con riepilogo modifiche non salvate raggruppate per template' : 'Close prompt lists all unsaved work grouped by template', it ? 'Preferiti: stella per filtri e template, vista "solo preferiti" persistente tra sessioni' : 'Favourites — star frequently-used filters and templates, toggle "favourites only" view. Persists across sessions', ], }, { title: it ? 'Sincronizzazione e persistenza' : 'Sync & persistence', icon: ( ), items: [ it ? 'Sincronizzazione in tempo reale con Revit: filtri creati, eliminati o rinominati si aggiornano automaticamente' : 'Real-time sync with Revit — filters created, deleted, or renamed while the window is open update automatically', it ? 'Ricerca su template, filtri, filtri disponibili e categorie' : 'Search on templates, filters, available filters, and categories', it ? 'Posizione, dimensione finestra e larghezze colonne persistenti tra sessioni' : 'Window position/size and column width persistence across sessions', ], }, ]; const shortcuts = [ { keys: 'Ctrl + Z', action: it ? 'Annulla' : 'Undo' }, { keys: 'Ctrl + Y', action: it ? 'Ripristina' : 'Redo' }, { keys: 'Ctrl + C', action: it ? 'Copia override' : 'Copy overrides' }, { keys: 'Ctrl + V', action: it ? 'Incolla override' : 'Paste overrides' }, { keys: 'Delete', action: it ? 'Rimuovi filtro selezionato' : 'Remove selected filter' }, ]; /* ── Layout panel data ── */ const panels = [ { label: it ? 'Pannello sinistro' : 'Left panel', title: it ? 'View Template' : 'View Templates', items: it ? ['Ricerca per nome', 'Preferiti con stella', 'Ordinamento A-Z o per disciplina', 'Filtro per disciplina e tipo vista'] : ['Search by name', 'Favourites with star toggle', 'Sort A-Z or by discipline', 'Filter by discipline and view type'], }, { label: it ? 'Pannello centrale' : 'Center panel', title: it ? 'Griglia filtri' : 'Filter grid', items: it ? ['Tutti i filtri del template selezionato', 'Colonne override inline (visibilità, halftone, trasparenza, colori, pesi, pattern)', 'Area di lavoro a schede: Overrides, Properties, Rules, Categories'] : ['All filters applied to the selected template', 'Inline override columns (visibility, halftone, transparency, colors, weights, patterns)', 'Tabbed workspace: Overrides, Properties, Rules, Categories'], }, { label: it ? 'Pannello destro' : 'Right panel', title: it ? 'Filtri disponibili' : 'Available filters', items: it ? ['Tutti i filtri nel progetto', 'Checkbox per aggiungere al template corrente', 'Ricerca e filtro per tipo'] : ['All filters in the project', 'Checkboxes to add to the current template', 'Search and filter by type'], }, ]; const kbdStyle = { display: 'inline-block', fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 500, color: 'var(--fg-2)', background: 'var(--bg-section)', border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)', padding: '3px 8px', lineHeight: 1.4, boxShadow: '0 1px 0 var(--neutral-200)', }; return (
{/* ── HERO ── */}
{/* Back link */} { e.preventDefault(); onNavigate('home'); }} style={{ ...eyebrow, display: 'inline-flex', alignItems: 'center', gap: 6, textDecoration: 'none', marginBottom: 28 }}> {it ? 'Torna alla home' : 'Back to home'}

Filter Sort

{it ? 'Filter Sort sostituisce il dialogo Visibilità/Grafica nativo di Revit con un\'interfaccia visuale più potente per gestire i filtri dei view template. In Revit, gestire filtri su decine di view template è lento e ripetitivo — ma non più!' : 'Filter Sort replaces Revit\'s built-in Visibility/Graphics filter management with a more powerful, visual interface. In native Revit, managing filters across dozens of view templates is slow and repetitive — but not anymore!'}

{/* ── SCREENSHOT GALLERY ── */}
{it ? 'Interfaccia' : 'Interface'}

{it ? 'Un\'interfaccia costruita per il controllo totale' : 'An interface built for total control'}

{/* Main image */}
{imgCaptions[activeImg]} setLightboxOpen(true)} style={{ width: '100%', height: 'auto', display: 'block', cursor: 'zoom-in' }} /> {imgs.length > 1 && ( <> )}
{/* Caption + dots */}

{imgCaptions[activeImg]}

{imgs.map((_, i) => (
{/* ── LAYOUT OVERVIEW ── */}
Layout

{it ? 'Tre pannelli, un flusso di lavoro' : 'Three panels, one workflow'}

{it ? 'L\'interfaccia organizza tutto in tre aree affiancate: selezione del template, editing filtri, e aggiunta di nuovi filtri.' : 'The interface organizes everything into three side-by-side areas: template selection, filter editing, and adding new filters.'}

{panels.map((p, i) => (
{/* Top accent */}
{p.label}

{p.title}

    {p.items.map((item, j) => (
  • {item}
    • ))}
))}
{/* ── KEY FEATURES ── */}
{it ? 'Funzionalità' : 'Features'}

{it ? 'Tutto quello che puoi fare' : 'Everything you can do'}

{featureGroups.map((group, gi) => (
{group.icon}

{group.title}

    {group.items.map((item, ii) => (
  • {item}
    • ))}
))}
{/* ── KEYBOARD SHORTCUTS ── */}
{it ? 'Scorciatoie da tastiera' : 'Keyboard shortcuts'}

{it ? 'Scorciatoie' : 'Shortcuts'}

{shortcuts.map((s, i) => (
{s.keys} {s.action}
))}
{/* ── WHO IT'S FOR + TECHNICAL ── */}
{/* Who it's for */}
{it ? 'Per chi è' : 'Who it\'s for'}

{it ? 'BIM manager e utenti Revit' : 'BIM managers and Revit users'}

{it ? 'Progettato per chi lavora con view template contenenti molti filtri — architettonici, strutturali, MEP. Particolarmente utile su progetti di grandi dimensioni con 50–200+ filtri per template, dove il dialogo nativo V/G di Revit diventa ingestibile.' : 'Designed for those who work with view templates containing many filters — architectural, structural, MEP. Especially valuable on large projects with 50–200+ filters per template where Revit\'s native V/G dialog becomes unmanageable.'}

{/* Technical notes */}
{it ? 'Note tecniche' : 'Technical notes'}

{it ? 'Compatibilità' : 'Compatibility'}

    {(it ? [ ['Finestra modeless', 'Resta aperta mentre lavori in Revit'], ['Revit 2023–2026', 'Tutte le versioni supportate'], ['Unità documento', 'Usa le unità del documento'], ['Lingua', 'Solo inglese'], ] : [ ['Modeless window', 'Stays open while you work in Revit'], ['Revit 2023–2026', 'All versions supported'], ['Document units', 'Uses your document\'s units'], ['Language', 'English only'], ]).map(([label, desc], i) => (
  • —
    {label} — {desc}
    • ))}
{/* ── CTA ── */}

{it ? 'Pronto per gestire i filtri meglio?' : 'Ready to manage filters better?'}

{it ? 'Filter Sort è incluso in Strato BIM. Scaricalo e inizia subito.' : 'Filter Sort is included in Strato BIM. Download it and get started.'}

{ e.preventDefault(); onNavigate('download'); }} style={{ display: 'inline-block', background: 'var(--brand)', color: 'var(--white)', padding: '14px 32px', borderRadius: 'var(--radius-md)', fontSize: 16, fontWeight: 500, textDecoration: 'none', fontFamily: 'var(--font-sans)', transition: 'background 150ms', }} onMouseEnter={e => e.currentTarget.style.background = 'var(--brand-hover)'} onMouseLeave={e => e.currentTarget.style.background = 'var(--brand)'} > {it ? 'Scarica Strato BIM' : 'Download Strato BIM'}
{/* ── LIGHTBOX ── */} {lightboxOpen && (
{imgCaptions[activeImg]} e.stopPropagation()} style={{ maxWidth: '95vw', maxHeight: '90vh', width: 'auto', height: 'auto', borderRadius: 'var(--radius-lg)', boxShadow: '0 24px 60px rgba(0,0,0,0.5)', cursor: 'default', transform: lbVisible ? 'scale(1)' : 'scale(0.97)', transition: 'transform 180ms ease-out', }} /> {imgs.length > 1 && ( <> )}
)}
); }; Object.assign(window, { FilterSortHelp });