Adds reply and profile creation along with post functionality

This commit introduces new features to enhance user interaction and profile management:

- Adds the ability to create replies for comments
- Enables profile creation for users
- Supports post creation for sharing updates and content

web/superball.html

@@ -29,9 +29,32 @@
     <div class="section">
       <h2>Final Event (What gets posted at the end)</h2>
       <div class="input-group">
+        <div class="tabs">
+          <div class="tab active" data-tab="tab1">Post</div>
+          <div class="tab" data-tab="tab2">Reply</div>
+          <div class="tab" data-tab="tab3">Create Profile</div>
+        </div>
+          <div class="tab-content active" id="tab1">
+          <h3>Post</h3>
           <label for="final-content">Message Content:</label>
           <textarea id="final-content" rows="3" placeholder="Enter your message content..."></textarea>
         </div>
+
+        <div class="tab-content" id="tab2">
+          <h3>Reply</h3>
+          <label for="reply-id">Replying To:</label>
+          <textarea id="reply-id" placeholder="Enter the eventId..."></textarea>
+
+          <label for="reply-content">Message Content:</label>
+          <textarea id="reply-content" rows="3" placeholder="Enter your message content..."></textarea>
+        </div>
+
+        <div class="tab-content" id="tab3">
+          <h3>Create Profile</h3>
+          <label for="name">Name:</label>
+          <textarea id="name" placeholder="Enter your name..."></textarea>
+        </div>
+      </div>
       <button onclick="createFinalEvent()">Create Event That Will Be Published Publicly</button>
 
       <div id="final-event-display" class="json-display"></div>
@@ -79,6 +102,26 @@
   <!-- <script src="./nostr-lite.js"></script> -->
 
   <script>
+
+    document.addEventListener('DOMContentLoaded', function() {
+      const tabs = document.querySelectorAll('.tab');
+      const tabContents = document.querySelectorAll('.tab-content');
+
+      tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+          // Remove active class from all tabs and contents
+          tabs.forEach(t => t.classList.remove('active'));
+          tabContents.forEach(c => c.classList.remove('active'));
+
+          // Add active class to clicked tab
+          tab.classList.add('active');
+
+          // Show corresponding content
+          const tabId = tab.getAttribute('data-tab');
+          document.getElementById(tabId).classList.add('active');
+        });
+      });
+    });
     // Global variables
     let nlLite = null;
     let userPubkey = null;
@@ -232,7 +275,11 @@
         } else {
           console.log('INFO', 'No relay list found, using defaults');
           userRelays = [
-            { url: 'wss://relay.laantungir.net', type: 'both' }
+            { url: 'wss://relay.laantungir.net', type: 'both' },
+            { url: 'wss://relay.primal.net', type: 'both' },
+            { url: 'wss://nos.lol', type: 'both' },
+            { url: 'wss://relay.damus.io', type: 'both' },
+            { url: 'wss://offchain.pub', type: 'both' }
           ];
           return userRelays;
         }
@@ -712,22 +759,77 @@
 
     // Create final event (kind 1)
     async function createFinalEvent() {
-      const content = document.getElementById('final-content').value.trim();
+        // Get the active tab
+      const activeTab = document.querySelector('.tab.active').getAttribute('data-tab');
       
+      // Get content based on active tab
+      let content = '';
+      let eventId = '';
+      let name = '';
+      
+      switch(activeTab) {
+        case 'tab1': // Post
+          content = document.getElementById('final-content').value.trim();
+          break;
+        case 'tab2': // Reply
+          content = document.getElementById('reply-content').value.trim();
+          eventId = document.getElementById('reply-id').value.trim();
+          break;
+        case 'tab3': // Create Profile
+          name = document.getElementById('name').value.trim();
+          break;
+      }
+
+      // Validate content based on tab
+      if (activeTab === 'tab1' || activeTab === 'tab2') {
         if (!content) {
           alert('Please enter message content');
           return;
         }
+      } else if (activeTab === 'tab3') {
+        if (!name) {
+          alert('Please enter your name');
+          return;
+        }
+      }
 
       try {
-        // Create the final event (kind 1) - pure message, no relay info
-        const eventTemplate = {
+        let eventTemplate = {};
+        
+        switch(activeTab) {
+          case 'tab1': // Post
+            eventTemplate = {
               kind: 1,
               content: content,
               tags: [],
               created_at: Math.floor(Date.now() / 1000)
             };
+            break;
             
+          case 'tab2': // Reply
+            eventTemplate = {
+              kind: 1,
+              content: content,
+              tags: [['e', eventId, 'root']], 
+              created_at: Math.floor(Date.now() / 1000)
+            };
+            break;
+            
+          case 'tab3': // Create Profile
+            eventTemplate = {
+              kind: 0, 
+              content: JSON.stringify({
+                name: name
+              }),
+              tags: [],
+              created_at: Math.floor(Date.now() / 1000)
+            };
+            break;
+        }
+
+        // Your existing event publishing logic here
+        console.log('Event to publish:', eventTemplate);
+        // ... rest of your publishing code
         // Sign the event using window.nostr (NIP-07)
         finalEvent = await window.nostr.signEvent(eventTemplate);