feat(workspace): add WorkspaceFooter component for playground

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

@@ -0,0 +1,43 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { useEffect, useState } from "react";
+import { useCodeEditorState } from "@/store/useCodeEditor";
+
+interface WorkspaceFooterProps {
+  className?: string;
+}
+
+export default function WorkspaceFooter({ className, ...props }: WorkspaceFooterProps) {
+  const { editor } = useCodeEditorState();
+  const [position, setPosition] = useState<{ lineNumber: number; column: number } | null>(null);
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const initialPosition = editor.getPosition();
+    if (initialPosition) {
+      setPosition({
+        lineNumber: initialPosition.lineNumber,
+        column: initialPosition.column,
+      });
+    }
+
+    const dispose = editor.onDidChangeCursorPosition((e) => {
+      setPosition({
+        lineNumber: e.position.lineNumber,
+        column: e.position.column,
+      });
+    });
+
+    return () => dispose.dispose();
+  }, [editor]);
+
+  return (
+    <footer {...props} className={cn("h-9 flex-none bg-muted px-3 py-2", className)}>
+      <div className="flex justify-end">
+        {position ? `Row ${position.lineNumber}, Column ${position.column}` : "Row -, Column -"}
+      </div>
+    </footer>
+  );
+}

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

@@ -1,4 +1,5 @@
 import { CodeXmlIcon } 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";
 
@@ -28,6 +29,7 @@ export default function WorkspaceLayout({ children }: WorkspaceLayoutProps) {
       <TabsContent value="code" className="grow mt-0">
         {children}
       </TabsContent>
+      <WorkspaceFooter />
     </Tabs>
   );
 }