veza/apps/web/src/utils/fixDisplayIssues.ts

/**
 * Development diagnostics utility
 *
 * Provides opt-in debugging helpers for visual issues.
 * No automatic DOM manipulation — CSS is the single source of truth.
 *
 * Available console commands (DEV only):
 *   __enableCleanMode()   — disable all decorative pseudo-elements
 *   __disableCleanMode()  — re-enable them
 *   __findVerticalLines() — highlight narrow full-height elements
 */

export function fixDisplayIssues(): void {
  if (typeof window === 'undefined') return;

  // Remove grid overlay if accidentally left on (e.g. from devtools)
  const gridOverlay = document.getElementById('grid-overlay');
  if (gridOverlay) {
    gridOverlay.remove();
  }

  // Register opt-in diagnostic tools (DEV only, never auto-executed)
  if (import.meta.env.DEV) {
    /** Toggle "clean mode": hides body::before/after noise texture */
    (window as any).__enableCleanMode = () => {
      const id = 'fix-display-clean-mode';
      if (document.getElementById(id)) return;
      const style = document.createElement('style');
      style.id = id;
      style.textContent = `
        body::before, body::after { display: none !important; }
      `;
      document.head.appendChild(style);
      console.log('[Diagnostics] Clean mode ON — noise texture hidden.');
    };

    (window as any).__disableCleanMode = () => {
      document.getElementById('fix-display-clean-mode')?.remove();
      console.log('[Diagnostics] Clean mode OFF.');
    };

    /** Highlight narrow full-height elements that could be stray lines */
    (window as any).__findVerticalLines = () => {
      const results: Array<{ el: HTMLElement; w: number; h: number }> = [];
      document.querySelectorAll('*').forEach((el) => {
        const r = (el as HTMLElement).getBoundingClientRect();
        if (r.width > 0 && r.width < 10 && r.height > window.innerHeight * 0.3) {
          results.push({ el: el as HTMLElement, w: r.width, h: r.height });
        }
      });
      results.forEach(({ el, w, h }, i) => {
        el.style.outline = `3px solid ${i % 2 === 0 ? 'red' : 'yellow'}`;
        el.style.outlineOffset = '2px';
        console.log(`[Diagnostics] ${i + 1}. ${el.tagName}${el.id ? '#' + el.id : ''} — ${w.toFixed(1)}×${h.toFixed(0)}px`);
      });
      console.log(`[Diagnostics] Found ${results.length} narrow vertical elements.`);
      return results;
    };
  }
}

// Auto-run once on import (DEV only) — grid overlay cleanup only
if (import.meta.env.DEV && typeof window !== 'undefined') {
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', fixDisplayIssues, { once: true });
  } else {
    fixDisplayIssues();
  }
}