Update the profile information in the fields if a profile already exists.

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

Trash/trash.json

@@ -0,0 +1,49 @@
+Reply to a post from Primal
+
+{
+    "kind": 1,
+    "created_at": 1763420960,
+    "content": "From Primal.",
+    "pubkey": "8ff74724ed641b3c28e5a86d7c5cbc49c37638ace8c6c38935860e7a5eedde0e",
+    "id": "555c77e419c6f34d1d36b6baf36489c5eb17d829645c940fc996d90c26df59a1",
+    "tags": [
+        [
+            "e",
+            "ac50dd87901863590d577fb9080ab294b8dd1b6b10563e9733d5bad817c735db",
+            "wss://nos.lol",
+            "root"
+        ],
+        [
+            "p",
+            "8ff74724ed641b3c28e5a86d7c5cbc49c37638ace8c6c38935860e7a5eedde0e"
+        ],
+        [
+            "r",
+            "wss://nostr.mom/"
+        ],
+        [
+            "r",
+            "wss://relay.laantungir.net/"
+        ]
+    ],
+    "sig": "5ab8f7b43e972e2089ebc95f68c49cace183832a3f867801a85c689ce6797eaa52a60ba07847212019fc2361ffca276c74f9cd69402095c6c783faac2c827bde"
+}
+
+
+Reply to post from proposed superball builder change.
+
+{
+    "id": "56e6dadc32afe11f13e83fcf8107ea8a819e4a96232d64eacafd10370224e685",
+    "sig": "3766102783acfc7654f134b1dc5fd716e89e154fc81a96c7f60d20a867e5b52919cdfa7a01151550880e4e8a2945ef05feb43c022bbd7761724ded8308254b1d",
+    "kind": 1,
+    "tags": [
+        [
+            "e",
+            "ac50dd87901863590d577fb9080ab294b8dd1b6b10563e9733d5bad817c735db",
+            "root"
+        ]
+    ],
+    "pubkey": "8ff74724ed641b3c28e5a86d7c5cbc49c37638ace8c6c38935860e7a5eedde0e",
+    "content": "Yeah, it is a great night.",
+    "created_at": 1763420892
+}

web/superball-shared.css

@@ -738,3 +738,54 @@ small {
 .floating-tab:hover {
   transform: scale(1.05);
 }
+
+
+/* .input-group {
+  margin: 20px;
+} */
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+textarea {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.tabs {
+  display: flex;
+  margin: 20px 20px 0;
+  border-bottom: 1px solid #ccc;
+}
+
+.tab {
+  padding: 10px 20px;
+  cursor: pointer;
+  background-color: #f1f1f1;
+  border: 1px solid #ccc;
+  border-bottom: none;
+  margin-right: 5px;
+  border-radius: 4px 4px 0 0;
+}
+
+.tab.active {
+  background-color: #fff;
+  border-bottom: 1px solid #fff;
+}
+
+.tab-content {
+  display: none;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.tab-content.active {
+  display: block;
+}

web/superball.html

@@ -29,9 +29,45 @@
     <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/Edit 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="nevent">Nevent:</label>
+          <textarea id="nevent" placeholder="Enter the nevent for the note..."></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/Edit Profile</h3>
+          <label for="name">Name:</label>
+          <textarea id="name" placeholder="Enter your name..."></textarea>
+          <label for="about">About:</label>
+          <textarea id="about" rows="2" placeholder="A short bio..."></textarea>
+          <label for="profile-pic">Profile Picture:</label>
+          <textarea id="profile-pic" placeholder="URL of your profile pic..."></textarea>
+          <label for="display-name">Display Name:</label>
+          <textarea id="display-name" placeholder="Enter your display name..."></textarea>
+          <label for="website">Website:</label>
+          <textarea id="website" placeholder="Web URL..."></textarea>
+          <label for="banner">Banner:</label>
+          <textarea id="banner" placeholder="Enter your bannerm a (~1024x768) wide picture url..."></textarea>
+          <label for="nip05">NIP05:</label>
+          <textarea id="nip05" placeholder="Enter your nip05 in the format username@domain.com..."></textarea>
+          <label for="lud16">Lightning Address:</label>
+          <textarea id="lud16" placeholder="Enter your lightning address..."></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 +115,31 @@
   <!-- <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');
+          
+          // If tab3 (Create/Edit Profile) is activated, populate form with existing profile data
+          if (tabId === 'tab3' && userProfileData) {
+            populateProfileForm(userProfileData);
+          }
+        });
+      });
+    });
     // Global variables
     let nlLite = null;
     let userPubkey = null;
@@ -88,6 +149,7 @@
     let bounceCounter = 0;
     let discoveredThrowers = [];
     let userRelays = [];
+    let userProfileData = null; // Store loaded profile data
 
     // Initialize NOSTR_LOGIN_LITE
     async function initializeApp() {
@@ -173,6 +235,7 @@
         if (events.length > 0) {
           console.log('SUCCESS', 'Profile event received');
           const profile = JSON.parse(events[0].content);
+          userProfileData = profile; // Store profile data globally
           displayProfile(profile);
         } else {
           console.log('INFO', 'No profile found');
@@ -200,6 +263,23 @@
       console.log('SUCCESS', `Profile displayed: ${name}`);
     }
 
+    // Populate profile form with existing profile data
+    function populateProfileForm(profile) {
+      if (!profile) return;
+      
+      // Populate each field with existing data if available
+      document.getElementById('name').value = profile.name || '';
+      document.getElementById('about').value = profile.about || '';
+      document.getElementById('profile-pic').value = profile.picture || '';
+      document.getElementById('display-name').value = profile.display_name || profile.displayName || '';
+      document.getElementById('website').value = profile.website || '';
+      document.getElementById('banner').value = profile.banner || '';
+      document.getElementById('nip05').value = profile.nip05 || '';
+      document.getElementById('lud16').value = profile.lud16 || '';
+      
+      console.log('INFO', 'Profile form populated with existing data');
+    }
+
     // Load user's NIP-65 relay list
     async function loadUserRelayList() {
       if (!userPubkey) return [];
@@ -232,7 +312,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,21 +796,117 @@
 
     // 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 nevent = '';
+      let neventData;
+      let name = '';
+      let about = '';
+      let profilePic = '';
+      let displayName = '';
+      let website = '';
+      let banner = '';
+      let nip05 = '';
+      let lud16 = '';
+      
+      switch(activeTab) {
+        case 'tab1': // Post
+          content = document.getElementById('final-content').value.trim();
+          break;
+        case 'tab2': // Reply
+          content = document.getElementById('reply-content').value.trim();
+          nevent = document.getElementById('nevent').value.trim();
+          break;
+        case 'tab3': // Create Profile
+          name = document.getElementById('name').value.trim();
+          about = document.getElementById('about').value.trim();
+          profilePic = document.getElementById('profile-pic').value.trim();
+          displayName = document.getElementById('display-name').value.trim();
+          website = document.getElementById('website').value.trim();
+          banner = document.getElementById('banner').value.trim();
+          nip05 = document.getElementById('nip05').value.trim();
+          lud16 = document.getElementById('lud16').value.trim();
+          break;
+      }
+
+      // Validate content based on tab
+      if (activeTab === 'tab1') {
         if (!content) {
           alert('Please enter message content');
           return;
         }
+      } else if (activeTab === 'tab2') {
+        if (!content) {
+          alert('Please enter message content');
+          return;
+        }
+        if (!nevent.startsWith('nevent')) {
+          alert('Please enter a valid nevent');
+          return;
+        }
+        try {
+          neventData = window.NostrTools.nip19.decode(nevent).data;
+        } catch (error) {
+          alert('Error decoding nevent string', error.message);
+          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', neventData.id, neventData.relays[0], 'root'], ['p', neventData.author]], 
+              created_at: Math.floor(Date.now() / 1000)
+            };
+            neventData.relays.slice(1).forEach(relay => {
+              eventTemplate.tags.push(['r', relay]);
+            });
+            break;
+
+          case 'tab3': // Create Profile
+            eventTemplate = {
+              kind: 0, 
+              content: JSON.stringify({
+                name: name,
+                about: about,
+                picture: profilePic,
+                display_name: displayName,
+                website: website,
+                banner: banner,
+                nip05: nip05,
+                lud16: lud16
+              }),
+              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);