feat: open doc in new tab

Author: duylongpro99

src/app/(home)/document-menu.tsx

@@ -0,0 +1,39 @@
+import { Button } from "@/components/ui/button";
+import { ExternalLinkIcon, MoreVertical } from "lucide-react";
+import { Id } from "../../../convex/_generated/dataModel";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+type Props = {
+  documentId: Id<"documents">;
+  title: string;
+  onNewTab: (id: Id<"documents">) => void;
+};
+
+export const DocumentMenu: React.FC<Props> = ({
+  documentId,
+  title,
+  onNewTab,
+}) => {
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant={"ghost"} size={"icon"} className="rounded-full">
+            <MoreVertical className="size-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem onClick={() => onNewTab(documentId)}>
+            <ExternalLinkIcon className="size-4 mr-2" />
+            Open in a new tab
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  );
+};

src/app/(home)/document-row.tsx

@@ -1,20 +1,19 @@
 import { TableCell, TableRow } from "@/components/ui/table";
-import {
-    Building2Icon,
-    CircleUserIcon,
-    FileIcon,
-    MoreVertical,
-} from "lucide-react";
+import { Building2Icon, CircleUserIcon, FileIcon } from "lucide-react";
 
-import { Button } from "@/components/ui/button";
 import { format } from "date-fns";
-import { Doc } from "../../../convex/_generated/dataModel";
+import { Doc, Id } from "../../../convex/_generated/dataModel";
+import { DocumentMenu } from "./document-menu";
 
 type Props = {
   document: Doc<"documents">;
 };
 
 export const DocumentRow: React.FC<Props> = ({ document }) => {
+  const onNewTab = (id: Id<"documents">) => {
+    window.open(`/document/${id}`, "_blank");
+  };
+
   return (
     <TableRow className="cursor-pointer">
       <TableCell className="w-[50px]">
@@ -35,9 +34,11 @@ export const DocumentRow: React.FC<Props> = ({ document }) => {
       </TableCell>
 
       <TableCell className="flex ml-auto justify-end">
-        <Button variant={"ghost"} size={"icon"} className="rounded-full">
-          <MoreVertical className="size-4" />
-        </Button>
+        <DocumentMenu
+          documentId={document._id}
+          title={document.title}
+          onNewTab={onNewTab}
+        />
       </TableCell>
     </TableRow>
   );