hardworking/entrypoints/content.ts

export default defineContentScript({
  matches: ['<all_urls>'],
  main() {
    console.log('Slacking mode initialized. Press Alt+M to toggle.');
    
    // Create the overlay element
    const overlay = document.createElement('div');
    overlay.id = 'slacking-blur-overlay';
    
    // Create a fake GitHub UI inside the overlay
    overlay.innerHTML = `
      <div style="display: flex; flex-direction: column; width: 100vw; height: 100vh; background-color: #0d1117; color: #c9d1d9; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;">
        <!-- Fake Header -->
        <div style="height: 64px; background-color: #161b22; border-bottom: 1px solid #21262d; display: flex; align-items: center; padding: 0 32px; gap: 16px;">
          <div style="color: #fff;">
            <svg height="32" viewBox="0 0 16 16" version="1.1" width="32" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
          </div>
          <div style="display: flex; gap: 16px; font-size: 14px; font-weight: 600; margin-left: 8px;">
            <span style="color: #fff;">Pull requests</span>
            <span style="color: #fff;">Issues</span>
            <span style="color: #fff;">Marketplace</span>
            <span style="color: #fff;">Explore</span>
          </div>
        </div>
        
        <!-- Fake Main Layout -->
        <div style="display: flex; flex: 1; overflow: hidden;">
          <!-- Fake Sidebar -->
          <div style="width: 296px; border-right: 1px solid #21262d; padding: 24px 16px; display: flex; flex-direction: column; gap: 16px;">
            <div style="font-size: 14px; font-weight: 600;">Top Repositories</div>
            <div style="height: 32px; background-color: #21262d; border-radius: 6px; border: 1px solid #30363d; display: flex; align-items: center; padding: 0 12px; font-size: 14px; color: #8b949e;">Find a repository...</div>
            <div style="display: flex; flex-direction: column; gap: 12px; margin-top: 8px;">
              <div style="font-size: 14px; color: #58a6ff; font-weight: 600; display: flex; align-items: center; gap: 8px;"><span style="color: #8b949e;">🗄️</span> facebook / react</div>
              <div style="font-size: 14px; color: #58a6ff; font-weight: 600; display: flex; align-items: center; gap: 8px;"><span style="color: #8b949e;">🗄️</span> vuejs / core</div>
              <div style="font-size: 14px; color: #58a6ff; font-weight: 600; display: flex; align-items: center; gap: 8px;"><span style="color: #8b949e;">🗄️</span> torvalds / linux</div>
              <div style="font-size: 14px; color: #58a6ff; font-weight: 600; display: flex; align-items: center; gap: 8px;"><span style="color: #8b949e;">🗄️</span> golang / go</div>
            </div>
          </div>
          
          <!-- Fake Content Area -->
          <div style="flex: 1; padding: 24px 32px; display: flex; flex-direction: column; gap: 16px;">
            <div style="display: flex; justify-content: space-between; align-items: center;">
              <div style="font-size: 20px; font-weight: 600; color: #58a6ff;">hardworking / productivity-tool</div>
              <div style="display: flex; gap: 8px;">
                <div style="padding: 4px 12px; background-color: #21262d; border: 1px solid #30363d; border-radius: 6px; font-size: 12px; font-weight: 600; color: #c9d1d9;">Watch</div>
                <div style="padding: 4px 12px; background-color: #21262d; border: 1px solid #30363d; border-radius: 6px; font-size: 12px; font-weight: 600; color: #c9d1d9;">Fork</div>
                <div style="padding: 4px 12px; background-color: #21262d; border: 1px solid #30363d; border-radius: 6px; font-size: 12px; font-weight: 600; color: #c9d1d9;">Star</div>
              </div>
            </div>
            
            <!-- Fake File List -->
            <div style="border: 1px solid #30363d; border-radius: 6px; background-color: #0d1117; margin-top: 16px;">
              <div style="padding: 16px; background-color: #161b22; border-bottom: 1px solid #30363d; font-size: 14px; font-weight: 600; border-radius: 6px 6px 0 0; display: flex; gap: 12px; align-items: center;">
                <img src="https://github.com/fluidicon.png" style="width: 24px; height: 24px; border-radius: 50%;" /> 
                <span>developer</span>
                <span style="color: #8b949e; font-weight: normal;">Update core logic</span>
              </div>
              <div style="padding: 16px; display: flex; flex-direction: column; gap: 16px; font-size: 14px;">
                <div style="display: flex; gap: 16px;"><span style="color: #54aeff;">📁</span> <span style="color: #c9d1d9;">src</span> <span style="color: #8b949e; margin-left: auto;">feat: optimize rendering</span></div>
                <div style="border-bottom: 1px solid #21262d;"></div>
                <div style="display: flex; gap: 16px;"><span style="color: #54aeff;">📁</span> <span style="color: #c9d1d9;">components</span> <span style="color: #8b949e; margin-left: auto;">refactor: extract mask logic</span></div>
                <div style="border-bottom: 1px solid #21262d;"></div>
                <div style="display: flex; gap: 16px;"><span style="color: #8b949e;">📄</span> <span style="color: #c9d1d9;">index.html</span> <span style="color: #8b949e; margin-left: auto;">fix typo in header</span></div>
                <div style="border-bottom: 1px solid #21262d;"></div>
                <div style="display: flex; gap: 16px;"><span style="color: #8b949e;">📄</span> <span style="color: #c9d1d9;">package.json</span> <span style="color: #8b949e; margin-left: auto;">chore: bump dependencies</span></div>
                <div style="border-bottom: 1px solid #21262d;"></div>
                <div style="display: flex; gap: 16px;"><span style="color: #8b949e;">📄</span> <span style="color: #c9d1d9;">README.md</span> <span style="color: #8b949e; margin-left: auto;">docs: add slacking mode manual</span></div>
              </div>
            </div>
            
            <!-- Fake Readme -->
            <div style="border: 1px solid #30363d; border-radius: 6px; padding: 24px; margin-top: 16px;">
              <h2 style="margin-top: 0; border-bottom: 1px solid #21262d; padding-bottom: 8px;">README.md</h2>
              <p style="color: #8b949e; line-height: 1.5; font-size: 14px;">This project focuses on extreme productivity and code optimization. Make sure you read the contribution guidelines before submitting a PR.</p>
              <pre style="background-color: #161b22; padding: 16px; border-radius: 6px; color: #e6edf3; font-family: monospace; font-size: 14px; line-height: 1.5;"><code>npm install<br>npm run start:prod</code></pre>
            </div>
          </div>
        </div>
      </div>
    `;

    // Apply styling
    Object.assign(overlay.style, {
      position: 'fixed',
      top: '0',
      left: '0',
      width: '100vw',
      height: '100vh',
      zIndex: '2147483647', // Max z-index
      pointerEvents: 'none', // Allow clicks to pass through
      // Re-enable mask-image to punch a hole through the GitHub UI, with a larger radius
      maskImage: 'radial-gradient(circle at var(--mouse-x, -100px) var(--mouse-y, -100px), transparent 120px, black 240px)',
      WebkitMaskImage: 'radial-gradient(circle at var(--mouse-x, -100px) var(--mouse-y, -100px), transparent 120px, black 240px)',
      willChange: 'mask-image, -webkit-mask-image', // Hardware acceleration hint
      display: 'block' // Visible by default
    });

    // Append to body
    document.body.appendChild(overlay);

    let isEnabled = true;

    // Toggle on Alt+M (Option+M on Mac)
    document.addEventListener('keydown', (e) => {
      // Use e.code instead of e.key because Option+M on Mac produces "µ" instead of "m"
      if (e.altKey && e.code === 'KeyM') {
        isEnabled = !isEnabled;
        overlay.style.display = isEnabled ? 'block' : 'none';
        console.log(`Slacking mode ${isEnabled ? 'ON' : 'OFF'}`);
      }
    });

    // Optimization: Use requestAnimationFrame to avoid layout thrashing on mousemove
    let ticking = false;
    let mouseX = -100;
    let mouseY = -100;

    const updateMask = () => {
      overlay.style.setProperty('--mouse-x', `${mouseX}px`);
      overlay.style.setProperty('--mouse-y', `${mouseY}px`);
      ticking = false;
    };

    // Track mouse movement
    document.addEventListener('mousemove', (e) => {
      if (!isEnabled) return;
      mouseX = e.clientX;
      mouseY = e.clientY;
      
      if (!ticking) {
        requestAnimationFrame(updateMask);
        ticking = true;
      }
    });

    // Hide the hole when the mouse leaves the window
    document.addEventListener('mouseleave', () => {
      if (!isEnabled) return;
      // Move the clear hole far outside the viewport to make the whole page opaque
      mouseX = -1000;
      mouseY = -1000;
      
      if (!ticking) {
        requestAnimationFrame(updateMask);
        ticking = true;
      }
    });
  },
});