feat: mute/unmute on profile

src/element/chat-message.tsx

@@ -151,7 +151,7 @@ export function ChatMessage({
           pubkey={ev.pubkey}
           profile={profile}
         />
-        <Text content={ev.content} tags={ev.tags} />
+        <Text tags={ev.tags} content={ev.content} />
         {(hasReactions || hasZaps) && (
           <div className="message-reactions">
             {hasZaps && (

src/element/follow-button.tsx

@@ -16,7 +16,7 @@ export function LoggedInFollowButton({ pubkey }: { pubkey: string }) {
     if (pub) {
       const newFollows = tags.filter((t) => t.at(1) !== pubkey);
       const ev = await pub.generic((eb) => {
-        eb.kind(EventKind.ContactList).content(JSON.stringify(login.relays));
+        eb.kind(EventKind.ContactList).content(login.follows.content);
         for (const t of newFollows) {
           eb.tag(t);
         }
@@ -24,7 +24,7 @@ export function LoggedInFollowButton({ pubkey }: { pubkey: string }) {
       });
       console.debug(ev);
       System.BroadcastEvent(ev);
-      Login.setFollows(newFollows, unixNow());
+      Login.setFollows(newFollows, login.follows.content, unixNow());
     }
   }
 
@@ -33,7 +33,7 @@ export function LoggedInFollowButton({ pubkey }: { pubkey: string }) {
     if (pub) {
       const newFollows = [...tags, ["p", pubkey]];
       const ev = await pub.generic((eb) => {
-        eb.kind(EventKind.ContactList).content(JSON.stringify(login.relays));
+        eb.kind(EventKind.ContactList).content(login.follows.content);
         for (const tag of newFollows) {
           eb.tag(tag);
         }
@@ -41,7 +41,7 @@ export function LoggedInFollowButton({ pubkey }: { pubkey: string }) {
       });
       console.debug(ev);
       System.BroadcastEvent(ev);
-      Login.setFollows(newFollows, unixNow());
+      Login.setFollows(newFollows, login.follows.content, unixNow());
     }
   }
 

src/element/live-chat.css

@@ -357,3 +357,17 @@
   height: 18px;
   border-radius: unset;
 }
+
+.message .message-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.message .message-container .markdown p {
+  font-size: 14px;
+}
+
+.message .message-container .markdown > p {
+  margin: 0;
+}

src/element/mute-button.tsx

@@ -0,0 +1,65 @@
+import { unixNow } from "@snort/shared";
+
+import { useLogin } from "hooks/login";
+import AsyncButton from "element/async-button";
+import { Login, System } from "index";
+import { MUTED } from "const";
+
+export function LoggedInMuteButton({ pubkey }: { pubkey: string }) {
+  const login = useLogin();
+  const tags = login.muted.tags;
+  const muted = tags.filter((t) => t.at(0) === "p");
+  const isMuted = muted.find((t) => t.at(1) === pubkey);
+
+  async function unmute() {
+    const pub = login?.publisher();
+    if (pub) {
+      const newMuted = tags.filter((t) => t.at(1) !== pubkey);
+      const ev = await pub.generic((eb) => {
+        eb.kind(MUTED).content(login.muted.content);
+        for (const t of newMuted) {
+          eb.tag(t);
+        }
+        return eb;
+      });
+      console.debug(ev);
+      System.BroadcastEvent(ev);
+      Login.setMuted(newMuted, login.muted.content, unixNow());
+    }
+  }
+
+  async function mute() {
+    const pub = login?.publisher();
+    if (pub) {
+      const newMuted = [...tags, ["p", pubkey]];
+      const ev = await pub.generic((eb) => {
+        eb.kind(MUTED).content(login.muted.content);
+        for (const tag of newMuted) {
+          eb.tag(tag);
+        }
+        return eb;
+      });
+      console.debug(ev);
+      System.BroadcastEvent(ev);
+      Login.setMuted(newMuted, login.muted.content, unixNow());
+    }
+  }
+
+  return (
+    <AsyncButton
+      disabled={login.muted.timestamp === 0}
+      type="button"
+      className="btn delete-button"
+      onClick={isMuted ? unmute : mute}
+    >
+      {isMuted ? "Unmute" : "Mute"}
+    </AsyncButton>
+  );
+}
+
+export function MuteButton({ pubkey }: { pubkey: string }) {
+  const login = useLogin();
+  return login?.pubkey ? (
+    <LoggedInMuteButton loggedIn={login.pubkey} pubkey={pubkey} />
+  ) : null;
+}

src/hooks/login.ts

@@ -65,11 +65,10 @@ export function useLoginEvents(pubkey?: string, leaveOpen = false) {
         setUserEmojis(ev.tags);
       }
       if (ev?.kind === MUTED) {
-        // todo: decrypt ev.content tags
-        Login.setMuted(ev.tags, ev.created_at);
+        Login.setMuted(ev.tags, ev.content, ev.created_at);
       }
       if (ev?.kind === EventKind.ContactList) {
-        Login.setFollows(ev.tags, ev.created_at);
+        Login.setFollows(ev.tags, ev.content, ev.created_at);
       }
       if (ev?.kind === EventKind.Relays) {
         Login.setRelays(ev.tags, ev.created_at);

src/login.ts

@@ -12,6 +12,7 @@ export enum LoginType {
 
 interface ReplaceableTags {
   tags: Array<string[]>;
+  content: "";
   timestamp: number;
 }
 
@@ -72,11 +73,12 @@ export class LoginStore extends ExternalStore<LoginSession | undefined> {
     return this.#session ? { ...this.#session } : undefined;
   }
 
-  setFollows(follows: Array<string>, ts: number) {
+  setFollows(follows: Array<string>, content: string, ts: number) {
     if (this.#session.follows.timestamp >= ts) {
       return;
     }
     this.#session.follows.tags = follows;
+    this.#session.follows.content = content;
     this.#session.follows.timestamp = ts;
     this.#save();
   }
@@ -86,11 +88,12 @@ export class LoginStore extends ExternalStore<LoginSession | undefined> {
     this.#save();
   }
 
-  setMuted(muted: Array<string[]>, ts: number) {
+  setMuted(muted: Array<string[]>, content: string, ts: number) {
     if (this.#session.muted.timestamp >= ts) {
       return;
     }
     this.#session.muted.tags = muted;
+    this.#session.muted.content = content;
     this.#session.muted.timestamp = ts;
     this.#save();
   }

src/pages/profile-page.tsx

@@ -15,6 +15,7 @@ import { Icon } from "element/icon";
 import { SendZapsDialog } from "element/send-zap";
 import { VideoTile } from "element/video-tile";
 import { FollowButton } from "element/follow-button";
+import { MuteButton } from "element/mute-button";
 import { useProfile } from "hooks/profile";
 import useTopZappers from "hooks/top-zappers";
 import { Text } from "element/text";
@@ -131,6 +132,7 @@ export function ProfilePage() {
               />
             )}
             <FollowButton pubkey={link.id} />
+            <MuteButton pubkey={link.id} />
           </div>
           <div className="profile-information">
             {profile?.name && <h1 className="name">{profile.name}</h1>}