From 93bb1dd519be5ce8a22014b9f0aa421acdf9e3a9 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Sat, 4 Jun 2022 19:13:07 -0500
Subject: [PATCH] Support ctrl or command click to open link in new tab

---
 web/components/contract/contract-card.tsx |  9 ++++++++-
 web/pages/home.tsx                        | 10 +++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index 6e87438e..3f600b55 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -65,7 +65,14 @@ export function ContractCard(props: {
               {onClick ? (
                 <a
                   className="absolute top-0 left-0 right-0 bottom-0"
-                  onClick={onClick}
+                  href={contractPath(contract)}
+                  onClick={(e) => {
+                    // Let the browser handle the link click (opens in new tab).
+                    if (e.ctrlKey || e.metaKey) return
+
+                    e.preventDefault()
+                    onClick()
+                  }}
                 />
               ) : (
                 <Link href={contractPath(contract)}>
diff --git a/web/pages/home.tsx b/web/pages/home.tsx
index 07f2a552..2f1eaadf 100644
--- a/web/pages/home.tsx
+++ b/web/pages/home.tsx
@@ -23,10 +23,7 @@ const Home = () => {
         if (!username || !contractSlug) setContract(undefined)
         else {
           // Show contract if route is to a contract: '/[username]/[contractSlug]'.
-          getContractFromSlug(contractSlug).then((c) => {
-            setContract(c)
-            window.scrollTo(0, 0)
-          })
+          getContractFromSlug(contractSlug).then(setContract)
         }
       }
     }
@@ -35,6 +32,10 @@ const Home = () => {
     return () => window.removeEventListener('popstate', onBack)
   }, [])
 
+  useEffect(() => {
+    if (contract) window.scrollTo(0, 0)
+  }, [contract])
+
   if (user === null) {
     Router.replace('/')
     return <></>
@@ -55,7 +56,6 @@ const Home = () => {
               setContract(c)
               // Update the url without switching pages in Nextjs.
               history.pushState(null, '', `/${c.creatorUsername}/${c.slug}`)
-              window.scrollTo(0, 0)
             }}
           />
         </Col>