feat(ui): modern theme, sectioned drawer, shared components (v1) (#1)

* feat(ui): modern theme, sectioned drawer, shared components (v1) Foundation for the modern redesign — fixes the biggest UX problems (that vague "better ui ux" ticket) without rewriting all 20 screens at once. This puts the infrastructure in place and modernizes the highest-traffic screens. Theme ( - Disable Material You dynamic color by default — brand identity (Voltage Purple) wins. Can opt back in via HermesControlTheme. - 3-step elevation ladder (surface / surfaceVariant / surfaceHigh) with subtle blue tint so dark mode stops reading as flat black. - Full Material 3 type hierarchy — every style explicitly tuned, tighter letter spacing, comfortable line heights. - New Shapes.kt (xs→xl rounded corner tokens) and Spacing.kt (xs/sm/md/lg/xl/xxl spacing tokens) — no more ad-hoc dp values. Navigation ( - Sectioned drawer: 17 items were dumped at one indent level with duplicate icons (Channels & Chat both used the Chat icon!). Now grouped into 4 logical sections — Converse / Automate / Configure / Inspect — with section headers and sane per-item icons. - Settings added to the drawer (was previously hidden behind ChatScreen's gear icon — bad IA). - gesturesEnabled check collapsed from an 18-term OR chain into a single set-membership test. Common components ( - HermesScaffold: shared drawer-aware Scaffold + TopAppBar with slots for refresh / actions. Removes the per-screen duplication seen in SkillsScreen, CronJobsScreen, ChannelsScreen, etc. - StateViews: LoadingState / ErrorState / EmptyState / list content padding tokens — every list screen now renders loading/error/ empty identically instead of ad-hoc per screen. Modernized screens: - ConnectScreen: hero brand badge (was a lone "⚡" glyph), pairing as the primary path, manual token/host/port collapsed behind a toggle (was always-visible clutter), Card-in-Card nesting removed. - SkillsScreen: now uses HermesScaffold + EmptyState + ErrorState + LoadingState. Adds a search field, leading icon per row, and a category sublabel. Follow-up commits will migrate the remaining ~15 list screens onto HermesScaffold; this commit stops at the foundation + the two screens that see the most daily use. Verified: ktlint clean across the entire tree. Co-Authored-By: Ronia <ronia@m57> * fix(imports): add missing safeDrawingPadding + dp imports CI caught three compile errors that ktlint doesn't flag (unresolved references are not lint errors, they're compile errors): - Navigation.kt:239 — Modifier.safeDrawingPadding() import was dropped when the file was rewritten for the sectioned drawer. - SkillsScreen.kt:117 — `16.dp` and `12.dp` references had no `androidx.compose.ui.unit.dp` import after the file was rewritten onto HermesScaffold. No code changes — pure import fixes. Co-Authored-By: Ronia <ronia@m57> * ci: split monolithic job into 4 parallel jobs + summary Before — one job ran ktlint → lint → test → build sequentially. If ktlint failed you waited ~30s to find out, and the test/build stages never even started (no useful artifacts uploaded on partial failure). After — 4 jobs run in parallel on every push and PR: 1. ktlint (fast feedback, ~30s) 2. android-lint (parallel, includes compileDebugKotlin) 3. unit-tests (parallel, JUnit 5 + mockk) 4. build (gated by 1+2+3, only runs if all pass) Plus a 5th `ci-summary` job that aggregates results so branch protection only needs a single status check configured. Other improvements: - concurrency cancel-in-progress — new commits on the same ref cancel the stale run instead of piling up. - timeout-minutes on every job — no more hung runners burning minutes on a stuck Gradle daemon. - workflow_dispatch — can trigger manually from the Actions tab. - Per-job artifact uploads with `if: always()` — reports upload even when the job fails, so you can download test/lint reports to debug. - Removed the monolithic "verification-reports" artifact that tried to upload three unrelated paths and failed silently with "No files were found" when an early step bailed. Co-Authored-By: Ronia <ronia@m57> * ci: silence ktlint artifact-not-found annotation Adds `if-no-files-found: ignore` to the ktlint artifact upload step because ktlint 1.2.1 does not produce HTML reports on success — only on failure. The previous config `if-no-files-found: warn` (default) emitted a noisy annotation on every green run. Co-Authored-By: Ronia <ronia@m57> --------- Co-authored-by: M57 <hy4ri@users.noreply.github.com> Co-authored-by: Ronia <ronia@m57>
2026-06-18 02:59:43 +03:00
1 parent 925cc32de9
commit 7daf73ce0d
@@ -0,0 +1,98 @@
+package com.m57.hermescontrol.ui.common
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material.icons.filled.Menu
+import androidx.compose.material.icons.filled.Refresh
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+
+/**
+ * Shared Scaffold wrapper that standardizes the drawer-aware TopAppBar.
+ *
+ * Eliminates the per-screen duplication of:
+ *   - Menu icon (drawer toggle)
+ *   - Title
+ *   - Optional Refresh / actions slot
+ *
+ * Screens that still need a Back arrow instead of a Menu icon can set
+ * `showBack = true` and pass an `onBack` lambda.
+ */
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun HermesScaffold(
+    title: String,
+    onOpenDrawer: (() -> Unit)? = null,
+    onRefresh: (() -> Unit)? = null,
+    onBack: (() -> Unit)? = null,
+    showBack: Boolean = false,
+    actions: @Composable () -> Unit = {},
+    content: @Composable (androidx.compose.foundation.layout.PaddingValues) -> Unit,
+) {
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                navigationIcon = {
+                    when {
+                        showBack && onBack != null -> {
+                            IconButton(onClick = onBack) {
+                                Icon(
+                                    imageVector = Icons.AutoMirrored.Filled.ArrowBack,
+                                    contentDescription = "Back",
+                                )
+                            }
+                        }
+                        onOpenDrawer != null -> {
+                            IconButton(onClick = onOpenDrawer) {
+                                Icon(
+                                    imageVector = Icons.Filled.Menu,
+                                    contentDescription = "Open Drawer",
+                                )
+                            }
+                        }
+                    }
+                },
+                title = { Text(title) },
+                actions = {
+                    if (onRefresh != null) {
+                        IconButton(onClick = onRefresh) {
+                            Icon(
+                                imageVector = Icons.Filled.Refresh,
+                                contentDescription = "Refresh",
+                            )
+                        }
+                    }
+                    actions()
+                },
+                colors =
+                    TopAppBarDefaults.topAppBarColors(
+                        containerColor = MaterialTheme.colorScheme.surface,
+                        titleContentColor = MaterialTheme.colorScheme.onSurface,
+                        navigationIconContentColor = MaterialTheme.colorScheme.onSurface,
+                        actionIconContentColor = MaterialTheme.colorScheme.onSurface,
+                    ),
+            )
+        },
+        containerColor = MaterialTheme.colorScheme.background,
+    ) { paddingValues ->
+        Box(
+            modifier =
+                Modifier
+                    .fillMaxSize()
+                    .padding(paddingValues),
+        ) {
+            content(paddingValues)
+        }
+    }
+}
@@ -0,0 +1,131 @@
+package com.m57.hermescontrol.ui.common
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Inbox
+import androidx.compose.material.icons.filled.Refresh
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+
+/**
+ * Unified loading / error / empty placeholders so every list screen
+ * shares the same visual language.
+ */
+
+@Composable
+fun LoadingState(modifier: Modifier = Modifier) {
+    Box(
+        modifier = modifier.fillMaxSize(),
+        contentAlignment = Alignment.Center,
+    ) {
+        CircularProgressIndicator(
+            color = MaterialTheme.colorScheme.primary,
+            strokeWidth = 3.dp,
+            modifier = Modifier.size(40.dp),
+        )
+    }
+}
+
+@Composable
+fun ErrorState(
+    message: String,
+    onRetry: (() -> Unit)? = null,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier =
+            modifier
+                .fillMaxSize()
+                .padding(24.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center,
+    ) {
+        Text(
+            text = "⚠",
+            fontSize = MaterialTheme.typography.headlineMedium.fontSize,
+            color = MaterialTheme.colorScheme.error,
+        )
+        Spacer(modifier = Modifier.height(12.dp))
+        Text(
+            text = message,
+            color = MaterialTheme.colorScheme.error,
+            textAlign = TextAlign.Center,
+            style = MaterialTheme.typography.bodyMedium,
+        )
+        if (onRetry != null) {
+            Spacer(modifier = Modifier.height(16.dp))
+            OutlinedButton(onClick = onRetry) {
+                Icon(
+                    imageVector = Icons.Filled.Refresh,
+                    contentDescription = null,
+                    modifier = Modifier.size(18.dp),
+                )
+                Spacer(modifier = Modifier.size(8.dp))
+                Text("Retry")
+            }
+        }
+    }
+}
+
+@Composable
+fun EmptyState(
+    title: String,
+    subtitle: String? = null,
+    icon: ImageVector = Icons.Filled.Inbox,
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier =
+            modifier
+                .fillMaxSize()
+                .padding(24.dp),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center,
+    ) {
+        Icon(
+            imageVector = icon,
+            contentDescription = null,
+            tint = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.5f),
+            modifier = Modifier.size(48.dp),
+        )
+        Spacer(modifier = Modifier.height(12.dp))
+        Text(
+            text = title,
+            style = MaterialTheme.typography.titleMedium,
+            color = MaterialTheme.colorScheme.onSurface,
+        )
+        if (subtitle != null) {
+            Spacer(modifier = Modifier.height(4.dp))
+            Text(
+                text = subtitle,
+                style = MaterialTheme.typography.bodySmall,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                textAlign = TextAlign.Center,
+            )
+        }
+    }
+}
+
+/**
+ * Padding convention for List screens — outer 16, gaps of 8 between items.
+ */
+val listContentPadding = PaddingValues(horizontal = 16.dp, vertical = 12.dp)
+
+val listItemSpacing = Arrangement.spacedBy(8.dp)
@@ -3,7 +3,6 @@ package com.m57.hermescontrol.ui.connect
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
-import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -16,22 +15,22 @@ import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Bolt
 import androidx.compose.material.icons.filled.Visibility
 import androidx.compose.material.icons.filled.VisibilityOff
 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
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
-import androidx.compose.material3.OutlinedTextFieldDefaults
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
@@ -40,14 +39,13 @@ 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.Brush
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.viewmodel.compose.viewModel

@@ -66,22 +64,13 @@ fun ConnectScreen(
    }

    var passwordVisible by remember { mutableStateOf(false) }
-
-    val backgroundGradient =
-        Brush.verticalGradient(
-            colors =
-                listOf(
-                    MaterialTheme.colorScheme.background,
-                    MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.5f),
-                    MaterialTheme.colorScheme.primary.copy(alpha = 0.1f),
-                ),
-        )
+    var showManualFields by remember { mutableStateOf(false) }

    Box(
        modifier =
            modifier
                .fillMaxSize()
-                .background(backgroundGradient)
+                .background(MaterialTheme.colorScheme.background)
                .imePadding(),
        contentAlignment = Alignment.Center,
    ) {
@@ -90,204 +79,165 @@ fun ConnectScreen(
                Modifier
                    .fillMaxWidth()
                    .verticalScroll(rememberScrollState())
-                    .padding(24.dp),
+                    .padding(horizontal = 24.dp, vertical = 32.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.Center,
+            verticalArrangement = Arrangement.spacedBy(12.dp),
        ) {
-            // Branding
-            Text(
-                text = "⚡",
-                fontSize = 64.sp,
-                textAlign = TextAlign.Center,
-            )
-            Spacer(modifier = Modifier.height(8.dp))
+            // Hero brand
+            Box(
+                modifier =
+                    Modifier
+                        .size(80.dp)
+                        .clip(CircleShape)
+                        .background(MaterialTheme.colorScheme.primary),
+                contentAlignment = Alignment.Center,
+            ) {
+                Icon(
+                    imageVector = Icons.Filled.Bolt,
+                    contentDescription = null,
+                    tint = MaterialTheme.colorScheme.onPrimary,
+                    modifier = Modifier.size(44.dp),
+                )
+            }
+
            Text(
                text = "Hermes",
                style =
-                    MaterialTheme.typography.headlineLarge.copy(
+                    MaterialTheme.typography.displayMedium.copy(
                        fontWeight = FontWeight.Bold,
-                        color = MaterialTheme.colorScheme.primary,
+                        color = MaterialTheme.colorScheme.onBackground,
                    ),
            )
            Text(
                text = "AI Agent Control",
                style =
-                    MaterialTheme.typography.titleMedium.copy(
+                    MaterialTheme.typography.bodyLarge.copy(
                        color = MaterialTheme.colorScheme.onSurfaceVariant,
                    ),
            )

-            Spacer(modifier = Modifier.height(32.dp))
+            Spacer(modifier = Modifier.height(24.dp))

-            // Connection Card
-            Card(
+            // Pairing (primary path)
+            Column(
                modifier = Modifier.fillMaxWidth(),
-                colors =
-                    CardDefaults.cardColors(
-                        containerColor = MaterialTheme.colorScheme.surface.copy(alpha = 0.7f),
-                    ),
-                border =
-                    BorderStroke(
-                        width = 1.dp,
-                        color = MaterialTheme.colorScheme.outline.copy(alpha = 0.2f),
-                    ),
-                elevation = CardDefaults.cardElevation(defaultElevation = 8.dp),
+                verticalArrangement = Arrangement.spacedBy(12.dp),
            ) {
-                Column(
+                Text(
+                    text = "Pairing string",
+                    style = MaterialTheme.typography.labelLarge,
+                    color = MaterialTheme.colorScheme.onBackground,
+                )
+                var pairingString by remember { mutableStateOf("") }
+                OutlinedTextField(
+                    value = pairingString,
+                    onValueChange = {
+                        pairingString = it
+                        if (it.isNotBlank()) viewModel.onPairingString(it)
+                    },
+                    placeholder = { Text("Paste hermes://… or Base64 config") },
+                    singleLine = true,
+                    modifier = Modifier.fillMaxWidth(),
+                )
+
+                // Error message
+                AnimatedVisibility(
+                    visible = state.errorMessage != null,
+                    enter = fadeIn(),
+                    exit = fadeOut(),
+                ) {
+                    state.errorMessage?.let { error ->
+                        Text(
+                            text = error,
+                            color = MaterialTheme.colorScheme.error,
+                            style = MaterialTheme.typography.bodySmall,
+                            textAlign = TextAlign.Start,
+                            modifier = Modifier.fillMaxWidth(),
+                        )
+                    }
+                }
+
+                Button(
+                    onClick = viewModel::connect,
+                    enabled = !state.isConnecting,
                    modifier =
                        Modifier
                            .fillMaxWidth()
-                            .padding(20.dp),
-                    verticalArrangement = Arrangement.spacedBy(16.dp),
+                            .height(52.dp),
+                ) {
+                    if (state.isConnecting) {
+                        CircularProgressIndicator(
+                            modifier = Modifier.size(20.dp),
+                            color = MaterialTheme.colorScheme.onPrimary,
+                            strokeWidth = 2.dp,
+                        )
+                    } else {
+                        Text("Connect", style = MaterialTheme.typography.labelLarge)
+                    }
+                }
+
+                TextButton(
+                    onClick = { showManualFields = !showManualFields },
+                    modifier = Modifier.fillMaxWidth(),
                ) {
                    Text(
-                        text = "Connect to Hermes",
-                        style =
-                            MaterialTheme.typography.titleMedium.copy(
-                                fontWeight = FontWeight.SemiBold,
-                            ),
+                        text = if (showManualFields) "Hide manual entry" else "Enter manually instead",
+                        style = MaterialTheme.typography.labelMedium,
+                        color = MaterialTheme.colorScheme.primary,
                    )
+                }

-                    var pairingString by remember { mutableStateOf("") }
-
-                    OutlinedTextField(
-                        value = pairingString,
-                        onValueChange = {
-                            pairingString = it
-                            if (it.isNotBlank()) {
-                                viewModel.onPairingString(it)
-                            }
-                        },
-                        label = { Text("Pairing Link / Connection String") },
-                        placeholder = { Text("Paste hermes://... or Base64 config") },
-                        singleLine = true,
+                AnimatedVisibility(visible = showManualFields) {
+                    Column(
                        modifier = Modifier.fillMaxWidth(),
-                        colors =
-                            OutlinedTextFieldDefaults.colors(
-                                focusedBorderColor = MaterialTheme.colorScheme.secondary,
-                                cursorColor = MaterialTheme.colorScheme.secondary,
-                            ),
-                    )
-
-                    // Token field
-                    OutlinedTextField(
-                        value = state.token,
-                        onValueChange = viewModel::onTokenChange,
-                        label = { Text("Auth Token") },
-                        placeholder = { Text("Enter your API token") },
-                        singleLine = true,
-                        visualTransformation =
-                            if (passwordVisible) {
-                                VisualTransformation.None
-                            } else {
-                                PasswordVisualTransformation()
+                        verticalArrangement = Arrangement.spacedBy(12.dp),
+                    ) {
+                        HorizontalDivider()
+                        OutlinedTextField(
+                            value = state.token,
+                            onValueChange = viewModel::onTokenChange,
+                            label = { Text("Auth Token") },
+                            placeholder = { Text("API token") },
+                            singleLine = true,
+                            visualTransformation =
+                                if (passwordVisible) {
+                                    VisualTransformation.None
+                                } else {
+                                    PasswordVisualTransformation()
+                                },
+                            trailingIcon = {
+                                IconButton(onClick = { passwordVisible = !passwordVisible }) {
+                                    Icon(
+                                        imageVector =
+                                            if (passwordVisible) {
+                                                Icons.Filled.Visibility
+                                            } else {
+                                                Icons.Filled.VisibilityOff
+                                            },
+                                        contentDescription =
+                                            if (passwordVisible) "Hide token" else "Show token",
+                                    )
+                                }
                            },
-                        trailingIcon = {
-                            IconButton(onClick = { passwordVisible = !passwordVisible }) {
-                                Icon(
-                                    imageVector =
-                                        if (passwordVisible) {
-                                            Icons.Filled.Visibility
-                                        } else {
-                                            Icons.Filled.VisibilityOff
-                                        },
-                                    contentDescription =
-                                        if (passwordVisible) {
-                                            "Hide token"
-                                        } else {
-                                            "Show token"
-                                        },
-                                )
-                            }
-                        },
-                        modifier = Modifier.fillMaxWidth(),
-                        colors =
-                            OutlinedTextFieldDefaults.colors(
-                                focusedBorderColor = MaterialTheme.colorScheme.primary,
-                                cursorColor = MaterialTheme.colorScheme.primary,
-                            ),
-                    )
-
-                    // Host field
-                    OutlinedTextField(
-                        value = state.host,
-                        onValueChange = viewModel::onHostChange,
-                        label = { Text("Host") },
-                        placeholder = { Text("127.0.0.1") },
-                        singleLine = true,
-                        modifier = Modifier.fillMaxWidth(),
-                        colors =
-                            OutlinedTextFieldDefaults.colors(
-                                focusedBorderColor = MaterialTheme.colorScheme.primary,
-                                cursorColor = MaterialTheme.colorScheme.primary,
-                            ),
-                    )
-
-                    // Port field
-                    OutlinedTextField(
-                        value = state.port,
-                        onValueChange = viewModel::onPortChange,
-                        label = { Text("Port") },
-                        placeholder = { Text("9119") },
-                        singleLine = true,
-                        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
-                        modifier = Modifier.fillMaxWidth(),
-                        colors =
-                            OutlinedTextFieldDefaults.colors(
-                                focusedBorderColor = MaterialTheme.colorScheme.primary,
-                                cursorColor = MaterialTheme.colorScheme.primary,
-                            ),
-                    )
-
-                    // Error message
-                    AnimatedVisibility(
-                        visible = state.errorMessage != null,
-                        enter = fadeIn(),
-                        exit = fadeOut(),
-                    ) {
-                        state.errorMessage?.let { error ->
-                            Card(
-                                colors =
-                                    CardDefaults.cardColors(
-                                        containerColor = MaterialTheme.colorScheme.errorContainer,
-                                    ),
-                                modifier = Modifier.fillMaxWidth(),
-                            ) {
-                                Text(
-                                    text = error,
-                                    color = MaterialTheme.colorScheme.onErrorContainer,
-                                    style = MaterialTheme.typography.bodySmall,
-                                    modifier = Modifier.padding(12.dp),
-                                )
-                            }
-                        }
-                    }
-
-                    // Connect button
-                    Button(
-                        onClick = viewModel::connect,
-                        enabled = !state.isConnecting,
-                        modifier =
-                            Modifier
-                                .fillMaxWidth()
-                                .height(52.dp),
-                        colors =
-                            ButtonDefaults.buttonColors(
-                                containerColor = MaterialTheme.colorScheme.primary,
-                            ),
-                    ) {
-                        if (state.isConnecting) {
-                            CircularProgressIndicator(
-                                modifier = Modifier.size(24.dp),
-                                color = MaterialTheme.colorScheme.onPrimary,
-                                strokeWidth = 2.dp,
-                            )
-                        } else {
-                            Text(
-                                text = "Connect",
-                                style = MaterialTheme.typography.labelLarge,
-                            )
-                        }
+                            modifier = Modifier.fillMaxWidth(),
+                        )
+                        OutlinedTextField(
+                            value = state.host,
+                            onValueChange = viewModel::onHostChange,
+                            label = { Text("Host") },
+                            placeholder = { Text("127.0.0.1") },
+                            singleLine = true,
+                            modifier = Modifier.fillMaxWidth(),
+                        )
+                        OutlinedTextField(
+                            value = state.port,
+                            onValueChange = viewModel::onPortChange,
+                            label = { Text("Port") },
+                            placeholder = { Text("9119") },
+                            singleLine = true,
+                            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
+                            modifier = Modifier.fillMaxWidth(),
+                        )
                    }
                }
            }
@@ -2,41 +2,40 @@ package com.m57.hermescontrol.ui.skills

 import android.widget.Toast
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Menu
-import androidx.compose.material.icons.filled.Refresh
+import androidx.compose.material.icons.filled.Extension
 import androidx.compose.material3.Card
-import androidx.compose.material3.CircularProgressIndicator
-import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.viewmodel.compose.viewModel
+import com.m57.hermescontrol.ui.common.EmptyState
+import com.m57.hermescontrol.ui.common.ErrorState
+import com.m57.hermescontrol.ui.common.HermesScaffold
+import com.m57.hermescontrol.ui.common.LoadingState
+import com.m57.hermescontrol.ui.common.listContentPadding
+import com.m57.hermescontrol.ui.common.listItemSpacing

-@OptIn(ExperimentalMaterial3Api::class)
@Composable
 fun SkillsScreen(
    modifier: Modifier = Modifier,
@@ -45,6 +44,7 @@ fun SkillsScreen(
 ) {
    val state by viewModel.uiState.collectAsStateWithLifecycle()
    val context = LocalContext.current
+    var query by remember { mutableStateOf("") }

    LaunchedEffect(Unit) {
        viewModel.loadSkills()
@@ -57,57 +57,60 @@ fun SkillsScreen(
        }
    }

-    Scaffold(
-        topBar = {
-            TopAppBar(
-                navigationIcon = {
-                    if (onOpenDrawer != null) {
-                        IconButton(onClick = onOpenDrawer) {
-                            Icon(
-                                imageVector = androidx.compose.material.icons.Icons.Filled.Menu,
-                                contentDescription = "Open Drawer",
-                            )
-                        }
-                    }
-                },
-                title = { Text("Skills Management") },
-                actions = {
-                    IconButton(onClick = { viewModel.loadSkills() }) {
-                        Icon(
-                            imageVector = Icons.Filled.Refresh,
-                            contentDescription = "Refresh",
+    val filtered =
+        if (query.isBlank()) {
+            state.skills
+        } else {
+            state.skills.filter {
+                it.name.contains(query, ignoreCase = true) ||
+                    it.category?.contains(query, ignoreCase = true) == true ||
+                    it.description?.contains(query, ignoreCase = true) == true
+            }
+        }
+
+    HermesScaffold(
+        title = "Skills",
+        onOpenDrawer = onOpenDrawer,
+        onRefresh = { viewModel.loadSkills() },
+    ) {
+        when {
+            state.isLoading -> LoadingState()
+            state.errorMessage != null ->
+                ErrorState(
+                    message = state.errorMessage ?: "Unknown error",
+                    onRetry = { viewModel.loadSkills() },
+                )
+            state.skills.isEmpty() ->
+                EmptyState(
+                    title = "No skills",
+                    subtitle = "Tap refresh to retry loading skills from Hermes.",
+                    icon = Icons.Filled.Extension,
+                )
+            else ->
+                LazyColumn(
+                    modifier = Modifier.fillMaxWidth(),
+                    contentPadding = listContentPadding,
+                    verticalArrangement = listItemSpacing,
+                ) {
+                    // Search field
+                    item {
+                        androidx.compose.material3.OutlinedTextField(
+                            value = query,
+                            onValueChange = { query = it },
+                            placeholder = { Text("Search skills…") },
+                            singleLine = true,
+                            modifier = Modifier.fillMaxWidth(),
                        )
                    }
-                },
-            )
-        },
-        modifier = modifier,
-    ) { paddingValues ->
-        Box(
-            modifier =
-                Modifier
-                    .fillMaxSize()
-                    .padding(paddingValues),
-        ) {
-            if (state.isLoading) {
-                CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
-            } else if (state.errorMessage != null) {
-                Text(
-                    text = state.errorMessage ?: "",
-                    color = MaterialTheme.colorScheme.error,
-                    modifier =
-                        Modifier
-                            .align(Alignment.Center)
-                            .padding(16.dp),
-                )
-            } else {
-                LazyColumn(
-                    modifier = Modifier.fillMaxSize(),
-                    contentPadding = PaddingValues(16.dp),
-                    verticalArrangement = Arrangement.spacedBy(8.dp),
-                ) {
-                    items(state.skills) { skill ->
-                        Card(modifier = Modifier.fillMaxWidth()) {
+                    // Filtered list
+                    items(filtered) { skill ->
+                        Card(
+                            modifier = Modifier.fillMaxWidth(),
+                            colors =
+                                CardDefaults.cardColors(
+                                    containerColor = MaterialTheme.colorScheme.surfaceContainer,
+                                ),
+                        ) {
                            Row(
                                modifier =
                                    Modifier
@@ -116,18 +119,40 @@ fun SkillsScreen(
                                horizontalArrangement = Arrangement.SpaceBetween,
                                verticalAlignment = Alignment.CenterVertically,
                            ) {
-                                Column(modifier = Modifier.weight(1f)) {
-                                    Text(text = skill.name, style = MaterialTheme.typography.titleMedium)
-                                    Text(
-                                        text = skill.category ?: "",
-                                        style = MaterialTheme.typography.bodySmall,
-                                        color = MaterialTheme.colorScheme.onSurfaceVariant,
-                                    )
-                                    Spacer(modifier = Modifier.height(4.dp))
-                                    Text(
-                                        text = skill.description ?: "",
-                                        style = MaterialTheme.typography.bodyMedium,
+                                Row(
+                                    modifier = Modifier.weight(1f),
+                                    verticalAlignment = Alignment.CenterVertically,
+                                    horizontalArrangement = Arrangement.spacedBy(12.dp),
+                                ) {
+                                    Icon(
+                                        imageVector = Icons.Filled.Extension,
+                                        contentDescription = null,
+                                        tint = MaterialTheme.colorScheme.primary,
                                    )
+                                    Column(modifier = Modifier.weight(1f)) {
+                                        Text(
+                                            text = skill.name,
+                                            style =
+                                                MaterialTheme.typography.titleMedium.copy(
+                                                    fontWeight = FontWeight.SemiBold,
+                                                ),
+                                        )
+                                        skill.category?.let { cat ->
+                                            Text(
+                                                text = cat,
+                                                style = MaterialTheme.typography.labelSmall,
+                                                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                                            )
+                                        }
+                                        skill.description?.let { desc ->
+                                            Text(
+                                                text = desc,
+                                                style = MaterialTheme.typography.bodyMedium,
+                                                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                                                maxLines = 2,
+                                            )
+                                        }
+                                    }
                                }
                                Switch(
                                    checked = skill.enabled,
@@ -137,7 +162,6 @@ fun SkillsScreen(
                        }
                    }
                }
-            }
        }
    }
 }