Skip to content

initial ui tweak #2204

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Tlaster merged 2 commits into from
Jun 7, 2026
Merged

initial ui tweak #2204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fed72e5
initial ui tweak
Tlaster Jun 6, 2026
b085f16
tweak ui
Tlaster Jun 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions app/src/main/java/dev/dimension/flare/ui/component/SearchBar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ import dev.dimension.flare.common.ImmutableListWrapper
import dev.dimension.flare.common.PagingState
import dev.dimension.flare.common.onLoading
import dev.dimension.flare.common.onSuccess
import dev.dimension.flare.data.model.TimelineDisplayMode
import dev.dimension.flare.model.MicroBlogKey
import dev.dimension.flare.ui.component.status.AdaptiveCard
import dev.dimension.flare.ui.component.status.CommonStatusHeaderComponent
Expand All @@ -55,6 +56,7 @@ import dev.dimension.flare.ui.model.onSuccess
import dev.dimension.flare.ui.presenter.home.SearchHistoryPresenter
import dev.dimension.flare.ui.presenter.home.SearchHistoryState
import dev.dimension.flare.ui.presenter.invoke
import dev.dimension.flare.ui.theme.screenHorizontalPadding

@Composable
internal fun SearchBar(
Expand Down Expand Up @@ -194,6 +196,15 @@ internal fun LazyStaggeredGridScope.searchContent(
) {
LazyRow(
horizontalArrangement = Arrangement.spacedBy(8.dp),
modifier =
Modifier
.let {
if (LocalTimelineAppearance.current.timelineDisplayMode == TimelineDisplayMode.Plain) {
it.padding(horizontal = screenHorizontalPadding)
} else {
it
}
},
) {
items(itemCount) {
val item = get(it)
Expand Down
40 changes: 32 additions & 8 deletions app/src/main/java/dev/dimension/flare/ui/screen/home/DiscoverScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,20 +40,22 @@ import dev.dimension.flare.common.isRefreshing
import dev.dimension.flare.common.isSuccess
import dev.dimension.flare.common.onLoading
import dev.dimension.flare.common.onSuccess
import dev.dimension.flare.data.model.TimelineDisplayMode
import dev.dimension.flare.model.AccountType
import dev.dimension.flare.model.MicroBlogKey
import dev.dimension.flare.ui.common.items
import dev.dimension.flare.ui.component.AvatarComponent
import dev.dimension.flare.ui.component.FlareDropdownMenu
import dev.dimension.flare.ui.component.FlareScaffold
import dev.dimension.flare.ui.component.LocalTimelineAppearance
import dev.dimension.flare.ui.component.RefreshContainer
import dev.dimension.flare.ui.component.SearchBar
import dev.dimension.flare.ui.component.SearchBarState
import dev.dimension.flare.ui.component.placeholder
import dev.dimension.flare.ui.component.platform.isBigScreen
import dev.dimension.flare.ui.component.searchBarPresenter
import dev.dimension.flare.ui.component.searchContent
import dev.dimension.flare.ui.component.status.AdaptiveCard
import dev.dimension.flare.ui.component.status.AdaptiveOutlinedCard
import dev.dimension.flare.ui.component.status.CommonStatusHeaderComponent
import dev.dimension.flare.ui.component.status.LazyStatusVerticalStaggeredGrid
import dev.dimension.flare.ui.component.status.UserPlaceholder
Expand Down Expand Up @@ -87,8 +89,7 @@ internal fun DiscoverScreen(onUserClick: (AccountType, MicroBlogKey) -> Unit) {
Row(
modifier =
Modifier
.fillMaxWidth()
.padding(horizontal = screenHorizontalPadding),
.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterHorizontally),
verticalAlignment = Alignment.CenterVertically,
) {
Expand Down Expand Up @@ -157,7 +158,6 @@ internal fun DiscoverScreen(onUserClick: (AccountType, MicroBlogKey) -> Unit) {
LazyStatusVerticalStaggeredGrid(
state = lazyListState,
contentPadding = contentPadding,
forceCardMode = true,
) {
if (isBigScreen) {
state.accounts.onSuccess { accounts ->
Expand All @@ -167,7 +167,9 @@ internal fun DiscoverScreen(onUserClick: (AccountType, MicroBlogKey) -> Unit) {
) {
LazyRow(
horizontalArrangement = Arrangement.spacedBy(8.dp),
modifier = Modifier.padding(bottom = 8.dp),
modifier =
Modifier
.padding(bottom = 8.dp),
) {
items(accounts) { profile ->
FilterChip(
Expand Down Expand Up @@ -222,11 +224,22 @@ internal fun DiscoverScreen(onUserClick: (AccountType, MicroBlogKey) -> Unit) {
) {
LazyRow(
horizontalArrangement = Arrangement.spacedBy(8.dp),
modifier =
Modifier
.let {
if (!isBigScreen &&
LocalTimelineAppearance.current.timelineDisplayMode == TimelineDisplayMode.Plain
) {
it.padding(horizontal = screenHorizontalPadding)
} else {
it
}
},
) {
items(
state.users,
loadingContent = {
AdaptiveCard(
AdaptiveOutlinedCard(
modifier =
Modifier
.width(256.dp),
Expand All @@ -237,7 +250,7 @@ internal fun DiscoverScreen(onUserClick: (AccountType, MicroBlogKey) -> Unit) {
}
},
) { item ->
AdaptiveCard(
AdaptiveOutlinedCard(
modifier =
Modifier
.width(256.dp),
Expand Down Expand Up @@ -281,12 +294,23 @@ internal fun DiscoverScreen(onUserClick: (AccountType, MicroBlogKey) -> Unit) {
FlowRow(
horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalArrangement = Arrangement.spacedBy(4.dp),
modifier =
Modifier
.let {
if (!isBigScreen &&
LocalTimelineAppearance.current.timelineDisplayMode == TimelineDisplayMode.Plain
) {
it.padding(horizontal = screenHorizontalPadding)
} else {
it
}
},
) {
repeat(
itemCount,
) {
val hashtag = get(it)
AdaptiveCard(
AdaptiveOutlinedCard(
modifier =
Modifier
.clickable {
Expand Down
87 changes: 59 additions & 28 deletions app/src/main/java/dev/dimension/flare/ui/screen/home/HomeTimelineScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ package dev.dimension.flare.ui.screen.home

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalSharedTransitionApi
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.layout.Arrangement
Expand Down Expand Up @@ -33,7 +34,6 @@ import androidx.compose.foundation.lazy.staggeredgrid.LazyStaggeredGridState
import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridState
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
Expand All @@ -42,6 +42,7 @@ import androidx.compose.material3.LeadingIconTab
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.SecondaryScrollableTabRow
import androidx.compose.material3.TabRowDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TopAppBarDefaults
Expand All @@ -55,7 +56,6 @@ import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
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.input.nestedscroll.nestedScroll
import androidx.compose.ui.platform.LocalContext
Expand All @@ -72,6 +72,7 @@ import compose.icons.fontawesomeicons.solid.Sliders
import dev.dimension.flare.R
import dev.dimension.flare.common.onSuccess
import dev.dimension.flare.data.model.BottomBarBehavior
import dev.dimension.flare.data.model.TimelineDisplayMode
import dev.dimension.flare.data.model.tab.TimelineTabItemV2
import dev.dimension.flare.data.model.tab.resolveTimelineAppearance
import dev.dimension.flare.ui.component.AvatarComponent
Expand All @@ -84,10 +85,10 @@ import dev.dimension.flare.ui.component.LocalGlobalAppearance
import dev.dimension.flare.ui.component.LocalTimelineAppearance
import dev.dimension.flare.ui.component.RefreshContainer
import dev.dimension.flare.ui.component.TabIcon
import dev.dimension.flare.ui.component.TabRowIndicator
import dev.dimension.flare.ui.component.platform.LocalWindowSizeClass
import dev.dimension.flare.ui.component.platform.WindowSizeClass
import dev.dimension.flare.ui.component.platform.isBigScreen
import dev.dimension.flare.ui.component.platform.isCompatScreen
import dev.dimension.flare.ui.component.status.AdaptiveCard
import dev.dimension.flare.ui.component.status.LazyStatusVerticalStaggeredGrid
import dev.dimension.flare.ui.component.status.status
Expand All @@ -96,6 +97,7 @@ import dev.dimension.flare.ui.model.onError
import dev.dimension.flare.ui.model.onLoading
import dev.dimension.flare.ui.model.onSuccess
import dev.dimension.flare.ui.model.takeSuccess
import dev.dimension.flare.ui.model.takeSuccessOr
import dev.dimension.flare.ui.presenter.HomeTimelineWithTabsPresenter
import dev.dimension.flare.ui.presenter.home.DeepLinkPresenter
import dev.dimension.flare.ui.presenter.home.LoggedInPresenter
Expand All @@ -104,6 +106,7 @@ import dev.dimension.flare.ui.presenter.invoke
import dev.dimension.flare.ui.presenter.rememberTimelineItemPresenterWithLazyListState
import dev.dimension.flare.ui.route.Route
import dev.dimension.flare.ui.route.Router
import dev.dimension.flare.ui.theme.isLightTheme
import dev.dimension.flare.ui.theme.screenHorizontalPadding
import kotlinx.coroutines.launch
import moe.tlaster.precompose.molecule.producePresenter
Expand Down Expand Up @@ -219,9 +222,37 @@ internal fun HomeTimelineScreen(
} else {
TopAppBarDefaults.enterAlwaysScrollBehavior()
}
val appearance = LocalTimelineAppearance.current
val displayMode =
remember(
state.tabState,
state.pagerState.takeSuccess()?.currentPage,
appearance,
) {
state.tabState
.map {
it
.getOrNull(state.pagerState.takeSuccess()?.currentPage ?: 0)
?.resolveTimelineAppearance(appearance)
?.timelineDisplayMode ?: TimelineDisplayMode.Plain
}.takeSuccessOr(TimelineDisplayMode.Plain)
}
val color by animateColorAsState(
when (displayMode) {
TimelineDisplayMode.Plain if isLightTheme() && isCompatScreen() -> MaterialTheme.colorScheme.surface
else -> MaterialTheme.colorScheme.background
},
label = "TopAppBarBackground",
)
FlareScaffold(
topBar = {
FlareTopAppBar(
colors =
TopAppBarDefaults.topAppBarColors(
containerColor = color,
scrolledContainerColor = color,
actionIconContentColor = MaterialTheme.colorScheme.primary,
),
title = {
state.pagerState.onSuccess { pagerState ->
state.tabState.onSuccess { tabs ->
Expand All @@ -237,46 +268,46 @@ internal fun HomeTimelineScreen(
tabs.lastIndex,
),
edgePadding = 0.dp,
divider = {},
divider = { },
indicator = {
TabRowIndicator(
selectedIndex =
TabRowDefaults.SecondaryIndicator(
Modifier.tabIndicatorOffset(
minOf(
pagerState.currentPage,
tabs.lastIndex,
),
matchContentSize = false,
),
)
},
minTabWidth = 48.dp,
) {
state.tabState.onSuccess { tabs ->
tabs.forEachIndexed { index, tab ->
LeadingIconTab(
modifier = Modifier.clip(CircleShape),
selectedContentColor = MaterialTheme.colorScheme.onSecondaryContainer,
unselectedContentColor = LocalContentColor.current,
selected = index == pagerState.currentPage,
onClick = {
scope.launch {
pagerState.scrollToPage(index)
}
},
text = {
dev.dimension.flare.ui.component.Text(
tab.title,
tabs.forEachIndexed { index, tab ->
LeadingIconTab(
modifier = Modifier,
selectedContentColor = MaterialTheme.colorScheme.onSecondaryContainer,
unselectedContentColor = LocalContentColor.current,
selected = index == pagerState.currentPage,
onClick = {
scope.launch {
pagerState.scrollToPage(index)
}
},
text = {
dev.dimension.flare.ui.component.Text(
tab.title,
// modifier =
// Modifier
// .padding(8.dp),
)
},
icon = {
TabIcon(tab)
},
)
},
icon = {
TabIcon(tab)
},
// colors = FilterChipDefaults.filterChipColors(
// containerColor = MaterialTheme.colorScheme.surface,
// ),
)
}
)
}
}
}
Expand Down
Loading
Loading