fix: use Next.js Link for symbol nav buttons to support Cmd+click on Mac

- Replace anchor elements with Next.js Link components for proper
  Cmd+click (Mac) / Ctrl+click (Windows) support to open in new tabs
- Revert LoadingButton asChild changes since we now use Link directly
- Buttons now properly support native browser behavior for opening links

Co-authored-by: Michael Sukkarieh <msukkari@users.noreply.github.com>

Author: cursoragent

packages/web/src/components/ui/loading-button.tsx

@@ -2,43 +2,28 @@
 
 // @note: this is not a original Shadcn component.
 
-import { buttonVariants } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-import { Slot } from "@radix-ui/react-slot";
-import { VariantProps } from "class-variance-authority";
+import { Button, ButtonProps } from "@/components/ui/button";
 import { Loader2 } from "lucide-react";
 import React from "react";
 
-export interface LoadingButtonProps
-    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-        VariantProps<typeof buttonVariants> {
+export interface LoadingButtonProps extends ButtonProps {
     loading?: boolean;
-    asChild?: boolean;
 }
 
-const LoadingButton = React.forwardRef<HTMLButtonElement, LoadingButtonProps>(
-    ({ children, loading, className, variant, size, asChild = false, disabled, ...props }, ref) => {
-        const Comp = asChild ? Slot : "button";
-        const isDisabled = loading || disabled;
-
-        return (
-            <Comp
-                className={cn(buttonVariants({ variant, size, className }))}
-                ref={ref}
-                disabled={isDisabled}
-                aria-disabled={isDisabled}
-                {...props}
-            >
-                <>
-                    {loading && (
-                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                    )}
-                    {children}
-                </>
-            </Comp>
-        );
-    }
-);
+const LoadingButton = React.forwardRef<HTMLButtonElement, LoadingButtonProps>(({ children, loading, ...props }, ref) => {
+    return (
+        <Button
+            {...props}
+            ref={ref}
+            disabled={loading || props.disabled}
+        >
+            {loading && (
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+            )}
+            {children}
+        </Button>
+    )
+});
 
 LoadingButton.displayName = "LoadingButton";
 

packages/web/src/ee/features/codeNav/components/symbolHoverPopup/index.tsx

@@ -1,7 +1,7 @@
 import { useBrowseNavigation } from "@/app/[domain]/browse/hooks/useBrowseNavigation";
 import { KeyboardShortcutHint } from "@/app/components/keyboardShortcutHint";
 import { useToast } from "@/components/hooks/use-toast";
-import { Button } from "@/components/ui/button";
+import { buttonVariants } from "@/components/ui/button";
 import { LoadingButton } from "@/components/ui/loading-button";
 import { Separator } from "@/components/ui/separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@@ -11,6 +11,7 @@ import { cn } from "@/lib/utils";
 import { computePosition, flip, offset, shift, VirtualElement } from "@floating-ui/react";
 import { ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import { Loader2 } from "lucide-react";
+import Link from "next/link";
 import { useCallback, useEffect, useMemo, useRef, useState, MouseEvent } from "react";
 import { createPortal } from "react-dom";
 import { useHotkeys } from "react-hotkeys-hook";
@@ -379,26 +380,24 @@ export const SymbolHoverPopup: React.FC<SymbolHoverPopupProps> = ({
             <div className="flex flex-row gap-2 mt-2">
                 <Tooltip delayDuration={500}>
                     <TooltipTrigger asChild>
-                        <LoadingButton
-                            loading={symbolInfo.isSymbolDefinitionsLoading}
-                            disabled={!previewedSymbolDefinition}
-                            variant="outline"
-                            size="sm"
-                            asChild={!symbolInfo.isSymbolDefinitionsLoading && !!previewedSymbolDefinition}
-                        >
-                            {!symbolInfo.isSymbolDefinitionsLoading && previewedSymbolDefinition ? (
-                                <a
-                                    href={gotoDefinitionHref}
-                                    onClick={onGotoDefinitionClick}
-                                >
-                                    {`Go to ${symbolInfo.symbolDefinitions && symbolInfo.symbolDefinitions.length > 1 ? "definitions" : "definition"}`}
-                                </a>
-                            ) : (
-                                <span>
-                                    {symbolInfo.isSymbolDefinitionsLoading ? "Loading..." : "No definition found"}
-                                </span>
-                            )}
-                        </LoadingButton>
+                        {!symbolInfo.isSymbolDefinitionsLoading && previewedSymbolDefinition && gotoDefinitionHref ? (
+                            <Link
+                                href={gotoDefinitionHref}
+                                onClick={onGotoDefinitionClick}
+                                className={cn(buttonVariants({ variant: "outline", size: "sm" }))}
+                            >
+                                {`Go to ${symbolInfo.symbolDefinitions && symbolInfo.symbolDefinitions.length > 1 ? "definitions" : "definition"}`}
+                            </Link>
+                        ) : (
+                            <LoadingButton
+                                loading={symbolInfo.isSymbolDefinitionsLoading}
+                                disabled={!previewedSymbolDefinition}
+                                variant="outline"
+                                size="sm"
+                            >
+                                {symbolInfo.isSymbolDefinitionsLoading ? "Loading..." : "No definition found"}
+                            </LoadingButton>
+                        )}
                     </TooltipTrigger>
                     <TooltipContent
                         side="bottom"
@@ -411,19 +410,16 @@ export const SymbolHoverPopup: React.FC<SymbolHoverPopupProps> = ({
                 </Tooltip>
                 <Tooltip delayDuration={500}>
                     <TooltipTrigger asChild>
-                        <Button
-                            variant="outline"
-                            size="sm"
-                            asChild
+                        <Link
+                            href={findReferencesHref ?? "#"}
+                            onClick={onFindReferencesClick}
+                            className={cn(
+                                buttonVariants({ variant: "outline", size: "sm" }),
+                                !findReferencesHref && "pointer-events-none opacity-50"
+                            )}
                         >
-                            <a
-                                href={findReferencesHref}
-                                onClick={onFindReferencesClick}
-                                className={cn(!symbolInfo && "pointer-events-none opacity-50")}
-                            >
-                                Find references
-                            </a>
-                        </Button>
+                            Find references
+                        </Link>
                     </TooltipTrigger>
                     <TooltipContent
                         side="bottom"