badges, badges everywhere

src/css/style.css

@@ -1183,11 +1183,15 @@ a.msg {
   align-items: center;
 }
 
-.msg-sender-link .badge {
+.badge {
   margin-left: 5px;
   text-shadow: white 0 0 1px;
 }
 
+.text-color {
+  color: var(--text-color);
+}
+
 .public-messages-view .msg-sender .msg-menu-btn {
   text-align: right;
   flex: 1;

src/js/components/Badge.tsx

@@ -0,0 +1,43 @@
+import iris from 'iris-lib';
+
+import Icons from '../Icons';
+import Nostr from '../Nostr';
+import { translate as t } from '../translations/Translation';
+
+export default function Badge(props) {
+  const myPub = iris.session.getKey().secp256k1.rpub;
+  const hexAddress = Nostr.toNostrHexAddress(props.pub);
+  if (hexAddress === myPub) {
+    return (
+      <span class="badge positive tooltip">
+        {Icons.checkmark}
+        <span class="tooltiptext right">{t('you')}</span>
+      </span>
+    );
+  }
+  if (!hexAddress) {
+    return null;
+  }
+  const following = Nostr.followedByUser.get(myPub)?.has(hexAddress);
+  if (following) {
+    return (
+      <span class="badge positive tooltip">
+        {Icons.checkmark}
+        <span class="tooltiptext right">{t('following')}</span>
+      </span>
+    );
+  } else {
+    const count = Nostr.followedByFriendsCount(hexAddress);
+    if (count > 0) {
+      const className = count > 10 ? 'neutral' : 'text-color';
+      return (
+        <span class={`badge ${className} tooltip`}>
+          {Icons.checkmark}
+          <span class="tooltiptext right">
+            {count} {t('friends_following')}
+          </span>
+        </span>
+      );
+    }
+  }
+}

src/js/components/Name.tsx

@@ -4,16 +4,19 @@ import Component from '../BaseComponent';
 import Helpers from '../Helpers';
 import Nostr from '../Nostr';
 
+import Badge from './Badge';
+
 type Props = {
   pub: string;
   placeholder?: string;
+  hideBadge?: boolean;
 };
 
 type State = {
   name: string;
 };
 
-class Name extends Component<Props, State> {
+export default class Name extends Component<Props, State> {
   componentDidMount(): void {
     const nostrAddr = Nostr.toNostrHexAddress(this.props.pub);
     if (nostrAddr) {
@@ -27,11 +30,14 @@ class Name extends Component<Props, State> {
 
   render() {
     return (
-      this.state.name ??
-      this.props.placeholder ??
-      Helpers.generateName(Nostr.toNostrBech32Address(this.props.pub, 'npub') || this.props.pub)
+      <>
+        {this.state.name ??
+          this.props.placeholder ??
+          Helpers.generateName(
+            Nostr.toNostrBech32Address(this.props.pub, 'npub') || this.props.pub,
+          )}
+        {!this.props.hideBadge && <Badge pub={this.props.pub} />}
+      </>
     );
   }
 }
-
-export default Name;

src/js/components/PublicMessage.js

@@ -9,6 +9,7 @@ import Icons from '../Icons';
 import Nostr from '../Nostr';
 import { translate as t } from '../translations/Translation';
 
+import Badge from './Badge';
 import CopyButton from './CopyButton';
 import Dropdown from './Dropdown';
 import FeedMessageForm from './FeedMessageForm';
@@ -419,37 +420,6 @@ class PublicMessage extends Message {
     this.setState({ showBoosts: !this.state.showBoosts, showLikes: false });
   }
 
-  getBadge() {
-    const myPub = iris.session.getKey().secp256k1.rpub;
-    const hexAddress = Nostr.toNostrHexAddress(this.state.msg.info.from);
-    if (hexAddress === myPub) {
-      return null;
-    }
-    if (!hexAddress) {
-      return null;
-    }
-    const following = Nostr.followedByUser.get(myPub)?.has(hexAddress);
-    if (following) {
-      return html`
-        <span class="badge positive tooltip">
-          ${Icons.checkmark}
-          <span class="tooltiptext right">${t('following')}</span>
-        </span>
-      `;
-    } else {
-      const count = Nostr.followedByFriendsCount(hexAddress);
-      if (count > 0) {
-        const className = count > 10 ? 'neutral' : '';
-        return html`
-          <span class="badge ${className} tooltip">
-            ${Icons.checkmark}
-            <span class="tooltiptext right">${count} ${t('friends_following')}</span>
-          </span>
-        `;
-      }
-    }
-  }
-
   render() {
     const isThumbnail = this.props.thumbnail ? 'thumbnail-item' : '';
     if (!this.state.msg) {
@@ -582,8 +552,14 @@ class PublicMessage extends Message {
           <div class="msg-sender">
             <div class="msg-sender-link" onclick=${(e) => this.onClickName(e)}>
               ${s.msg.info.from ? html`<${Identicon} str=${s.msg.info.from} width="40" />` : ''}
-              ${name && this.props.showName && html`<div class="msgSenderName">${name}</div>`}
-              ${this.getBadge()}
+              ${name &&
+              this.props.showName &&
+              html`
+                <div class="msgSenderName">
+                  ${name}
+                  <${Badge} pub=${s.msg.info.from} />
+                </div>
+              `}
               <div class="time">
                 <a
                   href="#/post/${encodeURIComponent(s.msg.noteId || this.props.hash)}"

src/js/components/SearchBox.tsx

@@ -8,6 +8,7 @@ import Helpers from '../Helpers';
 import Nostr from '../Nostr';
 import { translate as t } from '../translations/Translation';
 
+import Badge from './Badge';
 import Identicon from './Identicon';
 import Name from './Name';
 
@@ -263,7 +264,7 @@ class SearchBox extends Component<Props, State> {
                   <Identicon key={`${i.key}ic`} str={i.key} width={40} />
                 )}
                 <div>
-                  {i.name || ''}
+                  {i.name || ''} <Badge pub={i.key} />
                   <br />
                   <small>{followText}</small>
                 </div>