feat: add project schema

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

@@ -23,9 +23,9 @@ import { Data } from "../+data";
 import { useBreakpoint } from "~/hooks/useBreakpoint";
 
 const Editor = () => {
-  const { pinnedFiles } = useData<Data>();
+  const { project, pinnedFiles } = useData<Data>();
   const trpcUtils = trpc.useUtils();
-  const project = useProjectContext();
+  const projectCtx = useProjectContext();
   const sidebarPanel = useRef<ImperativePanelHandle>(null);
   const [breakpoint] = useBreakpoint();
 
@@ -36,7 +36,7 @@ const Editor = () => {
   );
 
   const openedFilesData = trpc.file.getAll.useQuery(
-    { id: curOpenFiles },
+    { projectId: project.id, id: curOpenFiles },
     { enabled: curOpenFiles.length > 0, initialData: pinnedFiles }
   );
   const [openedFiles, setOpenedFiles] = useState<any[]>(pinnedFiles);
@@ -156,7 +156,7 @@ const Editor = () => {
     }) satisfies Tab[];
   }, [curOpenFiles, openedFiles, refreshPreview]);
 
-  const PanelComponent = !project.isCompact ? Panel : "div";
+  const PanelComponent = !projectCtx.isCompact ? Panel : "div";
 
   return (
     <EditorContext.Provider

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

@@ -1,6 +1,4 @@
-"use client";
-
-import React, { Fragment, useMemo, useState } from "react";
+import { Fragment, useMemo, useState } from "react";
 import { UseDiscloseReturn, useDisclose } from "~/hooks/useDisclose";
 import {
   FiChevronRight,
@@ -21,27 +19,28 @@ import {
   DropdownMenuTrigger,
   DropdownMenuSeparator,
 } from "~/components/ui/dropdown-menu";
-import { cn, getUrl } from "~/lib/utils";
+import { cn, getPreviewUrl } from "~/lib/utils";
 import FileIcon from "~/components/ui/file-icon";
 import copy from "copy-to-clipboard";
-import { useData, useParams } from "~/renderer/hooks";
+import { useData } from "~/renderer/hooks";
 import Spinner from "~/components/ui/spinner";
 import { Data } from "../+data";
 
 const FileListing = () => {
-  const pageData = useData<Data>();
+  const { project, files: initialFiles } = useData<Data>();
   const { onOpenFile, onFileChanged } = useEditorContext();
   const createFileDlg = useDisclose<CreateFileSchema>();
-  const files = trpc.file.getAll.useQuery(undefined, {
-    initialData: pageData.files,
-  });
+  const files = trpc.file.getAll.useQuery(
+    { projectId: project.id },
+    { initialData: initialFiles }
+  );
 
   const fileList = useMemo(() => groupFiles(files.data, null), [files.data]);
 
   return (
     <Fragment>
       <div className="h-10 flex items-center pl-4 pr-1">
-        <p className="text-xs uppercase truncate flex-1">My Project</p>
+        <p className="text-xs uppercase truncate flex-1">{project.title}</p>
         <ActionButton
           icon={FiFilePlus}
           onClick={() => createFileDlg.onOpen()}
@@ -104,7 +103,7 @@ type FileItemProps = {
 };
 
 const FileItem = ({ file, createFileDlg }: FileItemProps) => {
-  const { slug } = useParams();
+  const { project } = useData<Data>();
   const { onOpenFile, onDeleteFile } = useEditorContext();
   const [isCollapsed, setCollapsed] = useState(false);
   const trpcUtils = trpc.useUtils();
@@ -186,16 +185,13 @@ const FileItem = ({ file, createFileDlg }: FileItemProps) => {
                 Copy Path
               </DropdownMenuItem>
               <DropdownMenuItem
-                onClick={() => copy(getUrl(`api/preview/${slug}`, file.path))}
+                onClick={() => copy(getPreviewUrl(project, file))}
               >
                 Copy URL
               </DropdownMenuItem>
               <DropdownMenuItem
                 onClick={() =>
-                  window.open(
-                    getUrl(`api/preview/${slug}`, file.path),
-                    "_blank"
-                  )
+                  window.open(getPreviewUrl(project, file), "_blank")
                 }
               >
                 Open in new tab

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

@@ -1,5 +1,3 @@
-"use client";
-
 import { getFileExt } from "~/lib/utils";
 import CodeEditor from "../../../../components/ui/code-editor";
 import trpc from "~/lib/trpc";

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

@@ -1,4 +1,3 @@
-import React from "react";
 import FileListing from "./file-listing";
 import { FaUserCircle } from "react-icons/fa";
 import { Button } from "~/components/ui/button";
@@ -7,6 +6,7 @@ const Sidebar = () => {
   return (
     <aside className="flex flex-col items-stretch h-full">
       <FileListing />
+
       <div className="h-12 bg-[#1a1b26] pl-12">
         <Button
           variant="ghost"