load comments on hover

src/app/(sidebars)/(feed)/home/page.tsx

@@ -25,7 +25,7 @@ const getInitialFeed = async () => {
 
   if (isAuthenticated) {
     data = (
-      await client.feed.fetch({ where: { for: profileId } }).catch(() => {
+      await client.feed.fetch({ where: { for: profileId }  }).catch(() => {
         throw new Error("(×_×)⌒☆ Failed to fetch feed");
       })
     ).unwrap();

src/components/post/PostComments.tsx

@@ -6,15 +6,15 @@ import type { Post } from "./Post";
 import { PostView } from "./PostView";
 import PostWizard from "./PostWizard";
 
-export const PostComments = ({ post, isExpanded }: { post: Post; isExpanded: boolean }) => {
+export const PostComments = ({ post, isOpen }: { post: Post; isOpen: { click: boolean; hover: boolean } }) => {
   const [comments, setComments] = useState(post.comments);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [cursor, setCursor] = useState(undefined);
 
   useEffect(() => {
-    isExpanded ? loadMoreComments() : setComments(post.comments);
-  }, [isExpanded]);
+    isOpen.hover ? loadMoreComments() : setComments(post.comments);
+  }, [isOpen.hover]);
 
   const loadMoreComments = useCallback(async () => {
     if (loading) return;
@@ -52,15 +52,15 @@ export const PostComments = ({ post, isExpanded }: { post: Post; isExpanded: boo
   return (
     <div className="w-full flex flex-col items-end justify-center gap-2 text-xs sm:text-sm">
       <div className="w-[90%] gap-2">
-        {isExpanded && (
+        {isOpen.click && (
           <div className="my-2">
             <PostWizard replyingTo={post} />
           </div>
         )}
         <ul>{commentElements}</ul>
         {loading && <LoadingSpinner className="p-4" />}
-        {isExpanded && cursor && !loading && (
-          <Button variant="ghost" onClick={loadMoreComments} disabled={loading}>
+        {isOpen.hover && cursor && !loading && (
+          <Button variant="ghost" onMouseEnter={loadMoreComments} disabled={loading} className="cursor-pointer">
             <PlusIcon /> Load more Comments
           </Button>
         )}

src/components/post/PostReactions.tsx

@@ -21,7 +21,12 @@ export function ReactionsList({
   collapsed,
   setCommentsOpen,
   isCommentsOpen,
-}: { post: Post; collapsed: boolean; setCommentsOpen: (open: boolean) => void; isCommentsOpen: boolean }) {
+}: {
+  post: Post;
+  collapsed: boolean;
+  setCommentsOpen: ({ click, hover }) => void;
+  isCommentsOpen: { click: boolean; hover: boolean };
+}) {
   const [isLiked, setIsLiked] = useState(post.reactions.isUpvoted);
   const [isReposted, setIsReposted] = useState(post.reactions.isReposted);
   const [isCollected, setIsCollected] = useState(post.reactions.isCollected);
@@ -106,9 +111,13 @@ export function ReactionsList({
         <Button
           size="sm"
           variant="ghost"
+          onMouseOver={(e) => {
+            e.stopPropagation();
+            setCommentsOpen({ hover: true, click: isCommentsOpen.click });
+          }}
           onClick={(e) => {
             e.stopPropagation();
-            setCommentsOpen(!isCommentsOpen);
+            setCommentsOpen({ hover: isCommentsOpen.hover, click: !isCommentsOpen.click });
           }}
           className="h-max w-12 border-0 px-0 place-content-center items-center"
           disabled={!post.reactions.canComment}

src/components/post/PostView.tsx

@@ -24,7 +24,7 @@ export const PostView = ({
 }: { item: Post; settings?: PostViewSettings }) => {
   const content = "content" in item.metadata ? item.metadata.content : "";
   const [collapsed, setCollapsed] = useState(content.length > 400);
-  const [isCommentsOpen, setCommentsOpen] = useState(false);
+  const [isCommentsOpen, setCommentsOpen] = useState({ click: false, hover: false });
   const postContentRef = useRef<HTMLDivElement>(null);
 
   return (
@@ -58,7 +58,7 @@ export const PostView = ({
           </CardContent>
         </Card>
       </ContextMenu>
-      <PostComments isExpanded={isCommentsOpen} post={item} />
+      <PostComments isOpen={isCommentsOpen} post={item} />
     </div>
   );
 };