Add diagnostic pane coloring

- Give each top-level pane a distinct temporary diagnostic color and stripe pattern.
- Give the root app background a separate purple diagnostic color so empty space outside panes is identifiable.

app/build.gradle.kts

@@ -19,8 +19,8 @@ android {
         applicationId = "solutions.tretter.githugandroid"
         minSdk = 26
         targetSdk = 35
-        versionCode = 141
+        versionCode = 142
-        versionName = "0.1.140"
+        versionName = "0.1.141"
 
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
         vectorDrawables.useSupportLibrary = true

app/src/main/java/solutions/tretter/githugandroid/GitHugTheme.kt

@@ -6,7 +6,7 @@ import androidx.compose.ui.graphics.Color
 val PanelPrimary = Color(0xFF121212)
 val PanelSecondary = Color(0xFF1E1E1E)
 val PanelTertiary = Color(0xFF262626)
-val AppBackground = PanelSecondary
+val AppBackground = Color(0xFF2D1745)
 val TerminalBackground = Color(0xFF050505)
 val TextPrimary = Color(0xFFFFFFFF)
 val TextSecondary = Color(0xFFE6E6E6)

app/src/main/java/solutions/tretter/githugandroid/Panes.kt

@@ -18,6 +18,9 @@ import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -87,13 +90,15 @@ private fun PaneCard(
 ) {
     Card(
         modifier = modifier,
-        colors = CardDefaults.cardColors(containerColor = PanelSecondary),
+        colors = CardDefaults.cardColors(containerColor = paneDiagnosticBase(paneId)),
         shape = RoundedCornerShape(16.dp),
     ) {
         Column(
             modifier = Modifier
                 .fillMaxWidth()
-                .wrapContentHeight(),
+                .wrapContentHeight()
+                .background(paneDiagnosticBase(paneId))
+                .paneDiagnosticPattern(paneId),
         ) {
             PaneHeader(
                 paneId = paneId,
@@ -108,6 +113,8 @@ private fun PaneCard(
                 modifier = Modifier
                     .fillMaxWidth()
                     .wrapContentHeight()
+                    .background(paneDiagnosticContent(paneId))
+                    .paneDiagnosticPattern(paneId)
                     .padding(horizontal = 12.dp, vertical = 10.dp),
             ) {
                 content()
@@ -127,7 +134,7 @@ private fun CollapsedPaneCard(
 ) {
     Card(
         modifier = Modifier.fillMaxWidth(),
-        colors = CardDefaults.cardColors(containerColor = PanelSecondary),
+        colors = CardDefaults.cardColors(containerColor = paneDiagnosticBase(paneId)),
         shape = RoundedCornerShape(16.dp),
     ) {
         PaneHeader(
@@ -155,7 +162,8 @@ private fun PaneHeader(
     Row(
         modifier = Modifier
             .fillMaxWidth()
-            .background(if (collapsed) PanelTertiary else PanelPrimary)
+            .background(if (collapsed) paneDiagnosticCollapsed(paneId) else paneDiagnosticHeader(paneId))
+            .paneDiagnosticPattern(paneId)
             .padding(horizontal = 10.dp, vertical = 6.dp),
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.SpaceBetween,
@@ -169,6 +177,50 @@ private fun PaneHeader(
     }
 }
 
+private fun paneDiagnosticBase(paneId: PaneId): Color = when (paneId) {
+    PaneId.EXERCISE -> Color(0xFF17345C)
+    PaneId.TERMINAL -> Color(0xFF4A1B1B)
+    PaneId.VISUAL -> Color(0xFF173F2A)
+    PaneId.LEVELS -> Color(0xFF4A3A12)
+}
+
+private fun paneDiagnosticContent(paneId: PaneId): Color = when (paneId) {
+    PaneId.EXERCISE -> Color(0xFF1C477B)
+    PaneId.TERMINAL -> Color(0xFF612424)
+    PaneId.VISUAL -> Color(0xFF1C5739)
+    PaneId.LEVELS -> Color(0xFF654F16)
+}
+
+private fun paneDiagnosticHeader(paneId: PaneId): Color = when (paneId) {
+    PaneId.EXERCISE -> Color(0xFF0F2748)
+    PaneId.TERMINAL -> Color(0xFF351313)
+    PaneId.VISUAL -> Color(0xFF102F20)
+    PaneId.LEVELS -> Color(0xFF372B0D)
+}
+
+private fun paneDiagnosticCollapsed(paneId: PaneId): Color = paneDiagnosticContent(paneId)
+
+private fun Modifier.paneDiagnosticPattern(paneId: PaneId): Modifier = drawBehind {
+    val stripeColor = when (paneId) {
+        PaneId.EXERCISE -> Color(0x6684C5FF)
+        PaneId.TERMINAL -> Color(0x66FF9A9A)
+        PaneId.VISUAL -> Color(0x667CFFB1)
+        PaneId.LEVELS -> Color(0x66FFE082)
+    }
+    val strokeWidth = 2.dp.toPx()
+    val spacing = 34.dp.toPx()
+    var start = -size.height
+    while (start < size.width) {
+        drawLine(
+            color = stripeColor,
+            start = Offset(start, size.height),
+            end = Offset(start + size.height, 0f),
+            strokeWidth = strokeWidth,
+        )
+        start += spacing
+    }
+}
+
 @Composable
 private fun HeaderActionButton(
     label: String,