feat: note creator button on deck

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" />
+    </>
+  );
+};