diff --git a/composeApp/src/commonMain/kotlin/dev/ulfrx/recipe/ui/screens/search/SearchScreen.kt b/composeApp/src/commonMain/kotlin/dev/ulfrx/recipe/ui/screens/search/SearchScreen.kt index 5f667dd..d369ccf 100644 --- a/composeApp/src/commonMain/kotlin/dev/ulfrx/recipe/ui/screens/search/SearchScreen.kt +++ b/composeApp/src/commonMain/kotlin/dev/ulfrx/recipe/ui/screens/search/SearchScreen.kt @@ -1,33 +1,15 @@ package dev.ulfrx.recipe.ui.screens.search import androidx.compose.foundation.background -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.WindowInsets -import androidx.compose.foundation.layout.fillMaxHeight 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.layout.size import androidx.compose.foundation.layout.statusBars -import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.windowInsetsPadding -import androidx.compose.foundation.lazy.LazyColumn -import androidx.compose.foundation.lazy.items -import androidx.compose.foundation.shape.CircleShape -import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue -import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.unit.dp import androidx.lifecycle.compose.collectAsStateWithLifecycle import com.composables.icons.lucide.Lucide import com.composables.icons.lucide.Search @@ -37,6 +19,8 @@ import org.jetbrains.compose.resources.stringResource import recipe.composeapp.generated.resources.Res import recipe.composeapp.generated.resources.search_screen_curated_subtitle import recipe.composeapp.generated.resources.search_screen_curated_title +import recipe.composeapp.generated.resources.search_screen_empty_results_subtitle +import recipe.composeapp.generated.resources.search_screen_empty_results_title /** * Global search destination — overlays the active tab when @@ -57,45 +41,26 @@ import recipe.composeapp.generated.resources.search_screen_curated_title fun SearchScreen(viewModel: ShellSearchViewModel) { val state by viewModel.state.collectAsStateWithLifecycle() - val bgDark = Color(0xFF14181F) - Box( modifier = Modifier .fillMaxSize() - .background(if (state.isFocused) bgDark else RecipeTheme.colors.background), + .background(RecipeTheme.colors.background), ) { - if (state.isFocused) { - // Sample search-result list — visual aid so the search pill / dock - // chrome has scrollable content underneath while wiring up real - // SearchSources lands in later phases. Remove once Phase 5/6/8/9 - // back this screen with real results. - LazyColumn( - modifier = - Modifier - .fillMaxSize() - .windowInsetsPadding(WindowInsets.statusBars), - contentPadding = - PaddingValues( - start = RecipeTheme.spacing.lg, - end = RecipeTheme.spacing.lg, - top = RecipeTheme.spacing.xl, - bottom = 160.dp, - ), - verticalArrangement = Arrangement.spacedBy(10.dp), - ) { - items(items = SearchResultSamples, key = { it.id }) { item -> - SearchResultRow(item = item) - } - } - } else { - Box( - modifier = - Modifier - .fillMaxSize() - .windowInsetsPadding(WindowInsets.statusBars) - .padding(top = RecipeTheme.spacing.xl), - ) { + Box( + modifier = + Modifier + .fillMaxSize() + .windowInsetsPadding(WindowInsets.statusBars) + .padding(top = RecipeTheme.spacing.xl), + ) { + if (state.isFocused) { + EmptyState( + icon = Lucide.Search, + title = stringResource(Res.string.search_screen_empty_results_title), + subtitle = stringResource(Res.string.search_screen_empty_results_subtitle), + ) + } else { EmptyState( icon = Lucide.Search, title = stringResource(Res.string.search_screen_curated_title), @@ -105,103 +70,3 @@ fun SearchScreen(viewModel: ShellSearchViewModel) { } } } - -private data class SearchResultSample( - val id: Int, - val avatarColor: Color, - val cardTone: Color, - val titleWeight: Float, - val subtitleWeight: Float, - val tagWeight: Float, -) - -private val SearchResultSamples: List = - run { - val avatars = - listOf( - Color(0xFFD97757), // terracotta - Color(0xFF6EA987), // sage - Color(0xFF7A8FB8), // dusty blue - Color(0xFFC1864F), // amber - Color(0xFFB76E79), // muted rose - Color(0xFF6B7A8F), // slate - Color(0xFF8E7CC3), // muted violet - Color(0xFFA89B7C), // olive - ) - val tones = - listOf( - Color(0xFF1F242C), - Color(0xFF232932), - Color(0xFF1B2028), - Color(0xFF272D36), - ) - List(36) { i -> - SearchResultSample( - id = i, - avatarColor = avatars[i % avatars.size], - cardTone = tones[i % tones.size], - titleWeight = 0.62f + ((i * 11) % 30) / 100f, - subtitleWeight = 0.40f + ((i * 7) % 35) / 100f, - tagWeight = 0.12f + ((i * 5) % 14) / 100f, - ) - } - } - -@Composable -private fun SearchResultRow(item: SearchResultSample) { - Row( - modifier = - Modifier - .fillMaxWidth() - .height(76.dp) - .clip(RoundedCornerShape(14.dp)) - .background(item.cardTone) - .padding(horizontal = 12.dp), - verticalAlignment = Alignment.CenterVertically, - ) { - // Round avatar / thumbnail slot — gives each row a recognizable - // colored anchor that refracts cleanly through the search pill above. - Box( - modifier = - Modifier - .size(48.dp) - .clip(CircleShape) - .background(item.avatarColor), - ) - Spacer(modifier = Modifier.width(12.dp)) - Column( - modifier = Modifier.fillMaxHeight().padding(vertical = 14.dp), - verticalArrangement = Arrangement.spacedBy(RecipeTheme.spacing.sm), - ) { - // Title bar - Box( - modifier = - Modifier - .fillMaxWidth(item.titleWeight) - .height(13.dp) - .clip(RoundedCornerShape(3.dp)) - .background(Color(0xFFE8E4DC).copy(alpha = 0.85f)), - ) - // Subtitle bar - Box( - modifier = - Modifier - .fillMaxWidth(item.subtitleWeight) - .height(9.dp) - .clip(RoundedCornerShape(2.dp)) - .background(Color(0xFFE8E4DC).copy(alpha = 0.40f)), - ) - Row(verticalAlignment = Alignment.CenterVertically) { - // Small accent tag pill - Box( - modifier = - Modifier - .fillMaxWidth(item.tagWeight) - .height(8.dp) - .clip(RoundedCornerShape(4.dp)) - .background(item.avatarColor.copy(alpha = 0.65f)), - ) - } - } - } -}