Merge pull request #926 from PR0M3TH3AN/codex/add-friends-nav-button-in-profile-modal

Add Friends navigation and pane to profile modal

components/profile-modal.html

@@ -109,6 +109,15 @@
               >
                 Hashtags
               </button>
+              <button
+                id="profileNavFriends"
+                type="button"
+                class="btn-ghost focus-ring w-full justify-start gap-2 px-3 py-2 text-xs font-medium"
+                aria-controls="profilePaneFriends"
+                aria-selected="false"
+              >
+                Friends
+              </button>
               <button
                 id="profileNavBlocked"
                 type="button"
@@ -566,6 +575,40 @@
               </div>
             </section>
 
+            <section
+              id="profilePaneFriends"
+              class="profile-pane hidden space-y-4"
+              role="tabpanel"
+              aria-labelledby="profileNavFriends"
+            >
+              <p class="text-sm text-muted">
+                Add friends to spotlight creators you want to keep up with across bitvid.
+              </p>
+              <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
+                <label class="flex-1 text-sm text-muted-strong" for="friendsInput">
+                  <span class="mb-2 block font-medium">Creator npub</span>
+                  <input
+                    id="friendsInput"
+                    type="text"
+                    inputmode="text"
+                    autocomplete="off"
+                    class="input"
+                    placeholder="npub1..."
+                  />
+                </label>
+                <button id="addFriendBtn" type="button" class="btn focus-ring">
+                  Add friend
+                </button>
+              </div>
+              <div
+                id="friendsEmpty"
+                class="card border border-dashed border-border/60 p-6 text-center text-sm text-muted"
+              >
+                You haven’t added any friends yet.
+              </div>
+              <ul id="friendsList" class="grid-stack" data-orientation="vertical"></ul>
+            </section>
+
             <section
               id="profilePaneBlocked"
               class="profile-pane hidden space-y-4"

js/ui/profileModalController.js

@@ -951,6 +951,7 @@ export class ProfileModalController {
       relays: null,
       wallet: null,
       hashtags: null,
+      friends: null,
       blocked: null,
       history: null,
       admin: null,
@@ -960,6 +961,7 @@ export class ProfileModalController {
       relays: null,
       wallet: null,
       hashtags: null,
+      friends: null,
       blocked: null,
       history: null,
       admin: null,
@@ -972,6 +974,10 @@ export class ProfileModalController {
     this.profileRelayInput = null;
     this.profileAddRelayBtn = null;
     this.profileRestoreRelaysBtn = null;
+    this.friendList = null;
+    this.friendListEmpty = null;
+    this.friendInput = null;
+    this.addFriendButton = null;
     this.blockList = null;
     this.blockListEmpty = null;
     this.blockListStatus = null;
@@ -1141,6 +1147,8 @@ export class ProfileModalController {
     this.navButtons.wallet = document.getElementById("profileNavWallet") || null;
     this.navButtons.hashtags =
       document.getElementById("profileNavHashtags") || null;
+    this.navButtons.friends =
+      document.getElementById("profileNavFriends") || null;
     this.navButtons.blocked =
       document.getElementById("profileNavBlocked") || null;
     this.navButtons.history =
@@ -1151,6 +1159,7 @@ export class ProfileModalController {
     this.panes.relays = document.getElementById("profilePaneRelays") || null;
     this.panes.wallet = document.getElementById("profilePaneWallet") || null;
     this.panes.hashtags = document.getElementById("profilePaneHashtags") || null;
+    this.panes.friends = document.getElementById("profilePaneFriends") || null;
     this.panes.blocked = document.getElementById("profilePaneBlocked") || null;
     this.panes.history = document.getElementById("profilePaneHistory") || null;
     this.panes.admin = document.getElementById("profilePaneAdmin") || null;
@@ -1161,6 +1170,11 @@ export class ProfileModalController {
     this.restoreRelaysButton =
       document.getElementById("restoreRelaysBtn") || null;
 
+    this.friendList = document.getElementById("friendsList") || null;
+    this.friendListEmpty = document.getElementById("friendsEmpty") || null;
+    this.friendInput = document.getElementById("friendsInput") || null;
+    this.addFriendButton = document.getElementById("addFriendBtn") || null;
+
     this.blockList = document.getElementById("blockedList") || null;
     this.blockListEmpty = document.getElementById("blockedEmpty") || null;
     this.blockInput = document.getElementById("blockedInput") || null;
@@ -1201,6 +1215,10 @@ export class ProfileModalController {
     this.profileRelayInput = this.relayInput;
     this.profileAddRelayBtn = this.addRelayButton;
     this.profileRestoreRelaysBtn = this.restoreRelaysButton;
+    this.profileFriendsList = this.friendList;
+    this.profileFriendsEmpty = this.friendListEmpty;
+    this.profileFriendsInput = this.friendInput;
+    this.profileAddFriendBtn = this.addFriendButton;
     this.profileBlockedList = this.blockList;
     this.profileBlockedEmpty = this.blockListEmpty;
     this.profileBlockedInput = this.blockInput;