nick/amethyst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Merge pull request #2780 from mstrofnone/fix/desktop-sidebar-scrollable

Browse Source 
fix(desktop): make the single-pane navigation rail scrollable
This commit is contained in:
Vitor Pamplona
2026-05-08 08:30:01 -04:00
committed by GitHub
parent 36112c8b11 01f6c1c24b
commit ce42a36882
1 changed files with 129 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
desktopApp/src/jvmMain/kotlin/com/vitorpamplona/amethyst/desktop/ui/deck/SinglePaneLayout.kt
+56 -17
View File
@@ -20,19 +20,24 @@
*/
package com.vitorpamplona.amethyst.desktop.ui.deck
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
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.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.NavigationRail
import androidx.compose.material3.NavigationRailItem
import androidx.compose.material3.NavigationRailItemDefaults
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.VerticalDivider
@@ -105,13 +110,46 @@ fun SinglePaneLayout(
Row(modifier = modifier.fillMaxSize()) {
if (!isImmersive) {
NavigationRail(
modifier = Modifier.width(80.dp).fillMaxHeight(),
containerColor = MaterialTheme.colorScheme.surfaceContainer,
// macOS: push rail items below the traffic lights.
header = { Spacer(Modifier.height(titleBarInsetTop)) },
) {
// Custom navigation rail with a scrollable items area so all pinned
// screens (Home, Reads, Notifications, ...) remain reachable when
// the window is short. Bottom status indicators stay anchored.
//
// We don't use Material3 `NavigationRail` directly here because its
// internal `Column` is not scrollable — when there are more pinned
// items than fit vertically, items at the bottom of the list (and
// the "More" button) get clipped on small windows. We replicate the
// rail's container styling via NavigationRailItemDefaults so item
// visuals are unchanged.
val railScrollState = rememberScrollState()
val pinnedScreens by pinnedNavBarState.pinnedScreens.collectAsState()
val torState = LocalTorState.current
val allAccountsState by accountManager.allAccounts.collectAsState()
val singlePaneScope = rememberCoroutineScope()
var showAddAccountDialog by remember { mutableStateOf(false) }
Column(
modifier =
Modifier
.width(80.dp)
.fillMaxHeight()
.background(MaterialTheme.colorScheme.surfaceContainer),
horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally,
) {
// macOS: push rail items below the traffic lights.
Spacer(Modifier.height(titleBarInsetTop))
// Scrollable region for pinned screens + "More" launcher.
// Takes all remaining space above the fixed bottom controls
// (weight(1f)) and scrolls vertically when items overflow.
Column(
modifier =
Modifier
.weight(1f)
.fillMaxWidth()
.verticalScroll(railScrollState),
horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Top,
) {
pinnedScreens.forEach { screenType ->
// Rename "Home" to "Feeds" in the nav rail
val label = if (screenType == DeckColumnType.HomeFeed) "Feeds" else screenType.title()
@@ -136,6 +174,7 @@ fun SinglePaneLayout(
overflow = TextOverflow.Ellipsis,
)
},
colors = NavigationRailItemDefaults.colors(),
)
}
@@ -156,10 +195,16 @@ fun SinglePaneLayout(
maxLines = 1,
)
},
colors = NavigationRailItemDefaults.colors(),
)
}
Spacer(Modifier.weight(1f))
// Fixed bottom controls — always visible regardless of how
// many items are in the scrollable region above.
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally,
) {
// Relay health — shows elapsed time since last event (hidden when <30s)
RelayHealthIndicator(
lastEventReceivedAt = lastRelayEventAt,
@@ -172,8 +217,6 @@ fun SinglePaneLayout(
modifier = Modifier.padding(bottom = 4.dp),
)
// Tor status
val torState = LocalTorState.current
TorStatusIndicator(
status = torState.status,
onClick = {
@@ -183,11 +226,6 @@ fun SinglePaneLayout(
modifier = Modifier.padding(bottom = 4.dp),
)
// Account switcher — at very bottom of rail
val allAccountsState by accountManager.allAccounts.collectAsState()
val singlePaneScope = rememberCoroutineScope()
var showAddAccountDialog by remember { mutableStateOf(false) }
AccountSwitcherDropdown(
activeNpub = accountManager.currentAccount()?.npub,
allAccounts = allAccountsState,
@@ -205,6 +243,8 @@ fun SinglePaneLayout(
},
modifier = Modifier.padding(bottom = 8.dp),
)
}
}
if (showAddAccountDialog) {
AddAccountDialog(
@@ -219,7 +259,6 @@ fun SinglePaneLayout(
)
}
}
}
if (!isImmersive) {
VerticalDivider()