Skip to content

feat/pane-expansion : Add expansion anchors and enforce 250dp minimum… #81

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
prateekbatra-g merged 2 commits into from
Jun 26, 2026
Merged

feat/pane-expansion : Add expansion anchors and enforce 250dp minimum… #81

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
6e13e7e
feat/pane-expansion : Add expansion anchors and enforce 250dp minimum…
prateekbatra-g May 22, 2026
ae02729
feat/pane-expansion : Use `rememberSaveable` for initial proportion s…
prateekbatra-g Jun 18, 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
77 changes: 67 additions & 10 deletions app/src/main/java/com/example/cahier/features/home/CahierHomeScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import androidx.compose.material3.VerticalDragHandle
import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffoldRole
import androidx.compose.material3.adaptive.layout.PaneExpansionAnchor
import androidx.compose.material3.adaptive.layout.PaneExpansionState
import androidx.compose.material3.adaptive.layout.rememberPaneExpansionState
import androidx.compose.material3.adaptive.navigation.ThreePaneScaffoldNavigator
Expand All @@ -52,10 +53,15 @@ import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clipToBounds
import androidx.compose.ui.layout.layout
Comment thread
prateekbatra-g marked this conversation as resolved.
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex
import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
import androidx.ink.strokes.Stroke
import androidx.lifecycle.compose.collectAsStateWithLifecycle
Expand All @@ -70,6 +76,31 @@ import com.example.cahier.features.home.viewmodel.HomeScreenViewModel
import com.example.cahier.features.home.viewmodel.NoteListUiState
import kotlinx.coroutines.launch

private val MinPaneWidth = 250.dp
Comment thread
prateekbatra-g marked this conversation as resolved.


// The layout modifier implements a minimum width for the pane while
// allowing it to report its original width to the scaffold, preventing
// content from being overly compressed during resizing.
private fun Modifier.minimumWidthLayout(minWidth: Dp): Modifier = this
.clipToBounds()
.layout { measurable, constraints ->
if (constraints.maxWidth == 0) {
layout(0, 0) {}
} else {
val fixedWidth = minWidth.roundToPx()
val placeable = measurable.measure(
constraints.copy(
minWidth = fixedWidth,
maxWidth = maxOf(fixedWidth, constraints.maxWidth)
)
)
val reportedWidth = constraints.maxWidth
layout(reportedWidth, placeable.height) {
placeable.placeRelative(0, 0)
}
}
}

object HomeDestination : NavigationDestination {
override val route = "home"
Expand Down Expand Up @@ -108,16 +139,31 @@ fun HomePane(
modifier: Modifier = Modifier,
forceCompact: Boolean? = null,
homeScreenViewModel: HomeScreenViewModel = hiltViewModel(),
) {
) {
var currentDestination by rememberSaveable { mutableStateOf(AppDestinations.Home) }
val navigator = rememberListDetailPaneScaffoldNavigator<Note>()
val noteList by homeScreenViewModel.noteList.collectAsStateWithLifecycle()
val selectedNoteUIState by homeScreenViewModel.uiState.collectAsStateWithLifecycle()
val coroutineScope = rememberCoroutineScope()
val activity = LocalActivity.current
val windowSizeClass = activity?.let { calculateWindowSizeClass(it) }
val paneExpansionState = rememberPaneExpansionState()
var hasSetInitialProportion by remember {
val paneExpansionState = rememberPaneExpansionState(
keyProvider = navigator.scaffoldValue,
anchors = listOf(
// 1. Fully collapsed state (0% screen fraction)
PaneExpansionAnchor.Proportion(proportion = 0f),

// 2. The 25 % minimum width snapping boundary anchor
PaneExpansionAnchor.Proportion(proportion = 0.25f),

// 3. Middle split state (50% screen fraction)
PaneExpansionAnchor.Proportion(proportion = 0.5f),

// 4. Fully expanded list state (100% screen fraction, detail collapsed)
PaneExpansionAnchor.Proportion(proportion = 1f)
)
)
Comment thread
prateekbatra-g marked this conversation as resolved.
var hasSetInitialProportion by rememberSaveable {
mutableStateOf(false)
}
val isCompact = forceCompact
Expand Down Expand Up @@ -153,7 +199,7 @@ fun HomePane(

LaunchedEffect(isCompact, hasSetInitialProportion) {
if (!isCompact && !hasSetInitialProportion) {
paneExpansionState.setFirstPaneProportion(0.3f)
paneExpansionState.setFirstPaneProportion(0.5f)
hasSetInitialProportion = true
}
}
Expand Down Expand Up @@ -236,23 +282,29 @@ private fun CahierNavigationSuite(
when (currentDestination) {
AppDestinations.Home -> {
ListDetailPaneScaffold(
modifier = Modifier.fillMaxSize(),
directive = navigator.scaffoldDirective,
value = navigator.scaffoldValue,
paneExpansionState = paneExpansionState,
paneExpansionDragHandle = { state ->
val interactionSource = remember { MutableInteractionSource() }
VerticalDragHandle(
modifier =
Modifier.paneExpansionDraggable(
state,
LocalMinimumInteractiveComponentSize
.current,
interactionSource,
),
Modifier
.paneExpansionDraggable(
state,
LocalMinimumInteractiveComponentSize
.current,
interactionSource,
)
.zIndex(2f), // Specify z-index to ensure the drag handle is drawn on top of the panes
)
},
listPane = {
ListPaneContent(
modifier = Modifier
.fillMaxSize()
.minimumWidthLayout(MinPaneWidth),
noteList = noteList.noteList,
isCompact = isCompact,
selectedNoteId = if (isCompact) null
Expand Down Expand Up @@ -294,6 +346,11 @@ private fun CahierNavigationSuite(
if (!isCompact) {
selectedNoteUIState.note.let { note ->
DetailPaneContent(
modifier = Modifier
.fillMaxSize()
// Specify z-index to ensure the detail pane content is correctly layered
.zIndex(1f)
.minimumWidthLayout(MinPaneWidth),
note = note,
strokes = selectedNoteUIState.strokes,
onClickToEdit = {
Expand Down
3 changes: 2 additions & 1 deletion app/src/main/java/com/example/cahier/features/home/HomeScreenComponents.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -390,7 +390,8 @@ fun NoteDetail(
Surface(
modifier = modifier.fillMaxSize(),
shape = RoundedCornerShape(12.dp),
tonalElevation = 6.dp
tonalElevation = 6.dp,
shadowElevation = 8.dp
) {
Spacer(modifier = Modifier.height(16.dp))
when (note.type) {
Expand Down
Binary file modified screenshots/reference_screenshot_navrail.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading