Support ctrl or command click to open link in new tab

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)}>

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>