feat: add personal project list, add project settings, etc

pages/index/get-started/+Page.tsx

@@ -12,6 +12,7 @@ import Divider from "~/components/ui/divider";
 import trpc from "~/lib/trpc";
 import { useAuth } from "~/hooks/useAuth";
 import { usePageContext } from "~/renderer/context";
+import { useMemo } from "react";
 
 const schema = z.object({
   forkFromId: z.number(),
@@ -25,16 +26,21 @@ const schema = z.object({
     .optional(),
 });
 
-const initialValue: z.infer<typeof schema> = {
-  forkFromId: 0,
-  title: "",
-};
+type Schema = z.infer<typeof schema>;
 
 const GetStartedPage = () => {
-  const { presets } = useData<Data>();
+  const { presets, forkFrom } = useData<Data>();
   const { isLoggedIn } = useAuth();
   const ctx = usePageContext();
 
+  const initialValue: Schema = useMemo(
+    () => ({
+      forkFromId: forkFrom?.id || 0,
+      title: forkFrom?.title || "",
+    }),
+    [forkFrom]
+  );
+
   const form = useForm(schema, initialValue);
   const create = trpc.project.create.useMutation({
     onSuccess(data) {
@@ -49,31 +55,37 @@ const GetStartedPage = () => {
   return (
     <div className="container max-w-3xl min-h-[80dvh] flex flex-col items-center justify-center py-8 md:py-16">
       <Card className="w-full md:p-8">
-        <CardTitle>Create New Project</CardTitle>
+        <CardTitle>{(forkFrom ? "Fork" : "Create New") + " Project"}</CardTitle>
 
         <form onSubmit={onSubmit}>
-          <FormLabel>Select Preset</FormLabel>
+          {!forkFrom ? (
+            <>
+              <FormLabel>Select Preset</FormLabel>
 
-          <Controller
-            control={form.control}
-            name="forkFromId"
-            render={({ field }) => (
-              <div className="flex md:grid md:grid-cols-3 gap-4 overflow-x-auto md:overflow-x-hidden">
-                {presets.map((preset) => (
-                  <Button
-                    key={preset.projectId}
-                    variant={
-                      field.value === preset.projectId ? "default" : "outline"
-                    }
-                    className="flex py-16 border border-white/40 shrink-0 w-[160px] md:w-auto"
-                    onClick={() => field.onChange(preset.projectId)}
-                  >
-                    <p className="text-wrap">{preset.title}</p>
-                  </Button>
-                ))}
-              </div>
-            )}
-          />
+              <Controller
+                control={form.control}
+                name="forkFromId"
+                render={({ field }) => (
+                  <div className="flex md:grid md:grid-cols-3 gap-4 overflow-x-auto md:overflow-x-hidden">
+                    {presets.map((preset) => (
+                      <Button
+                        key={preset.projectId}
+                        variant={
+                          field.value === preset.projectId
+                            ? "default"
+                            : "outline"
+                        }
+                        className="flex py-16 border border-white/40 shrink-0 w-[160px] md:w-auto"
+                        onClick={() => field.onChange(preset.projectId)}
+                      >
+                        <p className="text-wrap">{preset.title}</p>
+                      </Button>
+                    ))}
+                  </div>
+                )}
+              />
+            </>
+          ) : null}
 
           <Input
             form={form}

pages/index/get-started/+data.ts

@@ -1,11 +1,30 @@
+import { and, eq, isNull } from "drizzle-orm";
 import { PageContext } from "vike/types";
 import trpcServer from "~/server/api/trpc/trpc";
+import db from "~/server/db";
+import { ProjectSchema, project } from "~/server/db/schema/project";
+import { UserSchema } from "~/server/db/schema/user";
 
 export const data = async (ctx: PageContext) => {
   const trpc = await trpcServer(ctx);
+  let forkFrom:
+    | (Pick<ProjectSchema, "id" | "title"> & { user: UserSchema })
+    | undefined;
+
+  if (ctx.urlParsed.search["fork"]) {
+    forkFrom = await db.query.project.findFirst({
+      columns: { id: true, title: true },
+      where: and(
+        eq(project.slug, ctx.urlParsed.search["fork"]),
+        isNull(project.deletedAt)
+      ),
+      with: { user: { columns: { password: false } } },
+    });
+  }
+
   const presets = await trpc.project.getTemplates();
 
-  return { presets };
+  return { presets, forkFrom };
 };
 
 export type Data = Awaited<ReturnType<typeof data>>;