Merge pull request #126 from PR0M3TH3AN/codex/add-profile-link-to-channel-page

Add profile channel link and reset view state between navigations

components/profile-modal.html

@@ -62,6 +62,13 @@
             Loading...
           </p>
         </div>
+        <a
+          id="profileChannelLink"
+          href="#"
+          class="inline-flex items-center text-sm text-blue-400 hover:text-blue-300 transition-colors hidden"
+        >
+          View your channel
+        </a>
         <p class="text-sm text-gray-400">
           Some future profile details or settings could go here.
         </p>

js/app.js

@@ -498,6 +498,7 @@ class bitvidApp {
     this.profileLogoutBtn = null;
     this.profileModalAvatar = null;
     this.profileModalName = null;
+    this.profileChannelLink = null;
 
     // Upload modal elements
     this.uploadButton = document.getElementById("uploadButton") || null;
@@ -758,6 +759,32 @@ class bitvidApp {
     return entry;
   }
 
+  prepareForViewLoad() {
+    if (this._videoListElement && this._videoListClickHandler) {
+      try {
+        this._videoListElement.removeEventListener(
+          "click",
+          this._videoListClickHandler
+        );
+      } catch (err) {
+        console.warn("[prepareForViewLoad] Failed to detach video list handler:", err);
+      }
+      this._videoListElement = null;
+      this._videoListClickHandler = null;
+    }
+
+    this.videoList = null;
+    this._lastRenderedVideoListElement = null;
+    this.lastRenderedVideoSignature = null;
+    if (this.renderedVideoIds) {
+      this.renderedVideoIds.clear();
+    }
+
+    if (this.mediaLoader && typeof this.mediaLoader.disconnect === "function") {
+      this.mediaLoader.disconnect();
+    }
+  }
+
   forceRefreshAllProfiles() {
     // 1) Grab the newest set of videos from nostrClient
     const activeVideos = nostrClient.getActiveVideos();
@@ -2066,6 +2093,8 @@ class bitvidApp {
         document.getElementById("profileModalAvatar") || null;
       this.profileModalName =
         document.getElementById("profileModalName") || null;
+      this.profileChannelLink =
+        document.getElementById("profileChannelLink") || null;
 
       // Wire up
       if (this.closeProfileModal) {
@@ -2081,6 +2110,20 @@ class bitvidApp {
         });
       }
 
+      if (this.profileChannelLink) {
+        this.profileChannelLink.addEventListener("click", (event) => {
+          event.preventDefault();
+          const targetNpub = this.profileChannelLink?.dataset?.targetNpub;
+          if (!targetNpub) {
+            return;
+          }
+          if (this.profileModal) {
+            this.profileModal.classList.add("hidden");
+          }
+          window.location.hash = `#view=channel-profile&npub=${targetNpub}`;
+        });
+      }
+
       console.log("Profile modal initialization successful");
       return true;
     } catch (error) {
@@ -2288,6 +2331,18 @@ class bitvidApp {
       if (this.profileModalAvatar) {
         this.profileModalAvatar.src = picture;
       }
+      if (this.profileChannelLink) {
+        const targetNpub = this.safeEncodeNpub(pubkey);
+        if (targetNpub) {
+          this.profileChannelLink.href = `#view=channel-profile&npub=${targetNpub}`;
+          this.profileChannelLink.dataset.targetNpub = targetNpub;
+          this.profileChannelLink.classList.remove("hidden");
+        } else {
+          this.profileChannelLink.removeAttribute("href");
+          delete this.profileChannelLink.dataset.targetNpub;
+          this.profileChannelLink.classList.add("hidden");
+        }
+      }
     } catch (error) {
       console.error("loadOwnProfile error:", error);
     }
@@ -2589,6 +2644,11 @@ class bitvidApp {
     if (this.profileButton) {
       this.profileButton.classList.add("hidden");
     }
+    if (this.profileChannelLink) {
+      this.profileChannelLink.classList.add("hidden");
+      this.profileChannelLink.removeAttribute("href");
+      delete this.profileChannelLink.dataset.targetNpub;
+    }
 
     // Hide the Subscriptions link
     if (this.subscriptionsLink) {

js/viewManager.js

@@ -9,6 +9,10 @@ const TRACKING_SCRIPT_PATTERN = /(?:^|\/)tracking\.js(?:$|\?)/;
  */
 export async function loadView(viewUrl) {
   try {
+    if (window.app && typeof window.app.prepareForViewLoad === "function") {
+      window.app.prepareForViewLoad();
+    }
+
     const res = await fetch(viewUrl);
     if (!res.ok) {
       throw new Error(`Failed to load view: ${res.status}`);