feat: working file listing & saving

2025-04-28 08:39:35 +07:00 · 2024-02-20 06:52:39 +00:00 · 2024-02-20 06:52:39 +00:00 · eb2fd4404b
commit eb2fd4404b
parent 6b278b092e
37 changed files with 3268 additions and 259 deletions
--- a/.gitignore
+++ b/.gitignore
@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+storage/**/*
+!.gitkeep
--- a/drizzle.config.ts
+++ b/drizzle.config.ts
@ -0,0 +1,11 @@
+import path from "node:path";
+import type { Config } from "drizzle-kit";
+
+export default {
+  schema: "./src/server/db/schema/_schema.ts",
+  out: "./src/server/db/drizzle",
+  driver: "better-sqlite",
+  dbCredentials: {
+    url: path.join(process.cwd(), "storage/database.db"),
+  },
+} satisfies Config;
--- a/package.json
+++ b/package.json
@ -6,12 +6,23 @@
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "generate": "drizzle-kit generate:sqlite",
+    "drop": "drizzle-kit drop",
+    "push": "drizzle-kit push:sqlite",
+    "migrate": "tsx src/server/db/migrate.ts",
+    "seed": "tsx src/server/db/seed.ts",
+    "reset": "rm -f storage/database.db && npm run push && npm run seed"
  },
  "dependencies": {
    "@codemirror/lang-css": "^6.2.1",
    "@codemirror/lang-html": "^6.4.8",
    "@codemirror/lang-javascript": "^6.2.1",
+    "@emmetio/codemirror6-plugin": "^0.3.0",
+    "@hookform/resolvers": "^3.3.4",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@replit/codemirror-vscode-keymap": "^6.0.2",
    "@tanstack/react-query": "^5.21.7",
    "@trpc/client": "11.0.0-next-beta.289",
    "@trpc/next": "11.0.0-next-beta.289",
@ -19,13 +30,19 @@
    "@trpc/server": "11.0.0-next-beta.289",
    "@uiw/codemirror-theme-tokyo-night": "^4.21.22",
    "@uiw/react-codemirror": "^4.21.22",
+    "bcrypt": "^5.1.1",
+    "better-sqlite3": "^9.4.1",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
+    "drizzle-orm": "^0.29.3",
+    "drizzle-zod": "^0.5.1",
    "lucide-react": "^0.331.0",
    "next": "14.1.0",
    "prettier": "^3.2.5",
    "react": "^18",
    "react-dom": "^18",
+    "react-hook-form": "^7.50.1",
+    "react-icons": "^5.0.1",
    "react-resizable-panels": "^2.0.9",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
@ -33,14 +50,18 @@
    "zod": "^3.22.4"
  },
  "devDependencies": {
+    "@types/bcrypt": "^5.0.2",
+    "@types/better-sqlite3": "^7.6.9",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
+    "drizzle-kit": "^0.20.14",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
+    "tsx": "^4.7.1",
    "typescript": "^5"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/app/api/file/[...path]/route.ts
+++ b/src/app/api/file/[...path]/route.ts
@ -0,0 +1,86 @@
+import { getFileExt } from "@/lib/utils";
+import db from "@/server/db";
+import { file } from "@/server/db/schema/file";
+import { and, eq, isNull } from "drizzle-orm";
+import { NextRequest } from "next/server";
+
+const handler = async (req: NextRequest, { params }: any) => {
+  const path = params.path.join("/");
+  const { searchParams } = new URL(req.url);
+
+  const fileData = await db.query.file.findFirst({
+    where: and(eq(file.path, path), isNull(file.deletedAt)),
+  });
+
+  if (!fileData) {
+    return new Response("File not found!", { status: 404 });
+  }
+
+  let content = fileData.content || "";
+
+  if (searchParams.get("index") === "true") {
+    content = `<!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <script src="https://cdn.tailwindcss.com"></script>
+      <title>Code-Share</title>
+      <link rel="stylesheet" href="styles.css">
+      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    </head>
+    <body>
+      ${content}
+
+      <script>
+      if (window.parent !== window) {
+        const _log = console.log;
+        const _error = console.error;
+        const _warn = console.warn;
+
+        console.log = function (...args) {
+          parent.window.postMessage({ type: "log", args: args }, "*");
+          _log(...args);
+        };
+        console.error = function (...args) {
+          parent.window.postMessage({ type: "error", args: args }, "*");
+          _error(...args);
+        };
+        console.warn = function (...args) {
+          parent.window.postMessage({ type: "warn", args: args }, "*");
+          _warn(...args);
+        };
+      }
+      </script>
+      <script type="text/babel" src="script.js" data-type="module"></script>
+    </body>
+    </html>`;
+  }
+
+  return new Response(content, {
+    headers: {
+      "Content-Type": getFileMimetype(fileData.filename),
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "GET",
+      "Access-Control-Allow-Headers": "Content-Type, Authorization",
+    },
+  });
+};
+
+function getFileMimetype(filename: string) {
+  const ext = getFileExt(filename);
+
+  switch (ext) {
+    case "html":
+      return "text/html";
+    case "css":
+      return "text/css";
+    case "js":
+    case "jsx":
+      return "text/javascript";
+  }
+
+  return "application/octet-stream";
+}
+
+export { handler as GET };
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -3,9 +3,25 @@
@tailwind utilities;

 body {
-  @apply bg-slate-400 text-white;
+  @apply bg-slate-600 text-white;
 }

 .cm-theme {
+  font-size: 16px;
  @apply h-full;
 }
+
+.cm-editor {
+  @apply py-2;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.hide-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import Providers from "./providers";
+import { IS_DEV } from "@/lib/consts";
 import "./globals.css";

 const inter = Inter({ subsets: ["latin"] });
@ -16,7 +17,7 @@ type Props = {

 const RootLayout = ({ children }: Props) => {
  return (
-    <html lang="en" className="dark">
+    <html lang="en" className="dark" suppressHydrationWarning={IS_DEV}>
      <body className={inter.className}>
        <Providers>{children}</Providers>
      </body>
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -1,85 +1,114 @@
 "use client";

-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
 } from "@/components/ui/resizable";
-import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { useScreen } from "usehooks-ts";
 import Panel from "@/components/ui/panel";
-import CodeEditor from "@/components/ui/code-editor";
-import { ReactCodeMirrorRef } from "@uiw/react-codemirror";

-import prettier from "prettier/standalone";
-import prettierHtmlPlugin from "prettier/plugins/html";
+import { cn } from "@/lib/utils";
+import Tabs, { Tab } from "@/components/ui/tabs";
+import FilePreview from "@/components/containers/file-preview";
+import trpc from "@/lib/trpc";
+import CreateFileDialog from "@/components/containers/createfile-dialog";
+import { useDisclose } from "@/hooks/useDisclose";
+import { Button } from "@/components/ui/button";
+import { FaFileAlt } from "react-icons/fa";

 const HomePage = () => {
-  const codeMirror = useRef<ReactCodeMirrorRef>(null);
  const frameRef = useRef<HTMLIFrameElement>(null);
  const [isMounted, setMounted] = useState(false);
-  const isMobile = useMediaQuery("(max-width: 639px)");
-  const [data, setData] = useState("");
-  const [lang, setLang] = useState("html");
+  const screen = useScreen();
+  const isPortrait = screen?.width < screen?.height;

-  useEffect(() => {
-    setMounted(true);
+  const files = trpc.file.getAll.useQuery();
+  const [curTabIdx, setCurTabIdx] = useState(0);
+  const [curOpenFiles, setOpenFiles] = useState<number[]>([]);
+  const createFileDlg = useDisclose();
+  const [iframeLogs, setIframeLogs] = useState<any[]>([]);
+
+  const refreshPreview = useCallback(() => {
+    if (frameRef.current) {
+      frameRef.current.src = `/api/file/index.html?index=true`;
+    }
+    setIframeLogs([]);
  }, []);

  useEffect(() => {
-    if (frameRef.current) {
-      frameRef.current.srcdoc = `<!DOCTYPE html>
-      <html lang="en">
-      <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <script src="https://cdn.tailwindcss.com"></script>
-        <title>Code-Share</title>
-      </head>
-      <body>
-        ${data}
-      </body>
-      </html>
-      `;
-    }
-  }, [data]);
+    setMounted(true);

-  const onFormat = useCallback(async () => {
-    const cursor = codeMirror.current?.view?.state.selection.main.head || 0;
+    const onMessage = (event: MessageEvent<any>) => {
+      const { data } = event;
+      if (!data) {
+        return;
+      }

-    const { formatted, cursorOffset } = await prettier.formatWithCursor(data, {
-      parser: "html",
-      plugins: [prettierHtmlPlugin],
-      cursorOffset: cursor,
-    });
+      if (!["log", "warn", "error"].includes(data.type) || !data.args?.length) {
+        return;
+      }

-    const cm = codeMirror.current?.view;
-    setData(formatted);
-    cm?.dispatch({
-      changes: { from: 0, to: cm?.state.doc.length, insert: formatted },
-    });
-    cm?.dispatch({
-      selection: { anchor: cursorOffset },
-    });
+      if (data.args[0]?.includes("Babel transformer")) {
+        return;
+      }

-    // setTimeout(() => {
-    // }, 100);
-  }, [data, setData]);
+      setIframeLogs((i) => [data, ...i]);
+    };
+
+    window.addEventListener("message", onMessage);
+    return () => {
+      window.removeEventListener("message", onMessage);
+    };
+  }, [setIframeLogs]);

  useEffect(() => {
-    const handleKeyDown = (event: any) => {
-      if ((event.ctrlKey || event.metaKey) && event.key === "s") {
-        event.preventDefault();
-        onFormat();
-      }
-    };
+    if (isMounted) {
+      refreshPreview();
+    }
+  }, [isMounted]);

-    window.addEventListener("keydown", handleKeyDown);
+  const onOpenFile = (fileId: number) => {
+    const idx = curOpenFiles.indexOf(fileId);
+    if (idx >= 0) {
+      return setCurTabIdx(idx);
+    }

-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [onFormat]);
+    setOpenFiles((state) => {
+      setCurTabIdx(state.length);
+      return [...state, fileId];
+    });
+  };
+
+  const onFileChange = (_fileId: number) => {
+    refreshPreview();
+  };
+
+  useEffect(() => {
+    if (files.data && files.data?.length > 0 && !curOpenFiles.length) {
+      files.data.forEach((file) => onOpenFile(file.id));
+    }
+  }, [files.data]);
+
+  const openFileList = useMemo(() => {
+    return curOpenFiles.map((fileId) => {
+      const fileData = files.data?.find((i) => i.id === fileId);
+
+      return {
+        title: fileData?.filename || "...",
+        render: () => (
+          <FilePreview id={fileId} onFileChange={() => onFileChange(fileId)} />
+        ),
+      };
+    }) satisfies Tab[];
+  }, [curOpenFiles, files]);

  if (!isMounted) {
    return null;
@ -88,58 +117,139 @@ const HomePage = () => {
  return (
    <ResizablePanelGroup
      autoSaveId="main-panel"
-      direction={isMobile ? "vertical" : "horizontal"}
+      direction={isPortrait ? "vertical" : "horizontal"}
      className="w-full !h-dvh"
    >
      <ResizablePanel
-        defaultSize={isMobile ? 50 : 60}
-        minSize={20}
-        className="p-4 pr-0"
+        defaultSize={isPortrait ? 50 : 60}
+        collapsible
+        collapsedSize={0}
+        minSize={isPortrait ? 10 : 30}
      >
-        <Panel>
-          <ResizablePanelGroup
-            autoSaveId="editor-panel"
-            direction="horizontal"
-            className="border-t border-t-slate-900"
-          >
-            <ResizablePanel
-              defaultSize={25}
-              minSize={10}
-              collapsible
-              collapsedSize={0}
-              className="bg-[#1e2536]"
+        <div
+          className={cn(
+            "w-full h-full p-2 pb-0",
+            !isPortrait ? "p-4 pb-4 pr-0" : ""
+          )}
+        >
+          <Panel>
+            <ResizablePanelGroup
+              autoSaveId="veditor-panel"
+              direction="horizontal"
            >
-              File List
-            </ResizablePanel>
-            <ResizableHandle className="bg-slate-900" />
-            <ResizablePanel defaultSize={75}>
-              <button onClick={() => setLang("html")}>HTML</button>
-              <button onClick={() => setLang("css")}>CSS</button>
-              <button onClick={() => setLang("js")}>Javascript</button>
-              <button onClick={onFormat}>Format</button>
+              <ResizablePanel
+                defaultSize={isPortrait ? 0 : 25}
+                minSize={10}
+                collapsible
+                collapsedSize={0}
+                className="bg-[#1e2536]"
+              >
+                <div className="h-10 flex items-center pl-3">
+                  <p className="text-xs uppercase truncate flex-1">
+                    My Project
+                  </p>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-slate-400 text-xs"
+                    onClick={() => createFileDlg.onOpen()}
+                  >
+                    <FaFileAlt />
+                  </Button>
+                </div>
+                <div className="flex flex-col items-stretch">
+                  {files.data?.map((file) => (
+                    <button
+                      key={file.id}
+                      className="text-slate-400 hover:text-white transition-colors text-sm flex items-center px-3 py-1.5"
+                      onClick={() => onOpenFile(file.id)}
+                    >
+                      {file.filename}
+                    </button>
+                  ))}
+                </div>

-              <CodeEditor
-                ref={codeMirror}
-                lang={lang}
-                value={data}
-                onChange={setData}
-              />
-            </ResizablePanel>
-          </ResizablePanelGroup>
-        </Panel>
+                <CreateFileDialog
+                  disclose={createFileDlg}
+                  onSuccess={(file, type) => {
+                    files.refetch();
+                    if (type === "create") {
+                      onOpenFile(file.id);
+                    }
+                  }}
+                />
+              </ResizablePanel>
+
+              <ResizableHandle withHandle />
+
+              <ResizablePanel defaultSize={isPortrait ? 100 : 75}>
+                <ResizablePanelGroup direction="vertical">
+                  <ResizablePanel defaultSize={100} minSize={20}>
+                    <Tabs
+                      tabs={openFileList}
+                      current={curTabIdx}
+                      onChange={setCurTabIdx}
+                    />
+                  </ResizablePanel>
+
+                  {!isPortrait ? (
+                    <>
+                      <ResizableHandle />
+                      <ResizablePanel
+                        defaultSize={0}
+                        collapsible
+                        collapsedSize={0}
+                        minSize={10}
+                      >
+                        <div className="pt-2 h-full border-t border-slate-700">
+                          <div className="flex flex-col-reverse overflow-y-auto items-stretch h-full font-mono text-slate-400">
+                            {iframeLogs.map((item, idx) => (
+                              <p
+                                key={idx}
+                                className="text-xs border-b border-slate-900 first:border-b-0 px-2 py-1"
+                              >
+                                {item.args
+                                  ?.map((arg: any) => {
+                                    if (typeof arg === "object") {
+                                      return JSON.stringify(arg, null, 2);
+                                    }
+                                    return arg;
+                                  })
+                                  .join(" ")}
+                              </p>
+                            ))}
+                          </div>
+                        </div>
+                      </ResizablePanel>
+                    </>
+                  ) : null}
+                </ResizablePanelGroup>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </Panel>
+        </div>
      </ResizablePanel>
-      <ResizableHandle className="bg-transparent hover:bg-slate-500 transition-colors mx-1 my-4 w-2 rounded-lg" />
+      <ResizableHandle
+        withHandle
+        className="bg-transparent hover:bg-slate-500 transition-colors md:mx-1 w-2 data-[panel-group-direction=vertical]:h-2 rounded-lg"
+      />
      <ResizablePanel
-        defaultSize={isMobile ? 50 : 40}
+        defaultSize={isPortrait ? 50 : 40}
        collapsible
        collapsedSize={0}
        minSize={10}
      >
-        <div className="w-full h-full p-4 pl-0">
+        <div
+          className={cn(
+            "w-full h-full p-2 pt-0",
+            !isPortrait ? "p-4 pt-4 pl-0" : ""
+          )}
+        >
          <Panel>
            <iframe
              ref={frameRef}
              className="border-none w-full h-full bg-white"
+              sandbox="allow-scripts"
            />
          </Panel>
        </div>
--- a/src/components/containers/createfile-dialog.tsx
+++ b/src/components/containers/createfile-dialog.tsx
@ -0,0 +1,84 @@
+import React, { useMemo } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
+import { UseDiscloseReturn } from "@/hooks/useDisclose";
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+import { useForm } from "@/hooks/useForm";
+import { z } from "zod";
+import FormErrorMessage from "../ui/form-error-message";
+import trpc from "@/lib/trpc";
+import type { FileSchema } from "@/server/db/schema/file";
+
+type Props = {
+  disclose: UseDiscloseReturn;
+  onSuccess?: (file: FileSchema, type: "create" | "update") => void;
+};
+
+const fileSchema = z.object({
+  id: z.number().optional(),
+  parentId: z.number().optional(),
+  filename: z.string().min(1),
+});
+
+const defaultValues: z.infer<typeof fileSchema> = {
+  filename: "",
+};
+
+const CreateFileDialog = ({ disclose, onSuccess }: Props) => {
+  const form = useForm(fileSchema, disclose.data || defaultValues);
+  const create = trpc.file.create.useMutation({
+    onSuccess(data) {
+      if (onSuccess) onSuccess(data, "create");
+      disclose.onClose();
+    },
+  });
+  const update = trpc.file.update.useMutation({
+    onSuccess(data) {
+      if (onSuccess) onSuccess(data, "update");
+      disclose.onClose();
+    },
+  });
+
+  const onSubmit = form.handleSubmit((values) => {
+    if (update.isPending || create.isPending) {
+      return;
+    }
+
+    if (values.id) {
+      update.mutate({ id: values.id!, ...values });
+    } else {
+      create.mutate(values);
+    }
+  });
+
+  return (
+    <Dialog open={disclose.isOpen} onOpenChange={disclose.onChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create File</DialogTitle>
+        </DialogHeader>
+
+        <form onSubmit={onSubmit}>
+          <FormErrorMessage form={form} />
+
+          <Input
+            placeholder="Filename"
+            autoFocus
+            {...form.register("filename")}
+          />
+
+          <div className="flex justify-end gap-4 mt-4">
+            <Button size="sm" variant="ghost">
+              Cancel
+            </Button>
+            <Button type="submit" size="sm">
+              Submit
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default CreateFileDialog;
--- a/src/components/containers/file-preview.tsx
+++ b/src/components/containers/file-preview.tsx
@ -0,0 +1,48 @@
+"use client";
+
+import { getFileExt } from "@/lib/utils";
+import React from "react";
+import CodeEditor from "../ui/code-editor";
+import trpc from "@/lib/trpc";
+
+type Props = {
+  id: number;
+  onFileChange?: () => void;
+};
+
+const FilePreview = ({ id, onFileChange }: Props) => {
+  const type = "text";
+  const { data, isLoading, refetch } = trpc.file.getById.useQuery(id);
+  const updateFileContent = trpc.file.update.useMutation({
+    onSuccess: () => {
+      if (onFileChange) onFileChange();
+      refetch();
+    },
+  });
+
+  if (isLoading) {
+    return <p>Loading...</p>;
+  }
+  if (!data) {
+    return <p>File not found.</p>;
+  }
+
+  const { filename } = data;
+
+  if (type === "text") {
+    const ext = getFileExt(filename);
+
+    return (
+      <CodeEditor
+        lang={ext}
+        value={data?.content || ""}
+        formatOnSave
+        onChange={(val) => updateFileContent.mutate({ id, content: val })}
+      />
+    );
+  }
+
+  return null;
+};
+
+export default FilePreview;
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@ -0,0 +1,62 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
+        destructive:
+          "bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90",
+        outline:
+          "border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50",
+        secondary:
+          "bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80",
+        ghost:
+          "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50",
+        link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    { className, variant, size, type = "button", asChild = false, ...props },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        type={type}
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
--- a/src/components/ui/code-editor.tsx
+++ b/src/components/ui/code-editor.tsx
@ -1,44 +1,90 @@
 /* eslint-disable react/display-name */
-import ReactCodeMirror, { EditorView } from "@uiw/react-codemirror";
+import ReactCodeMirror, {
+  EditorView,
+  ReactCodeMirrorRef,
+  keymap,
+} from "@uiw/react-codemirror";
 import { javascript } from "@codemirror/lang-javascript";
 import { css } from "@codemirror/lang-css";
 import { html } from "@codemirror/lang-html";
-import { forwardRef, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { tokyoNight } from "@uiw/codemirror-theme-tokyo-night";
-import { useDebounceCallback } from "usehooks-ts";
+import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
+import prettier from "prettier/standalone";
+import prettierHtmlPlugin from "prettier/plugins/html";
+import prettierCssPlugin from "prettier/plugins/postcss";
+import prettierBabelPlugin from "prettier/plugins/babel";
+import * as prettierPluginEstree from "prettier/plugins/estree";
+import { abbreviationTracker } from "@emmetio/codemirror6-plugin";
+import { useDebounce } from "@/hooks/useDebounce";

 type Props = {
  lang?: string;
  value: string;
  onChange: (val: string) => void;
+  formatOnSave?: boolean;
 };

-const CodeEditor = forwardRef(({ lang, value, onChange }: Props, ref: any) => {
+const CodeEditor = (props: Props) => {
+  const codeMirror = useRef<ReactCodeMirrorRef>(null);
+  const { lang, value, formatOnSave, onChange } = props;
  const [data, setData] = useState(value);
-  const debounceValue = useDebounceCallback(onChange, 100);
+  const [debounceChange, resetDebounceChange] = useDebounce(onChange, 3000);
+  const langMetadata = useMemo(() => getLangMetadata(lang || "plain"), [lang]);

-  const extensions = useMemo(() => {
-    const e: any[] = [];
+  const onSave = useCallback(async () => {
+    try {
+      const cm = codeMirror.current?.view;
+      const content = cm ? cm.state.doc.toString() : data;
+      const formatter = langMetadata.formatter;

-    switch (lang) {
-      case "html":
-        e.push(html({ selfClosingTags: true }));
-      case "css":
-        e.push(css());
-      case "jsx":
-      case "js":
-      case "ts":
-      case "tsx":
-        e.push(
-          javascript({
-            jsx: ["jsx", "tsx"].includes(lang),
-            typescript: ["tsx", "ts"].includes(lang),
-          })
+      if (formatOnSave && cm && formatter != null) {
+        const [parser, ...plugins] = formatter;
+        const cursor = cm.state.selection.main.head || 0;
+        const { formatted, cursorOffset } = await prettier.formatWithCursor(
+          content,
+          {
+            parser,
+            plugins,
+            cursorOffset: cursor,
+          }
        );
+
+        setData(formatted);
+        onChange(formatted);
+
+        if (cm) {
+          cm.dispatch({
+            changes: { from: 0, to: cm?.state.doc.length, insert: formatted },
+          });
+          cm.dispatch({
+            selection: { anchor: cursorOffset },
+          });
+        }
+      } else {
+        onChange(content);
+      }
+    } catch (err) {
+      console.log("prettier error", err);
    }

-    return e;
-  }, [lang]);
+    setTimeout(() => resetDebounceChange(), 100);
+  }, [data, setData, formatOnSave, langMetadata, resetDebounceChange]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "s") {
+        e.preventDefault();
+        e.stopPropagation();
+        onSave();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onSave]);

  useEffect(() => {
    setData(value);
@ -46,17 +92,53 @@ const CodeEditor = forwardRef(({ lang, value, onChange }: Props, ref: any) => {

  return (
    <ReactCodeMirror
-      ref={ref}
-      extensions={[EditorView.lineWrapping, ...extensions]}
+      ref={codeMirror}
+      extensions={[
+        EditorView.lineWrapping,
+        ...langMetadata.extensions,
+        keymap.of(vscodeKeymap),
+      ]}
+      indentWithTab={false}
+      basicSetup={{ defaultKeymap: false }}
      value={data}
      onChange={(val) => {
        setData(val);
-        debounceValue(val);
+        debounceChange(val);
      }}
      height="100%"
      theme={tokyoNight}
    />
  );
-});
+};
+
+function getLangMetadata(lang: string) {
+  let extensions: any[] = [];
+  let formatter: any = null;
+
+  switch (lang) {
+    case "html":
+      extensions = [html({ selfClosingTags: true }), abbreviationTracker()];
+      formatter = ["html", prettierHtmlPlugin];
+      break;
+    case "css":
+      extensions = [css()];
+      formatter = ["css", prettierCssPlugin];
+      break;
+    case "jsx":
+    case "js":
+    case "ts":
+    case "tsx":
+      extensions = [
+        javascript({
+          jsx: ["jsx", "tsx"].includes(lang),
+          typescript: ["tsx", "ts"].includes(lang),
+        }),
+      ];
+      formatter = ["babel", prettierBabelPlugin, prettierPluginEstree];
+      break;
+  }
+
+  return { extensions, formatter };
+}

 export default CodeEditor;
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@ -0,0 +1,122 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/20  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-slate-200 bg-white p-6 md:p-8 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:rounded-xl dark:border-slate-800 dark:bg-slate-950",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 data-[state=open]:text-slate-500 dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-400">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-slate-500 dark:text-slate-400", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
--- a/src/components/ui/form-error-message.tsx
+++ b/src/components/ui/form-error-message.tsx
@ -0,0 +1,25 @@
+import { useForm } from "@/hooks/useForm";
+import { FieldValues } from "react-hook-form";
+import React from "react";
+
+type Props<T extends FieldValues> = {
+  form: ReturnType<typeof useForm<T>>;
+};
+
+const FormErrorMessage = <T extends FieldValues>({ form }: Props<T>) => {
+  const { errors } = form.formState;
+  const error = Object.entries(errors)[0];
+  if (!error) {
+    return null;
+  }
+
+  const [key, { message }] = error as any;
+
+  return (
+    <div className="bg-slate-800 border border-slate-600 rounded-md px-4 py-2 text-sm mb-4">
+      {`${key}: ${message}`}
+    </div>
+  );
+};
+
+export default FormErrorMessage;
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
--- a/src/components/ui/panel.tsx
+++ b/src/components/ui/panel.tsx
@ -6,13 +6,13 @@ type Props = {

 const Panel = ({ children }: Props) => {
  return (
-    <div className="bg-slate-800 rounded-lg pt-9 w-full h-full relative shadow-lg overflow-hidden">
-      <div className="flex gap-2 absolute top-3 left-4">
+    <div className="bg-slate-800 rounded-lg w-full h-full flex flex-col items-stretch shadow-lg overflow-hidden">
+      <div className="flex gap-2 py-3 px-4">
        <div className="bg-red-500 rounded-full h-3 w-3" />
        <div className="bg-yellow-500 rounded-full h-3 w-3" />
        <div className="bg-green-500 rounded-full h-3 w-3" />
      </div>
-      {children}
+      <div className="flex-1 overflow-hidden">{children}</div>
    </div>
  );
 };
--- a/src/components/ui/resizable.tsx
+++ b/src/components/ui/resizable.tsx
@ -29,7 +29,7 @@ const ResizableHandle = ({
 }) => (
  <ResizablePrimitive.PanelResizeHandle
    className={cn(
-      "relative flex w-px items-center justify-center bg-slate-200 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      "relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
      className
    )}
    {...props}
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@ -0,0 +1,78 @@
+import { cn, getFileExt } from "@/lib/utils";
+import React, { useMemo, useState } from "react";
+
+export type Tab = {
+  title: string;
+  icon?: React.ReactNode;
+  render?: () => React.ReactNode;
+};
+
+type Props = {
+  tabs: Tab[];
+  current?: number;
+  onChange?: (idx: number) => void;
+};
+
+const Tabs = ({ tabs, current = 0, onChange }: Props) => {
+  const tabView = useMemo(() => {
+    const tab = tabs[current];
+    const element = tab?.render ? tab.render() : null;
+    return element;
+  }, [tabs, current]);
+
+  return (
+    <div className="w-full h-full flex flex-col items-stretch bg-slate-800">
+      {tabs.length > 0 ? (
+        <nav className="flex items-stretch overflow-x-auto w-full h-10 min-h-10 hide-scrollbar">
+          {tabs.map((tab, idx) => (
+            <TabItem
+              key={idx}
+              title={tab.title}
+              icon={tab.icon}
+              isActive={idx === current}
+              onSelect={() => onChange && onChange(idx)}
+              onClose={() => {}}
+            />
+          ))}
+        </nav>
+      ) : null}
+
+      <main className="flex-1 overflow-hidden">{tabView}</main>
+    </div>
+  );
+};
+
+type TabItemProps = {
+  title: string;
+  icon?: React.ReactNode;
+  isActive?: boolean;
+  onSelect: () => void;
+  onClose: () => void;
+};
+
+const TabItem = ({
+  title,
+  icon,
+  isActive,
+  onSelect,
+  onClose,
+}: TabItemProps) => {
+  const lastDotFile = title.lastIndexOf(".");
+  const ext = title.substring(lastDotFile);
+  const filename = title.substring(0, lastDotFile);
+
+  return (
+    <button
+      className={cn(
+        "border-b-2 border-transparent text-white text-center max-w-[140px] md:max-w-[180px] px-4 text-sm flex items-center gap-0 relative z-[1]",
+        isActive ? "border-slate-500" : ""
+      )}
+      onClick={onSelect}
+    >
+      <span className="truncate">{filename}</span>
+      <span>{ext}</span>
+    </button>
+  );
+};
+
+export default Tabs;
--- a/src/hooks/useDebounce.ts
+++ b/src/hooks/useDebounce.ts
@ -0,0 +1,26 @@
+import { useCallback, useRef } from "react";
+
+export const useDebounce = (fn: Function, delay = 500) => {
+  const timerRef = useRef<any>(null);
+
+  const cancel = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  const debounce = useCallback(
+    (...params: any[]) => {
+      cancel();
+
+      timerRef.current = setTimeout(() => {
+        fn(...params);
+        timerRef.current = null;
+      }, delay);
+    },
+    [fn, delay, cancel]
+  );
+
+  return [debounce, cancel] as [typeof debounce, typeof cancel];
+};
--- a/src/hooks/useDisclose.ts
+++ b/src/hooks/useDisclose.ts
@ -0,0 +1,22 @@
+import { useCallback, useState } from "react";
+
+export const useDisclose = () => {
+  const [isOpen, setOpen] = useState(false);
+  const [data, setData] = useState<any>(null);
+
+  const onOpen = useCallback(
+    (_data?: any) => {
+      setOpen(true);
+      setData(data);
+    },
+    [setOpen]
+  );
+
+  const onClose = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
+  return { isOpen, onOpen, onClose, onChange: setOpen, data };
+};
+
+export type UseDiscloseReturn = ReturnType<typeof useDisclose>;
--- a/src/hooks/useForm.ts
+++ b/src/hooks/useForm.ts
@ -0,0 +1,22 @@
+import { z } from "zod";
+import { useForm as useHookForm, FieldValues } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+
+export const useForm = <T extends FieldValues>(
+  schema: z.ZodSchema<T>,
+  initialValues?: Partial<T>
+) => {
+  const form = useHookForm<T>({
+    resolver: zodResolver(schema),
+    defaultValues: initialValues as never,
+  });
+
+  useEffect(() => {
+    if (initialValues) {
+      form.reset(initialValues as never);
+    }
+  }, [initialValues, form.reset]);
+
+  return form;
+};
--- a/src/hooks/useMediaQuery.ts
+++ b/src/hooks/useMediaQuery.ts
@ -1,95 +0,0 @@
-import { useState } from "react";
-import { useIsomorphicLayoutEffect } from "usehooks-ts";
-
-type UseMediaQueryOptions = {
-  defaultValue?: boolean;
-  initializeWithValue?: boolean;
-};
-
-const IS_SERVER = typeof window === "undefined";
-
-export function useMediaQuery(
-  query: string,
-  options?: UseMediaQueryOptions
-): boolean;
-/**
- * Custom hook for tracking the state of a media query.
- * @deprecated - this useMediaQuery's signature is deprecated, it now accepts an query parameter and an options object.
- * @param {string} query - The media query to track.
- * @param {?boolean} [defaultValue] - The default value to return if the hook is being run on the server (default is `false`).
- * @returns {boolean} The current state of the media query (true if the query matches, false otherwise).
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-media-query)
- * @see [MDN Match Media](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
- * @example
- * const isSmallScreen = useMediaQuery('(max-width: 600px)');
- * // Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.
- */
-export function useMediaQuery(query: string, defaultValue: boolean): boolean; // defaultValue should be false by default
-/**
- * Custom hook for tracking the state of a media query.
- * @param {string} query - The media query to track.
- * @param {boolean | ?UseMediaQueryOptions} [options] - The default value to return if the hook is being run on the server (default is `false`).
- * @param {?boolean} [options.defaultValue] - The default value to return if the hook is being run on the server (default is `false`).
- * @param {?boolean} [options.initializeWithValue] - If `true` (default), the hook will initialize reading the media query. In SSR, you should set it to `false`, returning `options.defaultValue` or `false` initially.
- * @returns {boolean} The current state of the media query (true if the query matches, false otherwise).
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-media-query)
- * @see [MDN Match Media](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)
- * @example
- * const isSmallScreen = useMediaQuery('(max-width: 600px)');
- * // Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.
- */
-export function useMediaQuery(
-  query: string,
-  options?: boolean | UseMediaQueryOptions
-): boolean {
-  // TODO: Refactor this code after the deprecated signature has been removed.
-  const defaultValue =
-    typeof options === "boolean" ? options : options?.defaultValue ?? false;
-  const initializeWithValue =
-    typeof options === "boolean"
-      ? undefined
-      : options?.initializeWithValue ?? undefined;
-
-  const [matches, setMatches] = useState<boolean>(() => {
-    if (initializeWithValue) {
-      return getMatches(query);
-    }
-    return defaultValue;
-  });
-
-  const getMatches = (query: string): boolean => {
-    if (IS_SERVER) {
-      return defaultValue;
-    }
-    return window.matchMedia(query).matches;
-  };
-
-  /** Handles the change event of the media query. */
-  function handleChange() {
-    setMatches(getMatches(query));
-  }
-
-  useIsomorphicLayoutEffect(() => {
-    const matchMedia = window.matchMedia(query);
-
-    // Triggered at the first client-side load and if query changes
-    handleChange();
-
-    // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
-    if (matchMedia.addListener) {
-      matchMedia.addListener(handleChange);
-    } else {
-      matchMedia.addEventListener("change", handleChange);
-    }
-
-    return () => {
-      if (matchMedia.removeListener) {
-        matchMedia.removeListener(handleChange);
-      } else {
-        matchMedia.removeEventListener("change", handleChange);
-      }
-    };
-  }, [query]);
-
-  return matches;
-}
--- a/src/lib/consts.ts
+++ b/src/lib/consts.ts
@ -0,0 +1 @@
+export const IS_DEV = process.env.NODE_ENV === "development";
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@ -1,6 +1,10 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";

 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
+}
+
+export function getFileExt(filename: string) {
+  return filename.substring(filename.lastIndexOf(".") + 1);
 }
--- a/src/server/db/drizzle/0000_loud_hex.sql
+++ b/src/server/db/drizzle/0000_loud_hex.sql
@ -0,0 +1,26 @@
+CREATE TABLE `files` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`parent_id` integer,
+	`user_id` integer NOT NULL,
+	`path` text NOT NULL,
+	`filename` text NOT NULL,
+	`is_directory` integer DEFAULT false NOT NULL,
+	`is_file` integer DEFAULT false NOT NULL,
+	`content` text,
+	`created_at` text DEFAULT CURRENT_TIMESTAMP NOT NULL,
+	`deleted_at` text,
+	FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON UPDATE no action ON DELETE no action,
+	FOREIGN KEY (`parent_id`) REFERENCES `files`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE TABLE `users` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`email` text NOT NULL,
+	`password` text NOT NULL,
+	`created_at` text DEFAULT CURRENT_TIMESTAMP NOT NULL,
+	`deleted_at` text
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `files_path_unique` ON `files` (`path`);--> statement-breakpoint
+CREATE UNIQUE INDEX `files_filename_unique` ON `files` (`filename`);--> statement-breakpoint
+CREATE UNIQUE INDEX `users_email_unique` ON `users` (`email`);
--- a/src/server/db/drizzle/meta/0000_snapshot.json
+++ b/src/server/db/drizzle/meta/0000_snapshot.json
@ -0,0 +1,191 @@
+{
+  "version": "5",
+  "dialect": "sqlite",
+  "id": "30eeec75-2990-42f2-a773-b55bfa0a4c0a",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "tables": {
+    "files": {
+      "name": "files",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "parent_id": {
+          "name": "parent_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "path": {
+          "name": "path",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "filename": {
+          "name": "filename",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_directory": {
+          "name": "is_directory",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "is_file": {
+          "name": "is_file",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "content": {
+          "name": "content",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "deleted_at": {
+          "name": "deleted_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "files_path_unique": {
+          "name": "files_path_unique",
+          "columns": [
+            "path"
+          ],
+          "isUnique": true
+        },
+        "files_filename_unique": {
+          "name": "files_filename_unique",
+          "columns": [
+            "filename"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "files_user_id_users_id_fk": {
+          "name": "files_user_id_users_id_fk",
+          "tableFrom": "files",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "parent_id_fk": {
+          "name": "parent_id_fk",
+          "tableFrom": "files",
+          "tableTo": "files",
+          "columnsFrom": [
+            "parent_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "CURRENT_TIMESTAMP"
+        },
+        "deleted_at": {
+          "name": "deleted_at",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}
--- a/src/server/db/drizzle/meta/_journal.json
+++ b/src/server/db/drizzle/meta/_journal.json
@ -0,0 +1,13 @@
+{
+  "version": "5",
+  "dialect": "sqlite",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "5",
+      "when": 1708329026876,
+      "tag": "0000_loud_hex",
+      "breakpoints": true
+    }
+  ]
+}
--- a/src/server/db/index.ts
+++ b/src/server/db/index.ts
@ -0,0 +1,9 @@
+import { drizzle } from "drizzle-orm/better-sqlite3";
+import path from "node:path";
+import Database from "better-sqlite3";
+import * as schema from "./schema/_schema";
+
+const sqlite = new Database(path.join(process.cwd(), "storage/database.db"));
+const db = drizzle(sqlite, { schema });
+
+export default db;
--- a/src/server/db/migrate.ts
+++ b/src/server/db/migrate.ts
@ -0,0 +1,5 @@
+import { migrate } from "drizzle-orm/better-sqlite3/migrator";
+import db from "./index";
+
+migrate(db, { migrationsFolder: __dirname + "/drizzle" });
+process.exit();
--- a/src/server/db/schema/_schema.ts
+++ b/src/server/db/schema/_schema.ts
@ -0,0 +1,2 @@
+export { user } from "./user";
+export { file } from "./file";
--- a/src/server/db/schema/file.ts
+++ b/src/server/db/schema/file.ts
@ -0,0 +1,44 @@
+import { sql } from "drizzle-orm";
+import {
+  integer,
+  sqliteTable,
+  text,
+  foreignKey,
+} from "drizzle-orm/sqlite-core";
+import { createInsertSchema, createSelectSchema } from "drizzle-zod";
+import { z } from "zod";
+import { user } from "./user";
+
+export const file = sqliteTable(
+  "files",
+  {
+    id: integer("id").primaryKey({ autoIncrement: true }),
+    parentId: integer("parent_id"),
+    userId: integer("user_id")
+      .notNull()
+      .references(() => user.id),
+    path: text("path").notNull().unique(),
+    filename: text("filename").notNull().unique(),
+    isDirectory: integer("is_directory", { mode: "boolean" })
+      .notNull()
+      .default(false),
+    isFile: integer("is_file", { mode: "boolean" }).notNull().default(false),
+    content: text("content"),
+    createdAt: text("created_at")
+      .notNull()
+      .default(sql`CURRENT_TIMESTAMP`),
+    deletedAt: text("deleted_at"),
+  },
+  (table) => ({
+    parentFk: foreignKey({
+      columns: [table.parentId],
+      foreignColumns: [table.id],
+      name: "parent_id_fk",
+    }),
+  })
+);
+
+export const insertFileSchema = createInsertSchema(file);
+export const selectFileSchema = createSelectSchema(file);
+
+export type FileSchema = z.infer<typeof selectFileSchema>;
--- a/src/server/db/schema/user.ts
+++ b/src/server/db/schema/user.ts
@ -0,0 +1,19 @@
+import { sql } from "drizzle-orm";
+import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
+import { createInsertSchema, createSelectSchema } from "drizzle-zod";
+import { z } from "zod";
+
+export const user = sqliteTable("users", {
+  id: integer("id").primaryKey({ autoIncrement: true }),
+  email: text("email").notNull().unique(),
+  password: text("password").notNull(),
+  createdAt: text("created_at")
+    .notNull()
+    .default(sql`CURRENT_TIMESTAMP`),
+  deletedAt: text("deleted_at"),
+});
+
+export const insertUserSchema = createInsertSchema(user);
+export const selectUserSchema = createSelectSchema(user);
+
+export type UserSchema = z.infer<typeof selectUserSchema>;
--- a/src/server/db/seed.ts
+++ b/src/server/db/seed.ts
@ -0,0 +1,39 @@
+import db from ".";
+import { hashPassword } from "../lib/crypto";
+import { file } from "./schema/file";
+import { user } from "./schema/user";
+
+const main = async () => {
+  const [adminUser] = await db
+    .insert(user)
+    .values({
+      email: "admin@mail.com",
+      password: await hashPassword("123456"),
+    })
+    .returning();
+
+  await db.insert(file).values([
+    {
+      userId: adminUser.id,
+      path: "index.html",
+      filename: "index.html",
+      content: "<p>Hello world!</p>",
+    },
+    {
+      userId: adminUser.id,
+      path: "styles.css",
+      filename: "styles.css",
+      content: "body { padding: 16px; }",
+    },
+    {
+      userId: adminUser.id,
+      path: "script.js",
+      filename: "script.js",
+      content: "console.log('hello world!');",
+    },
+  ]);
+
+  process.exit();
+};
+
+main();
--- a/src/server/lib/crypto.ts
+++ b/src/server/lib/crypto.ts
@ -0,0 +1,13 @@
+import bcrypt from "bcrypt";
+
+export const hashPassword = (password: string) => {
+  return bcrypt.hash(password, 10);
+};
+
+export const verifyPassword = async (hash: string, password: string) => {
+  try {
+    return await bcrypt.compare(password, hash);
+  } catch (err) {
+    return false;
+  }
+};
--- a/src/server/routers/_app.ts
+++ b/src/server/routers/_app.ts
@ -1,18 +1,8 @@
-import { z } from "zod";
-import { procedure, router } from "../trpc";
+import { router } from "../trpc";
+import file from "./file";

 export const appRouter = router({
-  hello: procedure
-    .input(
-      z.object({
-        text: z.string(),
-      })
-    )
-    .query((opts) => {
-      return {
-        greeting: `hello ${opts.input.text}`,
-      };
-    }),
+  file,
 });

 // export type definition of API
--- a/src/server/routers/file.ts
+++ b/src/server/routers/file.ts
@ -0,0 +1,49 @@
+import { and, eq, isNull } from "drizzle-orm";
+import db from "../db";
+import { procedure, router } from "../trpc";
+import { file, insertFileSchema, selectFileSchema } from "../db/schema/file";
+import { z } from "zod";
+
+const fileRouter = router({
+  getAll: procedure.query(async () => {
+    const files = await db.query.file.findMany({
+      where: and(isNull(file.deletedAt)),
+      columns: { content: false },
+    });
+
+    return files;
+  }),
+
+  getById: procedure.input(z.number()).query(async ({ input }) => {
+    return db.query.file.findFirst({
+      where: and(eq(file.id, input), isNull(file.deletedAt)),
+    });
+  }),
+
+  create: procedure
+    .input(insertFileSchema.pick({ parentId: true, filename: true }))
+    .mutation(async ({ input }) => {
+      const data: z.infer<typeof insertFileSchema> = {
+        userId: 1,
+        parentId: input.parentId,
+        path: input.filename,
+        filename: input.filename,
+      };
+
+      const [result] = await db.insert(file).values(data).returning();
+      return result;
+    }),
+
+  update: procedure
+    .input(selectFileSchema.partial().required({ id: true }))
+    .mutation(async ({ input }) => {
+      const [result] = await db
+        .update(file)
+        .set(input)
+        .where(and(eq(file.id, input.id), isNull(file.deletedAt)))
+        .returning();
+      return result;
+    }),
+});
+
+export default fileRouter;
--- a/storage/.gitkeep
+++ b/storage/.gitkeep
				`@ -0,0 +1 @@`
				`export const IS_DEV = process.env.NODE_ENV === "development";`