proper layering work

src/components/Layout.tsx

@@ -1,24 +1,109 @@
 import type { JSX } from "solid-js"
-import type { ThemeColors } from "../types/settings"
+import type { ThemeColors, LayerBackgrounds } from "../types/settings"
+import { LayerIndicator } from "./LayerIndicator"
+
+type LayerConfig = {
+  depth: number
+  background: string
+}
 
 type LayoutProps = {
   header?: JSX.Element
   footer?: JSX.Element
   children?: JSX.Element
   theme?: ThemeColors
+  layerDepth?: number
 }
 
 export function Layout(props: LayoutProps) {
+  const theme = props.theme
+
+  // Get layer configuration based on depth
+  const getLayerConfig = (depth: number): LayerConfig => {
+    if (!theme?.layerBackgrounds) {
+      return { depth: 0, background: "transparent" }
+    }
+
+    const backgrounds = theme.layerBackgrounds
+    const depthMap: Record<number, LayerConfig> = {
+      0: { depth: 0, background: backgrounds.layer0 },
+      1: { depth: 1, background: backgrounds.layer1 },
+      2: { depth: 2, background: backgrounds.layer2 },
+      3: { depth: 3, background: backgrounds.layer3 },
+    }
+
+    return depthMap[depth] || { depth: 0, background: "transparent" }
+  }
+
+  // Get current layer background
+  const currentLayer = getLayerConfig(props.layerDepth || 0)
+
   return (
     <box
       flexDirection="column"
       width="100%"
       height="100%"
-      backgroundColor={props.theme?.background}
+      backgroundColor={theme?.background}
     >
-      {props.header ? <box style={{ height: 3 }}>{props.header}</box> : <text></text>}
-      <box style={{ flexGrow: 1 }}>{props.children}</box>
-      {props.footer ? <box style={{ height: 1 }}>{props.footer}</box> : <text></text>}
+      {/* Header */}
+      {props.header ? (
+        <box
+          style={{
+            height: 4,
+            backgroundColor: theme?.surface,
+          }}
+        >
+          <box style={{ padding: 1 }}>
+            {props.header}
+          </box>
+        </box>
+      ) : (
+        <box style={{ height: 4 }} />
+      )}
+
+      {/* Main content area with layer background */}
+      <box
+        style={{
+          flexGrow: 1,
+          backgroundColor: currentLayer.background,
+          paddingLeft: 2,
+          paddingRight: 2,
+        }}
+      >
+        <box style={{ flexGrow: 1 }}>
+          {props.children}
+        </box>
+      </box>
+
+      {/* Footer */}
+      {props.footer ? (
+        <box
+          style={{
+            height: 2,
+            backgroundColor: theme?.surface,
+          }}
+        >
+          <box style={{ padding: 1 }}>
+            {props.footer}
+          </box>
+        </box>
+      ) : (
+        <box style={{ height: 2 }} />
+      )}
+
+      {/* Layer indicator */}
+      {props.layerDepth !== undefined && (
+        <box
+          style={{
+            height: 1,
+            backgroundColor: theme?.surface,
+          }}
+        >
+          <box style={{ padding: 1 }}>
+            <LayerIndicator layerDepth={props.layerDepth} />
+          </box>
+        </box>
+      )}
     </box>
   )
 }