feat: account switching

packages/app/src/Element/NoteCreator.tsx

@@ -31,6 +31,9 @@ import messages from "./messages";
 import { ClipboardEventHandler, useState } from "react";
 import Spinner from "Icons/Spinner";
 import { EventBuilder } from "System";
+import { Menu, MenuItem } from "@szhsin/react-menu";
+import { LoginStore } from "Login";
+import { getCurrentSubscription } from "Subscription";
 
 interface NotePreviewProps {
   note: TaggedRawEvent;
@@ -56,6 +59,7 @@ export function NoteCreator() {
     useSelector((s: RootState) => s.noteCreator);
   const [uploadInProgress, setUploadInProgress] = useState(false);
   const dispatch = useDispatch();
+  const sub = getCurrentSubscription(LoginStore.allSubscriptions());
 
   async function sendNote() {
     if (note && publisher) {
@@ -229,6 +233,18 @@ export function NoteCreator() {
     }
   }
 
+  function listAccounts() {
+    return LoginStore.getSessions().map(a => (
+      <MenuItem
+        onClick={ev => {
+          ev.stopPropagation = true;
+          LoginStore.switchAccount(a);
+        }}>
+        <ProfileImage pubkey={a} linkToProfile={false} />
+      </MenuItem>
+    ));
+  }
+
   const handlePaste: ClipboardEventHandler<HTMLDivElement> = evt => {
     if (evt.clipboardData) {
       const clipboardItems = evt.clipboardData.items;
@@ -273,12 +289,23 @@ export function NoteCreator() {
                 />
                 {renderPollOptions()}
                 <div className="insert">
+                  {sub && (
+                    <Menu
+                      menuButton={
+                        <button>
+                          <Icon name="code-circle" />
+                        </button>
+                      }
+                      menuClassName="ctx-menu">
+                      {listAccounts()}
+                    </Menu>
+                  )}
                   {pollOptions === undefined && !replyTo && (
-                    <button type="button" onClick={() => dispatch(setPollOptions(["A", "B"]))}>
+                    <button onClick={() => dispatch(setPollOptions(["A", "B"]))}>
                       <Icon name="pie-chart" />
                     </button>
                   )}
-                  <button type="button" onClick={attachFile}>
+                  <button onClick={attachFile}>
                     <Icon name="attachment" />
                   </button>
                 </div>
@@ -288,19 +315,19 @@ export function NoteCreator() {
           )}
           <div className="note-creator-actions">
             {uploadInProgress && <Spinner />}
-            <button className="secondary" type="button" onClick={() => dispatch(setShowAdvanced(!showAdvanced))}>
+            <button className="secondary" onClick={() => dispatch(setShowAdvanced(!showAdvanced))}>
               <FormattedMessage defaultMessage="Advanced" />
             </button>
-            <button className="secondary" type="button" onClick={cancel}>
+            <button className="secondary" onClick={cancel}>
               <FormattedMessage {...messages.Cancel} />
             </button>
-            <button type="button" onClick={onSubmit}>
+            <button onClick={onSubmit}>
               {replyTo ? <FormattedMessage {...messages.Reply} /> : <FormattedMessage {...messages.Send} />}
             </button>
           </div>
           {showAdvanced && (
             <div>
-              <button className="secondary" type="button" onClick={loadPreview}>
+              <button className="secondary" onClick={loadPreview}>
                 <FormattedMessage defaultMessage="Toggle Preview" />
               </button>
               <h4>

packages/app/src/Element/ProfileImage.tsx

@@ -1,12 +1,13 @@
 import "./ProfileImage.css";
 
 import { useMemo } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import { HexKey, NostrPrefix } from "@snort/nostr";
+
 import { useUserProfile } from "Hooks/useUserProfile";
 import { hexToBech32, profileLink } from "Util";
 import Avatar from "Element/Avatar";
 import Nip05 from "Element/Nip05";
-import { HexKey, NostrPrefix } from "@snort/nostr";
 import { MetadataCache } from "Cache";
 import usePageWidth from "Hooks/usePageWidth";
 
@@ -55,17 +56,17 @@ export default function ProfileImage({
   };
 
   return (
-    <div className={`pfp f-ellipsis${className ? ` ${className}` : ""}`}>
+    <div className={`pfp f-ellipsis${className ? ` ${className}` : ""}`} onClick={onAvatarClick}>
       <div className="avatar-wrapper">
-        <Avatar user={user} onClick={onAvatarClick} />
+        <Avatar user={user} />
       </div>
       {showUsername && (
         <div className="profile-name">
           <div className="username">
-            <Link className="display-name" key={pubkey} to={link ?? profileLink(pubkey)}>
+            <div className="display-name">
               <div>{name.trim()}</div>
               {nip05 && <Nip05 nip05={nip05} pubkey={pubkey} verifyNip={verifyNip} />}
-            </Link>
+            </div>
           </div>
           <div className="subheader" style={{ width: autoWidth ? width - 190 : "" }}>
             {subHeader}