fix: responsive fix

pages/index/+Page.tsx

@@ -4,6 +4,7 @@ import Link from "~/renderer/link";
 
 const HomePage = () => {
   const { posts } = useData<Data>();
+
   if (!posts?.length) {
     return <p>No posts.</p>;
   }

pages/project/@slug/+Page.tsx

@@ -4,15 +4,15 @@ import {
   ResizablePanelGroup,
 } from "~/components/ui/resizable";
 import WebPreview from "./components/web-preview";
-import { usePortrait } from "~/hooks/usePortrait";
 import Editor from "./components/editor";
 import ProjectContext from "./context/project";
 import { cn } from "~/lib/utils";
 import { useParams, useSearchParams } from "~/renderer/hooks";
 import { BASE_URL } from "~/lib/consts";
+import { withClientOnly } from "~/renderer/client-only";
+import Spinner from "~/components/ui/spinner";
 
 const ViewProjectPage = () => {
-  const isPortrait = usePortrait();
   const searchParams = useSearchParams();
   const params = useParams();
   const isCompact =
@@ -24,15 +24,14 @@ const ViewProjectPage = () => {
     <ProjectContext.Provider value={{ slug, isCompact }}>
       <ResizablePanelGroup
         autoSaveId="main-panel"
-        direction={isPortrait ? "vertical" : "horizontal"}
+        direction={{ sm: "vertical", md: "horizontal" }}
         className={cn("w-full !h-dvh bg-slate-600", !isCompact ? "md:p-4" : "")}
       >
         <ResizablePanel
-          panelId={0}
-          defaultSize={isPortrait ? 50 : 60}
+          defaultSize={60}
           collapsible
           collapsedSize={0}
-          minSize={isPortrait ? 10 : 30}
+          minSize={30}
         >
           <Editor />
         </ResizablePanel>
@@ -45,8 +44,7 @@ const ViewProjectPage = () => {
           }
         />
         <ResizablePanel
-          panelId={1}
-          defaultSize={isPortrait ? 50 : 40}
+          defaultSize={40}
           collapsible
           collapsedSize={0}
           minSize={10}
@@ -58,4 +56,12 @@ const ViewProjectPage = () => {
   );
 };
 
-export default ViewProjectPage;
+const LoadingPage = () => {
+  return (
+    <div className="flex w-full h-dvh items-center justify-center">
+      <Spinner />
+    </div>
+  );
+};
+
+export default withClientOnly(ViewProjectPage, LoadingPage);

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

@@ -20,12 +20,14 @@ import { FaCompress, FaCompressArrowsAlt } from "react-icons/fa";
 import ConsoleLogger from "./console-logger";
 import { useData } from "~/renderer/hooks";
 import { Data } from "../+data";
+import { useBreakpoint } from "~/hooks/useBreakpoint";
 
 const Editor = () => {
   const { pinnedFiles } = useData<Data>();
   const trpcUtils = trpc.useUtils();
   const project = useProjectContext();
   const sidebarPanel = useRef<ImperativePanelHandle>(null);
+  const [breakpoint] = useBreakpoint();
 
   const [sidebarExpanded, setSidebarExpanded] = useState(false);
   const [curTabIdx, setCurTabIdx] = useState(0);
@@ -168,8 +170,7 @@ const Editor = () => {
         <ResizablePanelGroup autoSaveId="veditor-panel" direction="horizontal">
           <ResizablePanel
             ref={sidebarPanel}
-            panelId={0}
-            defaultSize={25}
+            defaultSize={{ sm: 0, md: 25 }}
             minSize={10}
             collapsible
             collapsedSize={0}
@@ -182,9 +183,9 @@ const Editor = () => {
 
           <ResizableHandle className="bg-slate-900" />
 
-          <ResizablePanel panelId={1} defaultSize={75}>
+          <ResizablePanel defaultSize={{ sm: 100, md: 75 }}>
             <ResizablePanelGroup autoSaveId="code-editor" direction="vertical">
-              <ResizablePanel panelId={0} defaultSize={80} minSize={20}>
+              <ResizablePanel defaultSize={{ sm: 100, md: 80 }} minSize={20}>
                 <Tabs
                   tabs={openFileList}
                   current={curTabIdx}
@@ -193,16 +194,20 @@ const Editor = () => {
                 />
               </ResizablePanel>
 
-              <ResizableHandle />
-              <ResizablePanel
-                panelId={1}
-                defaultSize={20}
-                collapsible
-                collapsedSize={0}
-                minSize={10}
-              >
-                <ConsoleLogger />
-              </ResizablePanel>
+              {breakpoint >= 2 ? (
+                <>
+                  <ResizableHandle />
+
+                  <ResizablePanel
+                    defaultSize={{ sm: 0, md: 20 }}
+                    collapsible
+                    collapsedSize={0}
+                    minSize={10}
+                  >
+                    <ConsoleLogger />
+                  </ResizablePanel>
+                </>
+              ) : null}
             </ResizablePanelGroup>
           </ResizablePanel>
         </ResizablePanelGroup>

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

@@ -1,12 +1,10 @@
 "use client";
 
 import { getFileExt } from "~/lib/utils";
-import React from "react";
 import CodeEditor from "../../../../components/ui/code-editor";
 import trpc from "~/lib/trpc";
 import { useData } from "~/renderer/hooks";
 import { Data } from "../+data";
-import ClientOnly from "~/renderer/client-only";
 import Spinner from "~/components/ui/spinner";
 
 type Props = {
@@ -42,14 +40,12 @@ const FileViewer = ({ id, onFileContentChange }: Props) => {
     const ext = getFileExt(filename);
 
     return (
-      <ClientOnly fallback={<SSRCodeEditor value={data?.content} />}>
-        <CodeEditor
-          lang={ext}
-          value={data?.content || ""}
-          formatOnSave
-          onChange={(val) => updateFileContent.mutate({ id, content: val })}
-        />
-      </ClientOnly>
+      <CodeEditor
+        lang={ext}
+        value={data?.content || ""}
+        formatOnSave
+        onChange={(val) => updateFileContent.mutate({ id, content: val })}
+      />
     );
   }
 
@@ -64,14 +60,4 @@ const LoadingLayout = () => {
   );
 };
 
-const SSRCodeEditor = ({ value }: { value?: string | null }) => {
-  return (
-    <textarea
-      className="w-full h-full py-3 pl-11 pr-2 overflow-x-auto text-nowrap font-mono text-sm md:text-[16px] md:leading-[22px] bg-[#1a1b26] text-[#787c99]"
-      value={value || ""}
-      readOnly
-    />
-  );
-};
-
 export default FileViewer;