chore: enhance umami tracking for various user interactions across components

Author: bigint

src/components/Composer/NewPost.tsx

@@ -21,6 +21,7 @@ const NewPost = ({ feed }: NewPostProps) => {
   const [showComposer, setShowComposer] = useState(false);
 
   const handleOpenComposer = () => {
+    umami.track("open_composer");
     setShowComposer(true);
   };
 

src/components/Post/Actions/Comment.tsx

@@ -23,7 +23,10 @@ const Comment = ({ post, showCount }: CommentProps) => {
       <button
         aria-label="Comment"
         className="rounded-full p-1.5 outline-offset-2 hover:bg-gray-300/20"
-        onClick={() => navigate(`/posts/${post.slug}`)}
+        onClick={() => {
+          umami.track("open_post");
+          navigate(`/posts/${post.slug}`);
+        }}
         type="button"
       >
         <Tooltip

src/components/Post/Actions/Menu/Edit.tsx

@@ -71,6 +71,7 @@ const Edit = ({ post }: EditProps) => {
       }
       onClick={(event) => {
         stopEventPropagation(event);
+        umami.track("open_edit_post");
         handleEdit();
       }}
     >

src/components/Post/Actions/Share/UndoRepost.tsx

@@ -74,6 +74,7 @@ const UndoRepost = ({
     }
 
     setIsSubmitting(true);
+    umami.track("undo_repost");
 
     return await undoRepost({
       variables: { request: { post: post.id } }

src/components/Shared/LoginButton.tsx

@@ -18,6 +18,7 @@ const LoginButton = ({
 
   const handleClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
+    umami.track("open_login");
     return setShowAuthModal(true);
   }, []);
 

src/components/Shared/Navbar/NavItems/Pro.tsx

@@ -6,7 +6,13 @@ const Pro = () => {
   const { setShow: setShowProModal } = useProModalStore();
 
   return (
-    <button onClick={() => setShowProModal(true)} type="button">
+    <button
+      onClick={() => {
+        umami.track("open_pro");
+        setShowProModal(true);
+      }}
+      type="button"
+    >
       <Tooltip content="Pro">
         <CheckBadgeIcon className="size-6" />
       </Tooltip>

src/components/Shared/Navbar/NavItems/SwitchAccount.tsx

@@ -15,7 +15,10 @@ const SwitchAccount = ({ className = "" }: SwitchAccountProps) => {
         "flex w-full items-center space-x-1.5 px-2 py-1.5 text-left text-gray-700 text-sm dark:text-gray-200",
         className
       )}
-      onClick={() => setShowSwitchAccountModal(true)}
+      onClick={() => {
+        umami.track("open_switch_account");
+        setShowSwitchAccountModal(true);
+      }}
       type="button"
     >
       <ArrowsRightLeftIcon className="size-4" />

src/components/Shared/Navbar/SignupButton.tsx

@@ -14,6 +14,7 @@ const SignupButton = ({ className }: SignupButtonProps) => {
     <Button
       className={className}
       onClick={() => {
+        umami.track("open_signup");
         setScreen("choose");
         setShowAuthModal(true, "signup");
       }}