Revert back to empty search screen
This commit is contained in:
@@ -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,45 +41,26 @@ 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) {
|
Box(
|
||||||
// Sample search-result list — visual aid so the search pill / dock
|
modifier =
|
||||||
// chrome has scrollable content underneath while wiring up real
|
Modifier
|
||||||
// SearchSources lands in later phases. Remove once Phase 5/6/8/9
|
.fillMaxSize()
|
||||||
// back this screen with real results.
|
.windowInsetsPadding(WindowInsets.statusBars)
|
||||||
LazyColumn(
|
.padding(top = RecipeTheme.spacing.xl),
|
||||||
modifier =
|
) {
|
||||||
Modifier
|
if (state.isFocused) {
|
||||||
.fillMaxSize()
|
EmptyState(
|
||||||
.windowInsetsPadding(WindowInsets.statusBars),
|
icon = Lucide.Search,
|
||||||
contentPadding =
|
title = stringResource(Res.string.search_screen_empty_results_title),
|
||||||
PaddingValues(
|
subtitle = stringResource(Res.string.search_screen_empty_results_subtitle),
|
||||||
start = RecipeTheme.spacing.lg,
|
)
|
||||||
end = RecipeTheme.spacing.lg,
|
} else {
|
||||||
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),
|
|
||||||
) {
|
|
||||||
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)),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user