add fullscreen mode to realtime

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/map/map.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import React, { Fragment, useEffect, useRef, useState } from 'react';
-import { Button } from '@/components/ui/button';
+import { Fragment, useEffect, useRef, useState } from 'react';
+import { useFullscreen } from '@/components/fullscreen-toggle';
 import { Tooltiper } from '@/components/ui/tooltip';
+import { cn } from '@/utils/cn';
 import { bind } from 'bind-event-listener';
 import {
   ComposableMap,
@@ -25,12 +26,13 @@ import {
   getBoundingBox,
   useAnimatedState,
 } from './map.helpers';
-import useActiveMarkers, { calculateMarkerSize } from './markers';
+import { calculateMarkerSize } from './markers';
 
 type Props = {
   markers: Coordinate[];
 };
 const Map = ({ markers }: Props) => {
+  const [isFullscreen] = useFullscreen();
   const showCenterMarker = false;
   const ref = useRef<HTMLDivElement>(null);
   const [size, setSize] = useState<{ width: number; height: number } | null>(
@@ -54,31 +56,33 @@ const Map = ({ markers }: Props) => {
   const [lat] = useAnimatedState(center.lat);
 
   useEffect(() => {
-    if (ref.current) {
-      setSize({
-        width: ref.current.clientWidth,
-        height: ref.current.clientHeight,
-      });
-    }
-  }, []);
+    requestAnimationFrame(() => {
+      if (ref.current) {
+        setSize({
+          width: ref.current.clientWidth,
+          height: ref.current.clientHeight,
+        });
+      }
+    });
+  }, [isFullscreen]);
 
-  // useEffect(() => {
-  //   return bind(window, {
-  //     type: 'resize',
-  //     listener() {
-  //       if (ref.current) {
-  //         setSize({
-  //           width: ref.current.clientWidth,
-  //           height: ref.current.clientHeight,
-  //         });
-  //       }
-  //     },
-  //   });
-  // }, []);
+  useEffect(() => {
+    return bind(window, {
+      type: 'resize',
+      listener() {
+        if (ref.current) {
+          setSize({
+            width: ref.current.clientWidth,
+            height: ref.current.clientHeight,
+          });
+        }
+      },
+    });
+  }, []);
 
   const adjustSizeBasedOnZoom = (size: number) => {
     const minMultiplier = 1;
-    const maxMultiplier = 3;
+    const maxMultiplier = 7;
 
     // Linearly interpolate the multiplier based on the zoom level
     const multiplier =
@@ -88,7 +92,13 @@ const Map = ({ markers }: Props) => {
   };
 
   return (
-    <div className="fixed bottom-0 left-0 right-0 top-16 lg:left-72" ref={ref}>
+    <div
+      className={cn(
+        'fixed bottom-0 left-0 right-0 top-0',
+        !isFullscreen && 'top-16 lg:left-72'
+      )}
+      ref={ref}
+    >
       {size === null ? (
         <></>
       ) : (
@@ -102,7 +112,7 @@ const Map = ({ markers }: Props) => {
               scale: 100 * 20,
             }}
           >
-            <CustomZoomableGroup zoom={zoom * 0.05} center={[long, lat]}>
+            <CustomZoomableGroup zoom={zoom * 0.06} center={[long, lat]}>
               <Geographies geography={GEO_MAP_URL}>
                 {({ geographies }) =>
                   geographies.map((geo) => (

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/realtime/page.tsx

@@ -1,4 +1,5 @@
 import { Suspense } from 'react';
+import { Fullscreen, FullscreenToggle } from '@/components/fullscreen-toggle';
 import { LazyChart } from '@/components/report/chart/LazyChart';
 
 import PageLayout from '../page-layout';
@@ -17,22 +18,25 @@ export default function Page({
   params: { projectId, organizationSlug },
 }: Props) {
   return (
-    <div className="">
-      <RealtimeReloader projectId={projectId} />
-      <PageLayout title="Realtime" {...{ projectId, organizationSlug }} />
-      <Suspense>
-        <RealtimeMap projectId={projectId} />
-      </Suspense>
-      <div className="pointer-events-none relative z-10 w-full overflow-hidden">
-        <div className="pointer-events-none grid min-h-[calc(100vh-theme(spacing.16))] items-start gap-4 p-8 md:grid-cols-3">
+    <>
+      <PageLayout
+        title={<FullscreenToggle />}
+        {...{ projectId, organizationSlug }}
+      />
+      <Fullscreen>
+        <RealtimeReloader projectId={projectId} />
+        <Suspense>
+          <RealtimeMap projectId={projectId} />
+        </Suspense>
+        <div className="relative z-10 grid min-h-[calc(100vh-theme(spacing.16))] items-start gap-4 overflow-hidden p-8 md:grid-cols-3">
           <div className="card bg-background/80 p-4">
             <RealtimeLiveHistogram projectId={projectId} />
           </div>
-          <div className="pointer-events-auto col-span-2">
+          <div className="col-span-2">
             <RealtimeLiveEventsServer projectId={projectId} limit={5} />
           </div>
         </div>
-        <div className="-mt-32 grid gap-4 p-8 md:grid-cols-3">
+        <div className="relative z-10 -mt-32 grid gap-4 p-8 md:grid-cols-3">
           <div className="card p-4">
             <div className="mb-6">
               <div className="font-bold">Pages</div>
@@ -130,7 +134,7 @@ export default function Page({
             />
           </div>
         </div>
-      </div>
-    </div>
+      </Fullscreen>
+    </>
   );
 }