From f8534b2c3d04b19bdff698b8a2d8b1fcda5bf4bf Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Thu, 14 Sep 2023 12:51:59 +1000
Subject: [PATCH] fix: add dashboard header border on scroll

---
 .../app/(dashboard)/settings/billing/page.tsx   | 14 ++++++++------
 .../components/(dashboard)/layout/header.tsx    | 17 +++++++++++++++--
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/settings/billing/page.tsx b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
index e9966b9ac..555c645ce 100644
--- a/apps/web/src/app/(dashboard)/settings/billing/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
@@ -21,16 +21,18 @@ export default async function BillingSettingsPage() {
     redirect('/settings/profile');
   }
 
-  let subscription = await getSubscriptionByUserId({ userId: user.id });
+  const subscription = await getSubscriptionByUserId({ userId: user.id }).then(async (sub) => {
+    if (sub) {
+      return sub;
+    }
 
-  // If we don't have a customer record, create one as well as an empty subscription.
-  if (!subscription?.customerId) {
-    subscription = await createCustomer({ user });
-  }
+    // If we don't have a customer record, create one as well as an empty subscription.
+    return createCustomer({ user });
+  });
 
   let billingPortalUrl = '';
 
-  if (subscription?.customerId) {
+  if (subscription.customerId) {
     billingPortalUrl = await getPortalSession({
       customerId: subscription.customerId,
       returnUrl: `${process.env.NEXT_PUBLIC_SITE_URL}/settings/billing`,
diff --git a/apps/web/src/components/(dashboard)/layout/header.tsx b/apps/web/src/components/(dashboard)/layout/header.tsx
index 88dc5d7a4..bea7f4aee 100644
--- a/apps/web/src/components/(dashboard)/layout/header.tsx
+++ b/apps/web/src/components/(dashboard)/layout/header.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, useEffect, useState } from 'react';
 
 import Link from 'next/link';
 
@@ -17,10 +17,23 @@ export type HeaderProps = HTMLAttributes<HTMLDivElement> & {
 };
 
 export const Header = ({ className, user, ...props }: HeaderProps) => {
+  const [scrollY, setScrollY] = useState(0);
+
+  useEffect(() => {
+    const onScroll = () => {
+      setScrollY(window.scrollY);
+    };
+
+    window.addEventListener('scroll', onScroll);
+
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
   return (
     <header
       className={cn(
-        'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-50 flex h-16 w-full items-center border-b backdrop-blur',
+        'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-50 flex h-16 w-full items-center border-b border-b-transparent backdrop-blur duration-200',
+        scrollY > 5 && 'border-b-border',
         className,
       )}
       {...props}