From f0110e9009f36dbd9e4ba1b5eea914ebcf8773bd Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Mon, 16 Oct 2023 14:41:55 +0100
Subject: [PATCH] feat: note creator button on deck

---
 .../app/src/Element/Chat/WriteMessage.tsx     |  4 +-
 packages/app/src/Element/Deck/Nav.tsx         | 11 ++--
 .../app/src/Element/Event/NoteCreator.css     | 21 --------
 .../src/Element/Event/NoteCreatorButton.css   | 20 ++++++++
 .../src/Element/Event/NoteCreatorButton.tsx   | 51 +++++++++++++++++++
 packages/app/src/Pages/Layout.tsx             | 50 ++----------------
 packages/app/src/Pages/settings/Profile.css   |  2 +-
 packages/app/src/Pages/settings/Profile.tsx   |  6 ++-
 packages/app/src/index.css                    |  5 +-
 9 files changed, 88 insertions(+), 82 deletions(-)
 create mode 100644 packages/app/src/Element/Event/NoteCreatorButton.css
 create mode 100644 packages/app/src/Element/Event/NoteCreatorButton.tsx

diff --git a/packages/app/src/Element/Chat/WriteMessage.tsx b/packages/app/src/Element/Chat/WriteMessage.tsx
index 1a78f1b9..9afe5e0a 100644
--- a/packages/app/src/Element/Chat/WriteMessage.tsx
+++ b/packages/app/src/Element/Chat/WriteMessage.tsx
@@ -80,7 +80,7 @@ export default function WriteMessage({ chat }: { chat: Chat }) {
 
   return (
     <>
-      <button className="btn-rnd" onClick={() => attachFile()}>
+      <button className="circle flex flex-center" onClick={() => attachFile()}>
         {uploading ? <Spinner width={20} /> : <Icon name="attachment" size={20} />}
       </button>
       <div className="w-max">
@@ -97,7 +97,7 @@ export default function WriteMessage({ chat }: { chat: Chat }) {
         />
         {error && <b className="error">{error}</b>}
       </div>
-      <button className="btn-rnd" onClick={() => sendMessage()}>
+      <button className="circle flex flex-center" onClick={() => sendMessage()}>
         {sending ? <Spinner width={20} /> : <Icon name="arrow-right" size={20} />}
       </button>
     </>
diff --git a/packages/app/src/Element/Deck/Nav.tsx b/packages/app/src/Element/Deck/Nav.tsx
index 0915964f..3173c853 100644
--- a/packages/app/src/Element/Deck/Nav.tsx
+++ b/packages/app/src/Element/Deck/Nav.tsx
@@ -5,13 +5,13 @@ import "./Nav.css";
 import Icon from "Icons/Icon";
 import { Link } from "react-router-dom";
 import { profileLink } from "SnortUtils";
+import { NoteCreatorButton } from "Element/Event/NoteCreatorButton";
 
 export function DeckNav() {
   const { publicKey } = useLogin();
   const profile = useUserProfile(publicKey);
 
   const unreadDms = 0;
-  const hasNotifications = false;
 
   return (
     <nav className="deck flex-column f-space">
@@ -20,15 +20,12 @@ export function DeckNav() {
           <Icon name="mail" size={24} />
           {unreadDms > 0 && <span className="has-unread"></span>}
         </Link>
-        <Link className="btn" to="/notifications">
-          <Icon name="bell-02" size={24} />
-          {hasNotifications && <span className="has-unread"></span>}
-        </Link>
+        <NoteCreatorButton />
       </div>
       <div className="flex-column f-center g16">
-        <Link className="btn" to="/">
+        {/*<Link className="btn" to="/">
           <Icon name="grid-01" size={24} />
-        </Link>
+  </Link>*/}
         <Link className="btn" to="/settings">
           <Icon name="settings-02" size={24} />
         </Link>
diff --git a/packages/app/src/Element/Event/NoteCreator.css b/packages/app/src/Element/Event/NoteCreator.css
index 017a9e35..7b140294 100644
--- a/packages/app/src/Element/Event/NoteCreator.css
+++ b/packages/app/src/Element/Event/NoteCreator.css
@@ -84,27 +84,6 @@
   height: 32px;
 }
 
-.note-create-button {
-  width: 48px;
-  height: 48px;
-  color: white;
-  background: linear-gradient(90deg, rgba(239, 150, 68, 1) 0%, rgba(123, 65, 246, 1) 100%);
-  border: none;
-  border-radius: 100%;
-  position: fixed;
-  bottom: 40px;
-  right: calc(((100vw - 640px) / 2) - 75px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@media (max-width: 768px) {
-  .note-create-button {
-    right: 16px;
-  }
-}
-
 .light .note-creator textarea {
   background-color: #fff;
 }
diff --git a/packages/app/src/Element/Event/NoteCreatorButton.css b/packages/app/src/Element/Event/NoteCreatorButton.css
new file mode 100644
index 00000000..2b2e80dd
--- /dev/null
+++ b/packages/app/src/Element/Event/NoteCreatorButton.css
@@ -0,0 +1,20 @@
+.note-create-button {
+  width: 48px;
+  height: 48px;
+  color: white;
+  background: linear-gradient(90deg, rgba(239, 150, 68, 1) 0%, rgba(123, 65, 246, 1) 100%);
+  border: none;
+  border-radius: 100%;
+  position: fixed;
+  bottom: 40px;
+  right: calc(((100vw - 640px) / 2) - 75px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (max-width: 768px) {
+  .note-create-button {
+    right: 16px;
+  }
+}
diff --git a/packages/app/src/Element/Event/NoteCreatorButton.tsx b/packages/app/src/Element/Event/NoteCreatorButton.tsx
new file mode 100644
index 00000000..2f259e3b
--- /dev/null
+++ b/packages/app/src/Element/Event/NoteCreatorButton.tsx
@@ -0,0 +1,51 @@
+import "./NoteCreatorButton.css";
+import { useRef, useMemo } from "react";
+import { useLocation } from "react-router-dom";
+
+import { isFormElement } from "SnortUtils";
+import useKeyboardShortcut from "Hooks/useKeyboardShortcut";
+import useLogin from "Hooks/useLogin";
+import Icon from "Icons/Icon";
+import { useNoteCreator } from "State/NoteCreator";
+import { NoteCreator } from "./NoteCreator";
+
+export const NoteCreatorButton = ({ className }: { className?: string }) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const location = useLocation();
+  const { readonly } = useLogin(s => ({ readonly: s.readonly }));
+  const { show, replyTo, update } = useNoteCreator(v => ({ show: v.show, replyTo: v.replyTo, update: v.update }));
+
+  useKeyboardShortcut("n", event => {
+    // if event happened in a form element, do nothing, otherwise focus on search input
+    if (event.target && !isFormElement(event.target as HTMLElement)) {
+      event.preventDefault();
+      if (buttonRef.current) {
+        buttonRef.current.click();
+      }
+    }
+  });
+
+  const shouldHideNoteCreator = useMemo(() => {
+    const isReplyNoteCreatorShowing = replyTo && show;
+    const hideOn = ["/settings", "/messages", "/new", "/login", "/donate", "/e", "/subscribe"];
+    return readonly || isReplyNoteCreatorShowing || hideOn.some(a => location.pathname.startsWith(a));
+  }, [location, readonly]);
+
+  if (shouldHideNoteCreator) return null;
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        className={`primary circle${className ? ` ${className}` : ""}`}
+        onClick={() =>
+          update(v => {
+            v.replyTo = undefined;
+            v.show = true;
+          })
+        }>
+        <Icon name="plus" size={16} />
+      </button>
+      <NoteCreator key="global-note-creator" />
+    </>
+  );
+};
diff --git a/packages/app/src/Pages/Layout.tsx b/packages/app/src/Pages/Layout.tsx
index c9d52f46..0ce84991 100644
--- a/packages/app/src/Pages/Layout.tsx
+++ b/packages/app/src/Pages/Layout.tsx
@@ -1,5 +1,5 @@
 import "./Layout.css";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useUserProfile } from "@snort/system-react";
@@ -9,7 +9,6 @@ import messages from "./messages";
 
 import Icon from "Icons/Icon";
 import useLoginFeed from "Feed/LoginFeed";
-import { NoteCreator } from "Element/Event/NoteCreator";
 import { mapPlanName } from "./subscribe";
 import useLogin from "Hooks/useLogin";
 import Avatar from "Element/User/Avatar";
@@ -20,10 +19,10 @@ import Spinner from "Icons/Spinner";
 import { fetchNip05Pubkey } from "Nip05/Verifier";
 import { useTheme } from "Hooks/useTheme";
 import { useLoginRelays } from "Hooks/useLoginRelays";
-import { useNoteCreator } from "State/NoteCreator";
 import { LoginUnlock } from "Element/PinPrompt";
 import useKeyboardShortcut from "Hooks/useKeyboardShortcut";
 import { LoginStore } from "Login";
+import { NoteCreatorButton } from "Element/Event/NoteCreatorButton";
 
 export default function Layout() {
   const location = useLocation();
@@ -69,7 +68,7 @@ export default function Layout() {
           </header>
         )}
         <Outlet />
-        <NoteCreatorButton />
+        <NoteCreatorButton className="note-create-button" />
         <Toaster />
       </div>
       <LoginUnlock />
@@ -79,7 +78,7 @@ export default function Layout() {
           onClick={() => {
             LoginStore.removeSession(id);
           }}>
-          <button type="button" className="btn btn-rnd">
+          <button type="button" className="circle flex flex-center">
             <Icon name="close" />
           </button>
         </div>
@@ -88,47 +87,6 @@ export default function Layout() {
   );
 }
 
-const NoteCreatorButton = () => {
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const location = useLocation();
-  const { readonly } = useLogin(s => ({ readonly: s.readonly }));
-  const { show, replyTo, update } = useNoteCreator(v => ({ show: v.show, replyTo: v.replyTo, update: v.update }));
-
-  useKeyboardShortcut("n", event => {
-    // if event happened in a form element, do nothing, otherwise focus on search input
-    if (event.target && !isFormElement(event.target as HTMLElement)) {
-      event.preventDefault();
-      if (buttonRef.current) {
-        buttonRef.current.click();
-      }
-    }
-  });
-
-  const shouldHideNoteCreator = useMemo(() => {
-    const isReplyNoteCreatorShowing = replyTo && show;
-    const hideOn = ["/settings", "/messages", "/new", "/login", "/donate", "/e", "/subscribe"];
-    return readonly || isReplyNoteCreatorShowing || hideOn.some(a => location.pathname.startsWith(a));
-  }, [location, readonly]);
-
-  if (shouldHideNoteCreator) return;
-  return (
-    <>
-      <button
-        ref={buttonRef}
-        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();
diff --git a/packages/app/src/Pages/settings/Profile.css b/packages/app/src/Pages/settings/Profile.css
index 3552c725..28481a9a 100644
--- a/packages/app/src/Pages/settings/Profile.css
+++ b/packages/app/src/Pages/settings/Profile.css
@@ -33,7 +33,7 @@
   bottom: -32px;
 }
 
-.settings .image-settings .avatar-stack .btn-rnd {
+.settings .image-settings .avatar-stack button {
   position: absolute;
   padding: 0;
   width: 32px;
diff --git a/packages/app/src/Pages/settings/Profile.tsx b/packages/app/src/Pages/settings/Profile.tsx
index 8382539b..fcc1b40c 100644
--- a/packages/app/src/Pages/settings/Profile.tsx
+++ b/packages/app/src/Pages/settings/Profile.tsx
@@ -205,7 +205,11 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
           {(props.avatar ?? true) && (
             <div className="avatar-stack">
               <Avatar pubkey={id} user={user} image={picture} />
-              <AsyncButton type="button" className="btn-rnd" onClick={() => setNewAvatar()} disabled={readonly}>
+              <AsyncButton
+                type="button"
+                className="circle flex flex-center"
+                onClick={() => setNewAvatar()}
+                disabled={readonly}>
                 <Icon name="upload-01" />
               </AsyncButton>
             </div>
diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index 58ebb981..717800cb 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -364,12 +364,9 @@ button.icon:hover {
   padding: 5px;
 }
 
-.btn-rnd {
+.circle {
   border-radius: 100%;
   aspect-ratio: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 textarea {