clean up panels a little (#18)

src/App.tsx

@@ -20,6 +20,7 @@ import { SketchPlane } from './components/SketchPlane'
 import { Logs } from './components/Logs'
 import { AxisIndicator } from './components/AxisIndicator'
 import { RenderViewerArtifacts } from './components/RenderViewerArtifacts'
+import { PanelHeader } from './components/PanelHeader'
 
 const OrrthographicCamera = OrthographicCamera as any
 
@@ -147,16 +148,17 @@ function App() {
   }, [code, ast])
   return (
     <div className="h-screen">
-      <Allotment>
+      <Allotment snap={true}>
-        <Logs />
+        <Allotment vertical defaultSizes={[4, 1]}>
           <div className="h-full flex flex-col items-start">
-          <button
+            <PanelHeader title="Code Editor" />
+            {/* <button
               disabled={!shouldFormat}
               onClick={formatCode}
               className={`${!shouldFormat && 'text-gray-300'}`}
             >
               format
-          </button>
+            </button> */}
             <div className="bg-red h-full w-full overflow-auto">
               <CodeMirror
                 className="h-full"
@@ -168,7 +170,10 @@ function App() {
               />
             </div>
           </div>
+          <Logs />
+        </Allotment>
         <div className="h-full">
+          <PanelHeader title="Drafting Board" />
           <Toolbar />
           <div className="border h-full border-gray-300 relative">
             <div className="absolute inset-0">

src/components/Logs.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react'
 import { useStore } from '../useStore'
+import { PanelHeader } from './PanelHeader'
 
 export const Logs = () => {
   const { logs, resetLogs } = useStore(({ logs, resetLogs }) => ({
@@ -13,6 +14,8 @@ export const Logs = () => {
     }
   }, [logs])
   return (
+    <div>
+      <PanelHeader title="Logs" />
       <div className="h-full relative">
         <div className="absolute inset-0 flex flex-col items-start">
           <button onClick={resetLogs}>reset</button>
@@ -30,5 +33,6 @@ export const Logs = () => {
           </div>
         </div>
       </div>
+    </div>
   )
 }

src/components/PanelHeader.tsx

@@ -0,0 +1,7 @@
+export const PanelHeader = ({ title }: { title: string }) => {
+  return (
+    <div className="font-mono text-xs bg-stone-100 w-full pl-4 h-[30px] text-stone-700 flex items-center">
+      {title}
+    </div>
+  )
+}