From 45783951cf116e709088453a3a4baf36aeb47751 Mon Sep 17 00:00:00 2001
From: Abelino Chavez <abelino.chavez@gmail.com>
Date: Thu, 29 Jan 2026 14:11:18 -0600
Subject: [PATCH 1/2] feat: add "Open in new tab" icon for projects (#644)

Added an ExternalLink icon next to each project name that opens the
editor in a new tab when clicked. The icon appears on hover alongside
the existing three-dot menu, with a tooltip for clarity.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/web/src/app/projects/page.tsx | 132 +++++++++++++++++------------
 1 file changed, 79 insertions(+), 53 deletions(-)

diff --git a/apps/web/src/app/projects/page.tsx b/apps/web/src/app/projects/page.tsx
index 3d66a3c56..87670c50a 100644
--- a/apps/web/src/app/projects/page.tsx
+++ b/apps/web/src/app/projects/page.tsx
@@ -3,6 +3,7 @@
 import {
   Calendar,
   ChevronLeft,
+  ExternalLink,
   Loader2,
   MoreHorizontal,
   ArrowDown01,
@@ -492,64 +493,89 @@ function ProjectCard({
             {project.name}
           </h3>
           {!isSelectionMode && (
-            <DropdownMenu
-              open={isDropdownOpen}
-              onOpenChange={setIsDropdownOpen}
-            >
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="text"
-                  size="sm"
-                  className={`size-6 p-0 transition-all shrink-0 ml-2 ${
-                    isDropdownOpen
-                      ? "opacity-100"
-                      : "opacity-0 group-hover:opacity-100"
-                  }`}
-                  onClick={(e) => e.preventDefault()}
-                >
-                  <MoreHorizontal />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align="end"
-                onCloseAutoFocus={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                }}
+            <div className="flex items-center shrink-0 ml-2">
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <a
+                      href={`/editor/${project.id}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      onClick={(e) => e.stopPropagation()}
+                      className={`size-6 p-0 inline-flex items-center justify-center rounded-md text-sm font-medium transition-all shrink-0 hover:bg-accent hover:text-accent-foreground ${
+                        isDropdownOpen
+                          ? "opacity-100"
+                          : "opacity-0 group-hover:opacity-100"
+                      }`}
+                    >
+                      <ExternalLink className="size-4" />
+                      <span className="sr-only">Open in new tab</span>
+                    </a>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Open in new tab</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+              <DropdownMenu
+                open={isDropdownOpen}
+                onOpenChange={setIsDropdownOpen}
               >
-                <DropdownMenuItem
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    setIsDropdownOpen(false);
-                    setIsRenameDialogOpen(true);
-                  }}
-                >
-                  Rename
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    handleDuplicateProject();
-                  }}
-                >
-                  Duplicate
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  variant="destructive"
-                  onClick={(e) => {
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="text"
+                    size="sm"
+                    className={`size-6 p-0 transition-all shrink-0 ml-2 ${
+                      isDropdownOpen
+                        ? "opacity-100"
+                        : "opacity-0 group-hover:opacity-100"
+                    }`}
+                    onClick={(e) => e.preventDefault()}
+                  >
+                    <MoreHorizontal />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  align="end"
+                  onCloseAutoFocus={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    setIsDropdownOpen(false);
-                    setIsDeleteDialogOpen(true);
                   }}
                 >
-                  Delete
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setIsDropdownOpen(false);
+                      setIsRenameDialogOpen(true);
+                    }}
+                  >
+                    Rename
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleDuplicateProject();
+                    }}
+                  >
+                    Duplicate
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    variant="destructive"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setIsDropdownOpen(false);
+                      setIsDeleteDialogOpen(true);
+                    }}
+                  >
+                    Delete
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
           )}
         </div>
 

From a005087cf02f80af14ff0e6b8f215e09c076050c Mon Sep 17 00:00:00 2001
From: Abelino Chavez <abelino.chavez@gmail.com>
Date: Thu, 29 Jan 2026 14:28:49 -0600
Subject: [PATCH 2/2] fix(projects): use button instead of anchor for external
 link

Fixes nested <a> error caused by placing anchor inside Next.js Link.
Changed to button element using window.open() for new tab behavior.

Fixes regression from #644 implementation.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/web/src/app/projects/page.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/app/projects/page.tsx b/apps/web/src/app/projects/page.tsx
index 87670c50a..fb485313e 100644
--- a/apps/web/src/app/projects/page.tsx
+++ b/apps/web/src/app/projects/page.tsx
@@ -497,11 +497,13 @@ function ProjectCard({
               <TooltipProvider>
                 <Tooltip>
                   <TooltipTrigger asChild>
-                    <a
-                      href={`/editor/${project.id}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      onClick={(e) => e.stopPropagation()}
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        window.open(`/editor/${project.id}`, "_blank");
+                      }}
                       className={`size-6 p-0 inline-flex items-center justify-center rounded-md text-sm font-medium transition-all shrink-0 hover:bg-accent hover:text-accent-foreground ${
                         isDropdownOpen
                           ? "opacity-100"
@@ -510,7 +512,7 @@ function ProjectCard({
                     >
                       <ExternalLink className="size-4" />
                       <span className="sr-only">Open in new tab</span>
-                    </a>
+                    </button>
                   </TooltipTrigger>
                   <TooltipContent>
                     <p>Open in new tab</p>