Merge branch 'main' of https://github.com/ethanniser/NextMaster

src/app/(category-sidebar)/layout.tsx

@@ -1,5 +1,5 @@
+import { Link } from "@/components/ui/link";
 import { db } from "@/db";
-import Link from "next/link";
 
 export default async function Layout({
   children,

src/app/(category-sidebar)/page.tsx

@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { Link } from "@/components/ui/link";
 import { db } from "@/db";
 import Image from "next/image";
 

src/app/(category-sidebar)/products/[category]/page.tsx

@@ -7,7 +7,7 @@ import {
 } from "@/db/schema";
 import { count, eq } from "drizzle-orm";
 import Image from "next/image";
-import Link from "next/link";
+import { Link } from "@/components/ui/link";
 import { notFound } from "next/navigation";
 
 export default async function Page(props: {

src/app/auth.server.tsx

@@ -3,6 +3,7 @@ import { LoginForm, SignInSignUp, SignOut } from "./auth.client";
 
 export async function AuthServer() {
   const user = await getUser();
+  // TODO: Could dynamic load the sign-in/sign-up and sign-out components as they're not used on initial render
   if (!user) {
     return <SignInSignUp />;
   }

src/app/layout.tsx

@@ -1,12 +1,12 @@
 import type { Metadata, Viewport } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
-import Link from "next/link";
 import { SearchDropdownComponent } from "@/components/search-dropdown";
 import { MenuIcon } from "lucide-react";
 import { Suspense } from "react";
 import { Cart } from "@/components/cart";
 import { AuthServer } from "./auth.server";
+import { Link } from "@/components/ui/link";
 
 const helvetica = localFont({
   src: "./fonts/HelveticaNeueLTPro-Md.woff",

src/app/order/dynamic.tsx

@@ -1,6 +1,6 @@
 import { cache } from "react";
 import { detailedCart } from "@/lib/cart";
-import Link from "next/link";
+import { Link } from "@/components/ui/link";
 import Image from "next/image";
 import { removeFromCart } from "@/lib/actions";
 import { X } from "lucide-react";

src/components/search-dropdown.tsx

@@ -8,7 +8,7 @@ import Image from "next/image";
 import { cn } from "@/lib/utils";
 import { Product } from "../db/schema";
 import { searchProducts } from "../lib/actions";
-import Link from "next/link";
+import { Link } from "@/components/ui/link";
 import { useParams, useRouter } from "next/navigation";
 
 type SearchResult = Product & { href: string };

src/components/ui/link.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import NextLink from "next/link";
+import { useRouter } from "next/navigation";
+
+export const Link: typeof NextLink = (({ children, ...props }) => {
+  const router = useRouter();
+  return (
+    <NextLink
+      onMouseDown={(e) => {
+        const url = new URL(String(props.href), window.location.href);
+        if (
+          url.origin === window.location.origin &&
+          e.button === 0 &&
+          !e.altKey &&
+          !e.ctrlKey &&
+          !e.metaKey &&
+          !e.shiftKey
+        ) {
+          e.preventDefault();
+          router.push(String(props.href));
+        }
+      }}
+      {...props}
+    >
+      {children}
+    </NextLink>
+  );
+}) as typeof NextLink;

src/components/ui/product-card.tsx

@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { Link } from "@/components/ui/link";
 import Image from "next/image";
 import { Product } from "@/db/schema";
 export function ProductLink(props: {