1 files changed, 36 insertions, 26 deletions
diff --git a/front/src/components/post/Footer.tsx b/front/src/components/post/Footer.tsx
index d16f4fc..5b79da0 100644
--- a/front/src/components/post/Footer.tsx
+++ b/front/src/components/post/Footer.tsx
@@ -13,33 +13,33 @@ function Footer({ poast, refetch }: PostProps) {
   const [_showMenu, setShowMenu] = useState(false);
   const [location, navigate] = useLocation();
   const [reposting, _setReposting] = useState(false);
-  const { api, setComposerData, setModal, addNotification } = useLocalState((s) => ({
-    api: s.api,
-    setComposerData: s.setComposerData,
-    setModal: s.setModal,
-    addNotification: s.addNotification,
-  }));
+  const { api, setComposerData, setModal, addNotification } = useLocalState(
+    (s) => ({
+      api: s.api,
+      setComposerData: s.setComposerData,
+      setModal: s.setModal,
+      addNotification: s.addNotification,
+    }),
+  );
   const our = api!.airlock.our!;
   function doReply(e: React.MouseEvent) {
+    console.log("do reply");
     e.stopPropagation();
+    e.preventDefault();
     setComposerData({ type: "reply", post: { trill: poast } });
-    // Only add notification if replying to someone else's post
-    if (poast.author !== our) {
-      addNotification({
-        type: "reply",
-        from: our,
-        message: `You replied to ${poast.author}'s post`,
-        postId: poast.id,
-      });
-    }
+    // Scroll to top where composer is located
+    window.scrollTo({ top: 0, behavior: "smooth" });
+    // Focus will be handled by the composer component
   }
   function doQuote(e: React.MouseEvent) {
     e.stopPropagation();
+    e.preventDefault();
     setComposerData({
       type: "quote",
       post: { trill: poast },
     });
-    navigate("/composer");
+    // Scroll to top where composer is located
+    window.scrollTo({ top: 0, behavior: "smooth" });
   }
   const childrenCount = poast.children
     ? poast.children.length
@@ -49,6 +49,7 @@ function Footer({ poast, refetch }: PostProps) {
   const myRP = poast.engagement.shared.find((r) => r.pid.ship === our);
   async function cancelRP(e: React.MouseEvent) {
     e.stopPropagation();
+    e.preventDefault();
     const r = await api!.deletePost(our);
     if (r) toast.success("Repost deleted");
     refetch();
@@ -57,6 +58,7 @@ function Footer({ poast, refetch }: PostProps) {
   async function sendRP(e: React.MouseEvent) {
     // TODO update backend because contents are only markdown now
     e.stopPropagation();
+    e.preventDefault();
     // const c = [
     //   {
     //     ref: {
@@ -85,6 +87,7 @@ function Footer({ poast, refetch }: PostProps) {
   }
   function doReact(e: React.MouseEvent) {
     e.stopPropagation();
+    e.preventDefault();
     const modal = <TrillReactModal poast={poast} />;
     setModal(modal);
   }
@@ -138,13 +141,17 @@ function Footer({ poast, refetch }: PostProps) {
           <span role="link" onMouseUp={showReplyCount} className="reply-count">
             {displayCount(childrenCount)}
           </span>
-          <Icon name="reply" size={20} onClick={doReply} />
+          <div className="icon-wrapper" role="link" onMouseUp={doReply}>
+            <Icon name="reply" size={20} />
+          </div>
         </div>
         <div className="icon">
           <span role="link" onMouseUp={showQuoteCount} className="quote-count">
             {displayCount(poast.engagement.quoted.length)}
           </span>
-          <Icon name="quote" size={20} onClick={doQuote} />
+          <div className="icon-wrapper" role="link" onMouseUp={doQuote}>
+            <Icon name="quote" size={20} />
+          </div>
         </div>
         <div className="icon">
           <span
@@ -157,15 +164,18 @@ function Footer({ poast, refetch }: PostProps) {
           {reposting ? (
             <p>...</p>
           ) : myRP ? (
-            <Icon
-              name="repost"
-              size={20}
-              className="my-rp"
-              onClick={cancelRP}
-              title="cancel repost"
-            />
+            <div className="icon-wrapper" role="link" onMouseUp={cancelRP}>
+              <Icon
+                name="repost"
+                size={20}
+                className="my-rp"
+                title="cancel repost"
+              />
+            </div>
           ) : (
-            <Icon name="repost" size={20} onClick={sendRP} title="repost" />
+            <div className="icon-wrapper" role="link" onMouseUp={sendRP}>
+              <Icon name="repost" size={20} title="repost" />
+            </div>
           )}
         </div>
         <div className="icon" role="link" onMouseUp={doReact}>