Revert back to empty search screen

This commit is contained in:
2026-05-18 22:41:43 +02:00
parent f1e391ccda
commit 815c4f4efc

View File

@@ -1,33 +1,15 @@
package dev.ulfrx.recipe.ui.screens.search package dev.ulfrx.recipe.ui.screens.search
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box 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.WindowInsets
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize 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.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.statusBars import androidx.compose.foundation.layout.statusBars
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.windowInsetsPadding 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.Composable
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier 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 androidx.lifecycle.compose.collectAsStateWithLifecycle
import com.composables.icons.lucide.Lucide import com.composables.icons.lucide.Lucide
import com.composables.icons.lucide.Search 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.Res
import recipe.composeapp.generated.resources.search_screen_curated_subtitle 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_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 * Global search destination — overlays the active tab when
@@ -57,38 +41,12 @@ import recipe.composeapp.generated.resources.search_screen_curated_title
fun SearchScreen(viewModel: ShellSearchViewModel) { fun SearchScreen(viewModel: ShellSearchViewModel) {
val state by viewModel.state.collectAsStateWithLifecycle() val state by viewModel.state.collectAsStateWithLifecycle()
val bgDark = Color(0xFF14181F)
Box( Box(
modifier = modifier =
Modifier Modifier
.fillMaxSize() .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( Box(
modifier = modifier =
Modifier Modifier
@@ -96,6 +54,13 @@ fun SearchScreen(viewModel: ShellSearchViewModel) {
.windowInsetsPadding(WindowInsets.statusBars) .windowInsetsPadding(WindowInsets.statusBars)
.padding(top = RecipeTheme.spacing.xl), .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( EmptyState(
icon = Lucide.Search, icon = Lucide.Search,
title = stringResource(Res.string.search_screen_curated_title), 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<SearchResultSample> =
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)),
)
}
}
}
}