From 872214cf5fdc3033ddd3842ad34765458958b169 Mon Sep 17 00:00:00 2001
From: Daniel Saewitz <git@saewitz.com>
Date: Mon, 4 Dec 2023 11:57:00 -0500
Subject: [PATCH] Fix navbar; improve loading state for links; fix metaKey

---
 Dockerfile                       |  2 +-
 src/app/(main)/MainNavHeader.tsx |  2 +-
 src/app/(main)/NavBar.tsx        | 23 +++++++++++++----------
 src/components/Row.tsx           | 14 ++++++++++----
 4 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index ea89f7a..076dbab 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:20-alpine
+FROM node:18-alpine
 
 RUN mkdir -p /usr/src/app
 WORKDIR /usr/src/app
diff --git a/src/app/(main)/MainNavHeader.tsx b/src/app/(main)/MainNavHeader.tsx
index 6647b37..88a4d59 100644
--- a/src/app/(main)/MainNavHeader.tsx
+++ b/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>
diff --git a/src/app/(main)/NavBar.tsx b/src/app/(main)/NavBar.tsx
index 86ec8ae..d14e0fa 100644
--- a/src/app/(main)/NavBar.tsx
+++ b/src/app/(main)/NavBar.tsx
@@ -9,26 +9,29 @@ 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>
@@ -36,7 +39,7 @@ export default async function NavBar() {
         </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>
diff --git a/src/components/Row.tsx b/src/components/Row.tsx
index 649efc7..dbe26a0 100644
--- a/src/components/Row.tsx
+++ b/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}