fix: Place workshop door open badge below banners

src/app/[locale]/(default)/layout.tsx

@@ -1,5 +1,5 @@
-import type { Locale } from 'next-intl';
-import { setRequestLocale } from 'next-intl/server';
+import { type Locale, type Messages, NextIntlClientProvider } from 'next-intl';
+import { getMessages, setRequestLocale } from 'next-intl/server';
 import { Banner } from '@/components/layout/Banner';
 import { Footer } from '@/components/layout/Footer';
 import { Header } from '@/components/layout/Header';
@@ -18,10 +18,19 @@ export default async function DefaultLayout({
 }: DefaultLayoutProps) {
   const { locale } = await params;
   setRequestLocale(locale as Locale);
+
+  const { home, ui, error } = await getMessages();
+
   return (
     <>
       <Header />
-      <Banner />
+      <NextIntlClientProvider
+        messages={
+          { home, ui, error } as Pick<Messages, 'home' | 'ui' | 'error'>
+        }
+      >
+        <Banner />
+      </NextIntlClientProvider>
       <Main>{children}</Main>
       <Footer />
     </>

src/app/[locale]/(default)/page.tsx

@@ -5,7 +5,6 @@ import { EventTable } from '@/components/home/EventTable';
 import { IntroBanner } from '@/components/home/IntroBanner';
 import { NewsTable } from '@/components/home/NewsTable';
 import { TextBlock } from '@/components/home/TextBlock';
-import { WorkshopStatusBadge } from '@/components/home/WorkshopStatusBadge';
 import { Link } from '@/components/ui/Link';
 import { Separator } from '@/components/ui/Separator';
 import { api } from '@/lib/api/server';
@@ -28,17 +27,12 @@ export default async function HomePage({
 
   const events = await api.events.fetchEvents({ limit: 3, offset: 0 });
   const articles = await api.news.fetchArticles({ limit: 3, offset: 0 });
-  const doorStatus = await api.office.fetchDoorStatus();
 
   const canEditSlides =
     user?.groups.some((g) => ['leadership', 'admin'].includes(g)) ?? false;
 
   return (
     <div className='space-y-8'>
-      <WorkshopStatusBadge
-        status={doorStatus}
-        className='absolute top-16 right-8 z-10'
-      />
       <IntroBanner
         slides={slides}
         locale={locale as Locale}

src/components/home/WorkshopStatusBadge.tsx

@@ -1,17 +1,17 @@
 import { DoorClosedIcon, DoorOpenIcon } from 'lucide-react';
-import { getTranslations } from 'next-intl/server';
+import { useTranslations } from 'next-intl';
 import { Badge } from '@/components/ui/Badge';
 import { cx } from '@/lib/utils';
 import type { RouterOutput } from '@/server/api';
 
-async function WorkshopStatusBadge({
+function WorkshopStatusBadge({
   status,
   className,
 }: {
   status: RouterOutput['office']['fetchDoorStatus'];
   className?: string;
 }) {
-  const t = await getTranslations('home');
+  const t = useTranslations('home');
 
   return (
     <Badge

src/components/layout/Banner.tsx

@@ -2,6 +2,7 @@
 
 import Autoplay from 'embla-carousel-autoplay';
 import { useLocale } from 'next-intl';
+import { WorkshopStatusBadge } from '@/components/home/WorkshopStatusBadge';
 import {
   Carousel,
   CarouselContent,
@@ -24,51 +25,62 @@ function Banner() {
     { enabled: fetchBanners },
   );
 
-  if (!banners || banners.length === 0) return;
+  const { data: doorStatus } = api.office.fetchDoorStatus.useQuery(undefined, {
+    enabled: path === '/',
+  });
 
   return (
-    <div className='-mb-4 relative mt-4'>
-      <div
-        className={cx(
-          'w-screen text-center text-black',
-          path === '/' && 'absolute z-10',
-        )}
-      >
-        <Carousel
-          opts={{
-            loop: true,
-            watchDrag: false,
-            duration: 50,
-          }}
-          plugins={[
-            Autoplay({
-              delay: 10000,
-            }),
-          ]}
-        >
-          <CarouselContent className='ml-0'>
-            {banners?.map((banner) => {
-              const bannerLocalization = banner.localizations.find(
-                (localization) => localization.locale === locale,
-              );
+    <div className='-mb-4 relative z-10 mt-4'>
+      {banners && (
+        <div className='w-screen text-center text-black'>
+          <Carousel
+            opts={{
+              loop: true,
+              watchDrag: false,
+              duration: 50,
+            }}
+            plugins={[
+              Autoplay({
+                delay: 10000,
+              }),
+            ]}
+          >
+            <CarouselContent className='ml-0'>
+              {banners?.map((banner) => {
+                const bannerLocalization = banner.localizations.find(
+                  (localization) => localization.locale === locale,
+                );
 
-              return (
-                <CarouselItem
-                  key={banner.id}
-                  className={cx(
-                    'flex items-center justify-center bg-yellow-300 py-2 pl-0',
-                    banner.className,
-                  )}
-                >
-                  <span className='max-w-4/5'>
-                    {bannerLocalization?.content}
-                  </span>
-                </CarouselItem>
-              );
-            })}
-          </CarouselContent>
-        </Carousel>
-      </div>
+                return (
+                  <CarouselItem
+                    key={banner.id}
+                    className={cx(
+                      'flex items-center justify-center bg-yellow-300 py-2 pl-0',
+                      banner.className,
+                    )}
+                  >
+                    <span className='max-w-4/5'>
+                      {bannerLocalization?.content}
+                    </span>
+                  </CarouselItem>
+                );
+              })}
+            </CarouselContent>
+          </Carousel>
+        </div>
+      )}
+      {/* We show the workshop status badge for the home page here,
+          because we want to place it below all banners */}
+      {doorStatus && (
+        <div
+          className={cx(
+            'flex justify-end pr-8',
+            banners && banners.length > 0 && 'mt-4',
+          )}
+        >
+          <WorkshopStatusBadge status={doorStatus} />
+        </div>
+      )}
     </div>
   );
 }

src/components/providers/PostHogProvider.tsx

@@ -20,7 +20,6 @@ function PostHogProvider({ children }: { children: React.ReactNode }) {
   }, [posthogKey]);
 
   if (!posthogKey) {
-    console.warn('PostHog key is not set. PostHogProvider will be skipped.');
     return children;
   }