Fix navbar; improve loading state for links; fix metaKey

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine
+FROM node:18-alpine
 
 RUN mkdir -p /usr/src/app
 WORKDIR /usr/src/app

src/app/(main)/MainNavHeader.tsx

@@ -22,7 +22,7 @@ export default function MainNavHeader({
 
   return (
     <>
-      <Flex className="left h-full flex-1 items-center font-medium max-lg:hidden lg:gap-1">
+      <Flex className="left h-full flex-1 items-center whitespace-nowrap font-medium max-lg:hidden lg:gap-1">
         <Link href="/" className="ml-1 text-center " prefetch={false} onClick={onClickNav}>
           RELISTEN
         </Link>

src/app/(main)/NavBar.tsx

@@ -9,34 +9,37 @@ import MainNavHeader from './MainNavHeader';
 export default async function NavBar() {
   const artists = await fetchArtists();
 
-  const artistSlugsToName = artists.reduce((memo, next) => {
-    memo[String(next.slug)] = next.name;
+  const artistSlugsToName = artists.reduce(
+    (memo, next) => {
+      memo[String(next.slug)] = next.name;
 
-    return memo;
-  }, {} as Record<string, string | undefined>);
+      return memo;
+    },
+    {} as Record<string, string | undefined>
+  );
 
   return (
-    <div className="relative grid h-[50px] max-h-[50px] min-h-[50px] grid-cols-3 justify-between border-b-[1px] border-b-[#aeaeae] bg-white text-[#333333] max-lg:flex">
+    <div className="relative flex h-[50px] max-h-[50px] min-h-[50px] grid-cols-3 justify-between border-b-[1px] border-b-[#aeaeae] bg-white text-[#333333] lg:grid">
       <MainNavHeader artistSlugsToName={artistSlugsToName} />
-      <div className="min-w-[60%] flex-1 text-center md:min-w-[60%] lg:min-w-[42vw]">
+      <div className="min-w-[60%] flex-1 text-center lg:min-w-[44vw] xl:min-w-[38vw]">
         <Player artistSlugsToName={artistSlugsToName} />
       </div>
       <SimplePopover content={<Menu />}>
-        <Flex className="flex-2 h-full cursor-pointer content-end items-center text-center font-medium lg:hidden">
-          <div className="flex h-full items-center px-1 active:relative active:top-[1px] active:text-[#333333]">
+        <Flex className="flex-2 h-full cursor-pointer content-end items-center text-center font-medium 2xl:hidden">
+          <div className="ml-auto flex h-full items-center px-1 active:relative active:top-[1px] active:text-[#333333]">
             <i className="fa fa-bars text-inherit" />
           </div>
         </Flex>
       </SimplePopover>
-      <div className="nav hidden h-full flex-[2] cursor-pointer items-center justify-end text-center font-medium lg:flex">
+      <div className="nav hidden h-full flex-[2] cursor-pointer items-center justify-end text-center font-medium 2xl:flex">
         <div className="h-full px-1">
           <Link href="/today" legacyBehavior prefetch={false}>
             <a className="nav-btn">TIH</a>
           </Link>
         </div>
         <div>
           <Link href="/recently-played" legacyBehavior prefetch={false}>
-            <a className="nav-btn">RECENTLY PLAYED</a>
+            <a className="nav-btn whitespace-nowrap">HISTORY</a>
           </Link>
         </div>
         <div>

src/components/Row.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { MouseEvent, MouseEventHandler, useTransition } from 'react';
+import React, { MouseEvent, useTransition } from 'react';
 import Link from 'next/link';
 import RowLoading from './RowLoading';
 import Flex from './Flex';
@@ -51,6 +51,10 @@ const Row = ({
   }
 
   const onLinkClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    // dont block new tab
+    if (e.metaKey) {
+      return;
+    }
     e.preventDefault();
     if (pathname === href) {
       startTransition(() => router.refresh());
@@ -70,11 +74,13 @@ const Row = ({
         {...props}
       >
         {loading && <RowLoading />}
-        {isPending && (
-          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 opacity-70">
+        {/* {isPending && (
+          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 opacity-40">
             <Spinner />
           </div>
-        )}
+        )} */}
+        {isPending && <div className="w-2 animate-pulse bg-black/30" />}
+
         {isActive && <div className="w-2 bg-black/75" />}
         <Flex className="w-full flex-1 items-center justify-between p-1 leading-tight">
           {children}