#28 - exit full screen mode

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

@@ -1,5 +1,9 @@
 import { Suspense } from 'react';
-import { Fullscreen, FullscreenToggle } from '@/components/fullscreen-toggle';
+import {
+  Fullscreen,
+  FullscreenClose,
+  FullscreenOpen,
+} from '@/components/fullscreen-toggle';
 import { LazyChart } from '@/components/report/chart/LazyChart';
 
 import PageLayout from '../page-layout';
@@ -20,10 +24,11 @@ export default function Page({
   return (
     <>
       <PageLayout
-        title={<FullscreenToggle />}
+        title={<FullscreenOpen />}
         {...{ projectId, organizationSlug }}
       />
       <Fullscreen>
+        <FullscreenClose />
         <RealtimeReloader projectId={projectId} />
         <Suspense>
           <RealtimeMap projectId={projectId} />

apps/dashboard/src/components/fullscreen-toggle.tsx

@@ -1,8 +1,11 @@
 'use client';
 
+import { useEffect, useRef, useState } from 'react';
 import { cn } from '@/utils/cn';
-import { FullscreenIcon } from 'lucide-react';
+import { bind } from 'bind-event-listener';
+import { ChevronLeftIcon, FullscreenIcon } from 'lucide-react';
 import { parseAsBoolean, useQueryState } from 'nuqs';
+import { useDebounce } from 'usehooks-ts';
 
 import { Tooltiper } from './ui/tooltip';
 
@@ -25,7 +28,7 @@ export const Fullscreen = (props: Props) => {
   return (
     <div
       className={cn(
-        isFullscreen && 'bg-def-200 fixed inset-0 z-50 overflow-auto'
+        isFullscreen && 'fixed inset-0 z-50 overflow-auto bg-def-200'
       )}
     >
       {props.children}
@@ -33,7 +36,7 @@ export const Fullscreen = (props: Props) => {
   );
 };
 
-export const FullscreenToggle = () => {
+export const FullscreenOpen = () => {
   const [, setIsFullscreen] = useFullscreen();
   return (
     <Tooltiper content="Toggle fullscreen" asChild>
@@ -49,3 +52,54 @@ export const FullscreenToggle = () => {
     </Tooltiper>
   );
 };
+
+export const FullscreenClose = () => {
+  const [fullscreen, setIsFullscreen] = useFullscreen();
+  const isFullscreenDebounced = useDebounce(fullscreen, 1000);
+  const [visible, setVisible] = useState(false);
+  const ref = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    let timer: any;
+    const unsub = bind(window, {
+      type: 'mousemove',
+      listener(ev) {
+        if (fullscreen) {
+          setVisible(true);
+          clearTimeout(timer);
+          timer = setTimeout(() => {
+            if (!ref.current?.contains(ev.target as Node)) {
+              setVisible(false);
+            }
+          }, 500);
+        }
+      },
+    });
+    return () => {
+      unsub();
+      clearTimeout(timer);
+    };
+  }, [fullscreen]);
+
+  if (!fullscreen) {
+    return null;
+  }
+
+  return (
+    <div className="fixed bottom-0 top-0 z-50 flex items-center">
+      <Tooltiper content="Exit full screen" asChild>
+        <button
+          ref={ref}
+          className={cn(
+            'flex h-20 w-20 -translate-x-20 items-center justify-center rounded-full bg-foreground transition-transform',
+            visible && isFullscreenDebounced && '-translate-x-10'
+          )}
+          onClick={() => {
+            setIsFullscreen(false);
+          }}
+        >
+          <ChevronLeftIcon className="ml-6 text-background" />
+        </button>
+      </Tooltiper>
+    </div>
+  );
+};