refactor: components and improve responsiveness across UI

package.json

@@ -34,7 +34,10 @@
 		"nanostores": "^1.0.1",
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
-		"tailwindcss": "^4.1.16"
+		"react-resizable-panels": "^3.0.6",
+		"sharp": "^0.34.4",
+		"tailwindcss": "^4.1.16",
+		"zustand": "^5.0.8"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.3.2",

src/features/content/enums/OutputVariant.enum.ts

@@ -0,0 +1,4 @@
+export enum OutputVariant {
+	Stdout = "stdout",
+	Stderr = "stderr",
+}

src/features/content/enums/PanelVariant.enum.ts

@@ -0,0 +1,4 @@
+export enum PanelVariant {
+	ContentToEditor = "content-playground",
+	EditorToTerminal = "editor-terminal",
+}

src/features/content/hooks/usePanelContainerBreakpoints.ts

@@ -0,0 +1,14 @@
+import { useMemo } from "react"
+
+export default function usePanelContainerBreakpoints(width: number) {
+	const size = useMemo(() => {
+		if (width >= 1440) return 4
+		if (width >= 1024) return 5
+		if (width >= 768) return 8
+		if (width >= 640) return 10
+		if (width >= 480) return 14
+		return 18
+	}, [width])
+
+	return { size }
+}

src/features/content/react/ReactCodeEditor.tsx

@@ -0,0 +1,29 @@
+import CodeMirror from "@uiw/react-codemirror"
+import { useCallback } from "react"
+import { useRustCompilerStore } from "~/features/content/stores/useRustCompilerStore.ts"
+import { rust } from "~/helpers/config"
+import { gruvbox } from "~/helpers/theme"
+
+export default function ReactCodeEditor() {
+	const code = useRustCompilerStore((state) => state.code)
+	const setCode = useRustCompilerStore((state) => state.setCode)
+
+	const onChange = useCallback(
+		(val: string) => {
+			setCode(val)
+		},
+		[setCode],
+	)
+
+	return (
+		<CodeMirror
+			value={code}
+			extensions={[rust()]}
+			theme={gruvbox}
+			onChange={onChange}
+			height="100%"
+			className="h-full"
+			id="editor"
+		/>
+	)
+}

src/features/content/react/ReactCollapsiblePanel.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react"
+
+interface CollapsiblePanelProps {
+	icon: ReactNode
+	title: string
+	children: ReactNode
+	isCollapsed?: boolean
+}
+
+export default function ReactCollapsiblePanel({ icon, title, children, isCollapsed = false }: CollapsiblePanelProps) {
+	if (isCollapsed) {
+		return (
+			<div className="flex h-full min-h-0 flex-col items-center justify-between py-4">
+				<div className="flex flex-col items-center gap-3">
+					<div className="text-primary opacity-80">{icon}</div>
+					<span className="text-sm font-medium [writing-mode:vertical-rl] tracking-wider opacity-90">{title}</span>
+				</div>
+			</div>
+		)
+	}
+
+	return (
+		<div className="flex h-full min-h-0 flex-col">
+			<div className="flex items-center gap-2 p-2 border-b border-stroke-color">
+				{icon}
+				<span className="text-sm font-medium">{title}</span>
+			</div>
+			{children}
+		</div>
+	)
+}

src/features/content/react/ReactExecuteRust.tsx

@@ -0,0 +1,16 @@
+import { IconPlayerPlay } from "@tabler/icons-react"
+import { useRustCompilerStore } from "~/features/content/stores/useRustCompilerStore.ts"
+
+export default function ReactExecuteRust() {
+	const execute = useRustCompilerStore((state) => state.execute)
+	return (
+		<button
+			onClick={execute}
+			type={"button"}
+			className="md:absolute md:left-1/2 md:-translate-x-1/2 ml-auto flex items-center gap-1.5 bg-neutral-500/40 px-2 py-1 rounded-md
+    hover:bg-neutral-500/70 text-sm cursor-pointer"
+		>
+			<IconPlayerPlay size={18} /> Ejecutar
+		</button>
+	)
+}

src/features/content/react/ReactMarkdownContainer.tsx

@@ -0,0 +1,21 @@
+import { IconLicense } from "@tabler/icons-react"
+import type { ReactNode } from "react"
+import { PanelVariant } from "~/features/content/enums/PanelVariant.enum.ts"
+import ReactCollapsiblePanel from "~/features/content/react/ReactCollapsiblePanel.tsx"
+import { usePanelStore } from "~/features/content/stores/Panel.store.ts"
+
+interface ReactMarkdownContainerProps {
+	children: ReactNode
+}
+
+export default function ReactMarkdownContainer({ children }: ReactMarkdownContainerProps) {
+	const isCollapsed = usePanelStore((state) => state.isCollapsed(`${PanelVariant.ContentToEditor}-primary`))
+
+	return (
+		<ReactCollapsiblePanel isCollapsed={isCollapsed} icon={<IconLicense size={16} />} title="Contenido">
+			<article className="scroll-container m-2 overflow-y-auto p-2">
+				<article className="mb-6 text-secondary min-w-[400px]">{children}</article>
+			</article>
+		</ReactCollapsiblePanel>
+	)
+}

src/features/content/react/ReactPanelContainer.tsx

@@ -0,0 +1,81 @@
+import { IconGripVertical } from "@tabler/icons-react"
+import { type ReactNode, useEffect, useMemo, useRef } from "react"
+import { type ImperativePanelHandle, Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"
+import { PanelVariant } from "~/features/content/enums/PanelVariant.enum.ts"
+import usePanelContainerBreakpoints from "~/features/content/hooks/usePanelContainerBreakpoints.ts"
+import { usePanelStore } from "~/features/content/stores/Panel.store.ts"
+import useWindowSize from "~/features/shared/hooks/useWindowSize.ts"
+
+interface PanelContainerProps {
+	direction: "horizontal" | "vertical"
+	defaultLayout: [number, number]
+	first?: ReactNode
+	second?: ReactNode
+	variant: PanelVariant
+}
+
+export default function ReactPanelContainer({
+	first,
+	second,
+	direction = "horizontal",
+	defaultLayout = [50, 50],
+	variant,
+}: PanelContainerProps) {
+	const { width } = useWindowSize()
+	const { size } = usePanelContainerBreakpoints(width)
+	const offset = useMemo(() => 4, [])
+
+	const registerPanel = usePanelStore((state) => state.registerPanel)
+	const unregisterPanel = usePanelStore((state) => state.unregisterPanel)
+	const setCollapsed = usePanelStore((state) => state.setCollapsed)
+
+	const primaryId = `${variant}-primary`
+	const secondaryId = `${variant}-secondary`
+
+	const primaryPanelRef = useRef<ImperativePanelHandle>(null)
+	const secondaryPanelRef = useRef<ImperativePanelHandle>(null)
+
+	useEffect(() => {
+		if (primaryPanelRef.current) registerPanel(primaryId, primaryPanelRef.current)
+		if (secondaryPanelRef.current) registerPanel(secondaryId, secondaryPanelRef.current)
+
+		return () => {
+			unregisterPanel(primaryId)
+			unregisterPanel(secondaryId)
+		}
+	}, [registerPanel, unregisterPanel, primaryId, secondaryId])
+
+	return (
+		<PanelGroup direction={direction} className="h-full min-h-0 grow">
+			<Panel
+				ref={primaryPanelRef}
+				defaultSize={defaultLayout[0]}
+				className="min-h-0"
+				minSize={size + offset}
+				collapsible
+				collapsedSize={size}
+				onCollapse={() => setCollapsed(primaryId, true)}
+				onExpand={() => setCollapsed(primaryId, false)}
+			>
+				{first}
+			</Panel>
+			<PanelResizeHandle className={"flex justify-center items-center"}>
+				<div className={"bg-primary mx-auto cursor-col-resize grow flex items-center justify-center"}>
+					<IconGripVertical size={14} className={direction === "vertical" ? "rotate-90" : ""} />
+				</div>
+			</PanelResizeHandle>
+			<Panel
+				ref={secondaryPanelRef}
+				defaultSize={defaultLayout[1]}
+				className="min-h-0"
+				minSize={size + offset}
+				collapsible
+				collapsedSize={size}
+				onCollapse={() => setCollapsed(secondaryId, true)}
+				onExpand={() => setCollapsed(secondaryId, false)}
+			>
+				{second}
+			</Panel>
+		</PanelGroup>
+	)
+}

src/features/content/react/ReactPanelHeader.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react"
+
+interface ReactPanelHeaderProps {
+	icon: ReactNode
+	title: string
+}
+
+export default function ReactPanelHeader({ icon, title }: ReactPanelHeaderProps) {
+	return (
+		<div className="flex items-center gap-2 px-4 h-10 bg-light-bg border-b border-stroke-color">
+			{icon}
+			<span className="font-medium">{title}</span>
+		</div>
+	)
+}