File size: 1,917 Bytes
83fe4f9
 
d28fc5d
 
 
 
 
b032b2d
 
d28fc5d
b032b2d
 
 
 
 
d28fc5d
b032b2d
 
 
 
d28fc5d
b032b2d
 
d28fc5d
b032b2d
 
d28fc5d
83fe4f9
 
 
 
 
 
 
b032b2d
83fe4f9
 
 
b032b2d
 
d28fc5d
 
 
 
 
 
b032b2d
 
 
 
 
 
d28fc5d
 
 
 
b032b2d
83fe4f9
d28fc5d
 
83fe4f9
b032b2d
83fe4f9
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
function injectSidebar() {
  if (document.getElementById("flowpilot-sidebar-frame")) return;

  const launcher = document.createElement("button");
  launcher.id = "flowpilot-sidebar-toggle";
  Object.assign(launcher.style, {
    position: "fixed",
    top: "20px",
    right: "20px",
    zIndex: "1000000",
    width: "44px",
    height: "44px",
    display: "grid",
    placeItems: "center",
    border: "1px solid rgba(15,23,42,0.12)",
    borderRadius: "999px",
    padding: "0",
    background: "#ffffff",
    color: "#2563eb",
    font: '700 16px "Avenir Next", "Segoe UI", sans-serif',
    cursor: "pointer",
    boxShadow: "0 8px 24px rgba(15,23,42,0.14)",
    transition: "right 180ms ease, transform 180ms ease, box-shadow 180ms ease"
  });
  launcher.setAttribute("aria-label", "Open FlowPilot");
  launcher.textContent = ">";

  const frame = document.createElement("iframe");
  frame.id = "flowpilot-sidebar-frame";
  frame.src = chrome.runtime.getURL("sidebar/index.html");
  Object.assign(frame.style, {
    position: "fixed",
    top: "0",
    right: "0",
    width: "396px",
    height: "100vh",
    border: "0",
    zIndex: "999999",
    boxShadow: "0 0 30px rgba(15,23,42,0.12)",
    background: "#f7f9fc",
    transform: "translateX(100%)",
    transition: "transform 180ms ease",
    pointerEvents: "none"
  });

  let isOpen = false;
  function syncLauncher() {
    launcher.style.right = isOpen ? "408px" : "20px";
    launcher.textContent = isOpen ? "<" : ">";
    launcher.setAttribute("aria-label", isOpen ? "Close FlowPilot" : "Open FlowPilot");
  }

  launcher.addEventListener("click", () => {
    isOpen = !isOpen;
    frame.style.transform = isOpen ? "translateX(0)" : "translateX(100%)";
    frame.style.pointerEvents = isOpen ? "auto" : "none";
    syncLauncher();
  });

  document.body.appendChild(launcher);
  document.body.appendChild(frame);
  syncLauncher();
}

injectSidebar();