feat(lab): add nav bar settings sheet with drag-to-reorder

bmc08gt · claude · bmc08gt · commit 29e8805d68cb · 2026-05-23T19:55:36.000-04:00
Add NavBarSettingsScreen and content with drag-to-reorder support.
Register NavBarSettings route, add string resources, wire entry in
Labs "Home Screen" section, and register screen in AppScreenContent.

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/apps/flipcash/app/src/main/kotlin/com/flipcash/app/internal/ui/navigation/AppScreenContent.kt b/apps/flipcash/app/src/main/kotlin/com/flipcash/app/internal/ui/navigation/AppScreenContent.kt
@@ -28,11 +28,11 @@ import com.flipcash.app.contact.verification.VerificationFlowScreen
 import com.flipcash.app.currencycreator.CurrencyCreatorFlowScreen
 import com.flipcash.app.core.AppRoute
 import com.flipcash.app.currency.RegionSelectionScreen
-import com.flipcash.app.deposit.DepositDestinationScreen
 import com.flipcash.app.deposit.DepositFlowScreen
 import com.flipcash.app.discovery.TokenDiscoveryScreen
 import com.flipcash.app.internal.ui.navigation.decorators.rememberNavMessagingEntryDecorator
 import com.flipcash.app.lab.LabsScreen
+import com.flipcash.app.lab.NavBarSettingsScreen
 import com.flipcash.app.lab.StandaloneLabsScreen
 import com.flipcash.app.login.accesskey.AccessKeyScreen
 import com.flipcash.app.login.accesskey.PhotoAccessKeyScreen
@@ -125,6 +125,7 @@ fun appEntryProvider(
     // Menu
     annotatedEntry<AppRoute.Menu.AppSettings> { AppSettingsScreen() }
     annotatedEntry<AppRoute.Menu.Lab> { LabsScreen() }
+    annotatedEntry<AppRoute.Menu.NavBarSettings> { NavBarSettingsScreen() }
     annotatedEntry<AppRoute.Menu.MyAccount> { MyAccountScreen() }
     annotatedEntry<AppRoute.Menu.BackupKey> { BackupKeyScreen() }
     annotatedEntry<AppRoute.Menu.AdvancedFeatures> { AdvancedFeaturesScreen() }
diff --git a/apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/AppRoute.kt b/apps/flipcash/core/src/main/kotlin/com/flipcash/app/core/AppRoute.kt
@@ -193,6 +193,8 @@ sealed interface AppRoute : NavKey, Parcelable {
         data object DeviceLogs : Menu
         @Serializable
         data object Lab : Menu
+        @Serializable
+        data object NavBarSettings : Menu, com.getcode.navigation.Sheet, com.getcode.navigation.WrapContentSheet
     }
 
     @Serializable
diff --git a/apps/flipcash/core/src/main/res/drawable/ic_bottom_navigation.xml b/apps/flipcash/core/src/main/res/drawable/ic_bottom_navigation.xml
@@ -0,0 +1,24 @@
+<!--
+  ~ Copyright (C) 2026 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+  <path
+      android:pathData="M200,840q-33,0 -56.5,-23.5T120,760v-560q0,-33 23.5,-56.5T200,120h560q33,0 56.5,23.5T840,200v560q0,33 -23.5,56.5T760,840L200,840ZM200,600h560v-400L200,200v400ZM200,680v80h560v-80L200,680ZM200,680v80,-80Z"
+      android:fillColor="#e8eaed"/>
+</vector>
diff --git a/apps/flipcash/core/src/main/res/values/strings.xml b/apps/flipcash/core/src/main/res/values/strings.xml
@@ -519,11 +519,16 @@
     <string name="prompt_message_currencyCreateNotYetAvailable">Check back soon</string>
 
     <string name="title_settingsSectionFeatures">Features</string>
+    <string name="title_settingsSectionHomeScreen">Home Screen</string>
     <string name="title_settingsSectionDeveloper">Developer</string>
     <string name="subtitle_settingsUserFlags">User Flags</string>
     <string name="title_settingsSectionAccount">Account</string>
     <string name="title_userFlags">User Flags</string>
 
+    <string name="title_settingsButtonOrder">Button Order</string>
+    <string name="subtitle_settingsButtonOrder">Hold and drag to reorder</string>
+    <string name="title_settingsSectionGiveButtonLabel">Give Button Label</string>
+
     <string name="title_purchase">Purchase</string>
     <string name="action_connectYourPhantomWallet">Connect Your Phantom Wallet</string>
 
diff --git a/apps/flipcash/features/lab/src/main/kotlin/com/flipcash/app/lab/NavBarSettingsScreen.kt b/apps/flipcash/features/lab/src/main/kotlin/com/flipcash/app/lab/NavBarSettingsScreen.kt
@@ -0,0 +1,31 @@
+package com.flipcash.app.lab
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import com.flipcash.app.lab.internal.NavBarSettingsContent
+import com.getcode.navigation.scenes.LocalBottomSheetDismissDispatcher
+import com.getcode.ui.components.AppBarDefaults
+import com.getcode.ui.components.AppBarWithTitle
+
+@Composable
+fun NavBarSettingsScreen() {
+    val dismiss = LocalBottomSheetDismissDispatcher.current
+
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        AppBarWithTitle(
+            title = "",
+            titleAlignment = Alignment.CenterHorizontally,
+            isInModal = true,
+            endContent = {
+                AppBarDefaults.Close { dismiss() }
+            }
+        )
+
+        NavBarSettingsContent()
+    }
+}
diff --git a/apps/flipcash/features/lab/src/main/kotlin/com/flipcash/app/lab/internal/LabsScreenContent.kt b/apps/flipcash/features/lab/src/main/kotlin/com/flipcash/app/lab/internal/LabsScreenContent.kt
@@ -11,6 +11,7 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.MarkEmailUnread
+import androidx.compose.material.icons.filled.Navigation
 import androidx.compose.material.icons.filled.PhonelinkErase
 import androidx.compose.material.icons.filled.Token
 import androidx.compose.material3.HorizontalDivider
@@ -20,6 +21,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -87,6 +89,16 @@ internal fun LabsScreenContent(viewModel: LabsScreenViewModel) {
             )
         }
 
+        item { SectionHeader(stringResource(R.string.title_settingsSectionHomeScreen)) }
+        item {
+            ListItem(
+                headline = stringResource(R.string.title_settingsButtonOrder),
+                icon = painterResource(R.drawable.ic_bottom_navigation),
+            ) {
+                navigator.navigate(AppRoute.Menu.NavBarSettings)
+            }
+        }
+
         if (betaFlags.isEmpty()) {
             item {
                 Box {
diff --git a/apps/flipcash/features/lab/src/main/kotlin/com/flipcash/app/lab/internal/NavBarSettingsContent.kt b/apps/flipcash/features/lab/src/main/kotlin/com/flipcash/app/lab/internal/NavBarSettingsContent.kt
@@ -0,0 +1,86 @@
+package com.flipcash.app.lab.internal
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.stringResource
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import com.flipcash.app.core.navigation.GiveButtonLabel
+import com.flipcash.app.core.navigation.NavBarConfig
+import com.flipcash.app.core.ui.NavigationBar
+import com.flipcash.app.featureflags.FeatureFlag
+import com.flipcash.app.featureflags.LocalFeatureFlags
+import com.flipcash.core.R
+import com.getcode.theme.CodeTheme
+import com.getcode.theme.White05
+import com.getcode.ui.components.text.SectionHeader
+import com.getcode.ui.theme.CodeSegmentedControl
+
+@Composable
+internal fun NavBarSettingsContent() {
+    val featureFlags = LocalFeatureFlags.current
+    val configString by featureFlags.getOption(FeatureFlag.NavBar)
+        .collectAsStateWithLifecycle()
+    val config = remember(configString) { NavBarConfig.deserialize(configString) }
+
+    Column(
+        modifier = Modifier
+            .wrapContentHeight(),
+    ) {
+        Text(
+            text = stringResource(R.string.subtitle_settingsButtonOrder),
+            style = CodeTheme.typography.textSmall,
+            color = CodeTheme.colors.textSecondary,
+            modifier = Modifier.padding(horizontal = CodeTheme.dimens.inset),
+        )
+
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = CodeTheme.dimens.inset)
+                .padding(top = CodeTheme.dimens.grid.x1)
+                .clip(CodeTheme.shapes.large)
+                .background(White05)
+                .padding(vertical = CodeTheme.dimens.grid.x4),
+            contentAlignment = Alignment.Center,
+        ) {
+            NavigationBar(
+                config = config,
+                onOrderChanged = { newOrder ->
+                    val updated = config.copy(order = newOrder)
+                    featureFlags.setOption(FeatureFlag.NavBar, updated.serialize())
+                },
+            )
+        }
+
+        SectionHeader(stringResource(R.string.title_settingsSectionGiveButtonLabel))
+
+        CodeSegmentedControl(
+            options = GiveButtonLabel.entries,
+            selected = config.giveButtonLabel,
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = CodeTheme.dimens.inset)
+                .padding(bottom = CodeTheme.dimens.grid.x3)
+                .navigationBarsPadding(),
+            mapper = { option ->
+                Text(text = stringResource(option.labelRes))
+            },
+            onSelectionChanged = { label ->
+                val updated = config.copy(giveButtonLabel = label)
+                featureFlags.setOption(FeatureFlag.NavBar, updated.serialize())
+            },
+        )
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -193,6 +193,8 @@ sealed interface AppRoute : NavKey, Parcelable {`
`193`	`193`	`data object DeviceLogs : Menu`
`194`	`194`	`@Serializable`
`195`	`195`	`data object Lab : Menu`
	`196`	`+ @Serializable`
	`197`	`+ data object NavBarSettings : Menu, com.getcode.navigation.Sheet, com.getcode.navigation.WrapContentSheet`
`196`	`198`	`}`
`197`	`199`
`198`	`200`	`@Serializable`