feat: redirect to login when attempting reaction while logged out

closes #680

packages/app/src/Components/Event/Note/NoteFooter/LikeButton.tsx

@@ -2,6 +2,7 @@ import { normalizeReaction } from "@snort/shared";
 import { TaggedNostrEvent } from "@snort/system";
 import classNames from "classnames";
 import { useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
 
 import { AsyncFooterIcon } from "@/Components/Event/Note/NoteFooter/AsyncFooterIcon";
 import useEventPublisher from "@/Hooks/useEventPublisher";
@@ -15,6 +16,7 @@ export const LikeButton = ({
   positiveReactions: TaggedNostrEvent[];
 }) => {
   const { formatMessage } = useIntl();
+  const navigate = useNavigate();
   const { publicKey } = useLogin(s => ({ publicKey: s.publicKey }));
   const { publisher, system } = useEventPublisher();
 
@@ -29,6 +31,9 @@ export const LikeButton = ({
       const evLike = await publisher.react(ev, content);
       system.BroadcastEvent(evLike);
     }
+    if (!publisher) {
+      navigate("/login");
+    }
   };
 
   const reacted = hasReacted("+");

packages/app/src/Components/Event/Note/NoteFooter/ReplyButton.tsx

@@ -1,8 +1,10 @@
 import { TaggedNostrEvent } from "@snort/system";
 import classNames from "classnames";
 import { useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
 
 import { AsyncFooterIcon } from "@/Components/Event/Note/NoteFooter/AsyncFooterIcon";
+import useLogin from "@/Hooks/useLogin";
 import { useNoteCreator } from "@/State/NoteCreator";
 
 export const ReplyButton = ({
@@ -15,6 +17,8 @@ export const ReplyButton = ({
   readonly: boolean;
 }) => {
   const { formatMessage } = useIntl();
+  const navigate = useNavigate();
+  const publicKey = useLogin(s => s.publicKey);
   const note = useNoteCreator(n => ({
     show: n.show,
     replyTo: n.replyTo,
@@ -23,6 +27,10 @@ export const ReplyButton = ({
   }));
 
   const handleReplyButtonClick = () => {
+    if (!publicKey) {
+      navigate("/login");
+      return;
+    }
     if (readonly) {
       return;
     }

packages/app/src/Components/Event/Note/NoteFooter/RepostButton.tsx

@@ -2,6 +2,7 @@ import { TaggedNostrEvent } from "@snort/system";
 import { Menu, MenuItem } from "@szhsin/react-menu";
 import classNames from "classnames";
 import { FormattedMessage, useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
 
 import { AsyncFooterIcon } from "@/Components/Event/Note/NoteFooter/AsyncFooterIcon";
 import Icon from "@/Components/Icons/Icon";
@@ -12,6 +13,7 @@ import { useNoteCreator } from "@/State/NoteCreator";
 
 export const RepostButton = ({ ev, reposts }: { ev: TaggedNostrEvent; reposts: TaggedNostrEvent[] }) => {
   const { formatMessage } = useIntl();
+  const navigate = useNavigate();
   const { publisher, system } = useEventPublisher();
   const { publicKey, preferences: prefs } = useLogin(s => ({
     preferences: s.appData.item.preferences,
@@ -30,13 +32,15 @@ export const RepostButton = ({ ev, reposts }: { ev: TaggedNostrEvent; reposts: T
         system.BroadcastEvent(evRepost);
       }
     }
+    if (!publisher) {
+      navigate("/login");
+    }
   };
 
   return (
     <Menu
       menuButton={
         <AsyncFooterIcon
-          disabled={!publisher}
           className={classNames(
             "flex-none min-w-[50px] md:min-w-[80px]",
             hasReposted() ? "reacted text-nostr-blue" : "hover:text-nostr-blue",

packages/app/src/Components/Event/Note/ReactionsModal.tsx

@@ -3,12 +3,12 @@ import "./ReactionsModal.css";
 import { NostrLink, socialGraphInstance, TaggedNostrEvent } from "@snort/system";
 import { useEventReactions, useReactions } from "@snort/system-react";
 import { useMemo, useState } from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage, MessageDescriptor, useIntl } from "react-intl";
 
 import CloseButton from "@/Components/Button/CloseButton";
 import Icon from "@/Components/Icons/Icon";
 import Modal from "@/Components/Modal/Modal";
-import TabSelectors from "@/Components/TabSelectors/TabSelectors";
+import TabSelectors, { Tab } from "@/Components/TabSelectors/TabSelectors";
 import ProfileImage from "@/Components/User/ProfileImage";
 import { formatShort } from "@/Utils/Number";
 
@@ -40,11 +40,12 @@ const ReactionsModal = ({ onClose, event, initialTab = 0 }: ReactionsModalProps)
 
   const total = positive.length + negative.length + zaps.length + reposts.length;
 
-  const createTab = (message, count, value, disabled = false) => ({
+  const createTab = (message: MessageDescriptor, count: number, value: number, disabled = false) =>
-    text: formatMessage(message, { n: count }),
+    ({
-    value,
+      text: formatMessage(message, { n: count }),
-    disabled,
+      value,
-  });
+      disabled,
+    }) as Tab;
 
   const tabs = useMemo(() => {
     const baseTabs = [