generally better

src/components/BinaryEditor.tsx

@@ -15,6 +15,7 @@ import {
   undo,
   canUndo,
 } from '../stores/imageStore';
+import ActionButtons from './ActionButtons';
 
 export default function BinaryEditor() {
   const metadata = useStore(fileMetadata);
@@ -26,8 +27,6 @@ export default function BinaryEditor() {
   const chunkSize = useStore(hexChunkSize);
   const canUndoState = useStore(canUndo);
 
-  const [jumpToChunk, setJumpToChunk] = useState('');
-  const [jumpToAddress, setJumpToAddress] = useState('');
   const [hexInput, setHexInput] = useState('');
   const [editingByte, setEditingByte] = useState<{ row: number; col: number; value: string; globalOffset: number } | null>(null);
   const [editingAscii, setEditingAscii] = useState<{ row: number; col: number; value: string; globalOffset: number } | null>(null);
@@ -148,6 +147,7 @@ export default function BinaryEditor() {
     setTimeout(() => compileImage(), 100);
   }, [originalData, modifiedData, metadata]);
 
+
   const handleHexInputChange = (
     event: React.ChangeEvent<HTMLTextAreaElement>
   ) => {
@@ -465,40 +465,6 @@ export default function BinaryEditor() {
     return rows;
   };
 
-  const handleJumpToChunk = (e: React.FormEvent) => {
-    e.preventDefault();
-    const chunkIndex = parseInt(jumpToChunk) - 1;
-    if (!isNaN(chunkIndex) && chunkIndex >= 0 && chunkIndex < totalChunks) {
-      // Calculate the address of the chunk and scroll to it
-      const chunkAddress = chunkIndex * chunkSize;
-      const targetRow = Math.floor(chunkAddress / BYTES_PER_ROW);
-      const targetScrollTop = targetRow * ROW_HEIGHT;
-      
-      if (scrollContainerRef.current) {
-        scrollContainerRef.current.scrollTop = targetScrollTop;
-      }
-      setScrollTop(targetScrollTop);
-      setJumpToChunk('');
-    }
-  };
-
-  const handleJumpToAddress = (e: React.FormEvent) => {
-    e.preventDefault();
-    const address = parseInt(jumpToAddress, 16);
-    if (!isNaN(address) && metadata) {
-      if (address >= 0 && address < metadata.fileSize) {
-        // For virtual scrolling, calculate the row and scroll to it
-        const targetRow = Math.floor(address / BYTES_PER_ROW);
-        const targetScrollTop = targetRow * ROW_HEIGHT;
-        
-        if (scrollContainerRef.current) {
-          scrollContainerRef.current.scrollTop = targetScrollTop;
-        }
-        setScrollTop(targetScrollTop);
-      }
-      setJumpToAddress('');
-    }
-  };
 
 
   if (!metadata) {
@@ -548,30 +514,6 @@ export default function BinaryEditor() {
 
       <div className="hex-editor-content">
         <div className="hex-controls">
-          <div className="control-row">
-            <form onSubmit={handleJumpToChunk} className="jump-form">
-              <input
-                type="number"
-                value={jumpToChunk}
-                onChange={e => setJumpToChunk(e.target.value)}
-                placeholder="Jump to chunk..."
-                className="jump-input"
-                min="1"
-                max={totalChunks}
-              />
-            </form>
-            
-            <form onSubmit={handleJumpToAddress} className="jump-form">
-              <input
-                type="text"
-                value={jumpToAddress}
-                onChange={e => setJumpToAddress(e.target.value)}
-                placeholder="Go to address (hex)"
-                className="jump-input address-input"
-              />
-            </form>
-          </div>
-
           <div className="chunk-info">
             <small>
               File: {metadata.fileSize} bytes • Scroll position: {Math.floor(scrollTop / ROW_HEIGHT * BYTES_PER_ROW).toString(16).toUpperCase()}
@@ -579,80 +521,11 @@ export default function BinaryEditor() {
             </small>
           </div>
 
-          <div className="action-buttons">
-            <button
-              onClick={compileImage}
-              className="action-button compile"
-              disabled={compiling}
-              title="Update Image"
-            >
-              ↻
-            </button>
-            <button
-              onClick={() => handleRandomize(1)}
-              className="action-button random"
-              disabled={compiling || !originalData}
-              title="Random (Visible)"
-            >
-              1
-            </button>
-            <button
-              onClick={() => handleRandomize(10)}
-              className="action-button random"
-              disabled={compiling || !originalData}
-              title="Random × 10 (Visible)"
-            >
-              10
-            </button>
-            <button
-              onClick={() => handleRandomize(100)}
-              className="action-button random"
-              disabled={compiling || !originalData}
-              title="Random × 100 (Visible)"
-            >
-              100
-            </button>
-            <button
-              onClick={() => handleGlobalRandomize(1)}
-              className="action-button global-random"
-              disabled={compiling || !originalData}
-              title="Global Random"
-            >
-              1
-            </button>
-            <button
-              onClick={() => handleGlobalRandomize(10)}
-              className="action-button global-random"
-              disabled={compiling || !originalData}
-              title="Global Random × 10"
-            >
-              10
-            </button>
-            <button
-              onClick={() => handleGlobalRandomize(100)}
-              className="action-button global-random"
-              disabled={compiling || !originalData}
-              title="Global Random × 100"
-            >
-              100
-            </button>
-            <button
-              onClick={handleUndo}
-              className="action-button undo"
-              disabled={compiling || !canUndoState}
-              title="Undo"
-            >
-              ↶
-            </button>
-            <button
-              onClick={resetToOriginal}
-              className="action-button reset"
-              disabled={compiling}
-              title="Reset"
-            >
-              ⟲
-            </button>
-          </div>
+          <ActionButtons
+            handleRandomize={handleRandomize}
+            handleGlobalRandomize={handleGlobalRandomize}
+            virtualScrollData={virtualScrollData}
+          />
         </div>
 
         <div className="hex-view-container">