Bugfixes

packages/app/src/Pages/Layout.tsx

@@ -25,19 +25,12 @@ import { LoginUnlock } from "Element/PinPrompt";
 
 export default function Layout() {
   const location = useLocation();
-  const note = useNoteCreator();
-  const isReplyNoteCreatorShowing = note.replyTo && note.show;
   const [pageClass, setPageClass] = useState("page");
 
   useLoginFeed();
   useTheme();
   useLoginRelays();
 
-  const shouldHideNoteCreator = useMemo(() => {
-    const hideOn = ["/settings", "/messages", "/new", "/login", "/donate", "/e", "/subscribe"];
-    return isReplyNoteCreatorShowing || hideOn.some(a => location.pathname.startsWith(a));
-  }, [location, isReplyNoteCreatorShowing]);
-
   const shouldHideHeader = useMemo(() => {
     const hideOn = ["/login", "/new"];
     return hideOn.some(a => location.pathname.startsWith(a));
@@ -63,21 +56,7 @@ export default function Layout() {
           </header>
         )}
         <Outlet />
-        {!shouldHideNoteCreator && (
-          <>
-            <button
-              className="primary note-create-button"
-              onClick={() =>
-                note.update(v => {
-                  v.replyTo = undefined;
-                  v.show = true;
-                })
-              }>
-              <Icon name="plus" size={16} />
-            </button>
-            <NoteCreator />
-          </>
-        )}
+        <NoteCreatorButton />
         <Toaster />
       </div>
       <LoginUnlock />
@@ -85,6 +64,34 @@ export default function Layout() {
   );
 }
 
+const NoteCreatorButton = () => {
+  const location = useLocation();
+  const { show, replyTo, update } = useNoteCreator(v => ({ show: v.show, replyTo: v.replyTo, update: v.update }));
+
+  const shouldHideNoteCreator = useMemo(() => {
+    const isReplyNoteCreatorShowing = replyTo && show;
+    const hideOn = ["/settings", "/messages", "/new", "/login", "/donate", "/e", "/subscribe"];
+    return isReplyNoteCreatorShowing || hideOn.some(a => location.pathname.startsWith(a));
+  }, [location]);
+
+  if (shouldHideNoteCreator) return;
+  return (
+    <>
+      <button
+        className="primary note-create-button"
+        onClick={() =>
+          update(v => {
+            v.replyTo = undefined;
+            v.show = true;
+          })
+        }>
+        <Icon name="plus" size={16} />
+      </button>
+      <NoteCreator key="global-note-creator" />
+    </>
+  );
+};
+
 const AccountHeader = () => {
   const navigate = useNavigate();
   const { formatMessage } = useIntl();

packages/app/src/Pages/settings/Accounts.tsx

@@ -1,57 +1,32 @@
-import { useState } from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage } from "react-intl";
+import { Link } from "react-router-dom";
 
 import ProfilePreview from "Element/ProfilePreview";
 import { LoginStore } from "Login";
-import useLoginHandler from "Hooks/useLoginHandler";
-import AsyncButton from "Element/AsyncButton";
 import { getActiveSubscriptions } from "Subscription";
 
 export default function AccountsPage() {
-  const { formatMessage } = useIntl();
-  const [key, setKey] = useState("");
-  const [error, setError] = useState("");
-  const loginHandler = useLoginHandler();
   const logins = LoginStore.getSessions();
   const sub = getActiveSubscriptions(LoginStore.allSubscriptions());
 
-  async function doLogin() {
-    try {
-      setError("");
-      await loginHandler.doLogin(key);
-      setKey("");
-    } catch (e) {
-      if (e instanceof Error) {
-        setError(e.message);
-      } else {
-        setError(
-          formatMessage({
-            defaultMessage: "Unknown login error",
-          }),
-        );
-      }
-      console.error(e);
-    }
-  }
-
   return (
-    <>
+    <div className="flex-column g12">
       <h3>
         <FormattedMessage defaultMessage="Logins" />
       </h3>
       {logins.map(a => (
-        <div className="card flex" key={a}>
+        <div className="card flex" key={a.id}>
           <ProfilePreview
-            pubkey={a}
+            pubkey={a.pubkey}
             options={{
               about: false,
             }}
             actions={
               <div className="f-1">
-                <button className="mb10" onClick={() => LoginStore.switchAccount(a)}>
+                <button className="mb10" onClick={() => LoginStore.switchAccount(a.id)}>
                   <FormattedMessage defaultMessage="Switch" />
                 </button>
-                <button onClick={() => LoginStore.removeSession(a)}>
+                <button onClick={() => LoginStore.removeSession(a.id)}>
                   <FormattedMessage defaultMessage="Logout" />
                 </button>
               </div>
@@ -61,27 +36,12 @@ export default function AccountsPage() {
       ))}
 
       {sub && (
-        <>
-          <h3>
+        <Link to={"/login"}>
+          <button type="button">
             <FormattedMessage defaultMessage="Add Account" />
-          </h3>
-          <div className="flex">
-            <input
-              dir="auto"
-              type="text"
-              placeholder={formatMessage({
-                defaultMessage: "nsec, npub, nip-05, hex, mnemonic",
-              })}
-              className="f-grow mr10"
-              onChange={e => setKey(e.target.value)}
-            />
-            <AsyncButton onClick={() => doLogin()}>
-              <FormattedMessage defaultMessage="Login" />
-            </AsyncButton>
-          </div>
-        </>
+          </button>
+        </Link>
       )}
-      {error && <b className="error">{error}</b>}
-    </>
+    </div>
   );
 }