getting terminal colors working

src/components/Layout.tsx

@@ -1,5 +1,6 @@
 import type { JSX } from "solid-js"
 import type { RGBA } from "@opentui/core"
+import { Show, createMemo } from "solid-js"
 import { useTheme } from "../context/ThemeContext"
 import { LayerIndicator } from "./LayerIndicator"
 
@@ -16,52 +17,50 @@ type LayoutProps = {
 }
 
 export function Layout(props: LayoutProps) {
-  const { theme } = useTheme()
+  const context = useTheme()
 
-  // Get layer configuration based on depth
-  const getLayerConfig = (depth: number): LayerConfig => {
-    const backgrounds = theme.layerBackgrounds
+  // Get layer configuration based on depth - wrapped in createMemo for reactivity
+  const currentLayer = createMemo((): LayerConfig => {
+    const depth = props.layerDepth || 0
+    const backgrounds = context.theme.layerBackgrounds
     const depthMap: Record<number, LayerConfig> = {
-      0: { depth: 0, background: backgrounds?.layer0 ?? theme.background },
-      1: { depth: 1, background: backgrounds?.layer1 ?? theme.backgroundPanel },
-      2: { depth: 2, background: backgrounds?.layer2 ?? theme.backgroundElement },
-      3: { depth: 3, background: backgrounds?.layer3 ?? theme.backgroundMenu },
+      0: { depth: 0, background: backgrounds?.layer0 ?? context.theme.background },
+      1: { depth: 1, background: backgrounds?.layer1 ?? context.theme.backgroundPanel },
+      2: { depth: 2, background: backgrounds?.layer2 ?? context.theme.backgroundElement },
+      3: { depth: 3, background: backgrounds?.layer3 ?? context.theme.backgroundMenu },
     }
 
-    return depthMap[depth] || { depth: 0, background: theme.background }
-  }
-
-  // Get current layer background
-  const currentLayer = getLayerConfig(props.layerDepth || 0)
+    return depthMap[depth] || { depth: 0, background: context.theme.background }
+  })
 
+  // Note: No need for a ready check here - the ThemeProvider uses
+  // createSimpleContext which gates children rendering until ready
   return (
     <box
       flexDirection="column"
       width="100%"
       height="100%"
-      backgroundColor={theme.background}
+      backgroundColor={context.theme.background}
     >
       {/* Header */}
-      {props.header ? (
+      <Show when={props.header} fallback={<box style={{ height: 4 }} />}>
         <box
           style={{
             height: 4,
-            backgroundColor: theme.surface ?? theme.backgroundPanel,
+            backgroundColor: context.theme.surface ?? context.theme.backgroundPanel,
           }}
         >
           <box style={{ padding: 1 }}>
             {props.header}
           </box>
         </box>
-      ) : (
-        <box style={{ height: 4 }} />
-      )}
+      </Show>
 
       {/* Main content area with layer background */}
       <box
         style={{
           flexGrow: 1,
-          backgroundColor: currentLayer.background,
+          backgroundColor: currentLayer().background,
           paddingLeft: 2,
           paddingRight: 2,
         }}
@@ -72,34 +71,32 @@ export function Layout(props: LayoutProps) {
       </box>
 
       {/* Footer */}
-      {props.footer ? (
+      <Show when={props.footer} fallback={<box style={{ height: 2 }} />}>
         <box
           style={{
             height: 2,
-            backgroundColor: theme.surface ?? theme.backgroundPanel,
+            backgroundColor: context.theme.surface ?? context.theme.backgroundPanel,
           }}
         >
           <box style={{ padding: 1 }}>
             {props.footer}
           </box>
         </box>
-      ) : (
-        <box style={{ height: 2 }} />
-      )}
+      </Show>
 
       {/* Layer indicator */}
-      {props.layerDepth !== undefined && (
+      <Show when={props.layerDepth !== undefined}>
         <box
           style={{
             height: 1,
-            backgroundColor: theme.surface ?? theme.backgroundPanel,
+            backgroundColor: context.theme.surface ?? context.theme.backgroundPanel,
           }}
         >
           <box style={{ padding: 1 }}>
-            <LayerIndicator layerDepth={props.layerDepth} />
+            <LayerIndicator layerDepth={props.layerDepth as number} />
           </box>
         </box>
-      )}
+      </Show>
     </box>
   )
 }