UI progress

page/index.html

@@ -12,6 +12,8 @@
 
     <title>Sogen - Windows User Space Emulator</title>
 
+    <meta name="color-scheme" content="dark">
+
     <meta
       name="description"
       content="Sogen is a high-performance Windows user space emulator that can emulate windows processes. It is ideal for security-, DRM- or malware research."

page/src/App.css

@@ -4,35 +4,44 @@ html {
 
 @media (pointer: fine) {
   ::-webkit-scrollbar {
-    width: 20px;
+    width: 14px;
+    height: 14px;
   }
 
   ::-webkit-scrollbar-track {
-    background-color: transparent;
+    background: transparent;
   }
 
   ::-webkit-scrollbar-thumb {
     background-color: rgba(97, 97, 97, 0.7);
     border-radius: 20px;
-    min-height: 50px;
-    border: 6px solid transparent;
+    border: 4px solid transparent;
     background-clip: content-box;
     transition: all 0.1s linear;
+    min-height: 50px;
   }
 
   ::-webkit-scrollbar-thumb:hover {
     background-color: rgba(97, 97, 97, 0.9);
   }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
 }
 
 button {
   cursor: pointer;
 }
 
+.resizable-cell,
+.terminal-output span {
+  padding: 4px;
+}
+
 .terminal-output {
-  line-height: 1.5;
   font-weight: 600;
-  font-size: 1.05em;
+  font-size: 1.0em;
   font-family: monospace;
   height: 100%;
 }

page/src/Playground.tsx

@@ -8,7 +8,7 @@ import {
   SidebarProvider,
   SidebarTrigger,
 } from "@/components/ui/sidebar";
-import { Button } from "./components/ui/button";
+import { Button } from "@/components/ui/button";
 
 import { Emulator, UserFile, EmulationState } from "./emulator";
 import { getFilesystem } from "./filesystem";
@@ -18,14 +18,19 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "./components/ui/popover";
+} from "@/components/ui/popover";
 
 import { createDefaultSettings } from "./settings";
-import { SettingsMenu } from "./components/settings-menu";
+import { SettingsMenu } from "@/components/settings-menu";
 
 import { PlayFill, StopFill, GearFill, PauseFill } from "react-bootstrap-icons";
-import { StatusIndicator } from "./components/status-indicator";
+import { StatusIndicator } from "@/components/status-indicator";
 import { Header } from "./Header";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
 
 function selectAndReadFile(): Promise<UserFile> {
   return new Promise((resolve, reject) => {
@@ -117,19 +122,19 @@ export function Playground() {
       <SidebarProvider defaultOpen={false}>
         <AppSidebar />
         <SidebarInset className="h-[100dvh]">
-          <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 overflow-y-auto">
-            <SidebarTrigger className="-ml-1" />
-            <Separator orientation="vertical" className="mr-2 h-4" />
-            <Button onClick={() => createEmulator()}>
+          <header className="flex shrink-0 items-center gap-2 border-b p-2 overflow-y-auto">
+            <SidebarTrigger />
+            <Separator orientation="vertical" className="h-4" />
+            <Button size="sm" onClick={() => createEmulator()}>
               <PlayFill /> Run Sample
             </Button>
-            <Button onClick={() => loadAndRunUserFile()}>
+            <Button size="sm" onClick={() => loadAndRunUserFile()}>
               <PlayFill /> Run your .exe
             </Button>
-            <Button variant="secondary" onClick={() => emulator?.stop()}>
+            <Button size="sm" variant="secondary" onClick={() => emulator?.stop()}>
               <StopFill /> Stop Emulation
             </Button>
-            <Button variant="secondary" onClick={toggleEmulatorState}>
+            <Button size="sm" variant="secondary" onClick={toggleEmulatorState}>
               {isEmulatorPaused() ? (
                 <>
                   <PlayFill /> Resume Emulation
@@ -143,7 +148,7 @@ export function Playground() {
 
             <Popover>
               <PopoverTrigger asChild>
-                <Button variant="secondary">
+                <Button size="sm" variant="secondary">
                   <GearFill /> Settings
                 </Button>
               </PopoverTrigger>
@@ -157,8 +162,35 @@ export function Playground() {
               />
             </div>
           </header>
-          <div className="flex flex-1 flex-col gap-4 p-4 overflow-auto">
-            <Output ref={output} />
+          <div className="flex flex-1 flex-col overflow-auto">
+            <ResizablePanelGroup direction="horizontal" autoSaveId="debugger-panel-group">
+              {/* Left */}
+              <ResizablePanel className="resizable-cell">Disassembly</ResizablePanel>
+              <ResizableHandle />
+              {/* Middle */}
+              <ResizablePanel>
+                <ResizablePanelGroup direction="vertical" autoSaveId="debugger-panel-middle-group">
+                  {/* Middle - Top */}
+                  <ResizablePanel>
+                    <Output ref={output} />
+                  </ResizablePanel>
+                  <ResizableHandle />
+                  {/* Middle - Bottom */}
+                  <ResizablePanel className="resizable-cell">Memory</ResizablePanel>
+                </ResizablePanelGroup>
+              </ResizablePanel>
+              <ResizableHandle />
+              {/* Right */}
+              <ResizablePanel>
+                <ResizablePanelGroup direction="vertical" autoSaveId="debugger-panel-right-group">
+                  {/* Right - Top */}
+                  <ResizablePanel className="resizable-cell">Registers</ResizablePanel>
+                  <ResizableHandle />
+                  {/* Right - Bottom */}
+                  <ResizablePanel className="resizable-cell">Stack</ResizablePanel>
+                </ResizablePanelGroup>
+              </ResizablePanel>
+            </ResizablePanelGroup>
           </div>
         </SidebarInset>
       </SidebarProvider>

page/src/components/output.tsx

@@ -238,7 +238,7 @@ export class Output extends React.Component<OutputProps, FullOutputState> {
           width={this.state.width}
           height={this.state.height}
           itemCount={this.state.lines.length}
-          itemSize={20}
+          itemSize={16}
         >
           {({ index, style }) => {
             const line = this.state.lines[index];