fix(mcp): make Add Server + Catalog headers read distinctly from buttons (#706)

* fix(mcp): make Add Server + Catalog headers read distinctly from buttons

Both section headers reused the shared SectionHeader, which paints the
title in primary/bold — so each header row looked like a tappable
button next to its trailing TextButton. Add a scoped McpSectionHeader
with a distinct leading icon (➕ Add / 🗄 Explore) and a neutral
onSurface bold title, so they read as headers and look different
from each other.

* fix(mcp): give section header row + action button distinct backgrounds

- Whole header row now sits on a surfaceContainerLow rounded (12dp) surface
  so it reads as a contained section header, not bare text.
- The trailing New/Browse action uses secondaryContainer (onSecondaryContainer
  text) — a clearly different color from the row background, so button
  vs header are visually distinct.

---------

Co-authored-by: M57 <hy4ri@users.noreply.github.com>

app/src/main/java/com/m57/hermescontrol/ui/mcp/McpServersScreen.kt

@@ -1,6 +1,7 @@
 package com.m57.hermescontrol.ui.mcp
 
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -17,6 +18,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
@@ -26,6 +28,7 @@ import androidx.compose.material.icons.filled.RestartAlt
 import androidx.compose.material.icons.filled.Science
 import androidx.compose.material.icons.filled.Storage
 import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.CircularProgressIndicator
@@ -50,6 +53,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
@@ -68,7 +72,6 @@ import com.m57.hermescontrol.ui.common.ErrorState
 import com.m57.hermescontrol.ui.common.HermesScaffold
 import com.m57.hermescontrol.ui.common.NavIcon
 import com.m57.hermescontrol.ui.common.SearchBar
-import com.m57.hermescontrol.ui.common.SectionHeader
 import com.m57.hermescontrol.ui.common.SkeletonListState
 import com.m57.hermescontrol.ui.common.StatusBadge
 import com.m57.hermescontrol.ui.common.StatusBadgeType
@@ -206,6 +209,45 @@ fun McpServersScreen(
     }
 }
 
+// ── Section header (MCP-specific: distinct icon + neutral title so it reads
+// as a header, not a button) ──────────────────────────────────────────────
+@Composable
+private fun McpSectionHeader(
+    icon: ImageVector,
+    title: String,
+    trailing: (@Composable () -> Unit)? = null,
+) {
+    val spacing = LocalSpacing.current
+    Row(
+        modifier =
+            Modifier
+                .fillMaxWidth()
+                .background(
+                    color = MaterialTheme.colorScheme.surfaceContainerLow,
+                    shape = RoundedCornerShape(12.dp),
+                ).padding(horizontal = spacing.md, vertical = spacing.sm),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            Icon(
+                imageVector = icon,
+                contentDescription = null,
+                modifier = Modifier.size(18.dp),
+                tint = MaterialTheme.colorScheme.primary,
+            )
+            Spacer(modifier = Modifier.width(spacing.sm))
+            Text(
+                text = title,
+                style = MaterialTheme.typography.titleSmall,
+                color = MaterialTheme.colorScheme.onSurface,
+                fontWeight = FontWeight.Bold,
+            )
+        }
+        trailing?.invoke()
+    }
+}
+
 // ── Sections ──────────────────────────────────────────────────────
 
 @Composable
@@ -214,10 +256,18 @@ private fun AddServerSection(
     viewModel: McpServersViewModel,
     spacing: com.m57.hermescontrol.theme.Spacing,
 ) {
-    SectionHeader(
+    McpSectionHeader(
+        icon = Icons.Filled.Add,
         title = stringResource(R.string.mcp_servers_add_server),
         trailing = {
-            TextButton(onClick = { viewModel.toggleAddForm() }) {
+            TextButton(
+                onClick = { viewModel.toggleAddForm() },
+                colors =
+                    ButtonDefaults.textButtonColors(
+                        containerColor = MaterialTheme.colorScheme.secondaryContainer,
+                        contentColor = MaterialTheme.colorScheme.onSecondaryContainer,
+                    ),
+            ) {
                 Text(if (state.showAddForm) "Hide" else "New")
             }
         },
@@ -572,15 +622,23 @@ private fun CatalogSection(
 ) {
     val catalogExpanded = remember { mutableStateOf(false) }
 
-    SectionHeader(
+    McpSectionHeader(
+        icon = Icons.Filled.Storage,
         title = stringResource(R.string.mcp_servers_section_catalog),
         trailing = {
-            TextButton(onClick = {
-                catalogExpanded.value = !catalogExpanded.value
-                if (catalogExpanded.value && state.catalogEntries.isEmpty() && !state.catalogLoading) {
-                    viewModel.loadCatalog()
-                }
-            }) {
+            TextButton(
+                onClick = {
+                    catalogExpanded.value = !catalogExpanded.value
+                    if (catalogExpanded.value && state.catalogEntries.isEmpty() && !state.catalogLoading) {
+                        viewModel.loadCatalog()
+                    }
+                },
+                colors =
+                    ButtonDefaults.textButtonColors(
+                        containerColor = MaterialTheme.colorScheme.secondaryContainer,
+                        contentColor = MaterialTheme.colorScheme.onSecondaryContainer,
+                    ),
+            ) {
                 Text(if (catalogExpanded.value) "Hide" else "Browse")
             }
         },