Show comment operations when permlink is selected on permlink result table

components/home/searches/CommentPermlinkResultTable.tsx

 import React from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+
 import {
   TableHead,
   TableRow,
@@ -8,9 +11,12 @@ import {
   TableBody,
 } from "@/components/ui/table";
 import Hive from "@/types/Hive";
-import Link from "next/link";
 import { formatAndDelocalizeTime } from "@/utils/TimeUtils";
 
+import { Button } from "@/components/ui/button";
+import { useTabs } from "@/contexts/TabsContext";
+import { useSearchesContext } from "@/contexts/SearchesContext";
+
 interface CommentPermlinkResultTableProps {
   data: Hive.Permlink[];
   accountName: string | undefined;
@@ -41,7 +47,10 @@ const buildTableHeader = () => {
 const buildTableBody = (
   data: Hive.Permlink[],
   accountName: string | undefined,
-  buildLink: (accountName: string, permlink: string) => {}
+  buildLink: (accountName: string, permlink: string) => {},
+  isAccountPage: boolean,
+  //Open comments tab only when permlink is clicked on account page
+  showCommentsByPermlink: (permlink: string) => void
 ) => {
   if (!data || !data.length || !accountName) return;
 
@@ -59,7 +68,16 @@ const buildTableBody = (
               {operation_id}
             </TableCell>
             <TableCell className="text-center text-link">
-              <Link href={linkToCommentsPage}>{permlink}</Link>
+              {isAccountPage ? (
+                <Button
+                  className="bg-inherit"
+                  onClick={() => showCommentsByPermlink(permlink)}
+                >
+                  {permlink}
+                </Button>
+              ) : (
+                <Link href={linkToCommentsPage}>{permlink}</Link>
+              )}
             </TableCell>
             <TableCell className="text-left text-text">
               {formatAndDelocalizeTime(timestamp)}
@@ -79,6 +97,17 @@ const CommentPermlinkResultTable = ({
   data,
   accountName,
 }: CommentPermlinkResultTableProps) => {
+  const router = useRouter();
+  const isAccountPage = Boolean(router.query.accountName) || false;
+
+  const { setActiveTab } = useTabs();
+  const { setCommentsSearchPermlink } = useSearchesContext();
+
+  const showCommentsByPermlink = (permlink: string) => {
+    setCommentsSearchPermlink(permlink);
+    setActiveTab("comments");
+  };
+
   return (
     <>
       <div className="flex w-full overflow-auto">
@@ -88,7 +117,13 @@ const CommentPermlinkResultTable = ({
               <TableRow>{buildTableHeader()}</TableRow>
             </TableHeader>
             <TableBody>
-              {buildTableBody(data, accountName, buildLink)}
+              {buildTableBody(
+                data,
+                accountName,
+                buildLink,
+                isAccountPage,
+                showCommentsByPermlink
+              )}
             </TableBody>
           </Table>
         </div>

components/home/searches/CommentsSearch.tsx

@@ -136,6 +136,17 @@ const CommentsSearch: React.FC<CommentsSearchProps> = ({
     setSelectedCommentSearchOperationTypes([]);
   };
 
+  // Render data if there is comment search permlink present on account page
+  useEffect(() => {
+    if (isAccountPage && commentsSearchPermlink) {
+      handleStartCommentSearch();
+    }
+    return () => {
+      setCommentSearchProps(undefined);
+      setSelectedCommentSearchOperationTypes([]);
+    };
+  }, [isAccountPage, commentsSearchPermlink]);
+
   const infoText = isAccountPage
     ? "Find all operations related to comments for exact permlink."
     : "Find all operations related to comments of given account or for exact permlink.";