Reimagine the UI with the "Nocturne" design language

app/src/main/java/com/hush/app/ui/components/HushComponents.kt

@@ -1,6 +1,8 @@
 package com.hush.app.ui.components
 
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -13,6 +15,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
@@ -24,57 +27,40 @@ import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
-import androidx.compose.material3.Icon
-import com.hush.app.ui.theme.AccentPurple
+import com.hush.app.ui.theme.PlumMist
 
-/** Gradient used for brand moments (logo chip, hero icons, user bubbles). */
-val HushGradient = Brush.linearGradient(
-    listOf(Color(0xFF7C5CFC), Color(0xFF9E7BFF), Color(0xFF5CA8FC))
+/** Dusk-sky gradient, reserved for rare brand moments (onboarding hero). */
+val DuskGradient = Brush.linearGradient(
+    listOf(Color(0xFF3E3663), Color(0xFF6B5490), Color(0xFF96688F))
 )
 
 /**
- * Large screen header used at the top of every tab: bold title, quiet
- * subtitle, and an optional trailing element (status pill, count badge).
+ * Editorial screen header: a large serif title over a quiet one-line
+ * subtitle, with an optional trailing element (status pill, action).
  */
 @Composable
 fun HushHeader(
     title: String,
     subtitle: String,
     modifier: Modifier = Modifier,
-    leadingIcon: ImageVector? = null,
     trailing: (@Composable () -> Unit)? = null
 ) {
     Row(
         modifier = modifier
             .fillMaxWidth()
-            .padding(horizontal = 20.dp, vertical = 14.dp),
+            .padding(horizontal = 24.dp)
+            .padding(top = 24.dp, bottom = 14.dp),
         verticalAlignment = Alignment.CenterVertically
     ) {
-        if (leadingIcon != null) {
-            Box(
-                modifier = Modifier
-                    .size(42.dp)
-                    .clip(RoundedCornerShape(14.dp))
-                    .background(HushGradient),
-                contentAlignment = Alignment.Center
-            ) {
-                Icon(
-                    imageVector = leadingIcon,
-                    contentDescription = null,
-                    tint = Color.White,
-                    modifier = Modifier.size(22.dp)
-                )
-            }
-            Spacer(modifier = Modifier.width(12.dp))
-        }
         Column(modifier = Modifier.weight(1f)) {
             Text(
                 text = title,
                 style = MaterialTheme.typography.headlineMedium,
                 color = MaterialTheme.colorScheme.onBackground
             )
-            Spacer(modifier = Modifier.height(1.dp))
+            Spacer(modifier = Modifier.height(3.dp))
             Text(
                 text = subtitle,
                 style = MaterialTheme.typography.bodySmall,
@@ -88,17 +74,17 @@ fun HushHeader(
     }
 }
 
-/** Small colored status pill, e.g. "● On-device AI". */
+/** Small status pill: hairline ring, soft wash, and a colored dot. */
 @Composable
 fun StatusPill(
     label: String,
     color: Color,
-    background: Color,
     modifier: Modifier = Modifier
 ) {
     Surface(
         shape = CircleShape,
-        color = background,
+        color = color.copy(alpha = 0.08f),
+        border = BorderStroke(1.dp, color.copy(alpha = 0.28f)),
         modifier = modifier
     ) {
         Row(
@@ -108,7 +94,7 @@ fun StatusPill(
         ) {
             Box(
                 modifier = Modifier
-                    .size(7.dp)
+                    .size(6.dp)
                     .clip(CircleShape)
                     .background(color)
             )
@@ -122,17 +108,18 @@ fun StatusPill(
     }
 }
 
-/** Tiny labeled chip used inside cards to show rule attributes. */
+/** Tiny outlined chip used inside cards to show rule attributes. */
 @Composable
 fun AttributeChip(
     icon: ImageVector?,
     label: String,
-    color: Color = AccentPurple,
+    color: Color = PlumMist,
     modifier: Modifier = Modifier
 ) {
     Surface(
         shape = RoundedCornerShape(8.dp),
-        color = color.copy(alpha = 0.12f),
+        color = Color.Transparent,
+        border = BorderStroke(1.dp, color.copy(alpha = 0.35f)),
         modifier = modifier
     ) {
         Row(
@@ -158,7 +145,25 @@ fun AttributeChip(
     }
 }
 
-/** Shared empty-state layout: soft icon disc, title, and helper text. */
+/** Flat card with a hairline border — the Nocturne surface idiom. */
+@Composable
+fun QuietSurface(
+    modifier: Modifier = Modifier,
+    shape: androidx.compose.ui.graphics.Shape = MaterialTheme.shapes.large,
+    color: Color = MaterialTheme.colorScheme.surfaceVariant,
+    borderColor: Color = MaterialTheme.colorScheme.outline,
+    content: @Composable () -> Unit
+) {
+    Surface(
+        modifier = modifier,
+        shape = shape,
+        color = color,
+        border = BorderStroke(1.dp, borderColor),
+        content = content
+    )
+}
+
+/** Shared empty-state layout: outlined icon ring, serif title, helper text. */
 @Composable
 fun EmptyState(
     icon: ImageVector,
@@ -174,28 +179,30 @@ fun EmptyState(
             modifier = Modifier
                 .size(88.dp)
                 .clip(CircleShape)
-                .background(AccentPurple.copy(alpha = 0.10f)),
+                .border(1.dp, MaterialTheme.colorScheme.outline, CircleShape)
+                .background(MaterialTheme.colorScheme.surfaceVariant),
             contentAlignment = Alignment.Center
         ) {
             Icon(
                 imageVector = icon,
                 contentDescription = null,
-                modifier = Modifier.size(40.dp),
-                tint = AccentPurple.copy(alpha = 0.8f)
+                modifier = Modifier.size(36.dp),
+                tint = MaterialTheme.colorScheme.onSurfaceVariant
             )
         }
         Spacer(modifier = Modifier.height(20.dp))
         Text(
             title,
-            style = MaterialTheme.typography.titleMedium,
-            color = MaterialTheme.colorScheme.onSurface
+            style = MaterialTheme.typography.titleLarge,
+            color = MaterialTheme.colorScheme.onSurface,
+            textAlign = TextAlign.Center
         )
         Spacer(modifier = Modifier.height(6.dp))
         Text(
             message,
             style = MaterialTheme.typography.bodySmall,
             color = MaterialTheme.colorScheme.onSurfaceVariant,
-            textAlign = androidx.compose.ui.text.style.TextAlign.Center
+            textAlign = TextAlign.Center
         )
     }
 }

app/src/main/java/com/hush/app/ui/screens/MainScreen.kt

@@ -1,22 +1,32 @@
 package com.hush.app.ui.screens
 
+import androidx.compose.animation.animateContentSize
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.scaleIn
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.NavigationBar
-import androidx.compose.material3.NavigationBarItem
-import androidx.compose.material3.NavigationBarItemDefaults
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.testTag
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavGraph.Companion.findStartDestination
 import androidx.navigation.compose.NavHost
@@ -43,48 +53,47 @@ fun MainScreen(
     )
 
     Scaffold(
+        containerColor = MaterialTheme.colorScheme.background,
         bottomBar = {
-            NavigationBar(
-                containerColor = MaterialTheme.colorScheme.surfaceContainer,
-                tonalElevation = 0.dp
+            // Floating pill navigation — a single quiet island instead of a
+            // full-width bar. Selected tab expands into a filled pill.
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .navigationBarsPadding()
+                    .padding(horizontal = 24.dp)
+                    .padding(top = 8.dp, bottom = 14.dp),
+                contentAlignment = Alignment.Center
             ) {
-                val navBackStackEntry by childNavController.currentBackStackEntryAsState()
-                val currentRoute = navBackStackEntry?.destination?.route
+                Surface(
+                    shape = CircleShape,
+                    color = MaterialTheme.colorScheme.surfaceVariant,
+                    border = BorderStroke(1.dp, MaterialTheme.colorScheme.outline)
+                ) {
+                    val navBackStackEntry by childNavController.currentBackStackEntryAsState()
+                    val currentRoute = navBackStackEntry?.destination?.route
 
-                tabs.forEach { tab ->
-                    val selected = currentRoute == tab.route
-                    NavigationBarItem(
-                        icon = {
-                            Icon(
-                                if (selected) tab.selectedIcon else tab.icon,
-                                contentDescription = tab.title
-                            )
-                        },
-                        label = {
-                            Text(
-                                tab.title,
-                                fontWeight = if (selected) FontWeight.SemiBold else FontWeight.Medium
-                            )
-                        },
-                        selected = selected,
-                        colors = NavigationBarItemDefaults.colors(
-                            indicatorColor = MaterialTheme.colorScheme.secondaryContainer,
-                            selectedIconColor = MaterialTheme.colorScheme.onSecondaryContainer,
-                            selectedTextColor = MaterialTheme.colorScheme.onSurface,
-                            unselectedIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
-                            unselectedTextColor = MaterialTheme.colorScheme.onSurfaceVariant
-                        ),
-                        onClick = {
-                            childNavController.navigate(tab.route) {
-                                popUpTo(childNavController.graph.findStartDestination().id) {
-                                    saveState = true
+                    Row(
+                        modifier = Modifier.padding(6.dp),
+                        horizontalArrangement = Arrangement.spacedBy(2.dp),
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        tabs.forEach { tab ->
+                            NavPill(
+                                tab = tab,
+                                selected = currentRoute == tab.route,
+                                onClick = {
+                                    childNavController.navigate(tab.route) {
+                                        popUpTo(childNavController.graph.findStartDestination().id) {
+                                            saveState = true
+                                        }
+                                        launchSingleTop = true
+                                        restoreState = true
+                                    }
                                 }
-                                launchSingleTop = true
-                                restoreState = true
-                            }
-                        },
-                        modifier = Modifier.testTag("bottom_nav_${tab.route}")
-                    )
+                            )
+                        }
+                    }
                 }
             }
         },
@@ -94,7 +103,7 @@ fun MainScreen(
             navController = childNavController,
             startDestination = BottomTabRoute.Chat.route,
             modifier = Modifier.padding(innerPadding),
-            // Gentle fade + settle between tabs — modern, not distracting
+            // Gentle fade + settle between tabs — calm, not distracting
             enterTransition = {
                 fadeIn(tween(220)) + scaleIn(initialScale = 0.985f, animationSpec = tween(220))
             },
@@ -115,3 +124,39 @@ fun MainScreen(
         }
     }
 }
+
+@Composable
+private fun NavPill(
+    tab: BottomTabRoute,
+    selected: Boolean,
+    onClick: () -> Unit
+) {
+    Surface(
+        onClick = onClick,
+        shape = CircleShape,
+        color = if (selected) MaterialTheme.colorScheme.primary else Color.Transparent,
+        contentColor = if (selected) MaterialTheme.colorScheme.onPrimary
+                       else MaterialTheme.colorScheme.onSurfaceVariant,
+        modifier = Modifier.testTag("bottom_nav_${tab.route}")
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier
+                .animateContentSize(animationSpec = tween(200))
+                .padding(horizontal = if (selected) 16.dp else 12.dp, vertical = 10.dp)
+        ) {
+            Icon(
+                imageVector = if (selected) tab.selectedIcon else tab.icon,
+                contentDescription = tab.title,
+                modifier = Modifier.size(20.dp)
+            )
+            if (selected) {
+                Spacer(modifier = Modifier.width(7.dp))
+                Text(
+                    text = tab.title,
+                    style = MaterialTheme.typography.labelLarge
+                )
+            }
+        }
+    }
+}