Merge branch 'refs/heads/main' into feature/ai-chat

# Conflicts: # frontend/components/dashboard/newProject.tsx # frontend/components/editor/AIChat/ChatMessage.tsx # frontend/components/editor/AIChat/ContextDisplay.tsx # frontend/components/editor/AIChat/index.tsx # frontend/components/editor/index.tsx # frontend/components/editor/sidebar/index.tsx # frontend/components/editor/terminals/terminal.tsx
2024-10-21 17:06:13 -06:00
parent 6fb1364d6f 3f8e27d969
commit 4f7a4a5312
29 changed files with 1778 additions and 1198 deletions
--- a/frontend/components/dashboard/newProject.tsx
+++ b/frontend/components/dashboard/newProject.tsx
@ -8,7 +8,7 @@ import {
 } from "@/components/ui/dialog"
 import { zodResolver } from "@hookform/resolvers/zod"
 import Image from "next/image"
-import { useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"

@ -32,10 +32,14 @@ import {
 import { createSandbox } from "@/lib/actions"
 import { projectTemplates } from "@/lib/data"
 import { useUser } from "@clerk/nextjs"
-import { Loader2 } from "lucide-react"
+import { ChevronLeft, ChevronRight, Loader2, Search } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { Button } from "../ui/button"

+import { cn } from "@/lib/utils"
+import type { EmblaCarouselType } from "embla-carousel"
+import useEmblaCarousel from "embla-carousel-react"
+import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures"
 const formSchema = z.object({
  name: z
    .string()
@ -55,11 +59,20 @@ export default function NewProjectModal({
  open: boolean
  setOpen: (open: boolean) => void
 }) {
+  const router = useRouter()
+  const user = useUser()
  const [selected, setSelected] = useState("reactjs")
  const [loading, setLoading] = useState(false)
-  const router = useRouter()
-
-  const user = useUser()
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false }, [
+    WheelGesturesPlugin(),
+  ])
+  const {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick,
+  } = usePrevNextButtons(emblaApi)
+  const [search, setSearch] = useState("")

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
@ -69,6 +82,26 @@ export default function NewProjectModal({
    },
  })

+  const handleTemplateClick = useCallback(
+    ({ id, index }: { id: string; index: number }) => {
+      setSelected(id)
+      emblaApi?.scrollTo(index)
+    },
+    [emblaApi]
+  )
+  const filteredTemplates = useMemo(
+    () =>
+      projectTemplates.filter(
+        (item) =>
+          item.name.toLowerCase().includes(search.toLowerCase()) ||
+          item.description.toLowerCase().includes(search.toLowerCase())
+      ),
+    [search, projectTemplates]
+  )
+  const emptyTemplates = useMemo(
+    () => filteredTemplates.length === 0,
+    [filteredTemplates]
+  )
  async function onSubmit(values: z.infer<typeof formSchema>) {
    if (!user.isSignedIn) return

@ -78,7 +111,6 @@ export default function NewProjectModal({
    const id = await createSandbox(sandboxData)
    router.push(`/code/${id}`)
  }
-
  return (
    <Dialog
      open={open}
@ -90,25 +122,89 @@ export default function NewProjectModal({
        <DialogHeader>
          <DialogTitle>Create A Sandbox</DialogTitle>
        </DialogHeader>
-        <div className="grid grid-cols-2 w-full gap-2 mt-2">
-          {projectTemplates.map((item) => (
-            <button
-              disabled={item.disabled || loading}
-              key={item.id}
-              onClick={() => setSelected(item.id)}
-              className={`${
-                selected === item.id ? "border-foreground" : "border-border"
-              } rounded-md border bg-card text-card-foreground shadow text-left p-4 flex flex-col transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed`}
+        <div className="flex flex-col gap-2 max-w-full overflow-hidden">
+          <div className="flex items-center justify-end">
+            <SearchInput
+              {...{
+                value: search,
+                onValueChange: setSearch,
+              }}
+            />
+          </div>
+          <div className="overflow-hidden relative" ref={emblaRef}>
+            <div
+              className={cn(
+                "grid grid-flow-col gap-x-2  min-h-[97px]",
+                emptyTemplates ? "auto-cols-[100%]" : "auto-cols-[200px]"
+              )}
            >
-              <div className="space-x-2 flex items-center justify-start w-full">
-                <Image alt="" src={item.icon} width={20} height={20} />
-                <div className="font-medium">{item.name}</div>
-              </div>
-              <div className="mt-2 text-muted-foreground text-sm">
-                {item.description}
-              </div>
-            </button>
-          ))}
+              {filteredTemplates.map((item, i) => (
+                <button
+                  disabled={item.disabled || loading}
+                  key={item.id}
+                  onClick={handleTemplateClick.bind(null, {
+                    id: item.id,
+                    index: i,
+                  })}
+                  className={cn(
+                    selected === item.id
+                      ? "shadow-foreground"
+                      : "shadow-border",
+                    "shadow-[0_0_0_1px_inset] rounded-md border bg-card text-card-foreground text-left p-4 flex flex-col transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 disabled:cursor-not-allowed"
+                  )}
+                >
+                  <div className="space-x-2 flex items-center justify-start w-full">
+                    <Image alt="" src={item.icon} width={20} height={20} />
+                    <div className="font-medium">{item.name}</div>
+                  </div>
+                  <div className="mt-2 text-muted-foreground text-xs line-clamp-2">
+                    {item.description}
+                  </div>
+                </button>
+              ))}
+              {emptyTemplates && (
+                <div className="flex flex-col gap-2 items-center text-center justify-center text-muted-foreground text-sm">
+                  <p>No templates found</p>
+                  <Button size="xs" asChild>
+                    <a
+                      href="https://github.com/jamesmurdza/sandbox"
+                      target="_blank"
+                    >
+                      Contribute
+                    </a>
+                  </Button>
+                </div>
+              )}
+            </div>
+            <div
+              className={cn(
+                "absolute transition-all opacity-100 duration-400 bg-gradient-to-r from-background via-background to-transparent w-14 pl-1 left-0 top-0 -translate-x-1 bottom-0 h-full flex items-center",
+                prevBtnDisabled && "opacity-0 pointer-events-none"
+              )}
+            >
+              <Button
+                size="smIcon"
+                className="rounded-full"
+                onClick={onPrevButtonClick}
+              >
+                <ChevronLeft className="size-5" />
+              </Button>
+            </div>
+            <div
+              className={cn(
+                "absolute transition-all opacity-100 duration-400 bg-gradient-to-l from-background via-background to-transparent w-14 pl-1 right-0 top-0 translate-x-1 bottom-0 h-full flex items-center",
+                nextBtnDisabled && "opacity-0 pointer-events-none"
+              )}
+            >
+              <Button
+                size="smIcon"
+                className="rounded-full"
+                onClick={onNextButtonClick}
+              >
+                <ChevronRight className="size-5" />
+              </Button>
+            </div>
+          </div>
        </div>

        <Form {...form}>
@ -176,3 +272,68 @@ export default function NewProjectModal({
    </Dialog>
  )
 }
+
+function SearchInput({
+  value,
+  onValueChange,
+}: {
+  value?: string
+  onValueChange?: (value: string) => void
+}) {
+  const onSubmit = useCallback((e: React.FormEvent) => {
+    e.preventDefault()
+    console.log("searching")
+  }, [])
+  return (
+    <form {...{ onSubmit }} className="w-40 h-8 ">
+      <label
+        htmlFor="template-search"
+        className="flex gap-2 rounded-sm transition-colors bg-[#2e2e2e] border border-[--s-color] [--s-color:hsl(var(--muted-foreground))]  focus-within:[--s-color:#fff]  h-full items-center px-2"
+      >
+        <Search className="size-4 text-[--s-color] transition-colors" />
+        <input
+          id="template-search"
+          type="text"
+          name="search"
+          placeholder="Search templates"
+          value={value}
+          onChange={(e) => onValueChange?.(e.target.value)}
+          className="bg-transparent placeholder:text-muted-foreground text-white w-full focus:outline-none text-xs"
+        />
+      </label>
+    </form>
+  )
+}
+const usePrevNextButtons = (emblaApi: EmblaCarouselType | undefined) => {
+  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true)
+  const [nextBtnDisabled, setNextBtnDisabled] = useState(true)
+
+  const onPrevButtonClick = useCallback(() => {
+    if (!emblaApi) return
+    emblaApi.scrollPrev()
+  }, [emblaApi])
+
+  const onNextButtonClick = useCallback(() => {
+    if (!emblaApi) return
+    emblaApi.scrollNext()
+  }, [emblaApi])
+
+  const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
+    setPrevBtnDisabled(!emblaApi.canScrollPrev())
+    setNextBtnDisabled(!emblaApi.canScrollNext())
+  }, [])
+
+  useEffect(() => {
+    if (!emblaApi) return
+
+    onSelect(emblaApi)
+    emblaApi.on("reInit", onSelect).on("select", onSelect)
+  }, [emblaApi, onSelect])
+
+  return {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick,
+  }
+}
--- a/frontend/components/editor/AIChat/ChatMessage.tsx
+++ b/frontend/components/editor/AIChat/ChatMessage.tsx
@ -1,25 +1,31 @@
-import { Check, ChevronDown, ChevronUp, Copy, CornerUpLeft } from 'lucide-react';
-import React, { useState } from 'react';
-import ReactMarkdown from 'react-markdown';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import remarkGfm from 'remark-gfm';
-import { Button } from '../../ui/button';
-import { copyToClipboard, stringifyContent } from './lib/chatUtils';
+import { Check, ChevronDown, ChevronUp, Copy, CornerUpLeft } from "lucide-react"
+import React, { useState } from "react"
+import ReactMarkdown from "react-markdown"
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
+import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism"
+import remarkGfm from "remark-gfm"
+import { Button } from "../../ui/button"
+import { copyToClipboard, stringifyContent } from "./lib/chatUtils"

 interface MessageProps {
  message: {
-    role: 'user' | 'assistant';
-    content: string;
-    context?: string;
-  };
-  setContext: (context: string | null) => void;
-  setIsContextExpanded: (isExpanded: boolean) => void;
+    role: "user" | "assistant"
+    content: string
+    context?: string
+  }
+  setContext: (context: string | null) => void
+  setIsContextExpanded: (isExpanded: boolean) => void
 }

-export default function ChatMessage({ message, setContext, setIsContextExpanded }: MessageProps) {
-  const [expandedMessageIndex, setExpandedMessageIndex] = useState<number | null>(null);
-  const [copiedText, setCopiedText] = useState<string | null>(null);
+export default function ChatMessage({
+  message,
+  setContext,
+  setIsContextExpanded,
+}: MessageProps) {
+  const [expandedMessageIndex, setExpandedMessageIndex] = useState<
+    number | null
+  >(null)
+  const [copiedText, setCopiedText] = useState<string | null>(null)

  const renderCopyButton = (text: any) => (
    <Button
@ -34,17 +40,17 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
        <Copy className="w-4 h-4" />
      )}
    </Button>
-  );
+  )

  const askAboutCode = (code: any) => {
-    const contextString = stringifyContent(code);
-    setContext(`Regarding this code:\n${contextString}`);
-    setIsContextExpanded(false);
-  };
+    const contextString = stringifyContent(code)
+    setContext(`Regarding this code:\n${contextString}`)
+    setIsContextExpanded(false)
+  }

  const renderMarkdownElement = (props: any) => {
-    const { node, children } = props;
-    const content = stringifyContent(children);
+    const { node, children } = props
+    const content = stringifyContent(children)

    return (
      <div className="relative group">
@ -59,22 +65,30 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
            <CornerUpLeft className="w-4 h-4" />
          </Button>
        </div>
-        {React.createElement(node.tagName, {
-          ...props,
-          className: `${props.className || ''} hover:bg-transparent rounded p-1 transition-colors`
-        }, children)}
+        {React.createElement(
+          node.tagName,
+          {
+            ...props,
+            className: `${
+              props.className || ""
+            } hover:bg-transparent rounded p-1 transition-colors`,
+          },
+          children
+        )}
      </div>
-    );
-  };
+    )
+  }

  return (
    <div className="text-left relative">
-      <div className={`relative p-2 rounded-lg ${
-        message.role === 'user' 
-          ? 'bg-[#262626] text-white' 
-          : 'bg-transparent text-white'
-        } max-w-full`}>
-        {message.role === 'user' && (
+      <div
+        className={`relative p-2 rounded-lg ${
+          message.role === "user"
+            ? "bg-[#262626] text-white"
+            : "bg-transparent text-white"
+        } max-w-full`}
+      >
+        {message.role === "user" && (
          <div className="absolute top-0 right-0 flex opacity-0 group-hover:opacity-30 transition-opacity">
            {renderCopyButton(message.content)}
            <Button
@ -89,13 +103,13 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
        )}
        {message.context && (
          <div className="mb-2 bg-input rounded-lg">
-            <div 
+            <div
              className="flex justify-between items-center cursor-pointer"
-              onClick={() => setExpandedMessageIndex(expandedMessageIndex === 0 ? null : 0)}
+              onClick={() =>
+                setExpandedMessageIndex(expandedMessageIndex === 0 ? null : 0)
+              }
            >
-              <span className="text-sm text-gray-300">
-                Context 
-              </span>
+              <span className="text-sm text-gray-300">Context</span>
              {expandedMessageIndex === 0 ? (
                <ChevronUp size={16} />
              ) : (
@ -105,41 +119,46 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
            {expandedMessageIndex === 0 && (
              <div className="relative">
                <div className="absolute top-0 right-0 flex p-1">
-                  {renderCopyButton(message.context.replace(/^Regarding this code:\n/, ''))}
+                  {renderCopyButton(
+                    message.context.replace(/^Regarding this code:\n/, "")
+                  )}
                </div>
                {(() => {
-                  const code = message.context.replace(/^Regarding this code:\n/, '');
-                  const match = /language-(\w+)/.exec(code);
-                  const language = match ? match[1] : 'typescript';
+                  const code = message.context.replace(
+                    /^Regarding this code:\n/,
+                    ""
+                  )
+                  const match = /language-(\w+)/.exec(code)
+                  const language = match ? match[1] : "typescript"
                  return (
                    <div className="pt-6">
                      <textarea
                        value={code}
                        onChange={(e) => {
-                          const updatedContext = `Regarding this code:\n${e.target.value}`;
-                          setContext(updatedContext);
+                          const updatedContext = `Regarding this code:\n${e.target.value}`
+                          setContext(updatedContext)
                        }}
                        className="w-full p-2 bg-[#1e1e1e] text-white font-mono text-sm rounded"
-                        rows={code.split('\n').length}
+                        rows={code.split("\n").length}
                        style={{
-                          resize: 'vertical',
-                          minHeight: '100px',
-                          maxHeight: '400px',
+                          resize: "vertical",
+                          minHeight: "100px",
+                          maxHeight: "400px",
                        }}
                      />
                    </div>
-                  );
+                  )
                })()}
              </div>
            )}
          </div>
        )}
-        {message.role === 'assistant' ? (
+        {message.role === "assistant" ? (
          <ReactMarkdown
            remarkPlugins={[remarkGfm]}
            components={{
-              code({node, className, children, ...props}) {
-                const match = /language-(\w+)/.exec(className || '');
+              code({ node, className, children, ...props }) {
+                const match = /language-(\w+)/.exec(className || "")
                return match ? (
                  <div className="relative border border-input rounded-md my-4">
                    <div className="absolute top-0 left-0 px-2 py-1 text-xs font-semibold text-gray-200 bg-#1e1e1e rounded-tl">
@ -163,8 +182,8 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
                        PreTag="div"
                        customStyle={{
                          margin: 0,
-                          padding: '0.5rem',
-                          fontSize: '0.875rem',
+                          padding: "0.5rem",
+                          fontSize: "0.875rem",
                        }}
                      >
                        {stringifyContent(children)}
@ -175,7 +194,7 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
                  <code className={className} {...props}>
                    {children}
                  </code>
-                );
+                )
              },
              p: renderMarkdownElement,
              h1: renderMarkdownElement,
@ -184,18 +203,24 @@ export default function ChatMessage({ message, setContext, setIsContextExpanded
              h4: renderMarkdownElement,
              h5: renderMarkdownElement,
              h6: renderMarkdownElement,
-              ul: (props) => <ul className="list-disc pl-6 mb-4 space-y-2">{props.children}</ul>,
-              ol: (props) => <ol className="list-decimal pl-6 mb-4 space-y-2">{props.children}</ol>,
+              ul: (props) => (
+                <ul className="list-disc pl-6 mb-4 space-y-2">
+                  {props.children}
+                </ul>
+              ),
+              ol: (props) => (
+                <ol className="list-decimal pl-6 mb-4 space-y-2">
+                  {props.children}
+                </ol>
+              ),
            }}
          >
            {message.content}
          </ReactMarkdown>
        ) : (
-          <div className="whitespace-pre-wrap group">
-            {message.content}
-          </div>
+          <div className="whitespace-pre-wrap group">{message.content}</div>
        )}
      </div>
    </div>
-  );
+  )
 }
--- a/frontend/components/editor/AIChat/ContextDisplay.tsx
+++ b/frontend/components/editor/AIChat/ContextDisplay.tsx
@ -1,47 +1,60 @@
-import { ChevronDown, ChevronUp, X } from 'lucide-react';
+import { ChevronDown, ChevronUp, X } from "lucide-react"

 interface ContextDisplayProps {
-  context: string | null;
-  isContextExpanded: boolean;
-  setIsContextExpanded: (isExpanded: boolean) => void;
-  setContext: (context: string | null) => void;
+  context: string | null
+  isContextExpanded: boolean
+  setIsContextExpanded: (isExpanded: boolean) => void
+  setContext: (context: string | null) => void
 }

-export default function ContextDisplay({ context, isContextExpanded, setIsContextExpanded, setContext }: ContextDisplayProps) {
-  if (!context) return null;
+export default function ContextDisplay({
+  context,
+  isContextExpanded,
+  setIsContextExpanded,
+  setContext,
+}: ContextDisplayProps) {
+  if (!context) return null

  return (
    <div className="mb-2 bg-input p-2 rounded-lg">
      <div className="flex justify-between items-center">
-        <div 
-          className="flex-grow cursor-pointer" 
+        <div
+          className="flex-grow cursor-pointer"
          onClick={() => setIsContextExpanded(!isContextExpanded)}
        >
-          <span className="text-sm text-gray-300">
-            Context
-          </span>
+          <span className="text-sm text-gray-300">Context</span>
        </div>
        <div className="flex items-center">
          {isContextExpanded ? (
-            <ChevronUp size={16} className="cursor-pointer" onClick={() => setIsContextExpanded(false)} />
+            <ChevronUp
+              size={16}
+              className="cursor-pointer"
+              onClick={() => setIsContextExpanded(false)}
+            />
          ) : (
-            <ChevronDown size={16} className="cursor-pointer" onClick={() => setIsContextExpanded(true)} />
+            <ChevronDown
+              size={16}
+              className="cursor-pointer"
+              onClick={() => setIsContextExpanded(true)}
+            />
          )}
-          <X 
-            size={16} 
-            className="ml-2 cursor-pointer text-gray-400 hover:text-gray-200" 
+          <X
+            size={16}
+            className="ml-2 cursor-pointer text-gray-400 hover:text-gray-200"
            onClick={() => setContext(null)}
          />
        </div>
      </div>
      {isContextExpanded && (
        <textarea
-          value={context.replace(/^Regarding this code:\n/, '')}
-          onChange={(e) => setContext(`Regarding this code:\n${e.target.value}`)}
+          value={context.replace(/^Regarding this code:\n/, "")}
+          onChange={(e) =>
+            setContext(`Regarding this code:\n${e.target.value}`)
+          }
          className="w-full mt-2 p-2 bg-#1e1e1e text-white rounded"
          rows={5}
        />
      )}
    </div>
-  );
+  )
 }
--- a/frontend/components/editor/index.tsx
+++ b/frontend/components/editor/index.tsx
@ -24,6 +24,7 @@ import { parseTSConfigToMonacoOptions } from "@/lib/tsconfig"
 import { Sandbox, TFile, TFolder, TTab, User } from "@/lib/types"
 import {
  addNew,
+  cn,
  debounce,
  deepMerge,
  processFileType,
@ -926,7 +927,10 @@ export default function CodeEditor({
            )}
          </AnimatePresence>
        </div>
-        <div className="z-50 p-1" ref={generateWidgetRef}>
+        <div
+          className={cn(generate.show && "z-50 p-1")}
+          ref={generateWidgetRef}
+        >
          {generate.show ? (
            <GenerateInput
              user={userData}
--- a/frontend/components/editor/loading/index.tsx
+++ b/frontend/components/editor/loading/index.tsx
@ -84,8 +84,10 @@ export default function Loading({
            </div>
          </div>
          <div className="w-full mt-1 flex flex-col">
-            <div className="w-full flex justify-center">
-              <Loader2 className="w-4 h-4 animate-spin" />
+            <div className="w-full flex flex-col justify-center">
+              {new Array(6).fill(0).map((_, i) => (
+                <Skeleton key={i} className="h-[1.625rem] mb-0.5 rounded-sm" />
+              ))}
            </div>
          </div>
        </div>
--- a/frontend/components/editor/sidebar/index.tsx
+++ b/frontend/components/editor/sidebar/index.tsx
@ -1,20 +1,16 @@
 "use client"

-import { Button } from "@/components/ui/button"
 import { Sandbox, TFile, TFolder, TTab } from "@/lib/types"
-import {
-  FilePlus,
-  FolderPlus,
-  Loader2,
-  MessageSquareMore,
-  Sparkles,
-} from "lucide-react"
-import { useEffect, useRef, useState } from "react"
+import { FilePlus, FolderPlus, MessageSquareMore, Sparkles } from "lucide-react"
+import { useEffect, useMemo, useRef, useState } from "react"
 import { Socket } from "socket.io-client"
 import SidebarFile from "./file"
 import SidebarFolder from "./folder"
 import New from "./new"

+import Button from "@/components/ui/customButton"
+import { Skeleton } from "@/components/ui/skeleton"
+import { sortFileExplorer } from "@/lib/utils"
 import {
  dropTargetForElements,
  monitorForElements,
@ -52,7 +48,9 @@ export default function Sidebar({

  const [creatingNew, setCreatingNew] = useState<"file" | "folder" | null>(null)
  const [movingId, setMovingId] = useState("")
-
+  const sortedFiles = useMemo(() => {
+    return sortFileExplorer(files)
+  }, [files])
  useEffect(() => {
    const el = ref.current

@ -133,13 +131,15 @@ export default function Sidebar({
            isDraggedOver ? "bg-secondary/50" : ""
          } rounded-sm w-full mt-1 flex flex-col`}
        > */}
-          {files.length === 0 ? (
-            <div className="w-full flex justify-center">
-              <Loader2 className="w-4 h-4 animate-spin" />
+          {sortedFiles.length === 0 ? (
+            <div className="w-full flex flex-col justify-center">
+              {new Array(6).fill(0).map((_, i) => (
+                <Skeleton key={i} className="h-[1.625rem] mb-0.5 rounded-sm" />
+              ))}
            </div>
          ) : (
            <>
-              {files.map((child) =>
+              {sortedFiles.map((child) =>
                child.type === "file" ? (
                  <SidebarFile
                    key={child.id}
--- a/frontend/components/editor/terminals/terminal.tsx
+++ b/frontend/components/editor/terminals/terminal.tsx
@ -4,8 +4,9 @@ import { FitAddon } from "@xterm/addon-fit"
 import { Terminal } from "@xterm/xterm"
 import "./xterm.css"

+import { debounce } from "@/lib/utils"
 import { Loader2 } from "lucide-react"
-import { useEffect, useRef } from "react"
+import { ElementRef, useEffect, useRef } from "react"
 import { Socket } from "socket.io-client"

 export default function EditorTerminal({
@ -21,7 +22,8 @@ export default function EditorTerminal({
  setTerm: (term: Terminal) => void
  visible: boolean
 }) {
-  const terminalRef = useRef(null)
+  const terminalRef = useRef<ElementRef<"div">>(null)
+  const fitAddonRef = useRef<FitAddon | null>(null)

  useEffect(() => {
    if (!terminalRef.current) return
@ -39,37 +41,61 @@ export default function EditorTerminal({
    })

    setTerm(terminal)
-
-    return () => {
-      if (terminal) terminal.dispose()
+    const dispose = () => {
+      terminal.dispose()
    }
+    return dispose
  }, [])

  useEffect(() => {
    if (!term) return

    if (!terminalRef.current) return
-    const fitAddon = new FitAddon()
-    term.loadAddon(fitAddon)
-    term.open(terminalRef.current)
-    fitAddon.fit()
+    if (!fitAddonRef.current) {
+      const fitAddon = new FitAddon()
+      term.loadAddon(fitAddon)
+      term.open(terminalRef.current)
+      fitAddon.fit()
+      fitAddonRef.current = fitAddon
+    }

    const disposableOnData = term.onData((data) => {
      socket.emit("terminalData", id, data)
    })

    const disposableOnResize = term.onResize((dimensions) => {
-      // const terminal_size = {
-      //   width: dimensions.cols,
-      //   height: dimensions.rows,
-      // };
-      fitAddon.fit()
+      fitAddonRef.current?.fit()
      socket.emit("terminalResize", dimensions)
    })
+    const resizeObserver = new ResizeObserver(
+      debounce((entries) => {
+        if (!fitAddonRef.current || !terminalRef.current) return

+        const entry = entries[0]
+        if (!entry) return
+
+        const { width, height } = entry.contentRect
+
+        // Only call fit if the size has actually changed
+        if (
+          width !== terminalRef.current.offsetWidth ||
+          height !== terminalRef.current.offsetHeight
+        ) {
+          try {
+            fitAddonRef.current.fit()
+          } catch (err) {
+            console.error("Error during fit:", err)
+          }
+        }
+      }, 50) // Debounce for 50ms
+    )
+
+    // start observing for resize
+    resizeObserver.observe(terminalRef.current)
    return () => {
      disposableOnData.dispose()
      disposableOnResize.dispose()
+      resizeObserver.disconnect()
    }
  }, [term, terminalRef.current])