feat: add project fork id, add project permission check

pages/project/@slug/components/editor.tsx

@@ -17,11 +17,9 @@ import { useData } from "~/renderer/hooks";
 import { Data } from "../+data";
 import { useBreakpoint } from "~/hooks/useBreakpoint";
 import StatusBar from "./status-bar";
-import { FiServer, FiTerminal } from "react-icons/fi";
+import { FiTerminal } from "react-icons/fi";
 import SettingsDialog from "./settings-dialog";
 import FileIcon from "~/components/ui/file-icon";
-import APIManager from "./api-manager";
-import { api } from "~/lib/api";
 
 const Editor = () => {
   const { project, initialFiles } = useData<Data>();

pages/project/@slug/components/file-viewer.tsx

@@ -1,11 +1,12 @@
 import { getFileExt } from "~/lib/utils";
-import CodeEditor from "../../../../components/ui/code-editor";
 import trpc from "~/lib/trpc";
 import { useData } from "~/renderer/hooks";
 import { Data } from "../+data";
 import Spinner from "~/components/ui/spinner";
 import { previewStore } from "../stores/web-preview";
 import { useProjectContext } from "../context/project";
+import { Suspense, lazy } from "react";
+const CodeEditor = lazy(() => import("~/components/ui/code-editor"));
 
 type Props = {
   id: number;
@@ -46,14 +47,20 @@ const FileViewer = ({ id }: Props) => {
     const ext = getFileExt(filename);
 
     return (
-      <CodeEditor
-        lang={ext}
-        value={data?.content || ""}
-        formatOnSave
-        onChange={(val) =>
-          updateFileContent.mutate({ projectId: project.id, id, content: val })
-        }
-      />
+      <Suspense fallback={<LoadingLayout />}>
+        <CodeEditor
+          lang={ext}
+          value={data?.content || ""}
+          formatOnSave
+          onChange={(val) =>
+            updateFileContent.mutate({
+              projectId: project.id,
+              id,
+              content: val,
+            })
+          }
+        />
+      </Suspense>
     );
   }