From f48d6e12c263a12703d70160fd31fea72212cfea Mon Sep 17 00:00:00 2001
From: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com>
Date: Sun, 20 Oct 2024 19:22:37 -0700
Subject: [PATCH 01/11] redeploy

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 4ef0115..7787d0a 100644
--- a/README.md
+++ b/README.md
@@ -39,3 +39,5 @@ A highly performant replica of [McMaster-Carr](https://www.mcmaster.com/) using
 [PageSpeed report](https://pagespeed.web.dev/analysis/https-next-master-vercel-app/4181robe62?form_factor=mobile)
 
 ![image](https://github.com/user-attachments/assets/ccca9cb4-eedc-4415-b225-db9ee82ebf27)
+
+

From c741501adeb507a5ba53c30272759a84dfbe47cc Mon Sep 17 00:00:00 2001
From: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com>
Date: Sun, 20 Oct 2024 19:36:06 -0700
Subject: [PATCH 02/11] db

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 7787d0a..2fe7c43 100644
--- a/README.md
+++ b/README.md
@@ -41,3 +41,4 @@ A highly performant replica of [McMaster-Carr](https://www.mcmaster.com/) using
 ![image](https://github.com/user-attachments/assets/ccca9cb4-eedc-4415-b225-db9ee82ebf27)
 
 
+

From 93f902a2fb59144d2d818442e7c84513ba281c0b Mon Sep 17 00:00:00 2001
From: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com>
Date: Sun, 20 Oct 2024 19:55:03 -0700
Subject: [PATCH 03/11] make the grid flex and left aligned

---
 README.md                           | 3 ---
 src/app/(category-sidebar)/page.tsx | 6 +++---
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 2fe7c43..4ef0115 100644
--- a/README.md
+++ b/README.md
@@ -39,6 +39,3 @@ A highly performant replica of [McMaster-Carr](https://www.mcmaster.com/) using
 [PageSpeed report](https://pagespeed.web.dev/analysis/https-next-master-vercel-app/4181robe62?form_factor=mobile)
 
 ![image](https://github.com/user-attachments/assets/ccca9cb4-eedc-4415-b225-db9ee82ebf27)
-
-
-
diff --git a/src/app/(category-sidebar)/page.tsx b/src/app/(category-sidebar)/page.tsx
index c9b97cd..9153a9a 100644
--- a/src/app/(category-sidebar)/page.tsx
+++ b/src/app/(category-sidebar)/page.tsx
@@ -19,17 +19,17 @@ export default async function Home() {
   return (
     <div className="w-full p-4">
       <div className="mb-2 w-full flex-grow border-b-[1px] border-green-800 text-sm font-semibold text-black">
-        Explore {productCount.at(0)?.count} products
+        Explore {productCount.at(0)?.count.toLocaleString()} products
       </div>
       {collections.map((collection) => (
         <div key={collection.name}>
           <h2 className="text-xl font-semibold">{collection.name}</h2>
-          <div className="grid grid-cols-2 gap-4 border-b-2 py-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
+          <div className="flex flex-row flex-wrap justify-center gap-2 border-b-2 py-4 sm:justify-start">
             {collection.categories.map((category) => (
               <Link
                 prefetch={true}
                 key={category.name}
-                className="flex flex-col items-center text-center"
+                className="flex w-[125px] flex-col items-center text-center"
                 href={`/products/${category.slug}`}
               >
                 <Image

From 4ce91c1c040e618a947d5835d98087fd0ddecde4 Mon Sep 17 00:00:00 2001
From: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com>
Date: Sun, 20 Oct 2024 20:24:32 -0700
Subject: [PATCH 04/11] sticky navbar & sidebar

---
 src/app/(category-sidebar)/layout.tsx | 17 +++--
 src/app/layout.tsx                    | 94 +++++++++++++--------------
 2 files changed, 58 insertions(+), 53 deletions(-)

diff --git a/src/app/(category-sidebar)/layout.tsx b/src/app/(category-sidebar)/layout.tsx
index 36bb83b..5dfa972 100644
--- a/src/app/(category-sidebar)/layout.tsx
+++ b/src/app/(category-sidebar)/layout.tsx
@@ -6,12 +6,15 @@ export default async function Layout({
 }: {
   children: React.ReactNode;
 }) {
-  const allCategories = await db.query.categories.findMany({
-    orderBy: (categories, { asc }) => asc(categories.name),
+  const allCategories = await db.query.collections.findMany({
+    with: {
+      categories: true,
+    },
+    orderBy: (collections, { asc }) => asc(collections.name),
   });
   return (
-    <div className="flex flex-grow font-helvetica-roman">
-      <aside className="hidden w-48 min-w-48 border-r border-gray-400 p-3 md:block">
+    <div className="flex flex-grow overflow-hidden font-helvetica-roman">
+      <aside className="sticky top-[73px] hidden h-[calc(100vh-73px)] w-48 min-w-48 overflow-y-auto border-r border-gray-400 p-3 md:block">
         <h2 className="border-b border-green-800 text-sm font-semibold text-green-900">
           Choose a Category
         </h2>
@@ -20,7 +23,7 @@ export default async function Layout({
             <li key={category.name} className="w-full">
               <Link
                 prefetch={true}
-                href={`/products/${category.slug}`}
+                href={`/products/${category.name}`}
                 className="block w-full py-1 text-xs text-gray-800 hover:bg-yellow-100 hover:underline"
               >
                 {category.name}
@@ -29,7 +32,9 @@ export default async function Layout({
           ))}
         </ul>
       </aside>
-      <main className="flex-grow">{children}</main>
+      <main className="h-[calc(100vh-73px)] flex-grow overflow-y-auto p-4">
+        {children}
+      </main>
     </div>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2e22de3..c34d198 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -56,22 +56,22 @@ export default async function RootLayout({
       <body
         className={`${helvetica.variable} ${helveticaRoman.variable} ${futura.variable} flex min-h-full flex-col antialiased`}
       >
-        <div className="flex flex-grow flex-col">
-          <div className="flex w-full justify-end px-4 pt-2 text-sm hover:underline">
-            <Suspense
-              fallback={
-                <button className="flex flex-row items-center gap-1">
-                  <div className="h-[20px]" />
-                  <svg viewBox="0 0 10 6" className="h-[6px] w-[10px]">
-                    <polygon points="0,0 5,6 10,0"></polygon>
-                  </svg>
-                </button>
-              }
-            >
-              <AuthServer />
-            </Suspense>
-          </div>
-          <header className="flex flex-col items-center justify-between gap-4 border-b-2 border-yellow-300 p-2 pb-[4px] pt-2 font-futura sm:flex-row sm:p-4 sm:pb-[4px] sm:pt-0">
+        <header className="sticky top-0 z-10 flex w-[100vw] flex-grow flex-col items-center justify-between gap-4 border-b-2 border-yellow-300 bg-background p-2 pb-[4px] pt-2 font-futura sm:flex-row sm:p-4 sm:pb-[4px] sm:pt-0">
+          <div className="flex flex-grow flex-col">
+            <div className="flex w-full justify-end px-4 pt-2 font-sans text-sm hover:underline">
+              <Suspense
+                fallback={
+                  <button className="flex flex-row items-center gap-1">
+                    <div className="h-[20px]" />
+                    <svg viewBox="0 0 10 6" className="h-[6px] w-[10px]">
+                      <polygon points="0,0 5,6 10,0"></polygon>
+                    </svg>
+                  </button>
+                }
+              >
+                <AuthServer />
+              </Suspense>
+            </div>
             <div className="flex w-full items-center justify-center sm:w-auto">
               <Link
                 prefetch={true}
@@ -80,44 +80,44 @@ export default async function RootLayout({
               >
                 NextMaster
               </Link>
-            </div>
-            <div className="items flex w-full flex-row items-center justify-between gap-4">
-              <div className="mx-0 flex-grow sm:mx-auto sm:flex-grow-0">
-                <SearchDropdownComponent />
-              </div>
-              <div className="flex flex-row justify-between space-x-4">
-                <div className="relative">
+              <div className="items flex w-full flex-row items-center justify-between gap-4">
+                <div className="mx-0 flex-grow sm:mx-auto sm:flex-grow-0">
+                  <SearchDropdownComponent />
+                </div>
+                <div className="flex flex-row justify-between space-x-4">
+                  <div className="relative">
+                    <Link
+                      prefetch={true}
+                      href="/order"
+                      className="text-lg text-green-800 hover:underline"
+                    >
+                      ORDER
+                    </Link>
+                    <Suspense>
+                      <Cart />
+                    </Suspense>
+                  </div>
+                  <Link
+                    prefetch={true}
+                    href="/order-history"
+                    className="hidden text-lg text-green-800 hover:underline md:block"
+                  >
+                    ORDER HISTORY
+                  </Link>
                   <Link
                     prefetch={true}
-                    href="/order"
-                    className="text-lg text-green-800 hover:underline"
+                    href="/order-history"
+                    aria-label="Order History"
+                    className="block text-lg text-green-800 hover:underline md:hidden"
                   >
-                    ORDER
+                    <MenuIcon />
                   </Link>
-                  <Suspense>
-                    <Cart />
-                  </Suspense>
                 </div>
-                <Link
-                  prefetch={true}
-                  href="/order-history"
-                  className="hidden text-lg text-green-800 hover:underline md:block"
-                >
-                  ORDER HISTORY
-                </Link>
-                <Link
-                  prefetch={true}
-                  href="/order-history"
-                  aria-label="Order History"
-                  className="block text-lg text-green-800 hover:underline md:hidden"
-                >
-                  <MenuIcon />
-                </Link>
               </div>
             </div>
-          </header>
-          {children}
-        </div>
+          </div>
+        </header>
+        {children}
         <footer className="flex h-auto flex-col items-center justify-between space-y-2 border-t border-gray-400 px-4 font-helvetica text-[11px] sm:h-6 sm:flex-row sm:space-y-0">
           <div className="flex flex-wrap justify-center space-x-2 pt-2 sm:justify-start">
             <span className="hover:bg-yellow-100 hover:underline">Home</span>

From 6ff6744ea609358103e88fb51c1627dbc62c4e7e Mon Sep 17 00:00:00 2001
From: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com>
Date: Sun, 20 Oct 2024 20:35:45 -0700
Subject: [PATCH 05/11] working sticky

---
 src/app/(category-sidebar)/layout.tsx | 2 +-
 src/app/layout.tsx                    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(category-sidebar)/layout.tsx b/src/app/(category-sidebar)/layout.tsx
index 5dfa972..cd9a914 100644
--- a/src/app/(category-sidebar)/layout.tsx
+++ b/src/app/(category-sidebar)/layout.tsx
@@ -14,7 +14,7 @@ export default async function Layout({
   });
   return (
     <div className="flex flex-grow overflow-hidden font-helvetica-roman">
-      <aside className="sticky top-[73px] hidden h-[calc(100vh-73px)] w-48 min-w-48 overflow-y-auto border-r border-gray-400 p-3 md:block">
+      <aside className="sticky hidden h-screen w-64 min-w-48 border-r p-4 md:block">
         <h2 className="border-b border-green-800 text-sm font-semibold text-green-900">
           Choose a Category
         </h2>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c34d198..60ab5b3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -54,7 +54,7 @@ export default async function RootLayout({
   return (
     <html lang="en" className="h-full">
       <body
-        className={`${helvetica.variable} ${helveticaRoman.variable} ${futura.variable} flex min-h-full flex-col antialiased`}
+        className={`${helvetica.variable} ${helveticaRoman.variable} ${futura.variable} flex min-h-full flex-col overflow-y-hidden antialiased`}
       >
         <header className="sticky top-0 z-10 flex w-[100vw] flex-grow flex-col items-center justify-between gap-4 border-b-2 border-yellow-300 bg-background p-2 pb-[4px] pt-2 font-futura sm:flex-row sm:p-4 sm:pb-[4px] sm:pt-0">
           <div className="flex flex-grow flex-col">

From 8dcd1ab63c2d2484d3c81b7e7346ee7c6004ad04 Mon Sep 17 00:00:00 2001
From: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com>
Date: Sun, 20 Oct 2024 20:36:41 -0700
Subject: [PATCH 06/11] only throw in dev

---
 src/components/ui/link.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/link.tsx b/src/components/ui/link.tsx
index 2f7a1f1..e15c2fd 100644
--- a/src/components/ui/link.tsx
+++ b/src/components/ui/link.tsx
@@ -26,7 +26,8 @@ async function prefetchImages(href: string) {
   const imageResponse = await fetch(`/api/prefetch-images${url.pathname}`, {
     priority: "low",
   });
-  if (!imageResponse.ok) {
+  // only throw in dev
+  if (!imageResponse.ok && process.env.NODE_ENV === "development") {
     throw new Error("Failed to prefetch images");
   }
   const { images } = await imageResponse.json();

From 9af9f81c548dea7023e5ea720067dddd2233e218 Mon Sep 17 00:00:00 2001
From: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com>
Date: Sun, 20 Oct 2024 20:45:06 -0700
Subject: [PATCH 07/11] collections

---
 .../(category-sidebar)/[collection]/page.tsx  | 53 +++++++++++++++++++
 src/app/(category-sidebar)/layout.tsx         |  2 +-
 2 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/app/(category-sidebar)/[collection]/page.tsx

diff --git a/src/app/(category-sidebar)/[collection]/page.tsx b/src/app/(category-sidebar)/[collection]/page.tsx
new file mode 100644
index 0000000..55fcf75
--- /dev/null
+++ b/src/app/(category-sidebar)/[collection]/page.tsx
@@ -0,0 +1,53 @@
+import { Link } from "@/components/ui/link";
+import { db } from "@/db";
+import { products } from "@/db/schema";
+import { count } from "drizzle-orm";
+import Image from "next/image";
+
+export default async function Home(props: {
+  params: {
+    collection: string;
+  };
+}) {
+  const collections = await db.query.collections.findMany({
+    with: {
+      categories: true,
+    },
+    where: (collections, { eq }) =>
+      eq(collections.name, decodeURIComponent(props.params.collection)),
+    orderBy: (collections, { asc }) => asc(collections.name),
+  });
+  let imageCount = 0;
+
+  return (
+    <div className="w-full p-4">
+      {collections.map((collection) => (
+        <div key={collection.name}>
+          <h2 className="text-xl font-semibold">{collection.name}</h2>
+          <div className="flex flex-row flex-wrap justify-center gap-2 border-b-2 py-4 sm:justify-start">
+            {collection.categories.map((category) => (
+              <Link
+                prefetch={true}
+                key={category.name}
+                className="flex w-[125px] flex-col items-center text-center"
+                href={`/products/${category.slug}`}
+              >
+                <Image
+                  loading={imageCount++ < 15 ? "eager" : "lazy"}
+                  decoding="sync"
+                  src={category.image_url ?? "/placeholder.svg"}
+                  alt={`A small picture of ${category.name}`}
+                  className="mb-2 h-14 w-14 border hover:bg-yellow-200"
+                  width={48}
+                  height={48}
+                  quality={65}
+                />
+                <span className="text-xs">{category.name}</span>
+              </Link>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/app/(category-sidebar)/layout.tsx b/src/app/(category-sidebar)/layout.tsx
index cd9a914..718ab0e 100644
--- a/src/app/(category-sidebar)/layout.tsx
+++ b/src/app/(category-sidebar)/layout.tsx
@@ -23,7 +23,7 @@ export default async function Layout({
             <li key={category.name} className="w-full">
               <Link
                 prefetch={true}
-                href={`/products/${category.name}`}
+                href={`/${category.name}`}
                 className="block w-full py-1 text-xs text-gray-800 hover:bg-yellow-100 hover:underline"
               >
                 {category.name}

From 21026fc8893a6c1ca5709a66cd00e6a9bfe11ee5 Mon Sep 17 00:00:00 2001
From: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com>
Date: Sun, 20 Oct 2024 20:46:10 -0700
Subject: [PATCH 08/11] bring footer back

---
 src/app/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 60ab5b3..0b6044c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -118,7 +118,7 @@ export default async function RootLayout({
           </div>
         </header>
         {children}
-        <footer className="flex h-auto flex-col items-center justify-between space-y-2 border-t border-gray-400 px-4 font-helvetica text-[11px] sm:h-6 sm:flex-row sm:space-y-0">
+        <footer className="sticky bottom-0 flex h-auto flex-col items-center justify-between space-y-2 border-t border-gray-400 bg-background px-4 font-helvetica text-[11px] sm:h-6 sm:flex-row sm:space-y-0">
           <div className="flex flex-wrap justify-center space-x-2 pt-2 sm:justify-start">
             <span className="hover:bg-yellow-100 hover:underline">Home</span>
             <span>|</span>

From deb59e58c03f129cc778b6394bd2df38c3299d24 Mon Sep 17 00:00:00 2001
From: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com>
Date: Sun, 20 Oct 2024 20:48:03 -0700
Subject: [PATCH 09/11] fix increasing sidebar

---
 src/app/(category-sidebar)/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(category-sidebar)/layout.tsx b/src/app/(category-sidebar)/layout.tsx
index 718ab0e..eb2cbc9 100644
--- a/src/app/(category-sidebar)/layout.tsx
+++ b/src/app/(category-sidebar)/layout.tsx
@@ -14,7 +14,7 @@ export default async function Layout({
   });
   return (
     <div className="flex flex-grow overflow-hidden font-helvetica-roman">
-      <aside className="sticky hidden h-screen w-64 min-w-48 border-r p-4 md:block">
+      <aside className="sticky hidden h-screen w-64 max-w-64 border-r p-4 md:block">
         <h2 className="border-b border-green-800 text-sm font-semibold text-green-900">
           Choose a Category
         </h2>

From 5becbeae315532deeb4029df0065b53195d6453b Mon Sep 17 00:00:00 2001
From: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com>
Date: Sun, 20 Oct 2024 20:49:59 -0700
Subject: [PATCH 10/11] Revert "fix increasing sidebar"

This reverts commit deb59e58c03f129cc778b6394bd2df38c3299d24.
---
 src/app/(category-sidebar)/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(category-sidebar)/layout.tsx b/src/app/(category-sidebar)/layout.tsx
index eb2cbc9..718ab0e 100644
--- a/src/app/(category-sidebar)/layout.tsx
+++ b/src/app/(category-sidebar)/layout.tsx
@@ -14,7 +14,7 @@ export default async function Layout({
   });
   return (
     <div className="flex flex-grow overflow-hidden font-helvetica-roman">
-      <aside className="sticky hidden h-screen w-64 max-w-64 border-r p-4 md:block">
+      <aside className="sticky hidden h-screen w-64 min-w-48 border-r p-4 md:block">
         <h2 className="border-b border-green-800 text-sm font-semibold text-green-900">
           Choose a Category
         </h2>

From fe62d4ccbc7da53f9f2860d7d6119f80c8defc5f Mon Sep 17 00:00:00 2001
From: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com>
Date: Sun, 20 Oct 2024 20:52:11 -0700
Subject: [PATCH 11/11] fix sidebar

---
 src/app/(category-sidebar)/layout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(category-sidebar)/layout.tsx b/src/app/(category-sidebar)/layout.tsx
index 718ab0e..1924c68 100644
--- a/src/app/(category-sidebar)/layout.tsx
+++ b/src/app/(category-sidebar)/layout.tsx
@@ -14,7 +14,7 @@ export default async function Layout({
   });
   return (
     <div className="flex flex-grow overflow-hidden font-helvetica-roman">
-      <aside className="sticky hidden h-screen w-64 min-w-48 border-r p-4 md:block">
+      <aside className="sticky hidden h-screen w-64 min-w-64 max-w-64 border-r p-4 md:block">
         <h2 className="border-b border-green-800 text-sm font-semibold text-green-900">
           Choose a Category
         </h2>
@@ -32,7 +32,7 @@ export default async function Layout({
           ))}
         </ul>
       </aside>
-      <main className="h-[calc(100vh-73px)] flex-grow overflow-y-auto p-4">
+      <main className="h-[calc(100vh-73px)] flex-grow overflow-y-auto p-4 pt-0">
         {children}
       </main>
     </div>