feat: upgrade to Remix v2 (#80)

This upgrade has been a long time in the making and I'm so happy it's
done so I can move on to something else

feat: switch to pnpm
fix: upgrade remix-utils
fix: upgrade partytown
feat: upgrade growthbook packages and disable them temporarily
fix: upgrade vite + vitest
fix: upgrade some various core packages
feat: replace react-select with a Tailwind based combobox
fix: block bots from routes that consume Spotify
fix: update sqlite timestamp triggers
fix: load request values in loaders/actions instead of custom server

.github/workflows/pull-request-ci.yml

@@ -4,29 +4,30 @@ on:
     branches:
       - main
 
-env:
-  NODE_VERSION: 16
-
 jobs:
   ci:
     name: Run
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: 'npm'
-      - run: npm ci
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+      - name: Install packages
+        run: |
+          pnpm --version
+          pnpm install
 
       - name: Run linters
         if: always()
-        run: npm run lint
+        run: pnpm run lint
 
       - name: Check types
         if: always()
-        run: npm run typecheck
+        run: pnpm run typecheck
 
       - name: Run tests
         if: always()
-        run: npm test
+        run: pnpm test

.gitignore

@@ -7,3 +7,4 @@ node_modules
 .env
 coverage
 data.db
+build

.nvmrc

@@ -1 +1 @@
-v16
+v22

app/components/Album/ErrorBoundary.tsx

@@ -9,6 +9,7 @@ import {
   Layout,
   Typography,
 } from '~/components/Base'
+import Document from '~/components/Base/Document'
 import useCurrentPath from '~/hooks/useCurrentPath'
 import useLoading from '~/hooks/useLoading'
 
@@ -35,30 +36,32 @@ const AlbumErrorBoundary: React.FC = () => {
   }
 
   return (
-    <Layout>
-      <Container>
-        <div className={clsx('prose')}>
-          <Heading level="h2">⛔️ Whoops!</Heading>
-          <Typography>
-            We seemed to have run into an error. We are working on fixing it
-            now. You should refresh the page to fix this issue.
-          </Typography>
-          <details className={clsx('mb-6')}>
-            <summary>Detailed error message</summary>
-            <pre className={clsx('whitespace-pre-line')}>{body}</pre>
-          </details>
-          <ButtonLink
-            to={currentPath}
-            disabled={loading}
-            className={clsx('mt-2')}
-          >
-            <EmojiText emoji="🔄" label="refresh icon">
-              Retry
-            </EmojiText>
-          </ButtonLink>
-        </div>
-      </Container>
-    </Layout>
+    <Document>
+      <Layout>
+        <Container>
+          <div className={clsx('prose')}>
+            <Heading level="h2">⛔️ Whoops!</Heading>
+            <Typography>
+              We seemed to have run into an error. We are working on fixing it
+              now. You should refresh the page to fix this issue.
+            </Typography>
+            <details className={clsx('mb-6')}>
+              <summary>Detailed error message</summary>
+              <pre className={clsx('whitespace-pre-line')}>{body}</pre>
+            </details>
+            <ButtonLink
+              to={currentPath}
+              disabled={loading}
+              className={clsx('mt-2')}
+            >
+              <EmojiText emoji="🔄" label="refresh icon">
+                Retry
+              </EmojiText>
+            </ButtonLink>
+          </div>
+        </Container>
+      </Layout>
+    </Document>
   )
 }
 

app/components/Base/Document.tsx

@@ -0,0 +1,26 @@
+import { Links, Meta, Scripts, ScrollRestoration } from '@remix-run/react'
+
+import Tracking from '~/components/Tracking'
+import useTailwindTheme from '~/hooks/useTailwindTheme'
+
+const Document: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
+  const { isDarkMode, pallete } = useTailwindTheme()
+
+  return (
+    <html lang="en" data-theme={isDarkMode ? 'dark' : 'light'}>
+      <head>
+        <Meta />
+        <meta name="theme-color" content={pallete['base-100']} />
+        <Links />
+        <Tracking />
+      </head>
+      <body id="album-mode-root">
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+
+export default Document

app/components/Base/Layout.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import React from 'react'
-import { ClientOnly } from 'remix-utils'
+import { ClientOnly } from 'remix-utils/client-only'
 
 import AutoAlert from '~/components/AutoAlert'
 import { DesktopLoader, MobileLoader } from '~/components/Loading'

app/components/Base/index.tsx

@@ -262,6 +262,7 @@ export interface InputProps extends React.HTMLAttributes<HTMLInputElement> {
   name?: string
   required?: boolean
   type?: string
+  placeholder?: string
 }
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(

app/components/ErrorBoundary.tsx

@@ -9,6 +9,7 @@ import {
   Layout,
   Typography,
 } from '~/components/Base'
+import Document from '~/components/Base/Document'
 
 export const PageErrorBoundary: React.FC = () => {
   const error = useRouteError()
@@ -31,24 +32,27 @@ export const PageErrorBoundary: React.FC = () => {
   }
 
   return (
-    <Layout>
-      <Container>
-        <div className={clsx('prose')}>
-          <Heading level="h2">⛔️ Whoops!</Heading>
-          <Typography>
-            We seem to have run into an error. We are working on fixing it now.
-          </Typography>
-          <details className={clsx('mb-6')}>
-            <summary>Detailed error message</summary>
-            <pre className={clsx('whitespace-pre-line')}>{body}</pre>
-          </details>
-          <ButtonLink to="/">
-            <EmojiText emoji="🏚" label="broken home">
-              Head Home
-            </EmojiText>
-          </ButtonLink>
-        </div>
-      </Container>
-    </Layout>
+    <Document>
+      <Layout>
+        <Container>
+          <div className={clsx('prose')}>
+            <Heading level="h2">⛔️ Whoops!</Heading>
+            <Typography>
+              We seem to have run into an error. We are working on fixing it
+              now.
+            </Typography>
+            <details className={clsx('mb-6')}>
+              <summary>Detailed error message</summary>
+              <pre className={clsx('whitespace-pre-line')}>{body}</pre>
+            </details>
+            <ButtonLink to="/">
+              <EmojiText emoji="🏚" label="broken home">
+                Head Home
+              </EmojiText>
+            </ButtonLink>
+          </div>
+        </Container>
+      </Layout>
+    </Document>
   )
 }