Move export button to sidebar above Danger Zone in both files

app.py

@@ -1098,6 +1098,72 @@ with st.sidebar:
         st.markdown('<div style="font-size:0.72rem;color:var(--text-3);">No active streams</div>', unsafe_allow_html=True)
     st.divider()
 
+    # -- Export --
+    st.markdown('<p style="font-size:0.68rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px;">Export</p>', unsafe_allow_html=True)
+    import streamlit.components.v1 as _comp
+    _comp.html("""
+<div style="padding:2px 0;">
+  <button id="sidebarScreenshotBtn" style="
+    width:100%; background:linear-gradient(135deg,#7c3aed,#4f46e5);
+    color:#fff; border:none; border-radius:10px; padding:8px 12px;
+    font-size:13px; font-weight:600; cursor:pointer;
+    box-shadow:0 4px 16px rgba(124,58,237,0.3); transition:transform 0.2s;"
+  onmouseover="this.style.transform='translateY(-2px)'"
+  onmouseout="this.style.transform='translateY(0)'"
+  onclick="sidebarCapture()">
+    &#128247; Download Stats as PDF
+  </button>
+  <div id="sidebarMsg" style="margin-top:6px;font-size:11px;color:#94a3b8;text-align:center;"></div>
+</div>
+<script>
+async function sidebarCapture() {
+  const btn = document.getElementById('sidebarScreenshotBtn');
+  const msg = document.getElementById('sidebarMsg');
+  btn.disabled = true; btn.textContent = 'Capturing...';
+  msg.textContent = 'Please wait...';
+  try {
+    const target = window.parent.document.querySelector('[data-testid="stMain"]')
+                || window.parent.document.querySelector('.main')
+                || window.parent.document.body;
+    const canvas = await window.parent.html2canvas(target, {
+      scale:1.5, useCORS:true, allowTaint:true,
+      backgroundColor:'#07070f', logging:false,
+      windowWidth:target.scrollWidth, windowHeight:target.scrollHeight,
+      scrollX:0, scrollY:0,
+    });
+    const imgData = canvas.toDataURL('image/png', 0.95);
+    const { jsPDF } = window.parent.jspdf;
+    const pdf = new jsPDF({
+      orientation: canvas.width > canvas.height ? 'l' : 'p',
+      unit:'px', format:[canvas.width, canvas.height], compress:true,
+    });
+    pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
+    const ts = new Date().toISOString().slice(0,16).replace('T','_').replace(':','-');
+    pdf.save('livepulse_stats_' + ts + '.pdf');
+    btn.textContent = 'Download Stats as PDF'; btn.disabled = false;
+    msg.textContent = 'Done!';
+    setTimeout(() => { msg.textContent = ''; }, 3000);
+  } catch(e) {
+    btn.textContent = 'Download Stats as PDF'; btn.disabled = false;
+    msg.textContent = 'Error: ' + e.message;
+  }
+}
+function loadScript(src, name) {
+  return new Promise(r => {
+    if (window.parent[name]) { r(); return; }
+    const s = window.parent.document.createElement('script');
+    s.src = src; s.onload = r;
+    window.parent.document.head.appendChild(s);
+  });
+}
+(async () => {
+  await loadScript('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js','html2canvas');
+  await loadScript('https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js','jspdf');
+})();
+</script>
+""", height=75)
+    st.divider()
+
     # -- Danger Zone --
     st.markdown('<p style="font-size:0.68rem;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px;">Danger Zone</p>', unsafe_allow_html=True)
     if st.button("\U0001f5d1 Clear all data"):

frontend/streamlit_app.py

@@ -759,6 +759,72 @@ with st.sidebar:
         st.markdown('<div style="font-size:0.72rem;color:var(--text-3);">No active streams</div>', unsafe_allow_html=True)
     st.divider()
 
+    # ── Export ──
+    st.markdown('<p style="font-size:0.68rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px;">Export</p>', unsafe_allow_html=True)
+    import streamlit.components.v1 as _comp2
+    _comp2.html("""
+<div style="padding:2px 0;">
+  <button id="sidebarScreenshotBtn2" style="
+    width:100%; background:linear-gradient(135deg,#7c3aed,#4f46e5);
+    color:#fff; border:none; border-radius:10px; padding:8px 12px;
+    font-size:13px; font-weight:600; cursor:pointer;
+    box-shadow:0 4px 16px rgba(124,58,237,0.3); transition:transform 0.2s;"
+  onmouseover="this.style.transform='translateY(-2px)'"
+  onmouseout="this.style.transform='translateY(0)'"
+  onclick="sidebarCapture2()">
+    &#128247; Download Stats as PDF
+  </button>
+  <div id="sidebarMsg2" style="margin-top:6px;font-size:11px;color:#94a3b8;text-align:center;"></div>
+</div>
+<script>
+async function sidebarCapture2() {
+  const btn = document.getElementById('sidebarScreenshotBtn2');
+  const msg = document.getElementById('sidebarMsg2');
+  btn.disabled = true; btn.textContent = 'Capturing...';
+  msg.textContent = 'Please wait...';
+  try {
+    const target = window.parent.document.querySelector('[data-testid="stMain"]')
+                || window.parent.document.querySelector('.main')
+                || window.parent.document.body;
+    const canvas = await window.parent.html2canvas(target, {
+      scale:1.5, useCORS:true, allowTaint:true,
+      backgroundColor:'#07070f', logging:false,
+      windowWidth:target.scrollWidth, windowHeight:target.scrollHeight,
+      scrollX:0, scrollY:0,
+    });
+    const imgData = canvas.toDataURL('image/png', 0.95);
+    const { jsPDF } = window.parent.jspdf;
+    const pdf = new jsPDF({
+      orientation: canvas.width > canvas.height ? 'l' : 'p',
+      unit:'px', format:[canvas.width, canvas.height], compress:true,
+    });
+    pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
+    const ts = new Date().toISOString().slice(0,16).replace('T','_').replace(':','-');
+    pdf.save('livepulse_stats_' + ts + '.pdf');
+    btn.textContent = 'Download Stats as PDF'; btn.disabled = false;
+    msg.textContent = 'Done!';
+    setTimeout(() => { msg.textContent = ''; }, 3000);
+  } catch(e) {
+    btn.textContent = 'Download Stats as PDF'; btn.disabled = false;
+    msg.textContent = 'Error: ' + e.message;
+  }
+}
+function loadScript2(src, name) {
+  return new Promise(r => {
+    if (window.parent[name]) { r(); return; }
+    const s = window.parent.document.createElement('script');
+    s.src = src; s.onload = r;
+    window.parent.document.head.appendChild(s);
+  });
+}
+(async () => {
+  await loadScript2('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js','html2canvas');
+  await loadScript2('https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js','jspdf');
+})();
+</script>
+""", height=75)
+    st.divider()
+
     # ── Danger Zone ──
     st.markdown('<p style="font-size:0.68rem;font-weight:700;color:#ef4444;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px;">Danger Zone</p>', unsafe_allow_html=True)
     if st.button("🗑 Clear all data", width='stretch'):
@@ -2041,77 +2107,6 @@ elif len(st.session_state.streams) > 1:
     st.divider()
     st.info("Add video IDs to your extra stream slots and click ▶ Start to enable multi-stream comparison.")
 
-# ── SCREENSHOT / PDF EXPORT ───────────────────────────────────
-st.divider()
-st.markdown(
-    '<div class="sec-hdr"><span class="sec-ttl">Export</span><span class="sec-pill">Stats Page</span></div>',
-    unsafe_allow_html=True
-)
-
-import streamlit.components.v1 as _components
-_components.html("""
-<div style="text-align:center; padding: 8px 0;">
-  <button id="screenshotBtn" style="
-    background: linear-gradient(135deg, #7c3aed, #4f46e5);
-    color: #fff; border: none; border-radius: 10px;
-    padding: 10px 28px; font-size: 14px; font-weight: 600;
-    font-family: 'Space Grotesk', sans-serif; cursor: pointer;
-    box-shadow: 0 4px 16px rgba(124,58,237,0.4); transition: transform 0.2s;"
-  onmouseover="this.style.transform='translateY(-2px)'"
-  onmouseout="this.style.transform='translateY(0)'"
-  onclick="captureAndDownload()">
-    &#128247; Download Stats as PDF
-  </button>
-  <div id="statusMsg" style="margin-top:8px; font-size:12px; color:#94a3b8;"></div>
-</div>
-<script>
-async function captureAndDownload() {
-  const btn = document.getElementById('screenshotBtn');
-  const msg = document.getElementById('statusMsg');
-  btn.disabled = true; btn.textContent = 'Capturing...';
-  msg.textContent = 'Please wait...';
-  try {
-    const target = window.parent.document.querySelector('[data-testid="stMain"]')
-                || window.parent.document.querySelector('.main')
-                || window.parent.document.body;
-    const canvas = await window.parent.html2canvas(target, {
-      scale: 1.5, useCORS: true, allowTaint: true,
-      backgroundColor: '#07070f', logging: false,
-      windowWidth: target.scrollWidth, windowHeight: target.scrollHeight,
-      scrollX: 0, scrollY: 0,
-    });
-    const imgData = canvas.toDataURL('image/png', 0.95);
-    const { jsPDF } = window.parent.jspdf;
-    const pdf = new jsPDF({
-      orientation: canvas.width > canvas.height ? 'l' : 'p',
-      unit: 'px', format: [canvas.width, canvas.height], compress: true,
-    });
-    pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
-    const ts = new Date().toISOString().slice(0,16).replace('T','_').replace(':','-');
-    pdf.save('livepulse_stats_' + ts + '.pdf');
-    btn.textContent = 'Download Stats as PDF'; btn.disabled = false;
-    msg.textContent = 'Done! Check your downloads.';
-    setTimeout(() => { msg.textContent = ''; }, 4000);
-  } catch(e) {
-    btn.textContent = 'Download Stats as PDF'; btn.disabled = false;
-    msg.textContent = 'Error: ' + e.message;
-  }
-}
-function loadScript(src, globalName) {
-  return new Promise((resolve) => {
-    if (window.parent[globalName]) { resolve(); return; }
-    const s = window.parent.document.createElement('script');
-    s.src = src; s.onload = resolve;
-    window.parent.document.head.appendChild(s);
-  });
-}
-(async () => {
-  await loadScript('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js', 'html2canvas');
-  await loadScript('https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js', 'jspdf');
-})();
-</script>
-""", height=90)
-
 # ── AUTO REFRESH ──────────────────────────────────────────────
 if auto_refresh:
     time.sleep(refresh_rate)

pages/stats.py

@@ -976,108 +976,6 @@ elif len(st.session_state.streams) > 1:
     st.divider()
     st.info("Add video IDs to your extra stream slots and click ▶ Start to enable multi-stream comparison.")
 
-# -- SCREENSHOT / PDF EXPORT ----------------------------------
-st.divider()
-st.markdown(
-    '<div class="sec-hdr"><span class="sec-ttl">Export</span><span class="sec-pill">Stats Page</span></div>',
-    unsafe_allow_html=True
-)
-
-import streamlit.components.v1 as components
-components.html("""
-<div style="text-align:center; padding: 8px 0;">
-  <button id="screenshotBtn" style="
-    background: linear-gradient(135deg, #7c3aed, #4f46e5);
-    color: #fff;
-    border: none;
-    border-radius: 10px;
-    padding: 10px 28px;
-    font-size: 14px;
-    font-weight: 600;
-    font-family: 'Space Grotesk', sans-serif;
-    cursor: pointer;
-    box-shadow: 0 4px 16px rgba(124,58,237,0.4);
-    transition: transform 0.2s;
-  "
-  onmouseover="this.style.transform='translateY(-2px)'"
-  onmouseout="this.style.transform='translateY(0)'"
-  onclick="captureAndDownload()">
-    &#128247; Download Stats as PDF
-  </button>
-  <div id="statusMsg" style="margin-top:8px; font-size:12px; color:#94a3b8;"></div>
-</div>
-
-<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
-<script>
-async function captureAndDownload() {
-  const btn = document.getElementById('screenshotBtn');
-  const msg = document.getElementById('statusMsg');
-  btn.disabled = true;
-  btn.textContent = 'Capturing...';
-  msg.textContent = 'Please wait, capturing the page...';
-
-  try {
-    // Target the main Streamlit content area in the parent frame
-    const target = window.parent.document.querySelector('[data-testid="stMain"]')
-                || window.parent.document.querySelector('.main')
-                || window.parent.document.body;
-
-    const canvas = await window.parent.html2canvas(target, {
-      scale: 1.5,
-      useCORS: true,
-      allowTaint: true,
-      backgroundColor: '#07070f',
-      logging: false,
-      windowWidth: target.scrollWidth,
-      windowHeight: target.scrollHeight,
-      scrollX: 0,
-      scrollY: 0,
-    });
-
-    const imgData = canvas.toDataURL('image/png', 0.95);
-    const { jsPDF } = window.parent.jspdf;
-    const pdf = new jsPDF({
-      orientation: canvas.width > canvas.height ? 'l' : 'p',
-      unit: 'px',
-      format: [canvas.width, canvas.height],
-      compress: true,
-    });
-
-    pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
-    const ts = new Date().toISOString().slice(0,16).replace('T','_').replace(':','-');
-    pdf.save('livepulse_stats_' + ts + '.pdf');
-
-    btn.textContent = 'Download Stats as PDF';
-    btn.disabled = false;
-    msg.textContent = 'Done! Check your downloads.';
-    setTimeout(() => { msg.textContent = ''; }, 4000);
-  } catch(e) {
-    btn.textContent = 'Download Stats as PDF';
-    btn.disabled = false;
-    msg.textContent = 'Error: ' + e.message;
-    console.error(e);
-  }
-}
-
-// Load libraries into parent frame if not already there
-function loadScript(src, globalName) {
-  return new Promise((resolve) => {
-    if (window.parent[globalName]) { resolve(); return; }
-    const s = window.parent.document.createElement('script');
-    s.src = src;
-    s.onload = resolve;
-    window.parent.document.head.appendChild(s);
-  });
-}
-
-(async () => {
-  await loadScript('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js', 'html2canvas');
-  await loadScript('https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js', 'jspdf');
-})();
-</script>
-""", height=90)
-
 # -- AUTO REFRESH ---------------------------------------------
 if auto_refresh:
     time.sleep(refresh_rate)