feat: add resizeable splitter feature

Author: rebase

src/App.css

@@ -183,10 +183,60 @@ body {
   background-color: var(--color-background-primary);
 }
 
+.splitter {
+  width: 1px;
+  background-color: var(--color-border-secondary);
+  cursor: col-resize;
+  flex-shrink: 0;
+  position: relative;
+  transition: background-color 0.2s ease, margin 0.2s ease;
+  z-index: 10;
+  min-height: 100%;
+}
+
+.splitter::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -6px;
+  right: -6px;
+  bottom: 0;
+  background: transparent;
+  cursor: col-resize;
+}
+
+.splitter:hover {
+  background-color: var(--color-button-hover-border);
+  width: 2px;
+  margin-left: -1px;
+  margin-right: -1px;
+}
+
+.splitter:active,
+.splitter.resizing {
+  background-color: var(--color-link-primary);
+  width: 2px;
+  margin-left: -1px;
+  margin-right: -1px;
+}
+
+.dark-theme .splitter {
+  background-color: var(--color-border-primary);
+}
+
+.dark-theme .splitter:hover {
+  background-color: var(--color-button-hover-border);
+}
+
+.dark-theme .splitter:active,
+.dark-theme .splitter.resizing {
+  background-color: var(--color-link-primary);
+}
+
 .editor-section {
   display: flex;
   flex-direction: column;
-  flex: 1 1 50%;
+  flex-shrink: 0;
   min-width: 0;
   height: 100%;
   background-color: var(--color-background-primary);
@@ -296,10 +346,6 @@ body {
   background-color: var(--color-background-primary);
 }
 
-.editor-section:first-child {
-  border-right: 1px solid var(--color-border-primary);
-}
-
 .output.error .monaco-editor .view-lines span {
   color: var(--color-error);
 }
@@ -506,13 +552,59 @@ body {
 
   .editor-section {
     flex: 1;
-    width: 100%;
+    width: 100% !important;
     min-height: 0;
+    height: auto;
   }
 
   .editor-section:first-child {
     border-right: none;
-    border-bottom: 1px solid var(--color-border-primary);
+    height: var(--left-panel-height, 50%);
+    flex: none;
+  }
+
+  .editor-section:last-child {
+    height: var(--right-panel-height, 50%);
+    flex: none;
+  }
+
+  .splitter {
+    display: block;
+    width: 100%;
+    height: 1px;
+    cursor: row-resize;
+    min-height: 1px;
+    background-color: var(--color-border-secondary);
+    transition: background-color 0.2s ease, height 0.2s ease, margin 0.2s ease;
+  }
+
+  .splitter::before {
+    top: -6px;
+    bottom: -6px;
+    left: 0;
+    right: 0;
+    cursor: row-resize;
+  }
+
+  .splitter:hover {
+    background-color: var(--color-button-hover-border);
+    height: 2px;
+    margin-top: -1px;
+    margin-bottom: -1px;
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .splitter:active,
+  .splitter.resizing {
+    background-color: var(--color-link-primary);
+    height: 2px;
+    margin-top: -1px;
+    margin-bottom: -1px;
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
   }
 }
 

src/App.tsx

@@ -207,7 +207,54 @@ function App() {
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
   const [isResetConfirmOpen, setIsResetConfirmOpen] = useState(false);
+  const [leftPanelWidth, setLeftPanelWidth] = useState(50);
+  const [isResizing, setIsResizing] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
   const editorRef = useRef<any>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth <= 768);
+
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  const handleMouseDown = (event: React.MouseEvent) => {
+    event.preventDefault();
+    setIsResizing(true);
+
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!container) return;
+
+      const containerRect = container.getBoundingClientRect();
+      const newWidth = isMobile
+        ? Math.min(Math.max(((e.clientY - containerRect.top) / containerRect.height) * 100, 15), 85)
+        : Math.min(
+            Math.max(((e.clientX - containerRect.left) / containerRect.width) * 100, 15),
+            85,
+          );
+
+      setLeftPanelWidth(newWidth);
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    document.body.style.cursor = isMobile ? 'row-resize' : 'col-resize';
+    document.body.style.userSelect = 'none';
+  };
 
   const getSystemTheme = () => {
     if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
@@ -587,8 +634,21 @@ function App() {
         </div>
 
         <div className="content-area">
-          <div className="container">
-            <div className="editor-section">
+          <div
+            className="container"
+            ref={containerRef}
+            style={
+              {
+                '--left-panel-height': `${leftPanelWidth}%`,
+                '--right-panel-height': `${100 - leftPanelWidth}%`,
+              } as React.CSSProperties
+            }>
+            <div
+              className="editor-section"
+              style={{
+                width: !isMobile ? `${leftPanelWidth}%` : '100%',
+                height: isMobile ? `${leftPanelWidth}%` : '100%',
+              }}>
               <div className={getThemeClass('editor-header', theme)}>
                 <div className="editor-actions-left">
                   <button
@@ -645,7 +705,18 @@ function App() {
                 />
               </div>
             </div>
-            <div className="editor-section">
+
+            <div
+              className={getThemeClass('splitter', theme, isResizing ? 'resizing' : '')}
+              onMouseDown={handleMouseDown}
+            />
+
+            <div
+              className="editor-section"
+              style={{
+                width: !isMobile ? `${100 - leftPanelWidth}%` : '100%',
+                height: isMobile ? `${100 - leftPanelWidth}%` : '100%',
+              }}>
               <div className={getThemeClass('editor-header', theme)}>
                 <div className="editor-actions-left">
                   <button