New menu items

.gitignore

@@ -137,3 +137,6 @@ public/uploads
 
 # Postgre SQL (Neon) Backups
 backups
+
+# Local documentation
+.docs/

.vscode/settings.json

@@ -20,5 +20,6 @@
   },
   "[json]": {
     "editor.defaultFormatter": "biomejs.biome"
-  }
+  },
+  "prisma.pinToPrisma6": false
 }

app/(home)/page.tsx

@@ -1,7 +1,6 @@
 import 'server-only'
 
 import { CategoryCard, Hero, NewArrivals, SearchField } from '@/components/elements'
-import { Route } from '@/constants'
 import { getCategories } from '@/server/categories/queries'
 import { cn } from '@/utils'
 
@@ -17,14 +16,8 @@ export default async function HomePage() {
           <SearchField className="col-span-4 md:col-span-3 lg:col-span-2" />
         </div>
         <div className={cn('xs:grid-cols-2 grid grid-cols-1 gap-4 sm:gap-5 lg:grid-cols-3')}>
-          {categories.map(({ id, name, image }, i) => (
-            <CategoryCard
-              key={id}
-              priority={i < 3}
-              image={image}
-              name={name}
-              link={Route.Categories + name}
-            />
+          {categories.map(({ id, name, image, link }, i) => (
+            <CategoryCard key={id} priority={i < 3} image={image} name={name} link={link} />
           ))}
         </div>
       </div>

app/(pages)/admin/page.tsx

@@ -26,9 +26,9 @@ export default function Admin() {
           <FilePlus2 className={iconStyle} />
           Add new document
         </Link>
-        <Link href={Route.Documents} className={linkStyle}>
+        <Link href={Route.Ephemera} className={linkStyle}>
           <FileText className={iconStyle} />
-          View Documents
+          View Ephemerae
         </Link>
         <Link href={Route.Materials} className={linkStyle}>
           <Boxes className={iconStyle} />

app/(pages)/brands/[slug]/page.tsx

@@ -7,7 +7,7 @@ import Link from 'next/link'
 import { Fragment } from 'react'
 import { BarometerCardWithIcon, ImageLightbox, ShowMore } from '@/components/elements'
 import { Card, Separator } from '@/components/ui'
-import { fileStorage, Route, Tag } from '@/constants'
+import { fileStorage, isRouteKey, Route, Tag } from '@/constants'
 import { title } from '@/constants/metadata'
 import { prisma } from '@/prisma/prismaClient'
 import { type BrandDTO, getBrand } from '@/server/brands/queries'
@@ -22,7 +22,7 @@ async function getBarometersByManufacturer(slug: string) {
   'use cache'
   cacheLife('max')
   cacheTag(Tag.barometers)
-  return prisma.barometer.findMany({
+  const barometers = await prisma.barometer.findMany({
     where: { manufacturer: { slug } },
     select: {
       id: true,
@@ -31,6 +31,7 @@ async function getBarometersByManufacturer(slug: string) {
       category: {
         select: {
           name: true,
+          label: true,
         },
       },
       images: {
@@ -48,6 +49,18 @@ async function getBarometersByManufacturer(slug: string) {
     },
     orderBy: { name: 'asc' },
   })
+  return barometers.map(barometer => {
+    const { label } = barometer.category
+    if (!isRouteKey(label)) throw new Error(`A category ${label} doesn't exist in the app`)
+    return {
+      ...barometer,
+      category: {
+        ...barometer.category,
+        label,
+        link: Route[label],
+      },
+    }
+  })
 }
 
 export async function generateMetadata(props: Props): Promise<Metadata> {
@@ -128,7 +141,7 @@ export default async function Manufacturer(props: Props) {
                 <BarometerCardWithIcon
                   barometerName={name}
                   barometerLink={Route.Barometer + barometerSlug}
-                  categoryLink={Route.Categories + category.name}
+                  categoryLink={category.link}
                   categoryName={category.name}
                   image={images[0]}
                 />

app/(pages)/collection/categories/[...category]/page.tsx

@@ -23,8 +23,8 @@ interface CollectionProps {
 
 export async function generateMetadata(props: CollectionProps): Promise<Metadata> {
   const { category } = await props.params
-  const [categoryName] = category
-  const { description } = await getCategory(categoryName)
+  const [categoryName, sortCriteria, pageNo] = category
+  const { description, link } = await getCategory(categoryName)
   const { barometers } = await getBarometersByParams(categoryName, 1, 5, 'date')
   const collectionTitle = `${title}: ${capitalize(categoryName)} Barometers Collection`
   // TODO: Load scaled image rather that full size
@@ -34,7 +34,7 @@ export async function generateMetadata(props: CollectionProps): Promise<Metadata
       url: fileStorage + (images.at(0)?.url ?? ''),
       alt: name,
     }))
-  const url = `${Route.Categories}${category.join('/')}`
+  const url = `${link}/${sortCriteria}/${pageNo}`
   return {
     title: collectionTitle,
     description,

app/(pages)/collection/items/[slug]/components/breadcrumbs.tsx

@@ -7,18 +7,23 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/components/ui'
-import { Route } from '@/constants/routes'
 import { cn } from '@/utils'
 
 interface BreadcrumbsComponentProps {
   type: string
   catId: string
+  catLink: string
   className?: string
 }
 
 const bcTextStyle = 'text-base font-medium capitalize'
 
-export function BreadcrumbsComponent({ type, catId, className }: BreadcrumbsComponentProps) {
+export function BreadcrumbsComponent({
+  type,
+  catId,
+  className,
+  catLink,
+}: BreadcrumbsComponentProps) {
   const categorySlug = type.toLowerCase()
 
   return (
@@ -34,7 +39,7 @@ export function BreadcrumbsComponent({ type, catId, className }: BreadcrumbsComp
         <BreadcrumbSeparator />
         <BreadcrumbItem>
           <BreadcrumbLink asChild>
-            <Link className={bcTextStyle} href={Route.Categories + categorySlug}>
+            <Link className={bcTextStyle} href={catLink}>
               {categorySlug}
             </Link>
           </BreadcrumbLink>

app/(pages)/collection/items/[slug]/components/delete-barometer/delete-barometer.tsx

@@ -14,7 +14,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui'
-import { Route } from '@/constants'
 import { deleteBarometer } from '@/server/barometers/actions'
 import type { BarometerDTO } from '@/server/barometers/queries'
 import { cn } from '@/utils'
@@ -38,7 +37,7 @@ export function DeleteBarometer({ barometer, className }: Props) {
         if (!result.success) throw new Error(result.error)
         toast.success('Barometer deleted successfully')
         setOpen(false)
-        router.replace(Route.Categories + barometer.category.name)
+        router.replace(barometer.category.link)
       } catch (error) {
         toast.error(error instanceof Error ? error.message : 'Error deleting barometer')
       }

app/(pages)/collection/items/[slug]/page.tsx

@@ -81,7 +81,11 @@ export default async function Page(props: Props) {
   const dimensions = (barometer?.dimensions ?? []) as Dimensions
   return (
     <>
-      <BreadcrumbsComponent catId={barometer.collectionId} type={barometer.category.name} />
+      <BreadcrumbsComponent
+        catId={barometer.collectionId}
+        type={barometer.category.name}
+        catLink={barometer.category.link}
+      />
       <ImageCarousel barometer={barometer} />
       <Card className="p-4 shadow-md">
         <div className="flex flex-row flex-nowrap items-center justify-between">
@@ -110,7 +114,7 @@ export default async function Page(props: Props) {
             title="Category"
             edit={<CategoryEdit barometer={barometer} categories={categories} />}
           >
-            <Link className="text-sm w-fit" href={Route.Categories + barometer.category.name}>
+            <Link className="text-sm w-fit" href={barometer.category.link}>
               {barometer.category.label}
             </Link>
           </PropertyCard>

app/(pages)/collection/new-arrivals/page.tsx

@@ -39,7 +39,7 @@ export default async function NewArrivals(props: newArrivalsProps) {
               barometerName={name}
               barometerLink={Route.Barometer + slug}
               categoryName={category.name}
-              categoryLink={Route.Categories + category.name}
+              categoryLink={category.link}
               manufacturer={
                 (manufacturer.firstName ? `${manufacturer.firstName} ` : '') + manufacturer.name
               }

app/(pages)/documents/DocumentTable.tsx → app/(pages)/ephemera/DocumentTable.tsx

@@ -130,7 +130,7 @@ function DocumentTable({ archive = [], conditions, allBarometers }: Props) {
   })
 
   const selectRow = (row: TableRow) => {
-    router.push(Route.Documents + encodeURIComponent(row.catalogueNumber))
+    router.push(Route.Ephemera + encodeURIComponent(row.catalogueNumber))
   }
 
   return (

app/(pages)/documents/[cat-no]/page.tsx → app/(pages)/ephemera/[cat-no]/page.tsx

@@ -79,7 +79,7 @@ export default async function Document({ params }: Props) {
           </BreadcrumbItem>
           <BreadcrumbSeparator />
           <BreadcrumbItem>
-            <BreadcrumbLink href={Route.Documents}>Documents</BreadcrumbLink>
+            <BreadcrumbLink href={Route.Ephemera}>Ephemera</BreadcrumbLink>
           </BreadcrumbItem>
           <BreadcrumbSeparator />
           <BreadcrumbPage>{doc.catalogueNumber}</BreadcrumbPage>
@@ -255,9 +255,9 @@ export default async function Document({ params }: Props) {
             </Card>
           )}
 
-          {/* Back to Documents */}
+          {/* Back to Ephemera */}
           <Button variant="outline" className="w-full" asChild>
-            <Link href={Route.Documents}>← Back to Documents</Link>
+            <Link href={Route.Ephemera}>← Back to Ephemera</Link>
           </Button>
         </div>
       </div>

app/layout.tsx

@@ -73,7 +73,7 @@ export async function generateMetadata() {
 
 export default function RootLayout({ children }: PropsWithChildren) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning data-scroll-behavior="smooth">
       <CountryProvider>
         <head>
           <CheckConsent service="googleAnalytics" category="analytics">

app/sitemap.ts

@@ -1,6 +1,8 @@
 import type { MetadataRoute } from 'next'
 import { Route } from '@/constants/routes'
-import { prisma } from '@/prisma/prismaClient'
+import { getAllBarometers } from '@/server/barometers/queries'
+import { getAllBrands } from '@/server/brands/queries'
+import { getCategories } from '@/server/categories/queries'
 
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   const baseUrl = process.env.NEXT_PUBLIC_BASE_URL
@@ -45,7 +47,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
 }
 
 async function getItemPages(baseUrl: string, now: Date): Promise<MetadataRoute.Sitemap> {
-  const barometers = await prisma.barometer.findMany({ select: { slug: true } })
+  const barometers = await getAllBarometers()
   return barometers.map(({ slug }) => ({
     url: baseUrl + Route.Barometer + slug,
     priority: 0.8,
@@ -54,16 +56,16 @@ async function getItemPages(baseUrl: string, now: Date): Promise<MetadataRoute.S
 }
 
 async function getCategoryPages(baseUrl: string, now: Date): Promise<MetadataRoute.Sitemap> {
-  const categories = await prisma.category.findMany({ select: { name: true } })
-  return categories.map(({ name }) => ({
-    url: baseUrl + Route.Categories + name,
+  const categories = await getCategories()
+  return categories.map(({ link }) => ({
+    url: baseUrl + link,
     priority: 0.9,
     lastModified: now,
   }))
 }
 
 async function getBrandPages(baseUrl: string, now: Date): Promise<MetadataRoute.Sitemap> {
-  const brands = await prisma.manufacturer.findMany({ select: { slug: true } })
+  const brands = await getAllBrands()
   return brands.map(({ slug }) => ({
     url: baseUrl + Route.Brands + slug,
     priority: 0.8,

components/containers/header/mobile-menu.tsx

@@ -33,7 +33,7 @@ function MenuContent({ menu = [], closeMenu }: Props & { closeMenu: () => void }
   return (
     <SheetContent
       side="left"
-      className="z-[100] w-68 overflow-y-auto data-[state=open]:animate-[slide-in-from-left_500ms_ease-in-out_both]"
+      className="z-100 w-68 overflow-y-auto data-[state=open]:animate-[slide-in-from-left_500ms_ease-in-out_both]"
       onOpenAutoFocus={e => e.preventDefault()} // Prevent auto-focus to avoid focus outline on accordion
     >
       <SheetTitle className="sr-only">Navigation Menu</SheetTitle>

constants/routes.ts

@@ -1,24 +1,54 @@
-export const Route = {
+const root = {
   Home: '/',
   History: '/history/',
-  Foundation: '/foundation/',
-  Donate: '/foundation/donate/',
+  Ephemera: '/ephemera/',
   About: '/about/',
   Brands: '/brands/',
   Terms: '/terms-and-conditions/',
-  Categories: '/collection/categories/',
-  Barometer: '/collection/items/',
-  NewArrivals: '/collection/new-arrivals/',
-  Admin: '/admin/',
-  AddBarometer: '/admin/add-barometer/',
-  AddBrand: '/admin/add-brand/',
-  AddDocument: '/admin/add-document/',
-  Reports: '/admin/reports/',
-  Materials: '/admin/materials/',
-  Movements: '/admin/movements/',
   CookiePolicy: '/cookies/',
   PrivacyPolicy: '/privacy/',
-  Documents: '/documents/',
 } as const
 
-export type Route = (typeof Route)[keyof typeof Route]
+const foundation = '/foundation'
+const foundationRoutes = {
+  Foundation: `${foundation}/`,
+  Donate: `${foundation}/donate/`,
+}
+
+const categories = '/categories'
+const collection = '/collection'
+const collCat = collection + categories
+const collectionRoutes = {
+  Categories: `${collCat}/`,
+  Barometer: `${collection}/items/`,
+  NewArrivals: `${collection}/new-arrivals/`,
+  Forecasters: `${collCat}/forecasters/`,
+  "Friends'": `${collCat}/friends/`,
+  Miscellaneous: `${collCat}/miscellaneous/`,
+  Recorders: `${collCat}/recorders/`,
+  Bourdon: `${collCat}/bourdon/`,
+  Pocket: `${collCat}/pocket/`,
+  Aneroid: `${collCat}/aneroid/`,
+  Mercury: `${collCat}/mercury/`,
+} as const
+
+const admin = '/admin'
+const adminRoutes = {
+  Admin: `${admin}/`,
+  AddBarometer: `${admin}/add-barometer/`,
+  AddBrand: `${admin}/add-brand/`,
+  AddDocument: `${admin}/add-document/`,
+  Reports: `${admin}/reports/`,
+  Materials: `${admin}/materials/`,
+  Movements: `${admin}/movements/`,
+} as const
+
+export const Route = {
+  ...root,
+  ...foundationRoutes,
+  ...collectionRoutes,
+  ...adminRoutes,
+} as const
+export function isRouteKey(value: string): value is keyof typeof Route {
+  return value in Route
+}

package.json

@@ -11,9 +11,11 @@
   "scripts": {
     "dev": "next dev --turbopack -p 3001",
     "dev:remote": "bun ./scripts/tunnel.ts next dev",
+    "postgres:local": "brew services start postgresql@16",
     "prisma": "dotenv -e .env.local prisma studio",
     "prisma:remote": "bun ./scripts/tunnel.ts prisma studio",
     "import-data": "bun ./scripts/import-data.ts",
+    "seed-blur": "bun ./scripts/seed-blur-data.ts",
     "build": "next build",
     "postinstall": "prisma generate",
     "analyze": "ANALYZE=true next build",