From b9a927199c36fea11ec7a6d8133e3e0e77544236 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Sat, 25 Oct 2025 16:39:26 -0400
Subject: [PATCH] Add hashtag management to profile modal

---
 components/profile-modal.html           | 114 +++++
 css/tailwind.source.css                 |  42 ++
 js/ui/profileModalController.js         | 544 ++++++++++++++++++++++++
 tests/profile-modal-controller.test.mjs | 225 ++++++++++
 4 files changed, 925 insertions(+)

diff --git a/components/profile-modal.html b/components/profile-modal.html
index e14fc33c..cbddee90 100644
--- a/components/profile-modal.html
+++ b/components/profile-modal.html
@@ -100,6 +100,15 @@
               >
                 Wallet
               </button>
+              <button
+                id="profileNavHashtags"
+                type="button"
+                class="btn-ghost focus-ring w-full justify-start gap-2 px-3 py-2 text-xs font-medium"
+                aria-controls="profilePaneHashtags"
+                aria-selected="false"
+              >
+                Hashtags
+              </button>
               <button
                 id="profileNavBlocked"
                 type="button"
@@ -452,6 +461,111 @@
               </div>
             </section>
 
+            <section
+              id="profilePaneHashtags"
+              class="profile-pane hidden space-y-6"
+              role="tabpanel"
+              aria-labelledby="profileNavHashtags"
+            >
+              <div class="space-y-3">
+                <p class="text-sm text-muted">
+                  Follow or mute hashtags to personalize the videos we show you.
+                </p>
+                <p
+                  id="profileHashtagStatus"
+                  class="text-sm text-muted"
+                  role="status"
+                  aria-live="polite"
+                ></p>
+              </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>
+                <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
+                  <label
+                    class="flex-1 text-sm text-muted-strong"
+                    for="profileHashtagInterestInput"
+                  >
+                    <span class="mb-2 block font-medium">Add a hashtag</span>
+                    <input
+                      id="profileHashtagInterestInput"
+                      type="text"
+                      inputmode="text"
+                      autocomplete="off"
+                      class="input"
+                      placeholder="nostr"
+                    />
+                  </label>
+                  <button
+                    id="profileAddHashtagInterestBtn"
+                    type="button"
+                    class="btn focus-ring"
+                  >
+                    Add interest
+                  </button>
+                </div>
+                <p
+                  id="profileHashtagInterestEmpty"
+                  class="card border border-dashed border-border/60 p-4 text-center text-sm text-muted"
+                >
+                  You haven’t added any interest hashtags yet.
+                </p>
+                <ul
+                  id="profileHashtagInterestList"
+                  class="profile-hashtag-list"
+                  data-orientation="horizontal"
+                ></ul>
+              </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>
+                <div class="flex flex-col gap-3 sm:flex-row sm:items-end">
+                  <label
+                    class="flex-1 text-sm text-muted-strong"
+                    for="profileHashtagDisinterestInput"
+                  >
+                    <span class="mb-2 block font-medium">Add a hashtag</span>
+                    <input
+                      id="profileHashtagDisinterestInput"
+                      type="text"
+                      inputmode="text"
+                      autocomplete="off"
+                      class="input"
+                      placeholder="spam"
+                    />
+                  </label>
+                  <button
+                    id="profileAddHashtagDisinterestBtn"
+                    type="button"
+                    class="btn focus-ring"
+                  >
+                    Add disinterest
+                  </button>
+                </div>
+                <p
+                  id="profileHashtagDisinterestEmpty"
+                  class="card border border-dashed border-border/60 p-4 text-center text-sm text-muted"
+                >
+                  You haven’t muted any hashtags yet.
+                </p>
+                <ul
+                  id="profileHashtagDisinterestList"
+                  class="profile-hashtag-list"
+                  data-orientation="horizontal"
+                ></ul>
+              </div>
+            </section>
+
             <section
               id="profilePaneBlocked"
               class="profile-pane hidden space-y-4"
diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index 911383dd..cbfc3c86 100644
--- a/css/tailwind.source.css
+++ b/css/tailwind.source.css
@@ -2722,6 +2722,48 @@
     white-space: nowrap;
   }
 
+  .profile-hashtag-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xs);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .profile-hashtag-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-3xs);
+    padding-block: var(--space-3xs);
+    padding-inline: var(--space-sm);
+    border-radius: var(--radius-full);
+    border: var(--border-width-hairline) solid var(--color-border-translucent);
+    background-color: var(--color-panel);
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--font-lineheight-tight);
+  }
+
+  .profile-hashtag-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--space-md);
+    block-size: var(--space-md);
+    border-radius: var(--radius-full);
+    color: var(--color-text-muted);
+    background: transparent;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .profile-hashtag-remove:hover {
+    color: var(--color-text);
+  }
+
   .profile-modal__remove-button {
     @apply border-2;
   }
diff --git a/js/ui/profileModalController.js b/js/ui/profileModalController.js
index 1d396f94..05cbb3bb 100644
--- a/js/ui/profileModalController.js
+++ b/js/ui/profileModalController.js
@@ -181,6 +181,55 @@ const SERVICE_CONTRACT = [
         ? fallbackMessage.trim()
         : "Failed to login. Please try again.",
   },
+  {
+    key: "hashtagPreferences",
+    type: "object",
+    description:
+      "Service providing access to interest and disinterest hashtag collections.",
+    fallback: () => ({
+      getInterests: () => [],
+      getDisinterests: () => [],
+      addInterest: () => false,
+      removeInterest: () => false,
+      addDisinterest: () => false,
+      removeDisinterest: () => false,
+      on: () => () => {},
+    }),
+  },
+  {
+    key: "getHashtagPreferences",
+    type: "function",
+    description:
+      "Returns the cached hashtag preferences snapshot (interests, disinterests, metadata).",
+    fallback: ({ resolved }) => () => {
+      const service = resolved.hashtagPreferences || {};
+      const interests =
+        typeof service.getInterests === "function"
+          ? service.getInterests()
+          : [];
+      const disinterests =
+        typeof service.getDisinterests === "function"
+          ? service.getDisinterests()
+          : [];
+      return {
+        interests,
+        disinterests,
+        eventId: null,
+        createdAt: null,
+        loaded: false,
+      };
+    },
+  },
+  {
+    key: "describeHashtagPreferencesError",
+    type: "function",
+    description:
+      "Maps hashtag preference errors to user-facing status messages for the modal.",
+    fallback: () => (_, fallbackMessage) =>
+      typeof fallbackMessage === "string" && fallbackMessage.trim()
+        ? fallbackMessage.trim()
+        : "Failed to update hashtag preferences. Please try again.",
+  },
   {
     key: "getProfileCacheEntry",
     type: "function",
@@ -802,6 +851,28 @@ export class ProfileModalController {
             devLogger.log(...args);
           };
 
+    this.hashtagPreferencesService = this.services.hashtagPreferences;
+    this.describeHashtagPreferencesErrorService =
+      this.services.describeHashtagPreferencesError;
+    this.getHashtagPreferencesSnapshotService =
+      this.services.getHashtagPreferences;
+
+    if (
+      this.hashtagPreferencesService &&
+      typeof this.hashtagPreferencesService.on === "function"
+    ) {
+      this.hashtagPreferencesUnsubscribe = this.hashtagPreferencesService.on(
+        "change",
+        (detail) => {
+          this.handleHashtagPreferencesChange({
+            action:
+              typeof detail?.action === "string" ? detail.action : "change",
+            preferences: detail,
+          });
+        },
+      );
+    }
+
     this.callbacks = {
       onClose: callbacks.onClose || noop,
       onLogout: callbacks.onLogout || noop,
@@ -862,6 +933,7 @@ export class ProfileModalController {
       account: null,
       relays: null,
       wallet: null,
+      hashtags: null,
       blocked: null,
       history: null,
       admin: null,
@@ -870,6 +942,7 @@ export class ProfileModalController {
       account: null,
       relays: null,
       wallet: null,
+      hashtags: null,
       blocked: null,
       history: null,
       admin: null,
@@ -899,6 +972,15 @@ export class ProfileModalController {
     this.walletDisconnectButton = null;
     this.walletStatusText = null;
     this.profileWalletStatusText = null;
+    this.hashtagStatusText = null;
+    this.hashtagInterestList = null;
+    this.hashtagInterestEmpty = null;
+    this.hashtagInterestInput = null;
+    this.addHashtagInterestButton = null;
+    this.hashtagDisinterestList = null;
+    this.hashtagDisinterestEmpty = null;
+    this.hashtagDisinterestInput = null;
+    this.addHashtagDisinterestButton = null;
     this.moderationSettingsCard = null;
     this.moderationBlurInput = null;
     this.moderationAutoplayInput = null;
@@ -957,6 +1039,7 @@ export class ProfileModalController {
     this.setWalletPaneBusy(this.isWalletBusy());
     this.addAccountButtonState = null;
     this.adminEmptyMessages = new Map();
+    this.hashtagPreferencesUnsubscribe = null;
   }
 
   async load() {
@@ -991,6 +1074,7 @@ export class ProfileModalController {
     this.setupLayoutBreakpointObserver();
     this.applyModalStackingOverrides();
     this.registerEventListeners();
+    this.populateHashtagPreferences();
     this.refreshModerationSettingsUi();
     const preserveMenu = this.isMobileLayoutActive();
     this.selectPane(this.getActivePane(), { keepMenuView: preserveMenu });
@@ -1038,6 +1122,8 @@ export class ProfileModalController {
       document.getElementById("profileNavAccount") || null;
     this.navButtons.relays = document.getElementById("profileNavRelays") || null;
     this.navButtons.wallet = document.getElementById("profileNavWallet") || null;
+    this.navButtons.hashtags =
+      document.getElementById("profileNavHashtags") || null;
     this.navButtons.blocked =
       document.getElementById("profileNavBlocked") || null;
     this.navButtons.history =
@@ -1047,6 +1133,7 @@ export class ProfileModalController {
     this.panes.account = document.getElementById("profilePaneAccount") || null;
     this.panes.relays = document.getElementById("profilePaneRelays") || null;
     this.panes.wallet = document.getElementById("profilePaneWallet") || null;
+    this.panes.hashtags = document.getElementById("profilePaneHashtags") || null;
     this.panes.blocked = document.getElementById("profilePaneBlocked") || null;
     this.panes.history = document.getElementById("profilePaneHistory") || null;
     this.panes.admin = document.getElementById("profilePaneAdmin") || null;
@@ -1074,6 +1161,25 @@ export class ProfileModalController {
     this.walletStatusText =
       document.getElementById("profileWalletStatus") || null;
 
+    this.hashtagStatusText =
+      document.getElementById("profileHashtagStatus") || null;
+    this.hashtagInterestList =
+      document.getElementById("profileHashtagInterestList") || null;
+    this.hashtagInterestEmpty =
+      document.getElementById("profileHashtagInterestEmpty") || null;
+    this.hashtagInterestInput =
+      document.getElementById("profileHashtagInterestInput") || null;
+    this.addHashtagInterestButton =
+      document.getElementById("profileAddHashtagInterestBtn") || null;
+    this.hashtagDisinterestList =
+      document.getElementById("profileHashtagDisinterestList") || null;
+    this.hashtagDisinterestEmpty =
+      document.getElementById("profileHashtagDisinterestEmpty") || null;
+    this.hashtagDisinterestInput =
+      document.getElementById("profileHashtagDisinterestInput") || null;
+    this.addHashtagDisinterestButton =
+      document.getElementById("profileAddHashtagDisinterestBtn") || null;
+
     this.profileRelayList = this.relayList;
     this.profileRelayInput = this.relayInput;
     this.profileAddRelayBtn = this.addRelayButton;
@@ -1298,6 +1404,36 @@ export class ProfileModalController {
       });
     }
 
+    if (this.addHashtagInterestButton instanceof HTMLElement) {
+      this.addHashtagInterestButton.addEventListener("click", () => {
+        void this.handleAddHashtagPreference("interest");
+      });
+    }
+
+    if (this.hashtagInterestInput instanceof HTMLElement) {
+      this.hashtagInterestInput.addEventListener("keydown", (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          void this.handleAddHashtagPreference("interest");
+        }
+      });
+    }
+
+    if (this.addHashtagDisinterestButton instanceof HTMLElement) {
+      this.addHashtagDisinterestButton.addEventListener("click", () => {
+        void this.handleAddHashtagPreference("disinterest");
+      });
+    }
+
+    if (this.hashtagDisinterestInput instanceof HTMLElement) {
+      this.hashtagDisinterestInput.addEventListener("keydown", (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          void this.handleAddHashtagPreference("disinterest");
+        }
+      });
+    }
+
     if (this.walletUriInput instanceof HTMLElement) {
       this.walletUriInput.addEventListener("focus", () => {
         this.revealSecretInputValue(this.walletUriInput);
@@ -1442,6 +1578,41 @@ export class ProfileModalController {
     return fallback;
   }
 
+  describeHashtagPreferencesError(error, options = {}) {
+    const describe = this.describeHashtagPreferencesErrorService;
+    const { fallbackMessage, operation } =
+      options && typeof options === "object" ? options : {};
+    const normalizedOperation =
+      typeof operation === "string" && operation.trim()
+        ? operation.trim().toLowerCase()
+        : "update";
+
+    const fallback =
+      typeof fallbackMessage === "string" && fallbackMessage.trim()
+        ? fallbackMessage.trim()
+        : normalizedOperation === "load"
+        ? "Failed to load hashtag preferences. Please try again."
+        : normalizedOperation === "reset"
+        ? "Failed to reset hashtag preferences."
+        : "Failed to update hashtag preferences. Please try again.";
+
+    if (typeof describe === "function") {
+      try {
+        const message = describe(error, fallback);
+        if (typeof message === "string" && message.trim()) {
+          return message.trim();
+        }
+      } catch (describeError) {
+        devLogger.warn(
+          "[ProfileModalController] describeHashtagPreferencesError service threw:",
+          describeError,
+        );
+      }
+    }
+
+    return fallback;
+  }
+
   setAddAccountLoading(isLoading) {
     if (!(this.addAccountButton instanceof HTMLElement)) {
       return;
@@ -2420,6 +2591,8 @@ export class ProfileModalController {
       void this.populateProfileWatchHistory();
     } else if (target === "wallet") {
       this.refreshWalletPaneState();
+    } else if (target === "hashtags") {
+      this.populateHashtagPreferences();
     } else if (target === "blocked") {
       this.populateBlockedList();
     }
@@ -2822,6 +2995,372 @@ export class ProfileModalController {
     }
   }
 
+  normalizeHashtagTag(value) {
+    if (typeof value !== "string") {
+      return "";
+    }
+
+    const trimmed = value.trim();
+    if (!trimmed) {
+      return "";
+    }
+
+    return trimmed.replace(/^#+/, "").toLowerCase();
+  }
+
+  formatHashtagTag(value) {
+    const normalized = this.normalizeHashtagTag(value);
+    if (!normalized) {
+      return "";
+    }
+    return `#${normalized}`;
+  }
+
+  sanitizeHashtagList(list) {
+    if (!Array.isArray(list)) {
+      return [];
+    }
+
+    const seen = new Set();
+    const normalized = [];
+
+    list.forEach((entry) => {
+      if (typeof entry !== "string") {
+        return;
+      }
+      const tag = this.normalizeHashtagTag(entry);
+      if (!tag || seen.has(tag)) {
+        return;
+      }
+      seen.add(tag);
+      normalized.push(tag);
+    });
+
+    normalized.sort((a, b) => a.localeCompare(b));
+    return normalized;
+  }
+
+  getResolvedHashtagPreferences(preferences = null) {
+    const candidate =
+      preferences && typeof preferences === "object" ? preferences : null;
+
+    let snapshot = null;
+    if (candidate) {
+      snapshot = candidate;
+    } else if (typeof this.getHashtagPreferencesSnapshotService === "function") {
+      try {
+        const resolved = this.getHashtagPreferencesSnapshotService();
+        if (resolved && typeof resolved === "object") {
+          snapshot = resolved;
+        }
+      } catch (error) {
+        devLogger.warn(
+          "[ProfileModalController] Failed to read hashtag preferences snapshot:",
+          error,
+        );
+      }
+    }
+
+    const service = this.hashtagPreferencesService || {};
+
+    const interestsSource = Array.isArray(snapshot?.interests)
+      ? snapshot.interests
+      : typeof service.getInterests === "function"
+      ? service.getInterests()
+      : [];
+    const disinterestsSource = Array.isArray(snapshot?.disinterests)
+      ? snapshot.disinterests
+      : typeof service.getDisinterests === "function"
+      ? service.getDisinterests()
+      : [];
+
+    return {
+      interests: this.sanitizeHashtagList(interestsSource),
+      disinterests: this.sanitizeHashtagList(disinterestsSource),
+    };
+  }
+
+  setHashtagStatus(message = "", tone = "muted") {
+    if (!(this.hashtagStatusText instanceof HTMLElement)) {
+      return;
+    }
+
+    const classList = this.hashtagStatusText.classList;
+    classList.remove(
+      "text-status-success",
+      "text-status-warning",
+      "text-status-danger",
+      "text-status-info",
+      "text-muted",
+    );
+
+    const normalized =
+      typeof message === "string" && message.trim() ? message.trim() : "";
+
+    if (!normalized) {
+      this.hashtagStatusText.textContent = "";
+      this.hashtagStatusText.classList.add("text-muted", "hidden");
+      return;
+    }
+
+    this.hashtagStatusText.textContent = normalized;
+    this.hashtagStatusText.classList.remove("hidden");
+
+    switch (tone) {
+      case "success":
+        classList.add("text-status-success");
+        break;
+      case "warning":
+      case "error":
+        classList.add("text-status-warning");
+        break;
+      case "info":
+        classList.add("text-status-info");
+        break;
+      default:
+        classList.add("text-muted");
+        break;
+    }
+  }
+
+  clearHashtagInputs() {
+    if (this.hashtagInterestInput instanceof HTMLInputElement) {
+      this.hashtagInterestInput.value = "";
+    }
+    if (this.hashtagDisinterestInput instanceof HTMLInputElement) {
+      this.hashtagDisinterestInput.value = "";
+    }
+  }
+
+  populateHashtagPreferences(preferences = null) {
+    const snapshot = this.getResolvedHashtagPreferences(preferences);
+
+    this.renderHashtagList("interest", snapshot.interests);
+    this.renderHashtagList("disinterest", snapshot.disinterests);
+
+    if (!snapshot.interests.length && !snapshot.disinterests.length) {
+      this.setHashtagStatus("", "muted");
+    }
+  }
+
+  renderHashtagList(type, tags) {
+    const list =
+      type === "interest" ? this.hashtagInterestList : this.hashtagDisinterestList;
+    const empty =
+      type === "interest" ? this.hashtagInterestEmpty : this.hashtagDisinterestEmpty;
+
+    if (!(list instanceof HTMLElement) || !(empty instanceof HTMLElement)) {
+      return;
+    }
+
+    list.innerHTML = "";
+
+    const normalized = this.sanitizeHashtagList(tags);
+    if (!normalized.length) {
+      empty.classList.remove("hidden");
+      list.classList.add("hidden");
+      return;
+    }
+
+    empty.classList.add("hidden");
+    list.classList.remove("hidden");
+
+    normalized.forEach((tag) => {
+      const item = this.createHashtagListItem(type, tag);
+      if (item) {
+        list.appendChild(item);
+      }
+    });
+  }
+
+  createHashtagListItem(type, tag) {
+    const normalized = this.normalizeHashtagTag(tag);
+    if (!normalized) {
+      return null;
+    }
+
+    const item = document.createElement("li");
+    item.className = "profile-hashtag-item";
+    item.dataset.hashtagType = type;
+    item.dataset.tag = normalized;
+
+    const label = document.createElement("span");
+    label.textContent = this.formatHashtagTag(normalized);
+    item.appendChild(label);
+
+    const removeButton = document.createElement("button");
+    removeButton.type = "button";
+    removeButton.className = "profile-hashtag-remove focus-ring";
+    removeButton.dataset.hashtagType = type;
+    removeButton.dataset.tag = normalized;
+    removeButton.setAttribute(
+      "aria-label",
+      type === "interest"
+        ? `Remove ${this.formatHashtagTag(normalized)} from interests`
+        : `Remove ${this.formatHashtagTag(normalized)} from disinterests`,
+    );
+    removeButton.innerHTML = "<span aria-hidden=\"true\">&times;</span>";
+    removeButton.addEventListener("click", () => {
+      void this.handleRemoveHashtagPreference(type, normalized);
+    });
+
+    item.appendChild(removeButton);
+
+    return item;
+  }
+
+  async handleAddHashtagPreference(type) {
+    const isInterest = type === "interest";
+    const input = isInterest
+      ? this.hashtagInterestInput
+      : this.hashtagDisinterestInput;
+
+    const rawValue =
+      input instanceof HTMLInputElement ? input.value || "" : "";
+    const normalized = this.normalizeHashtagTag(rawValue);
+
+    if (!(input instanceof HTMLInputElement)) {
+      return { success: false, reason: "missing-input" };
+    }
+
+    if (!normalized) {
+      const message = "Enter a hashtag to add.";
+      this.showError(message);
+      this.setHashtagStatus(message, "warning");
+      return { success: false, reason: "empty" };
+    }
+
+    const service = this.hashtagPreferencesService;
+    const addMethod = isInterest
+      ? service?.addInterest
+      : service?.addDisinterest;
+
+    if (typeof addMethod !== "function") {
+      const message = "Hashtag preferences are unavailable right now.";
+      this.showError(message);
+      this.setHashtagStatus(message, "warning");
+      return { success: false, reason: "service-unavailable" };
+    }
+
+    const snapshot = this.getResolvedHashtagPreferences();
+    const alreadyInTarget = isInterest
+      ? snapshot.interests.includes(normalized)
+      : snapshot.disinterests.includes(normalized);
+    const inOpposite = isInterest
+      ? snapshot.disinterests.includes(normalized)
+      : snapshot.interests.includes(normalized);
+
+    let result = false;
+    try {
+      result = addMethod.call(service, normalized);
+    } catch (error) {
+      const message = this.describeHashtagPreferencesError(error, {
+        fallbackMessage: "Failed to update hashtag preferences. Please try again.",
+      });
+      if (message) {
+        this.showError(message);
+        this.setHashtagStatus(message, "warning");
+      }
+      return { success: false, reason: error?.code || "service-error", error };
+    } finally {
+      if (input) {
+        input.value = "";
+      }
+    }
+
+    if (result) {
+      const actionMessage = inOpposite
+        ? `${this.formatHashtagTag(normalized)} moved to ${
+            isInterest ? "interests" : "disinterests"
+          }.`
+        : `${this.formatHashtagTag(normalized)} added to ${
+            isInterest ? "interests" : "disinterests"
+          }.`;
+      this.showSuccess(actionMessage);
+      this.setHashtagStatus(actionMessage, "success");
+      this.populateHashtagPreferences();
+      return { success: true, reason: inOpposite ? "moved" : "added" };
+    }
+
+    if (alreadyInTarget) {
+      const message = `${this.formatHashtagTag(normalized)} is already in your ${
+        isInterest ? "interests" : "disinterests"
+      }.`;
+      this.showStatus(message);
+      this.setHashtagStatus(message, "info");
+      this.populateHashtagPreferences();
+      return { success: false, reason: "duplicate" };
+    }
+
+    const fallbackMessage = this.describeHashtagPreferencesError(null, {
+      fallbackMessage: `Failed to add ${this.formatHashtagTag(normalized)}.`,
+    });
+    if (fallbackMessage) {
+      this.showError(fallbackMessage);
+      this.setHashtagStatus(fallbackMessage, "warning");
+    }
+    this.populateHashtagPreferences();
+    return { success: false, reason: "no-change" };
+  }
+
+  async handleRemoveHashtagPreference(type, candidate) {
+    const normalized = this.normalizeHashtagTag(candidate);
+    if (!normalized) {
+      return { success: false, reason: "invalid" };
+    }
+
+    const service = this.hashtagPreferencesService;
+    const removeMethod =
+      type === "interest"
+        ? service?.removeInterest
+        : service?.removeDisinterest;
+
+    if (typeof removeMethod !== "function") {
+      const message = "Hashtag preferences are unavailable right now.";
+      this.showError(message);
+      this.setHashtagStatus(message, "warning");
+      return { success: false, reason: "service-unavailable" };
+    }
+
+    let removed = false;
+    try {
+      removed = removeMethod.call(service, normalized);
+    } catch (error) {
+      const message = this.describeHashtagPreferencesError(error, {
+        fallbackMessage: `Failed to remove ${this.formatHashtagTag(normalized)}.`,
+      });
+      if (message) {
+        this.showError(message);
+        this.setHashtagStatus(message, "warning");
+      }
+      this.populateHashtagPreferences();
+      return { success: false, reason: error?.code || "service-error", error };
+    }
+
+    if (removed) {
+      const message = `${this.formatHashtagTag(normalized)} removed from ${
+        type === "interest" ? "interests" : "disinterests"
+      }.`;
+      this.showSuccess(message);
+      this.setHashtagStatus(message, "success");
+    } else {
+      const message = `${this.formatHashtagTag(normalized)} is already removed.`;
+      this.showStatus(message);
+      this.setHashtagStatus(message, "info");
+    }
+
+    this.populateHashtagPreferences();
+    return { success: removed, reason: removed ? "removed" : "already-removed" };
+  }
+
+  handleHashtagPreferencesChange(detail = {}) {
+    const preferences =
+      detail && typeof detail.preferences === "object"
+        ? detail.preferences
+        : detail;
+    this.populateHashtagPreferences(preferences);
+  }
+
   populateBlockedList(blocked = null) {
     if (!this.blockList || !this.blockListEmpty) {
       if (this.blockListLoadingState === "loading") {
@@ -5944,12 +6483,14 @@ export class ProfileModalController {
     this.populateBlockedList();
     this.populateProfileRelays();
     this.refreshWalletPaneState();
+    this.populateHashtagPreferences();
 
     postLoginPromise
       .then(() => {
         this.populateBlockedList();
         this.populateProfileRelays();
         this.refreshWalletPaneState();
+        this.populateHashtagPreferences();
       })
       .catch((error) => {
         userLogger.warn(
@@ -5997,6 +6538,9 @@ export class ProfileModalController {
     this.populateBlockedList();
     this.populateProfileRelays();
     this.refreshWalletPaneState();
+    this.populateHashtagPreferences();
+    this.clearHashtagInputs();
+    this.setHashtagStatus("", "muted");
 
     return true;
   }
diff --git a/tests/profile-modal-controller.test.mjs b/tests/profile-modal-controller.test.mjs
index ec7f69af..caf16de7 100644
--- a/tests/profile-modal-controller.test.mjs
+++ b/tests/profile-modal-controller.test.mjs
@@ -169,6 +169,19 @@ afterEach(() => {
   container = null;
 });
 
+function normalizeTestTag(value) {
+  if (typeof value !== 'string') {
+    return '';
+  }
+
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return '';
+  }
+
+  return trimmed.replace(/^#+/, '').toLowerCase();
+}
+
 function createController(options = {}) {
   const {
     services: serviceOverrides = {},
@@ -181,6 +194,7 @@ function createController(options = {}) {
     userBlocks: userBlocksOverrides = {},
     accessControl: accessControlOverrides = {},
     nostrClient: nostrClientOverrides = {},
+    hashtagPreferences: hashtagPreferencesOverrides = {},
     ...otherServices
   } = serviceOverrides;
 
@@ -203,6 +217,56 @@ function createController(options = {}) {
     getBlockedPubkeys: () => [],
   };
 
+  const hashtagStore = {
+    interests: new Set(),
+    disinterests: new Set(),
+  };
+
+  const baseHashtagPreferences = {
+    getInterests: () => Array.from(hashtagStore.interests).sort(),
+    getDisinterests: () => Array.from(hashtagStore.disinterests).sort(),
+    addInterest: (tag) => {
+      const normalized = normalizeTestTag(tag);
+      if (!normalized) {
+        return false;
+      }
+      const moved = hashtagStore.disinterests.delete(normalized);
+      const had = hashtagStore.interests.has(normalized);
+      hashtagStore.interests.add(normalized);
+      return !had || moved;
+    },
+    removeInterest: (tag) => {
+      const normalized = normalizeTestTag(tag);
+      if (!normalized) {
+        return false;
+      }
+      return hashtagStore.interests.delete(normalized);
+    },
+    addDisinterest: (tag) => {
+      const normalized = normalizeTestTag(tag);
+      if (!normalized) {
+        return false;
+      }
+      const moved = hashtagStore.interests.delete(normalized);
+      const had = hashtagStore.disinterests.has(normalized);
+      hashtagStore.disinterests.add(normalized);
+      return !had || moved;
+    },
+    removeDisinterest: (tag) => {
+      const normalized = normalizeTestTag(tag);
+      if (!normalized) {
+        return false;
+      }
+      return hashtagStore.disinterests.delete(normalized);
+    },
+    on: () => () => {},
+  };
+
+  const hashtagPreferences = {
+    ...baseHashtagPreferences,
+    ...hashtagPreferencesOverrides,
+  };
+
   const baseAccessControl = {
     ensureReady: async () => {},
     canEditAdminLists: () => false,
@@ -223,6 +287,15 @@ function createController(options = {}) {
     userBlocks: { ...baseUserBlocks, ...userBlocksOverrides },
     accessControl: { ...baseAccessControl, ...accessControlOverrides },
     nostrClient: { sessionActor: { pubkey: null }, ...nostrClientOverrides },
+    hashtagPreferences,
+    getHashtagPreferences: () => ({
+      interests: hashtagPreferences.getInterests(),
+      disinterests: hashtagPreferences.getDisinterests(),
+      eventId: null,
+      createdAt: null,
+      loaded: true,
+    }),
+    describeHashtagPreferencesError: () => '',
     onAccessControlUpdated: async () => {},
     describeAdminError: () => 'Unable to update moderation settings. Please try again.',
     describeNotificationError: () => '',
@@ -596,6 +669,158 @@ for (const _ of [0]) {
     assert.equal(directKeyLabel.dataset.providerVariant, 'warning');
     assert.equal(directKeyButton.getAttribute('aria-pressed'), 'false');
   });
+
+  test('Hashtag pane shows empty states by default', async (t) => {
+    const controller = createController();
+    await controller.load();
+    applyDesignSystemAttributes(document);
+
+    let cleanupRan = false;
+    const cleanup = () => {
+      try {
+        controller.hide({ silent: true });
+      } catch {}
+      cleanupRan = true;
+    };
+
+    try {
+      await controller.show('hashtags');
+      await waitForAnimationFrame(window, 2);
+
+      const interestList = document.getElementById('profileHashtagInterestList');
+      const interestEmpty = document.getElementById('profileHashtagInterestEmpty');
+      const disinterestList = document.getElementById('profileHashtagDisinterestList');
+      const disinterestEmpty = document.getElementById(
+        'profileHashtagDisinterestEmpty',
+      );
+
+      assert.ok(interestList && interestEmpty && disinterestList && disinterestEmpty);
+      assert.equal(interestList?.classList.contains('hidden'), true);
+      assert.equal(interestEmpty?.classList.contains('hidden'), false);
+      assert.equal(disinterestList?.classList.contains('hidden'), true);
+      assert.equal(disinterestEmpty?.classList.contains('hidden'), false);
+    } finally {
+      cleanup();
+    }
+
+    t.after(() => {
+      if (!cleanupRan) {
+        cleanup();
+      }
+      resetRuntimeFlags();
+    });
+  });
+
+  test('Hashtag pane adds, moves, and removes tags', async (t) => {
+    const controller = createController();
+    await controller.load();
+    applyDesignSystemAttributes(document);
+
+    let cleanupRan = false;
+    const cleanup = () => {
+      try {
+        controller.hide({ silent: true });
+      } catch {}
+      cleanupRan = true;
+    };
+
+    try {
+      await controller.show('hashtags');
+      await waitForAnimationFrame(window, 2);
+
+      controller.hashtagInterestInput.value = '#nostr';
+      controller.addHashtagInterestButton.click();
+      await waitForAnimationFrame(window, 2);
+
+      const interestList = document.getElementById('profileHashtagInterestList');
+      assert.equal(interestList?.classList.contains('hidden'), false);
+      assert.equal(interestList?.querySelectorAll('li').length, 1);
+      const interestLabel = interestList?.querySelector('li span');
+      assert.equal(interestLabel?.textContent, '#nostr');
+
+      const disinterestList = document.getElementById('profileHashtagDisinterestList');
+      const disinterestEmpty = document.getElementById('profileHashtagDisinterestEmpty');
+      assert.equal(disinterestList?.classList.contains('hidden'), true);
+      assert.equal(disinterestEmpty?.classList.contains('hidden'), false);
+
+      controller.hashtagDisinterestInput.value = '#nostr';
+      controller.addHashtagDisinterestButton.click();
+      await waitForAnimationFrame(window, 2);
+
+      assert.equal(interestList?.querySelectorAll('li').length, 0);
+      const interestEmpty = document.getElementById('profileHashtagInterestEmpty');
+      assert.equal(interestEmpty?.classList.contains('hidden'), false);
+
+      assert.equal(disinterestList?.classList.contains('hidden'), false);
+      assert.equal(disinterestList?.querySelectorAll('li').length, 1);
+      const disinterestLabel = disinterestList?.querySelector('li span');
+      assert.equal(disinterestLabel?.textContent, '#nostr');
+
+      const removeButton = disinterestList?.querySelector(
+        'button.profile-hashtag-remove',
+      );
+      assert.ok(removeButton);
+      removeButton.click();
+      await waitForAnimationFrame(window, 2);
+
+      assert.equal(disinterestList?.querySelectorAll('li').length, 0);
+      assert.equal(disinterestEmpty?.classList.contains('hidden'), false);
+    } finally {
+      cleanup();
+    }
+
+    t.after(() => {
+      if (!cleanupRan) {
+        cleanup();
+      }
+      resetRuntimeFlags();
+    });
+  });
+
+  test('Hashtag pane resets after logout when service clears tags', async (t) => {
+    const controller = createController();
+    await controller.load();
+    applyDesignSystemAttributes(document);
+
+    let cleanupRan = false;
+    const cleanup = () => {
+      try {
+        controller.hide({ silent: true });
+      } catch {}
+      cleanupRan = true;
+    };
+
+    try {
+      await controller.show('hashtags');
+      await waitForAnimationFrame(window, 2);
+
+      controller.hashtagInterestInput.value = 'art';
+      controller.addHashtagInterestButton.click();
+      await waitForAnimationFrame(window, 2);
+
+      const interestList = document.getElementById('profileHashtagInterestList');
+      assert.equal(interestList?.querySelectorAll('li').length, 1);
+
+      controller.hashtagPreferencesService.removeInterest('art');
+      await controller.handleAuthLogout({});
+      await waitForAnimationFrame(window, 2);
+
+      const interestEmpty = document.getElementById('profileHashtagInterestEmpty');
+      const disinterestEmpty = document.getElementById('profileHashtagDisinterestEmpty');
+      assert.equal(interestList?.querySelectorAll('li').length, 0);
+      assert.equal(interestEmpty?.classList.contains('hidden'), false);
+      assert.equal(disinterestEmpty?.classList.contains('hidden'), false);
+    } finally {
+      cleanup();
+    }
+
+    t.after(() => {
+      if (!cleanupRan) {
+        cleanup();
+      }
+      resetRuntimeFlags();
+    });
+  });
 }
 
 test('load() injects markup and caches expected elements', async () => {