content.js

(function () {
  "use strict";

  const CHAT_LIST_SELECTORS = [
    "#app > div > div > div:nth-of-type(3) > div > div:nth-of-type(4)",
    '#app [data-testid="chat-list"]',
  ];

  function looksLikeColumn(el) {
    const rect = el.getBoundingClientRect();
    const parentWidth = el.parentElement
      ? el.parentElement.getBoundingClientRect().width
      : rect.width;
    return (
      rect.width >= 260 &&
      rect.width <= 560 &&
      rect.height >= window.innerHeight * 0.5 &&
      parentWidth > rect.width * 1.3
    );
  }

  function findChatList() {
    // Known full-column selector — only trust it if it actually looks like the column.
    const direct = document.querySelector(CHAT_LIST_SELECTORS[0]);
    if (direct && looksLikeColumn(direct)) return direct;

    // Anchor: the chat-list container, then walk up to the narrow column wrapping it.
    const anchor =
      document.querySelector('#app [data-testid="chat-list"]') ||
      Array.from(document.querySelectorAll("#app [role='list']")).find(
        (el) => el.getBoundingClientRect().left < window.innerWidth / 2
      ) ||
      null;
    if (!anchor) return null;

    let column = anchor;
    let el = anchor.parentElement;
    while (el && el !== document.body) {
      if (looksLikeColumn(el)) column = el;
      el = el.parentElement;
    }
    return column;
  }

  const BLUR_AMOUNT = 6;
  const TRIGGER_WIDTH = 55;
  const EXPANDED_WIDTH = 400;

  let chatList = null;
  let hoverTrigger = null;
  let peekBadge = null;
  let isHidden = true;
  let isInitialized = false;
  let isShieldOn = readShieldPref();
  let suppressTriggerUntil = 0;
  let firstAttemptTime = 0;
  let hasLoggedWaiting = false;
  let hasLoggedNotFound = false;

  const ROWS_WAIT_TIMEOUT = 15000;

  function hasChatRows(container) {
    return !!container.querySelector(
      '[data-testid="cell-frame-container"], [role="listitem"], [role="row"]'
    );
  }

  function readShieldPref() {
    try {
      return localStorage.getItem("wa-peek-shield") !== "off";
    } catch (e) {
      return true;
    }
  }

  function injectStyles() {
    const style = document.createElement("style");
    style.textContent = `
      .wa-peek-hidden,
      .wa-peek-visible {
        --wa-duration: 0.2s;
        --wa-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
        --wa-peek-width: ${EXPANDED_WIDTH}px; /* fallback; real width set in JS */
        will-change: transform, opacity;
        overflow: hidden !important;
      }

      /* Keep the column at its real width at ALL times so WhatsApp's virtualized
         chat list keeps rendering rows. The width is measured from WhatsApp's own
         layout (--wa-peek-width) so the rows fill it exactly; the negative margin
         reclaims the space in the flex row while hidden (same space-saving as
         width:0, but it never destroys the list's layout). */
      .wa-peek-hidden {
        width: var(--wa-peek-width) !important;
        min-width: var(--wa-peek-width) !important;
        margin-left: calc(-1 * var(--wa-peek-width)) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateX(-100%);
        transition: transform var(--wa-duration) var(--wa-ease-out),
                    opacity var(--wa-duration) var(--wa-ease-out),
                    visibility 0s var(--wa-duration) !important;
        pointer-events: none !important;
      }

      .wa-peek-visible {
        width: var(--wa-peek-width) !important;
        min-width: var(--wa-peek-width) !important;
        margin-left: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0);
        transition: transform var(--wa-duration) var(--wa-ease-out),
                    opacity var(--wa-duration) var(--wa-ease-out),
                    visibility 0s !important;
        pointer-events: auto !important;
      }

      .wa-peek-hover-trigger {
        position: fixed;
        top: 0;
        left: 0;
        width: ${TRIGGER_WIDTH}px;
        height: 100vh;
        z-index: 2147483646;
        pointer-events: auto;
        background: transparent;
      }

      .wa-peek-hover-trigger::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 168, 132, 0), rgba(0, 168, 132, 0.6), rgba(0, 168, 132, 0));
        opacity: 0;
        transition: opacity 0.15s ease;
        pointer-events: none;
      }

      @media (hover: hover) and (pointer: fine) {
        .wa-peek-hover-trigger:hover::before {
          opacity: 1;
        }
      }

      .wa-peek-hover-trigger:focus-visible::before {
        opacity: 1;
      }

      .wa-peek-hover-trigger:focus-visible {
        outline: 3px solid #00a884;
        outline-offset: -3px;
      }

      .wa-peek-hover-trigger.wa-peek-trigger-inactive {
        pointer-events: none !important;
        visibility: hidden !important;
      }

      .wa-peek-badge {
        position: fixed !important;
        top: 72px !important; /* below the header so it never blocks WhatsApp's icons */
        right: 16px !important;
        left: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        border-radius: 999px;
        box-sizing: border-box;
        background: rgba(11, 20, 26, 0.8);
        color: #e9edef;
        font: 500 13px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
        letter-spacing: 0.03em;
        pointer-events: auto;
        cursor: pointer;
        opacity: 1;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
        transition: opacity 0.2s ease, background 0.2s ease;
        z-index: 2147483646;
      }

      .wa-peek-badge:hover {
        background: rgba(11, 20, 26, 0.95);
      }

      .wa-peek-badge:focus-visible {
        outline: 3px solid #00a884;
        outline-offset: 2px;
      }

      .wa-peek-badge::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #00a884;
      }

      .wa-peek-badge.wa-peek-badge-off {
        background: rgba(11, 20, 26, 0.65);
      }

      .wa-peek-badge.wa-peek-badge-off::before {
        background: #8696a0;
      }

      .wa-peek-badge.wa-peek-badge-hidden {
        opacity: 0;
        pointer-events: none;
      }

      .wa-privacy-blur > * {
        filter: blur(${BLUR_AMOUNT}px);
        transition: filter 0.2s ease !important;
      }

      /* Glance = blurred. Hovering the sidebar clears the blur so you can read
         (after a short beat so the reveal moment stays protected); moving out
         re-blurs (and the mouseleave handler collapses it). */
      .wa-privacy-blur:hover > * {
        filter: blur(0);
        transition-delay: 0.2s !important;
      }

      @media (prefers-reduced-motion: reduce) {
        .wa-peek-hidden,
        .wa-peek-visible {
          transition: opacity 0.15s ease, margin-left 0s 0.15s,
                      visibility 0s 0.15s !important;
          transform: none !important;
        }
        .wa-privacy-blur > * {
          transition: none !important;
        }
      }
    `;
    document.head.appendChild(style);
  }

  function createHoverTrigger() {
    if (hoverTrigger && hoverTrigger.isConnected) return;
    hoverTrigger = document.createElement("div");
    hoverTrigger.className = "wa-peek-hover-trigger";
    hoverTrigger.setAttribute("role", "button");
    hoverTrigger.setAttribute("tabindex", "0");
    hoverTrigger.setAttribute("aria-label", "Show chat list");
    hoverTrigger.setAttribute("aria-expanded", "false");
    hoverTrigger.setAttribute("aria-controls", "wa-peek-chat-list");
    hoverTrigger.addEventListener("mouseenter", onMouseEnterTrigger);
    hoverTrigger.addEventListener("keydown", onTriggerKeydown);
    document.body.appendChild(hoverTrigger);
  }

  function updateBadgeState() {
    if (!peekBadge) return;
    peekBadge.textContent = isShieldOn ? "Shield: ON" : "Shield: OFF";
    peekBadge.setAttribute("aria-pressed", String(isShieldOn));
    peekBadge.classList.toggle("wa-peek-badge-off", !isShieldOn);
    peekBadge.classList.toggle("wa-peek-badge-hidden", isShieldOn && !isHidden);
  }

  function onBadgeClick() {
    toggleShield();
  }

  function onBadgeKeydown(event) {
    if (event.repeat) return;
    if (event.key === "Enter" || event.key === " ") {
      event.preventDefault();
      toggleShield();
    }
  }

  function toggleShield() {
    if (!chatList) return;
    isShieldOn = !isShieldOn;
    try {
      localStorage.setItem("wa-peek-shield", isShieldOn ? "on" : "off");
    } catch (e) {
      /* storage unavailable — fine, session-only */
    }
    if (isShieldOn) {
      chatList.classList.add("wa-privacy-blur");
      chatList.classList.remove("wa-peek-visible");
      chatList.classList.add("wa-peek-hidden");
      chatList.inert = true;
      isHidden = true;
      if (hoverTrigger) {
        hoverTrigger.classList.remove("wa-peek-trigger-inactive");
        hoverTrigger.setAttribute("aria-expanded", "false");
      }
      suppressTriggerUntil = Date.now() + 250;
    } else {
      // Shield off: restore normal WhatsApp (nothing hidden, no blur).
      chatList.classList.remove("wa-privacy-blur");
      chatList.classList.remove("wa-peek-visible", "wa-peek-hidden");
      chatList.inert = false;
      isHidden = true;
      if (hoverTrigger) {
        hoverTrigger.classList.add("wa-peek-trigger-inactive");
        hoverTrigger.setAttribute("aria-expanded", "false");
      }
    }
    updateBadgeState();
  }

  function hide() {
    if (!chatList || !isShieldOn || isHidden) return;
    isHidden = true;
    chatList.classList.remove("wa-peek-visible");
    chatList.classList.add("wa-peek-hidden");
    chatList.inert = true;
    if (hoverTrigger) {
      hoverTrigger.classList.remove("wa-peek-trigger-inactive");
      hoverTrigger.setAttribute("aria-expanded", "false");
    }
    // The trigger reappears here; if the pointer is already over its strip, some
    // browsers fire mouseenter on the visibility change and instantly re-reveal.
    // Ignore trigger hover for a beat so Alt+P collapse actually sticks.
    suppressTriggerUntil = Date.now() + 250;
    updateBadgeState();
  }

  function reveal() {
    if (!chatList || !isShieldOn || isHidden) return;
    isHidden = false;
    chatList.inert = false;
    chatList.classList.remove("wa-peek-hidden");
    chatList.classList.add("wa-peek-visible");
    if (hoverTrigger) {
      hoverTrigger.classList.add("wa-peek-trigger-inactive");
      hoverTrigger.setAttribute("aria-expanded", "true");
    }
    updateBadgeState();
    // Nudge WhatsApp to re-measure its layout after the margin/width snap.
    requestAnimationFrame(() => {
      window.dispatchEvent(new Event("resize"));
    });
  }

  function onMouseLeaveSidebar() {
    hide();
  }

  function onMouseEnterTrigger() {
    if (Date.now() < suppressTriggerUntil) return;
    reveal();
  }

  function onTriggerKeydown(event) {
    if (event.key === "Enter" || event.key === " ") {
      event.preventDefault();
      if (isHidden) {
        reveal();
      } else {
        hide();
      }
    }
  }

  function onDocumentKeydown(event) {
    if (!isShieldOn) return;
    if (event.key === "Escape" && !isHidden) {
      hide();
      return;
    }
    // Alt+P toggles the peek from anywhere in WhatsApp Web (no other modifier held).
    if (
      event.altKey &&
      !event.ctrlKey &&
      !event.metaKey &&
      !event.shiftKey &&
      event.code === "KeyP" &&
      !event.repeat
    ) {
      event.preventDefault();
      console.info(
        "[wa-peek] Alt+P — hidden:",
        isHidden,
        "| shield:",
        isShieldOn
      );
      if (isHidden) {
        reveal();
      } else {
        hide();
      }
    }
  }


  function init() {
    if (isInitialized) return true;

    chatList = findChatList();
    if (!chatList) {
      if (!hasLoggedNotFound) {
        hasLoggedNotFound = true;
        const direct = document.querySelector(CHAT_LIST_SELECTORS[0]);
        const testid = document.querySelector('#app [data-testid="chat-list"]');
        const roleLists = Array.from(
          document.querySelectorAll("#app [role='list']")
        ).map((el) => {
          const r = el.getBoundingClientRect();
          return (
            el.tagName +
            "." +
            el.className +
            " " +
            Math.round(r.width) +
            "x" +
            Math.round(r.height) +
            "@" +
            Math.round(r.left)
          );
        });
        console.warn(
          "[wa-peek] chat list NOT found — direct:",
          direct ? direct.className : "none",
          "| testid chat-list:",
          testid ? testid.className : "none",
          "| role lists:",
          roleLists.join(", ") || "none"
        );
      }
      return false;
    }

    // WhatsApp renders the chat rows lazily. Hiding the list before any rows exist
    // makes its virtualizer never render them, so the revealed list stays empty.
    // Wait until rows are actually in the DOM before applying the hidden state.
    if (!firstAttemptTime) firstAttemptTime = Date.now();
    if (
      !hasChatRows(chatList) &&
      Date.now() - firstAttemptTime < ROWS_WAIT_TIMEOUT
    ) {
      if (!hasLoggedWaiting) {
        hasLoggedWaiting = true;
        console.info("[wa-peek] waiting for chat rows to render…");
      }
      return false;
    }

    chatList.id = "wa-peek-chat-list";

    // Use WhatsApp's own natural sidebar width so the virtualized rows fill it
    // exactly (forcing a wider box leaves empty space on the right).
    const naturalWidth = Math.round(chatList.getBoundingClientRect().width);
    chatList.style.setProperty(
      "--wa-peek-width",
      (naturalWidth >= 100 ? naturalWidth : EXPANDED_WIDTH) + "px"
    );

    injectStyles();
    createHoverTrigger();
    peekBadge = document.createElement("div");
    peekBadge.className = "wa-peek-badge";
    peekBadge.setAttribute("role", "button");
    peekBadge.setAttribute("tabindex", "0");
    peekBadge.setAttribute("aria-pressed", String(isShieldOn));
    peekBadge.addEventListener("click", onBadgeClick);
    peekBadge.addEventListener("keydown", onBadgeKeydown);
    document.body.appendChild(peekBadge);
    updateBadgeState();
    // Capture phase so WhatsApp's own document-level handlers can't swallow the shortcut.
    document.addEventListener("keydown", onDocumentKeydown, true);
    if (isShieldOn) {
      chatList.classList.add("wa-privacy-blur");
      chatList.classList.add("wa-peek-hidden");
      chatList.inert = true;
      isHidden = true;
    } else {
      // Shield off: leave WhatsApp untouched; the badge can re-enable it later.
      isHidden = true;
      if (hoverTrigger) hoverTrigger.classList.add("wa-peek-trigger-inactive");
    }
    chatList.addEventListener("mouseleave", onMouseLeaveSidebar);
    isInitialized = true;
    const rect = chatList.getBoundingClientRect();
    const chain = (() => {
      const parts = [];
      let el = chatList;
      while (el && el !== document.body) {
        const r = el.getBoundingClientRect();
        parts.push(
          el.tagName.toLowerCase() +
            " " +
            Math.round(r.width) +
            "x" +
            Math.round(r.height)
        );
        el = el.parentElement;
      }
      return parts.join(" < ");
    })();
    console.info(
      "[wa-peek] active — chat list found:",
      chatList,
      "| size:",
      Math.round(rect.width) + "x" + Math.round(rect.height),
      "| rows:",
      hasChatRows(chatList) ? "yes" : "no",
      "| chain:",
      chain
    );
    return true;
  }

  const observer = new MutationObserver(() => {
    if (init()) {
      observer.disconnect();
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });

  if (document.body) {
    init();
  }
})();