Retain joins in hour on realtime update

nazara/apps/web/app/day/[date]/realtime.tsx

@@ -26,7 +26,10 @@ export default function RealtimeDayPage({ initialDay }) {
                 const prevHours = day.hours;
                 const newHours = prevHours.map((hour) => {
                     if (hour.id === updatedHour.id) {
-                        return updatedHour;
+                        return {
+                            ...updatedHour,
+                            category: hour.category,
+                        };
                     }
                     return hour;
                 });

nazara/apps/web/app/layout.tsx

@@ -45,7 +45,7 @@ export default function RootLayout({
                   {!hasEnvVars ? <EnvVarWarning /> : <HeaderAuth />}
                 </div>
               </nav>
-              <div className="flex flex-col gap-20 max-w-5xl p-5">
+              <div className="flex flex-col gap-20 w-[40%] p-5">
                 {children}
               </div>
 

nazara/apps/web/lib/realtime.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+export default function
+
+    useEffect(() => {
+        const daysChannel = supabase.channel('days')
+            .on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'days' }, (payload) => {
+                setDay(payload.new);
+            }).subscribe();
+
+        return () => {
+            daysChannel.unsubscribe();
+        }
+    }, [supabase])