feat(editor): restructure workspace layout and add editor footer component

src/app/(app)/playground/@workspace/@editor/components/footer.tsx

@@ -4,11 +4,11 @@ import { cn } from "@/lib/utils";
 import { useEffect, useState } from "react";
 import { useCodeEditorState } from "@/store/useCodeEditor";
 
-interface WorkspaceFooterProps {
+interface WorkspaceEditorFooterProps {
   className?: string;
 }
 
-export default function WorkspaceFooter({ className, ...props }: WorkspaceFooterProps) {
+export default function WorkspaceEditorFooter({ className, ...props }: WorkspaceEditorFooterProps) {
   const { editor } = useCodeEditorState();
   const [position, setPosition] = useState<{ lineNumber: number; column: number } | null>(null);
 

src/app/(app)/playground/@workspace/@editor/layout.tsx

@@ -0,0 +1,14 @@
+import WorkspaceEditorFooter from "@/app/(app)/playground/@workspace/@editor/components/footer";
+
+interface WorkspaceEditorLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function WorkspaceEditorLayout({ children }: WorkspaceEditorLayoutProps) {
+  return (
+    <div className="h-full flex flex-col">
+      {children}
+      <WorkspaceEditorFooter />
+    </div>
+  );
+}

src/app/(app)/playground/@workspace/@editor/page.tsx

@@ -1,5 +1,5 @@
 import CodeEditor from "@/components/code-editor";
 
-export default function WorkspacePage() {
+export default function WorkspaceEditorPage() {
   return <CodeEditor />;
 }

src/app/(app)/playground/@workspace/layout.tsx

@@ -1,35 +1,33 @@
-import { CodeXmlIcon } from "lucide-react";
+import { SquarePenIcon } from "lucide-react";
-import WorkspaceFooter from "./components/footer";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 interface WorkspaceLayoutProps {
-  children: React.ReactNode;
+  editor: React.ReactNode;
 }
 
-export default function WorkspaceLayout({ children }: WorkspaceLayoutProps) {
+export default function WorkspaceLayout({ editor }: WorkspaceLayoutProps) {
   return (
-    <Tabs defaultValue="code" className="h-full flex flex-col">
+    <Tabs defaultValue="editor" className="h-full flex flex-col">
       <ScrollArea className="h-9 flex-none bg-muted px-1">
         <TabsList className="gap-1 bg-transparent">
           <TabsTrigger
-            value="code"
+            value="editor"
             className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-full data-[state=active]:shadow-none"
           >
-            <CodeXmlIcon
+            <SquarePenIcon
               className="-ms-0.5 me-1.5 opacity-60"
               size={16}
               aria-hidden="true"
             />
-            Code
+            Editor
           </TabsTrigger>
         </TabsList>
         <ScrollBar orientation="horizontal" />
       </ScrollArea>
-      <TabsContent value="code" className="grow mt-0">
+      <TabsContent value="editor" className="grow mt-0">
-        {children}
+        {editor}
       </TabsContent>
-      <WorkspaceFooter />
     </Tabs>
   );
 }