Upload folder using huggingface_hub

components/subscriptions.py

@@ -61,7 +61,7 @@ def create_subscriptions_html(subscriptions):
         connection_btn_html = ""
         if is_active and access_token:
             connection_btn_html = f'''
-            <button class="btn-connect" onclick="window.openDrawer('{drawer_id}')">
+            <button class="btn-connect" onclick="document.getElementById('{drawer_id}').classList.add('show'); document.body.style.overflow='hidden';">
                 Connect
             </button>
             '''
@@ -93,14 +93,14 @@ def create_subscriptions_html(subscriptions):
 
             # Drawer HTML (slides in from right)
             drawers_html += f'''
-            <div id="{drawer_id}" class="drawer-overlay" onclick="if(event.target===this) window.closeDrawer('{drawer_id}')">
+            <div id="{drawer_id}" class="drawer-overlay" onclick="if(event.target===this){{this.classList.remove('show'); document.body.style.overflow='';}}">
                 <div class="drawer-panel">
                     <div class="drawer-header">
                         <div class="drawer-header-info">
                             <h3 class="drawer-title">{html.escape(dataset_id)}</h3>
                             <span class="drawer-status {status_class}">{status_text}</span>
                         </div>
-                        <button class="drawer-close" onclick="window.closeDrawer('{drawer_id}')">&times;</button>
+                        <button class="drawer-close" onclick="document.getElementById('{drawer_id}').classList.remove('show'); document.body.style.overflow='';">&times;</button>
                     </div>
                     <div class="drawer-body">
                         <!-- MCP Config - expanded by default -->
@@ -114,7 +114,7 @@ def create_subscriptions_html(subscriptions):
                                 <p class="config-desc">Add to your Claude Desktop config:</p>
                                 <div class="code-wrapper">
                                     <pre class="code-block">{mcp_config_escaped}</pre>
-                                    <button class="btn-copy" data-copy-id="{drawer_id}-mcp" onclick="window.copyDatapassField('{drawer_id}-mcp')">Copy</button>
+                                    <button class="btn-copy" data-copy-id="{drawer_id}-mcp" data-copy-value="{copy_data[f"{drawer_id}-mcp"]}">Copy</button>
                                 </div>
                             </div>
                         </details>
@@ -129,7 +129,7 @@ def create_subscriptions_html(subscriptions):
                             <div class="config-content">
                                 <div class="code-wrapper">
                                     <pre class="code-block prompt-block">{example_prompt_escaped}</pre>
-                                    <button class="btn-copy" data-copy-id="{drawer_id}-prompt" onclick="window.copyDatapassField('{drawer_id}-prompt')">Copy</button>
+                                    <button class="btn-copy" data-copy-id="{drawer_id}-prompt" data-copy-value="{copy_data[f"{drawer_id}-prompt"]}">Copy</button>
                                 </div>
                             </div>
                         </details>
@@ -144,7 +144,7 @@ def create_subscriptions_html(subscriptions):
                             <div class="config-content">
                                 <div class="code-wrapper">
                                     <code class="token-block">{html.escape(access_token)}</code>
-                                    <button class="btn-copy" data-copy-id="{drawer_id}-token" onclick="window.copyDatapassField('{drawer_id}-token')">Copy</button>
+                                    <button class="btn-copy" data-copy-id="{drawer_id}-token" data-copy-value="{copy_data[f"{drawer_id}-token"]}">Copy</button>
                                 </div>
                             </div>
                         </details>
@@ -188,98 +188,15 @@ def create_subscriptions_html(subscriptions):
     # Convert copy_data to JSON for embedding in script
     copy_data_json = json.dumps(copy_data)
 
+    # Build inline handlers that don't rely on global functions
     result_html = f"""
-    <div class="subscriptions-container">
+    <div class="subscriptions-container" id="datapass-subs-container" data-copy='{copy_data_json}'>
         <div class="subscriptions-list">
             {cards_html}
         </div>
         {drawers_html}
     </div>
 
-    <script>
-        (function() {{
-            // Store copy data globally on window
-            window.datapassCopyData = window.datapassCopyData || {{}};
-            Object.assign(window.datapassCopyData, {copy_data_json});
-
-            // Define functions on window for global access
-            window.openDrawer = function(id) {{
-                var drawer = document.getElementById(id);
-                if (drawer) {{
-                    drawer.classList.add('show');
-                    document.body.style.overflow = 'hidden';
-                }}
-            }};
-
-            window.closeDrawer = function(id) {{
-                var drawer = document.getElementById(id);
-                if (drawer) {{
-                    drawer.classList.remove('show');
-                    document.body.style.overflow = '';
-                }}
-            }};
-
-            window.copyDatapassField = function(copyId) {{
-                if (!copyId || !window.datapassCopyData[copyId]) {{
-                    console.error('Copy data not found for:', copyId);
-                    return;
-                }}
-                // Decode base64
-                var text = atob(window.datapassCopyData[copyId]);
-                var btn = document.querySelector('[data-copy-id="' + copyId + '"]');
-
-                navigator.clipboard.writeText(text).then(function() {{
-                    if (btn) {{
-                        var originalText = btn.textContent;
-                        btn.textContent = 'Copied!';
-                        btn.classList.add('copied');
-                        setTimeout(function() {{
-                            btn.textContent = originalText;
-                            btn.classList.remove('copied');
-                        }}, 2000);
-                    }}
-                }}).catch(function(err) {{
-                    console.error('Failed to copy:', err);
-                    // Fallback for older browsers or non-HTTPS
-                    var textarea = document.createElement('textarea');
-                    textarea.value = text;
-                    textarea.style.position = 'fixed';
-                    textarea.style.opacity = '0';
-                    document.body.appendChild(textarea);
-                    textarea.select();
-                    try {{
-                        document.execCommand('copy');
-                        if (btn) {{
-                            var originalText = btn.textContent;
-                            btn.textContent = 'Copied!';
-                            btn.classList.add('copied');
-                            setTimeout(function() {{
-                                btn.textContent = originalText;
-                                btn.classList.remove('copied');
-                            }}, 2000);
-                        }}
-                    }} catch (e) {{
-                        console.error('Fallback copy failed:', e);
-                    }}
-                    document.body.removeChild(textarea);
-                }});
-            }};
-
-            // Listen for Escape key to close drawers
-            if (!window.datapassEscapeListenerAdded) {{
-                window.datapassEscapeListenerAdded = true;
-                document.addEventListener('keydown', function(e) {{
-                    if (e.key === 'Escape') {{
-                        document.querySelectorAll('.drawer-overlay.show').forEach(function(drawer) {{
-                            drawer.classList.remove('show');
-                        }});
-                        document.body.style.overflow = '';
-                    }}
-                }});
-            }}
-        }})();
-    </script>
-
     <style>
         .subscriptions-container {{
             position: relative;
@@ -618,6 +535,64 @@ def create_subscriptions_html(subscriptions):
             }}
         }}
     </style>
+
+    <script>
+    // Use MutationObserver to attach handlers when elements are added
+    (function() {{
+        // Handle copy button clicks via event delegation on document
+        document.addEventListener('click', function(e) {{
+            var btn = e.target.closest('.btn-copy');
+            if (btn && btn.hasAttribute('data-copy-value')) {{
+                e.preventDefault();
+                e.stopPropagation();
+                var b64Value = btn.getAttribute('data-copy-value');
+                if (b64Value) {{
+                    try {{
+                        var text = atob(b64Value);
+                        navigator.clipboard.writeText(text).then(function() {{
+                            var originalText = btn.textContent;
+                            btn.textContent = 'Copied!';
+                            btn.classList.add('copied');
+                            setTimeout(function() {{
+                                btn.textContent = originalText;
+                                btn.classList.remove('copied');
+                            }}, 2000);
+                        }}).catch(function() {{
+                            // Fallback
+                            var ta = document.createElement('textarea');
+                            ta.value = text;
+                            ta.style.cssText = 'position:fixed;opacity:0';
+                            document.body.appendChild(ta);
+                            ta.select();
+                            document.execCommand('copy');
+                            document.body.removeChild(ta);
+                            var originalText = btn.textContent;
+                            btn.textContent = 'Copied!';
+                            btn.classList.add('copied');
+                            setTimeout(function() {{
+                                btn.textContent = originalText;
+                                btn.classList.remove('copied');
+                            }}, 2000);
+                        }});
+                    }} catch(err) {{
+                        console.error('Copy failed:', err);
+                    }}
+                }}
+            }}
+        }}, true);
+
+        // Handle Escape key to close drawers
+        document.addEventListener('keydown', function(e) {{
+            if (e.key === 'Escape') {{
+                var drawers = document.querySelectorAll('.drawer-overlay.show');
+                drawers.forEach(function(d) {{
+                    d.classList.remove('show');
+                }});
+                document.body.style.overflow = '';
+            }}
+        }});
+    }})();
+    </script>
     """
 
     return result_html