Fix fullscreen page

app/src/components/Router.tsx

@@ -31,6 +31,7 @@ const CookiePolicy = lazy(() => import("../pages/CookiePolicy"));
 const Success = lazy(() => import("../pages/Success"));
 import Page404 from "../pages/404";
 import { useSupportLegacyNRoute } from "../lib/useSupportLegacyNRoute";
+const Fullscreen = lazy(() => import("../pages/Fullscreen"));
 
 export default function Router() {
   usePageViews();
@@ -61,7 +62,7 @@ export default function Router() {
         <Route path="/r/:graphText?" element={<ReadOnly />} />
         {/* c for "compressed" */}
         <Route path="/c/:graphText?" element={<ReadOnly />} />
-        <Route path="/f/:graphText?" element={<ReadOnly />} />
+        <Route path="/f/:graphText?" element={<Fullscreen />} />
         <Route path="/p/:public_id" element={<Public />} />
         <Route path="/s" element={<Settings />} />
         {/* "o" for no reason at all */}

app/src/index.css

@@ -246,22 +246,3 @@ main .monaco-editor {
 [data-radix-popper-content-wrapper] {
   @apply !z-10;
 }
-
-body {
-  background-blend-mode: soft-light;
-  background-color: #0000;
-  background-image: radial-gradient(circle at 50% 23%, #f6f6f680, #f6f6f680 14%),
-    conic-gradient(
-      at 0 100%,
-      #faf2f580,
-      #faf2f580 30deg,
-      #f4e9ff80 60deg,
-      #ecebf880 90deg
-    );
-  background-position: 0 0;
-  background-repeat: repeat, repeat;
-  background-size: 100% 100%;
-  background-attachment: scroll, scroll;
-  background-origin: padding-box, padding-box;
-  background-clip: border-box, border-box;
-}

app/src/pages/Fullscreen.tsx

@@ -0,0 +1,21 @@
+import { useQuery } from "react-query";
+import Graph from "../components/Graph";
+import { useLocation, useParams } from "react-router-dom";
+import { loadReadOnly } from "./ReadOnly";
+
+export default function Fullscreen() {
+  const { pathname } = useLocation();
+  const { graphText = window.location.hash.slice(1) } = useParams<{
+    graphText: string;
+  }>();
+  useQuery(
+    ["read", pathname, graphText],
+    () => loadReadOnly(pathname, graphText),
+    {
+      enabled: typeof graphText === "string",
+      suspense: true,
+      staleTime: 0,
+    }
+  );
+  return <Graph shouldResize={0} />;
+}

app/src/pages/ReadOnly.tsx

@@ -69,7 +69,7 @@ function ReadOnly() {
 
 export default ReadOnly;
 
-async function loadReadOnly(path: string, graphText: string) {
+export async function loadReadOnly(path: string, graphText: string) {
   const initialText = isCompressed(path)
     ? decompressFromEncodedURIComponent(graphText) ?? ""
     : decodeURIComponent(graphText);