chore: bump version to 2.23.14 and refactor error handling components (#451)

- Updated application version from 2.23.13 to 2.23.14 in package.json.
- Refactored error handling components in web app to utilize a new ErrorPageContent component for improved code organization and readability.
- Simplified error and not found page layouts by removing redundant code and enhancing localization keys for better user experience.

apps/web/app/(marketing)/changelog/[slug]/page.tsx

@@ -72,10 +72,10 @@ export async function generateMetadata({
       url: data.entry.url,
       images: image
         ? [
-            {
-              url: image,
-            },
-          ]
+          {
+            url: image,
+          },
+        ]
         : [],
     },
     twitter: {

apps/web/app/error.tsx

@@ -1,16 +1,10 @@
 'use client';
 
-import Link from 'next/link';
-
-import { ArrowLeft, MessageCircle } from 'lucide-react';
-
 import { useCaptureException } from '@kit/monitoring/hooks';
 import { useUser } from '@kit/supabase/hooks/use-user';
-import { Button } from '@kit/ui/button';
-import { Heading } from '@kit/ui/heading';
-import { Trans } from '@kit/ui/trans';
 
 import { SiteHeader } from '~/(marketing)/_components/site-header';
+import { ErrorPageContent } from '~/components/error-page-content';
 
 const ErrorPage = ({
   error,
@@ -27,53 +21,13 @@ const ErrorPage = ({
     <div className={'flex h-screen flex-1 flex-col'}>
       <SiteHeader user={user.data} />
 
-      <div
-        className={
-          'container m-auto flex w-full flex-1 flex-col items-center justify-center'
-        }
-      >
-        <div className={'flex flex-col items-center space-y-8'}>
-          <div>
-            <h1 className={'font-heading text-9xl font-semibold'}>
-              <Trans i18nKey={'common:errorPageHeading'} />
-            </h1>
-          </div>
-
-          <div className={'flex flex-col items-center space-y-8'}>
-            <div
-              className={
-                'flex max-w-xl flex-col items-center gap-y-2 text-center'
-              }
-            >
-              <div>
-                <Heading level={2}>
-                  <Trans i18nKey={'common:genericError'} />
-                </Heading>
-              </div>
-
-              <p className={'text-muted-foreground text-lg'}>
-                <Trans i18nKey={'common:genericErrorSubHeading'} />
-              </p>
-            </div>
-
-            <div className={'flex space-x-4'}>
-              <Button className={'w-full'} variant={'default'} onClick={reset}>
-                <ArrowLeft className={'mr-2 h-4'} />
-
-                <Trans i18nKey={'common:goBack'} />
-              </Button>
-
-              <Button className={'w-full'} variant={'outline'} asChild>
-                <Link href={'/contact'}>
-                  <MessageCircle className={'mr-2 h-4'} />
-
-                  <Trans i18nKey={'common:contactUs'} />
-                </Link>
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
+      <ErrorPageContent
+        statusCode={'common:errorPageHeading'}
+        heading={'common:genericError'}
+        subtitle={'common:genericErrorSubHeading'}
+        backLabel={'common:goBack'}
+        reset={reset}
+      />
     </div>
   );
 };

apps/web/app/global-error.tsx

@@ -1,16 +1,10 @@
 'use client';
 
-import Link from 'next/link';
-
-import { ArrowLeft, MessageCircle } from 'lucide-react';
-
 import { useCaptureException } from '@kit/monitoring/hooks';
 import { useUser } from '@kit/supabase/hooks/use-user';
-import { Button } from '@kit/ui/button';
-import { Heading } from '@kit/ui/heading';
-import { Trans } from '@kit/ui/trans';
 
 import { SiteHeader } from '~/(marketing)/_components/site-header';
+import { ErrorPageContent } from '~/components/error-page-content';
 import { RootProviders } from '~/components/root-providers';
 
 const GlobalErrorPage = ({
@@ -40,53 +34,13 @@ function GlobalErrorContent({ reset }: { reset: () => void }) {
     <div className={'flex h-screen flex-1 flex-col'}>
       <SiteHeader user={user.data} />
 
-      <div
-        className={
-          'container m-auto flex w-full flex-1 flex-col items-center justify-center'
-        }
-      >
-        <div className={'flex flex-col items-center space-y-8'}>
-          <div>
-            <h1 className={'font-heading text-9xl font-semibold'}>
-              <Trans i18nKey={'common:errorPageHeading'} />
-            </h1>
-          </div>
-
-          <div className={'flex flex-col items-center space-y-8'}>
-            <div
-              className={
-                'flex max-w-xl flex-col items-center gap-y-2 text-center'
-              }
-            >
-              <div>
-                <Heading level={2}>
-                  <Trans i18nKey={'common:genericError'} />
-                </Heading>
-              </div>
-
-              <p className={'text-muted-foreground text-lg'}>
-                <Trans i18nKey={'common:genericErrorSubHeading'} />
-              </p>
-            </div>
-
-            <div className={'flex space-x-4'}>
-              <Button className={'w-full'} variant={'default'} onClick={reset}>
-                <ArrowLeft className={'mr-2 h-4'} />
-
-                <Trans i18nKey={'common:goBack'} />
-              </Button>
-
-              <Button className={'w-full'} variant={'outline'} asChild>
-                <Link href={'/contact'}>
-                  <MessageCircle className={'mr-2 h-4'} />
-
-                  <Trans i18nKey={'common:contactUs'} />
-                </Link>
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
+      <ErrorPageContent
+        statusCode={'common:errorPageHeading'}
+        heading={'common:genericError'}
+        subtitle={'common:genericErrorSubHeading'}
+        backLabel={'common:goBack'}
+        reset={reset}
+      />
     </div>
   );
 }

apps/web/app/not-found.tsx

@@ -1,14 +1,4 @@
-import Link from 'next/link';
-
-import { ArrowLeft } from 'lucide-react';
-
-import { requireUser } from '@kit/supabase/require-user';
-import { getSupabaseServerClient } from '@kit/supabase/server-client';
-import { Button } from '@kit/ui/button';
-import { Heading } from '@kit/ui/heading';
-import { Trans } from '@kit/ui/trans';
-
-import { SiteHeader } from '~/(marketing)/_components/site-header';
+import { ErrorPageContent } from '~/components/error-page-content';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
@@ -22,48 +12,13 @@ export const generateMetadata = async () => {
 };
 
 const NotFoundPage = async () => {
-  const client = getSupabaseServerClient();
-  const user = await requireUser(client, { verifyMfa: false });
-
   return (
     <div className={'flex h-screen flex-1 flex-col'}>
-      <SiteHeader user={user.data} />
-
-      <div
-        className={
-          'container m-auto flex w-full flex-1 flex-col items-center justify-center'
-        }
-      >
-        <div className={'flex flex-col items-center space-y-12'}>
-          <div>
-            <h1 className={'font-heading text-8xl font-extrabold xl:text-9xl'}>
-              <Trans i18nKey={'common:pageNotFoundHeading'} />
-            </h1>
-          </div>
-
-          <div className={'flex flex-col items-center space-y-8'}>
-            <div className={'flex flex-col items-center space-y-2.5'}>
-              <div>
-                <Heading level={1}>
-                  <Trans i18nKey={'common:pageNotFound'} />
-                </Heading>
-              </div>
-
-              <p className={'text-muted-foreground'}>
-                <Trans i18nKey={'common:pageNotFoundSubHeading'} />
-              </p>
-            </div>
-
-            <Button asChild variant={'outline'}>
-              <Link href={'/'}>
-                <ArrowLeft className={'mr-2 h-4'} />
-
-                <Trans i18nKey={'common:backToHomePage'} />
-              </Link>
-            </Button>
-          </div>
-        </div>
-      </div>
+      <ErrorPageContent
+        statusCode={'common:pageNotFoundHeading'}
+        heading={'common:pageNotFound'}
+        subtitle={'common:pageNotFoundSubHeading'}
+      />
     </div>
   );
 };