From 9a5a1fe5429c249450af349973fed9d6c7c535e5 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 29 Jan 2026 11:30:09 -0500
Subject: [PATCH] Add refresh icon buttons to profile modal

---
 components/profile-modal.html | 134 ++++++++++++++++++++++++++++++----
 1 file changed, 119 insertions(+), 15 deletions(-)

diff --git a/components/profile-modal.html b/components/profile-modal.html
index f254a1eb..cbe1f87a 100644
--- a/components/profile-modal.html
+++ b/components/profile-modal.html
@@ -687,6 +687,18 @@
                   </div>
                 </div>
               </div>
+              <div class="flex items-center justify-between gap-3">
+                <h3 class="text-base font-semibold text-text">Relays</h3>
+                <button
+                  id="relayListRefreshBtn"
+                  type="button"
+                  class="btn-ghost btn-icon"
+                  data-size="sm"
+                  aria-label="Refresh relay list"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 21h5v-5"></path></svg>
+                </button>
+              </div>
               <ul id="relayList" class="grid-stack" data-orientation="vertical"></ul>
               <div id="relayHealthPanel" class="card space-y-4 p-5">
                 <div class="flex flex-wrap items-start justify-between gap-3">
@@ -920,11 +932,22 @@
               </div>
 
               <div class="card space-y-4 p-5">
-                <div class="space-y-1">
-                  <h3 class="text-base font-semibold text-text">Interests</h3>
-                  <p class="text-sm text-muted">
-                    Videos tagged with these hashtags will be highlighted for you.
-                  </p>
+                <div class="flex items-start justify-between gap-3">
+                  <div class="space-y-1">
+                    <h3 class="text-base font-semibold text-text">Interests</h3>
+                    <p class="text-sm text-muted">
+                      Videos tagged with these hashtags will be highlighted for you.
+                    </p>
+                  </div>
+                  <button
+                    id="profileHashtagInterestRefreshBtn"
+                    type="button"
+                    class="btn-ghost btn-icon"
+                    data-size="sm"
+                    aria-label="Refresh interest hashtags"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 21h5v-5"></path></svg>
+                  </button>
                 </div>
                 <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
                   <label
@@ -963,11 +986,22 @@
               </div>
 
               <div class="card space-y-4 p-5">
-                <div class="space-y-1">
-                  <h3 class="text-base font-semibold text-text">Disinterests</h3>
-                  <p class="text-sm text-muted">
-                    We’ll de-emphasize or hide videos using these hashtags.
-                  </p>
+                <div class="flex items-start justify-between gap-3">
+                  <div class="space-y-1">
+                    <h3 class="text-base font-semibold text-text">Disinterests</h3>
+                    <p class="text-sm text-muted">
+                      We’ll de-emphasize or hide videos using these hashtags.
+                    </p>
+                  </div>
+                  <button
+                    id="profileHashtagDisinterestRefreshBtn"
+                    type="button"
+                    class="btn-ghost btn-icon"
+                    data-size="sm"
+                    aria-label="Refresh disinterest hashtags"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 21h5v-5"></path></svg>
+                  </button>
                 </div>
                 <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
                   <label
@@ -1015,6 +1049,18 @@
               <p class="text-sm text-muted">
                 These are the creators you’ve subscribed to directly in bitvid.
               </p>
+              <div class="flex items-center justify-between gap-3">
+                <h3 class="text-base font-semibold text-text">Subscriptions</h3>
+                <button
+                  id="subscriptionsRefreshBtn"
+                  type="button"
+                  class="btn-ghost btn-icon"
+                  data-size="sm"
+                  aria-label="Refresh subscriptions"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 21h5v-5"></path></svg>
+                </button>
+              </div>
               <div
                 id="subscriptionsEmpty"
                 class="card border border-dashed border-border/60 p-6 text-center text-sm text-muted"
@@ -1033,6 +1079,18 @@
               <p class="text-sm text-muted">
                 Add friends to spotlight creators you want to keep up with across bitvid.
               </p>
+              <div class="flex items-center justify-between gap-3">
+                <h3 class="text-base font-semibold text-text">Friends</h3>
+                <button
+                  id="friendsRefreshBtn"
+                  type="button"
+                  class="btn-ghost btn-icon"
+                  data-size="sm"
+                  aria-label="Refresh friends"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 21h5v-5"></path></svg>
+                </button>
+              </div>
               <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>
@@ -1251,6 +1309,18 @@
                 Creators you block are hidden from your bitvid experience. This
                 list is private to your account.
               </p>
+              <div class="flex items-center justify-between gap-3">
+                <h3 class="text-base font-semibold text-text">Blocked creators</h3>
+                <button
+                  id="blockedRefreshBtn"
+                  type="button"
+                  class="btn-ghost btn-icon"
+                  data-size="sm"
+                  aria-label="Refresh blocked creators"
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 21h5v-5"></path></svg>
+                </button>
+              </div>
               <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
                 <label class="flex-1 text-sm text-muted-strong" for="blockedInput">
                   <span class="mb-2 block font-medium">Creator npub</span>
@@ -1364,10 +1434,11 @@
                     <button
                       id="profileHistoryRefresh"
                       type="button"
-                      class="btn-ghost focus-ring inline-flex items-center gap-2"
+                      class="btn-ghost btn-icon focus-ring"
                       data-size="sm"
+                      aria-label="Refresh watch history"
                     >
-                      Refresh
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 21h5v-5"></path></svg>
                     </button>
                   </div>
                 </div>
@@ -1463,7 +1534,18 @@
 
               <div id="adminModeratorsSection" class="space-y-4 hidden" aria-hidden="true">
                 <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-                  <h4 class="text-base font-semibold text-text">Moderators</h4>
+                  <div class="flex items-center gap-2">
+                    <h4 class="text-base font-semibold text-text">Moderators</h4>
+                    <button
+                      id="adminModeratorsRefreshBtn"
+                      type="button"
+                      class="btn-ghost btn-icon"
+                      data-size="sm"
+                      aria-label="Refresh moderators"
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 21h5v-5"></path></svg>
+                    </button>
+                  </div>
                   <p class="text-xs uppercase tracking-wide text-muted">
                     Super Admin only
                   </p>
@@ -1502,7 +1584,18 @@
 
               <div id="adminWhitelistSection" class="space-y-4">
                 <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-                  <h4 class="text-base font-semibold text-text">Whitelist</h4>
+                  <div class="flex items-center gap-2">
+                    <h4 class="text-base font-semibold text-text">Whitelist</h4>
+                    <button
+                      id="adminWhitelistRefreshBtn"
+                      type="button"
+                      class="btn-ghost btn-icon"
+                      data-size="sm"
+                      aria-label="Refresh whitelist"
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 21h5v-5"></path></svg>
+                    </button>
+                  </div>
                 </div>
                 <p class="text-sm text-muted">
                   Creators listed here remain visible when whitelist mode is enabled. Accounts can appear in both lists, and the blacklist always takes precedence.
@@ -1538,7 +1631,18 @@
 
               <div id="adminBlacklistSection" class="space-y-4">
                 <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-                  <h4 class="text-base font-semibold text-text">Blacklist</h4>
+                  <div class="flex items-center gap-2">
+                    <h4 class="text-base font-semibold text-text">Blacklist</h4>
+                    <button
+                      id="adminBlacklistRefreshBtn"
+                      type="button"
+                      class="btn-ghost btn-icon"
+                      data-size="sm"
+                      aria-label="Refresh blacklist"
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 21h5v-5"></path></svg>
+                    </button>
+                  </div>
                 </div>
                 <p class="text-sm text-muted">
                   Creators on the blacklist are hidden from bitvid everywhere. Accounts can appear in both lists, and the blacklist always takes precedence.