redesign SourcesBlock: collapsed by default, vertical cards, clickable
Sources are now collapsed by default with a "Quellen (N)" header that expands/collapses on tap (matching web's SourcesBlock behavior). Each source renders as a full-width vertical card (not a small 140dp chip) with title, URL in accent color, and optional snippet. Tapping a source opens it in the browser via ACTION_VIEW intent.
This commit is contained in:
parent
6a8a76d9f8
commit
e87220afb5
1 changed files with 55 additions and 26 deletions
|
|
@ -10,8 +10,6 @@ import androidx.compose.foundation.isSystemInDarkTheme
|
||||||
import androidx.compose.foundation.layout.Arrangement
|
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.Column
|
||||||
import androidx.compose.foundation.layout.ExperimentalLayoutApi
|
|
||||||
import androidx.compose.foundation.layout.FlowRow
|
|
||||||
import androidx.compose.foundation.layout.Row
|
import androidx.compose.foundation.layout.Row
|
||||||
import androidx.compose.foundation.layout.Spacer
|
import androidx.compose.foundation.layout.Spacer
|
||||||
import androidx.compose.foundation.layout.fillMaxWidth
|
import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
|
|
@ -50,6 +48,7 @@ import dev.kaizen.app.net.ToolEvent
|
||||||
import dev.kaizen.app.R
|
import dev.kaizen.app.R
|
||||||
import dev.kaizen.app.ui.shape.KaizenShapes
|
import dev.kaizen.app.ui.shape.KaizenShapes
|
||||||
import dev.kaizen.app.ui.theme.LocalKaizenAccent
|
import dev.kaizen.app.ui.theme.LocalKaizenAccent
|
||||||
|
import androidx.compose.ui.platform.LocalContext
|
||||||
import androidx.compose.ui.res.stringResource
|
import androidx.compose.ui.res.stringResource
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
|
|
@ -170,36 +169,55 @@ fun ToolEventsBlock(tools: List<ToolEvent>, streaming: Boolean = false) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@OptIn(ExperimentalLayoutApi::class)
|
|
||||||
@Composable
|
@Composable
|
||||||
fun SourcesBlock(sources: List<SearchSource>, query: String = "") {
|
fun SourcesBlock(sources: List<SearchSource>, query: String = "") {
|
||||||
val cs = MaterialTheme.colorScheme
|
val cs = MaterialTheme.colorScheme
|
||||||
val isDark = isSystemInDarkTheme()
|
val isDark = isSystemInDarkTheme()
|
||||||
|
val accent = LocalKaizenAccent.current
|
||||||
|
var expanded by remember { mutableStateOf(false) }
|
||||||
|
val context = LocalContext.current
|
||||||
|
|
||||||
Column {
|
Column {
|
||||||
if (query.isNotBlank()) {
|
Row(
|
||||||
Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.padding(bottom = 6.dp)) {
|
Modifier
|
||||||
Icon(Icons.Rounded.Language, null, tint = cs.onSurfaceVariant, modifier = Modifier.size(14.dp))
|
.clickable { expanded = !expanded }
|
||||||
Spacer(Modifier.width(6.dp))
|
.padding(vertical = 4.dp),
|
||||||
Text(query, color = cs.onSurfaceVariant, fontSize = 12.sp, fontWeight = FontWeight.Medium)
|
verticalAlignment = Alignment.CenterVertically,
|
||||||
}
|
|
||||||
}
|
|
||||||
FlowRow(
|
|
||||||
horizontalArrangement = Arrangement.spacedBy(6.dp),
|
|
||||||
verticalArrangement = Arrangement.spacedBy(6.dp),
|
|
||||||
) {
|
) {
|
||||||
sources.forEach { source ->
|
Icon(Icons.Rounded.Language, null, tint = cs.onSurfaceVariant.copy(alpha = 0.6f), modifier = Modifier.size(13.dp))
|
||||||
SourceChip(source, isDark)
|
Spacer(Modifier.width(6.dp))
|
||||||
|
Text(
|
||||||
|
stringResource(R.string.stream_sources) + " (${sources.size})",
|
||||||
|
color = cs.onSurfaceVariant.copy(alpha = 0.6f),
|
||||||
|
fontSize = 12.sp,
|
||||||
|
fontWeight = FontWeight.Medium,
|
||||||
|
)
|
||||||
|
Spacer(Modifier.width(4.dp))
|
||||||
|
Icon(
|
||||||
|
if (expanded) Icons.Rounded.ExpandLess else Icons.Rounded.ExpandMore,
|
||||||
|
null, tint = cs.onSurfaceVariant.copy(alpha = 0.4f), modifier = Modifier.size(12.dp),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
AnimatedVisibility(expanded, enter = expandVertically(), exit = shrinkVertically()) {
|
||||||
|
Column(verticalArrangement = Arrangement.spacedBy(6.dp), modifier = Modifier.padding(top = 4.dp)) {
|
||||||
|
sources.forEach { source ->
|
||||||
|
SourceCard(source, isDark, accent) {
|
||||||
|
try {
|
||||||
|
val intent = android.content.Intent(android.content.Intent.ACTION_VIEW, android.net.Uri.parse(source.url))
|
||||||
|
context.startActivity(intent)
|
||||||
|
} catch (_: Exception) { }
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
private fun SourceChip(source: SearchSource, isDark: Boolean) {
|
private fun SourceCard(source: SearchSource, isDark: Boolean, accent: dev.kaizen.app.ui.theme.themes.KaizenAccentScheme, onClick: () -> Unit) {
|
||||||
val cs = MaterialTheme.colorScheme
|
val cs = MaterialTheme.colorScheme
|
||||||
val bg = if (isDark) Color.White.copy(alpha = 0.06f) else Color.Black.copy(alpha = 0.04f)
|
val bg = if (isDark) Color.White.copy(alpha = 0.05f) else Color.Black.copy(alpha = 0.03f)
|
||||||
val borderColor = if (isDark) Color.White.copy(alpha = 0.08f) else Color.Black.copy(alpha = 0.06f)
|
val borderColor = if (isDark) Color.White.copy(alpha = 0.06f) else Color.Black.copy(alpha = 0.05f)
|
||||||
|
|
||||||
val domain = remember(source.url) {
|
val domain = remember(source.url) {
|
||||||
try {
|
try {
|
||||||
|
|
@ -209,27 +227,38 @@ private fun SourceChip(source: SearchSource, isDark: Boolean) {
|
||||||
|
|
||||||
Column(
|
Column(
|
||||||
Modifier
|
Modifier
|
||||||
.width(140.dp)
|
.fillMaxWidth()
|
||||||
.clip(KaizenShapes.xs)
|
.clip(KaizenShapes.sm)
|
||||||
.background(bg)
|
.background(bg)
|
||||||
.border(1.dp, borderColor, KaizenShapes.xs)
|
.border(1.dp, borderColor, KaizenShapes.sm)
|
||||||
.padding(horizontal = 10.dp, vertical = 8.dp),
|
.clickable(onClick = onClick)
|
||||||
|
.padding(horizontal = 12.dp, vertical = 10.dp),
|
||||||
) {
|
) {
|
||||||
Text(
|
Text(
|
||||||
source.title.ifEmpty { domain },
|
source.title.ifEmpty { domain },
|
||||||
color = cs.onBackground,
|
color = cs.onBackground,
|
||||||
fontSize = 12.sp,
|
fontSize = 13.sp,
|
||||||
fontWeight = FontWeight.Medium,
|
fontWeight = FontWeight.Medium,
|
||||||
maxLines = 2,
|
maxLines = 2,
|
||||||
overflow = TextOverflow.Ellipsis,
|
overflow = TextOverflow.Ellipsis,
|
||||||
)
|
)
|
||||||
Spacer(Modifier.height(2.dp))
|
Spacer(Modifier.height(2.dp))
|
||||||
Text(
|
Text(
|
||||||
domain,
|
source.url,
|
||||||
color = cs.onSurfaceVariant.copy(alpha = 0.6f),
|
color = accent.primary.copy(alpha = 0.7f),
|
||||||
fontSize = 10.sp,
|
fontSize = 11.sp,
|
||||||
maxLines = 1,
|
maxLines = 1,
|
||||||
overflow = TextOverflow.Ellipsis,
|
overflow = TextOverflow.Ellipsis,
|
||||||
)
|
)
|
||||||
|
if (source.snippet.isNotBlank()) {
|
||||||
|
Spacer(Modifier.height(3.dp))
|
||||||
|
Text(
|
||||||
|
source.snippet,
|
||||||
|
color = cs.onSurfaceVariant.copy(alpha = 0.5f),
|
||||||
|
fontSize = 11.sp,
|
||||||
|
maxLines = 2,
|
||||||
|
overflow = TextOverflow.Ellipsis,
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue