From c762e2c0ebcfb66f9c55ba0167a78840bee084ca Mon Sep 17 00:00:00 2001
From: Ash <ashtrindade5@gmail.com>
Date: Mon, 24 Aug 2026 21:00:08 -0300
Subject: [PATCH] ref: reworked bottom nav bar with compose and new default
 items

---
 .idea/vcs.xml                                 |   7 +
 .../resolve/SnackbarErrorObserver.kt          |   2 +-
 .../futon/core/prefs/AppSettings.kt           |  39 +++-
 .../landwarderer/futon/core/prefs/NavItem.kt  |  79 ++++++-
 .../futon/core/ui/components/AppTheme.kt      |  35 ++++
 .../futon/core/ui/components/BottomNavBar.kt  | 144 +++++++++++++
 .../core/ui/components/BottomNavBarState.kt   |  40 ++++
 .../core/ui/util/ReversibleActionObserver.kt  |   4 +-
 .../ui/dialog/DownloadDialogFragment.kt       |   4 +-
 .../ui/worker/DownloadStartedObserver.kt      |   4 +-
 .../futon/main/ui/ExitCallback.kt             |  10 +-
 .../futon/main/ui/MainActionButtonBehavior.kt |   9 +-
 .../futon/main/ui/MainActivity.kt             | 198 +++++++++++-------
 .../futon/main/ui/MainNavigationDelegate.kt   | 185 ++++++++++------
 .../futon/main/ui/owners/BottomNavOwner.kt    |   9 +-
 .../main/res/drawable/ic_favorites_filled.xml |   9 +
 app/src/main/res/drawable/ic_home.xml         |   9 +
 app/src/main/res/drawable/ic_library.xml      |   9 +
 .../main/res/drawable/ic_settings_filled.xml  |   9 +
 app/src/main/res/layout/activity_main.xml     |   5 +-
 app/src/main/res/values/ids.xml               |   1 +
 app/src/main/res/values/strings.xml           |   3 +
 22 files changed, 647 insertions(+), 167 deletions(-)
 create mode 100644 app/src/main/kotlin/io/github/landwarderer/futon/core/ui/components/AppTheme.kt
 create mode 100644 app/src/main/kotlin/io/github/landwarderer/futon/core/ui/components/BottomNavBar.kt
 create mode 100644 app/src/main/kotlin/io/github/landwarderer/futon/core/ui/components/BottomNavBarState.kt
 create mode 100644 app/src/main/res/drawable/ic_favorites_filled.xml
 create mode 100644 app/src/main/res/drawable/ic_home.xml
 create mode 100644 app/src/main/res/drawable/ic_library.xml
 create mode 100644 app/src/main/res/drawable/ic_settings_filled.xml

diff --git a/.idea/vcs.xml b/.idea/vcs.xml
index 83ad4fc1b8..15fd012867 100644
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -1,5 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="CommitMessageInspectionProfile">
+    <profile version="1.0">
+      <inspection_tool class="BodyLimit" enabled="true" level="ERROR" enabled_by_default="true" />
+      <inspection_tool class="SubjectBodySeparation" enabled="true" level="ERROR" enabled_by_default="true" />
+      <inspection_tool class="SubjectLimit" enabled="true" level="ERROR" enabled_by_default="true" />
+    </profile>
+  </component>
   <component name="GitSharedSettings">
     <option name="FORCE_PUSH_PROHIBITED_PATTERNS">
       <list>
diff --git a/app/src/main/kotlin/io/github/landwarderer/futon/core/exceptions/resolve/SnackbarErrorObserver.kt b/app/src/main/kotlin/io/github/landwarderer/futon/core/exceptions/resolve/SnackbarErrorObserver.kt
index 84fca8380a..82b1c5deea 100644
--- a/app/src/main/kotlin/io/github/landwarderer/futon/core/exceptions/resolve/SnackbarErrorObserver.kt
+++ b/app/src/main/kotlin/io/github/landwarderer/futon/core/exceptions/resolve/SnackbarErrorObserver.kt
@@ -26,7 +26,7 @@ class SnackbarErrorObserver(
 	override suspend fun emit(value: Throwable) {
 		val snackbar = Snackbar.make(host, value.getDisplayMessage(host.context.resources), Snackbar.LENGTH_SHORT)
 		when (activity) {
-			is BottomNavOwner -> snackbar.anchorView = activity.bottomNav
+			is BottomNavOwner -> snackbar.anchorView = activity.bottomNavView
 			is BottomSheetOwner -> snackbar.anchorView = activity.bottomSheet
 		}
 		if (canResolve(value)) {
diff --git a/app/src/main/kotlin/io/github/landwarderer/futon/core/prefs/AppSettings.kt b/app/src/main/kotlin/io/github/landwarderer/futon/core/prefs/AppSettings.kt
index 99fb3347ab..dbd07251bd 100644
--- a/app/src/main/kotlin/io/github/landwarderer/futon/core/prefs/AppSettings.kt
+++ b/app/src/main/kotlin/io/github/landwarderer/futon/core/prefs/AppSettings.kt
@@ -70,7 +70,7 @@ class AppSettings @Inject constructor(@ApplicationContext context: Context) {
 		get() {
 			val raw = prefs.getString(KEY_NAV_MAIN, null)?.split(',')
 			return if (raw.isNullOrEmpty()) {
-				listOf(NavItem.HISTORY, NavItem.FAVORITES, NavItem.EXPLORE, NavItem.FEED)
+				FUTON_DEFAULT_NAV_ITEMS
 			} else {
 				raw.mapNotNull { x -> NavItem.entries.find(x) }.ifEmpty { listOf(NavItem.EXPLORE) }
 			}
@@ -81,6 +81,30 @@ class AppSettings @Inject constructor(@ApplicationContext context: Context) {
 			}
 		}
 
+	/** Returns true once the one-time Futon nav default migration has been applied. */
+	val isFutonNavDefaultApplied: Boolean
+		get() = prefs.getBoolean(KEY_NAV_FUTON_DEFAULT_APPLIED, false)
+
+	/**
+	 * Migrates users who still have the old Kotatsu 4-item default to the new Futon 5-item
+	 * default (History, Favourites, Local, Explore, Settings) and marks the migration as done
+	 * so the tutorial tip is shown exactly once.  No-op on subsequent calls.
+	 */
+	fun applyFutonNavDefaultIfNeeded() {
+		if (isFutonNavDefaultApplied) return
+		val raw = prefs.getString(KEY_NAV_MAIN, null)
+		// Migrate only when the pref is absent or still the old Kotatsu default ordering.
+		val isOldDefault = raw == null ||
+			raw == "HISTORY,FAVORITES,EXPLORE,FEED" ||
+			raw == "HISTORY,FAVORITES,FEED,EXPLORE"
+		prefs.edit {
+			if (isOldDefault) {
+				putString(KEY_NAV_MAIN, FUTON_DEFAULT_NAV_ITEMS.joinToString(",") { it.name })
+			}
+			putBoolean(KEY_NAV_FUTON_DEFAULT_APPLIED, true)
+		}
+	}
+
 	val isNavLabelsVisible: Boolean
 		get() = prefs.getBoolean(KEY_NAV_LABELS, false)
 
@@ -839,6 +863,19 @@ class AppSettings @Inject constructor(@ApplicationContext context: Context) {
 		const val KEY_NAV_LABELS = "nav_labels"
 		const val KEY_NAV_PINNED = "nav_pinned"
 		const val KEY_MAIN_FAB = "main_fab"
+		/** Marks that the one-time migration to Futon default nav items has been applied. */
+		const val KEY_NAV_FUTON_DEFAULT_APPLIED = "nav_futon_default_applied"
+		/** Tip key for the "new nav bar defaults" one-time tutorial banner. */
+		const val TIP_NEW_NAV_DEFAULT = "tip_new_nav_default"
+
+		/** The 5-item default introduced by Futon: History, Favourites, Local, Explore, Settings. */
+		val FUTON_DEFAULT_NAV_ITEMS: List<NavItem> = listOf(
+			NavItem.HISTORY,
+			NavItem.FAVORITES,
+			NavItem.LOCAL,
+			NavItem.EXPLORE,
+			NavItem.SETTINGS,
+		)
 		const val KEY_32BIT_COLOR = "enhanced_colors"
 		const val KEY_SOURCES_ORDER = "sources_sort_order"
 		const val KEY_SOURCES_CATALOG = "sources_catalog"
diff --git a/app/src/main/kotlin/io/github/landwarderer/futon/core/prefs/NavItem.kt b/app/src/main/kotlin/io/github/landwarderer/futon/core/prefs/NavItem.kt
index 83d1f3f907..28bcb16659 100644
--- a/app/src/main/kotlin/io/github/landwarderer/futon/core/prefs/NavItem.kt
+++ b/app/src/main/kotlin/io/github/landwarderer/futon/core/prefs/NavItem.kt
@@ -10,17 +10,80 @@ import io.github.landwarderer.futon.R
 enum class NavItem(
 	@IdRes val id: Int,
 	@StringRes val title: Int,
+	/** Selector drawable used by the legacy NavigationBarView / NavigationRailView. */
 	@DrawableRes val icon: Int,
+	/** Plain vector shown in Compose when this item IS selected. */
+	@DrawableRes val iconSelected: Int,
+	/** Plain vector shown in Compose when this item is NOT selected. */
+	@DrawableRes val iconUnselected: Int,
+	/** When true, tapping this item opens an Activity instead of swapping a Fragment. */
+	val isActivityLauncher: Boolean = false,
 ) {
 
-	HISTORY(R.id.nav_history, R.string.history, R.drawable.ic_history_selector),
-	FAVORITES(R.id.nav_favorites, R.string.favourites, R.drawable.ic_favourites_selector),
-	LOCAL(R.id.nav_local, R.string.on_device, R.drawable.ic_storage_selector),
-	EXPLORE(R.id.nav_explore, R.string.explore, R.drawable.ic_explore_selector),
-	SUGGESTIONS(R.id.nav_suggestions, R.string.suggestions, R.drawable.ic_suggestion_selector),
-	FEED(R.id.nav_feed, R.string.feed, R.drawable.ic_feed_selector),
-	UPDATED(R.id.nav_updated, R.string.updated, R.drawable.ic_updated_selector),
-	BOOKMARKS(R.id.nav_bookmarks, R.string.bookmarks, R.drawable.ic_bookmark_selector),
+	HISTORY(
+		id = R.id.nav_history,
+		title = R.string.history,
+		icon = R.drawable.ic_history_selector,
+		iconSelected = R.drawable.ic_history,
+		iconUnselected = R.drawable.ic_history,
+	),
+	FAVORITES(
+		id = R.id.nav_favorites,
+		title = R.string.favourites,
+		icon = R.drawable.ic_favourites_selector,
+		iconSelected = R.drawable.ic_heart,
+		iconUnselected = R.drawable.ic_heart_outline,
+	),
+	LOCAL(
+		id = R.id.nav_local,
+		title = R.string.on_device,
+		icon = R.drawable.ic_storage_selector,
+		iconSelected = R.drawable.ic_storage_checked,
+		iconUnselected = R.drawable.ic_storage,
+	),
+	EXPLORE(
+		id = R.id.nav_explore,
+		title = R.string.explore,
+		icon = R.drawable.ic_explore_selector,
+		iconSelected = R.drawable.ic_explore_checked,
+		iconUnselected = R.drawable.ic_explore_normal,
+	),
+	SUGGESTIONS(
+		id = R.id.nav_suggestions,
+		title = R.string.suggestions,
+		icon = R.drawable.ic_suggestion_selector,
+		iconSelected = R.drawable.ic_suggestion_checked,
+		iconUnselected = R.drawable.ic_suggestion,
+	),
+	FEED(
+		id = R.id.nav_feed,
+		title = R.string.feed,
+		icon = R.drawable.ic_feed_selector,
+		iconSelected = R.drawable.ic_feed,
+		iconUnselected = R.drawable.ic_feed,
+	),
+	UPDATED(
+		id = R.id.nav_updated,
+		title = R.string.updated,
+		icon = R.drawable.ic_updated_selector,
+		iconSelected = R.drawable.ic_updated_checked,
+		iconUnselected = R.drawable.ic_updated,
+	),
+	BOOKMARKS(
+		id = R.id.nav_bookmarks,
+		title = R.string.bookmarks,
+		icon = R.drawable.ic_bookmark_selector,
+		iconSelected = R.drawable.ic_bookmark_checked,
+		iconUnselected = R.drawable.ic_bookmark,
+	),
+	SETTINGS(
+		id = R.id.nav_settings,
+		title = R.string.settings,
+		icon = R.drawable.ic_settings_filled,
+		iconSelected = R.drawable.ic_settings_filled,
+		iconUnselected = R.drawable.ic_settings,
+		isActivityLauncher = true,
+	),
 	;
 
 	fun isAvailable(settings: AppSettings): Boolean = when (this) {
diff --git a/app/src/main/kotlin/io/github/landwarderer/futon/core/ui/components/AppTheme.kt b/app/src/main/kotlin/io/github/landwarderer/futon/core/ui/components/AppTheme.kt
new file mode 100644
index 0000000000..ddea5f760c
--- /dev/null
+++ b/app/src/main/kotlin/io/github/landwarderer/futon/core/ui/components/AppTheme.kt
@@ -0,0 +1,35 @@
+package io.github.landwarderer.futon.core.ui.components
+
+import android.os.Build
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.dynamicDarkColorScheme
+import androidx.compose.material3.dynamicLightColorScheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.platform.LocalContext
+import io.github.landwarderer.futon.core.util.ext.isNightMode
+
+/**
+ * Minimal Compose theme wrapper for View-Compose interop.
+ *
+ * Uses Material3 dynamic colors on Android 12+ to match the system/app palette,
+ * and falls back to the default Material3 color scheme on older devices.
+ * Typography and shapes are left at Material3 defaults.
+ */
+@Composable
+fun AppTheme(content: @Composable () -> Unit) {
+    val context = LocalContext.current
+    val isDark = remember(context) { context.resources.isNightMode }
+
+    val colorScheme = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+        if (isDark) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
+    } else {
+        if (isDark) androidx.compose.material3.darkColorScheme()
+        else androidx.compose.material3.lightColorScheme()
+    }
+
+    MaterialTheme(
+        colorScheme = colorScheme,
+        content = content,
+    )
+}
diff --git a/app/src/main/kotlin/io/github/landwarderer/futon/core/ui/components/BottomNavBar.kt b/app/src/main/kotlin/io/github/landwarderer/futon/core/ui/components/BottomNavBar.kt
new file mode 100644
index 0000000000..e71ba9f318
--- /dev/null
+++ b/app/src/main/kotlin/io/github/landwarderer/futon/core/ui/components/BottomNavBar.kt
@@ -0,0 +1,144 @@
+package io.github.landwarderer.futon.core.ui.components
+
+import androidx.annotation.IdRes
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Badge
+import androidx.compose.material3.BadgedBox
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.NavigationBar
+import androidx.compose.material3.NavigationBarItem
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import io.github.landwarderer.futon.R
+import io.github.landwarderer.futon.core.prefs.AppSettings
+import io.github.landwarderer.futon.core.prefs.NavItem
+
+/**
+ * Compose bottom navigation bar.
+ *
+ * @param navItems       Ordered list of items to display (from [AppSettings.mainNavItems]).
+ * @param selectedItemId Resource id of the currently selected item, or 0 if none.
+ * @param badgeCounts    Map from item resource id to badge count.
+ *                       Positive = number badge, negative = dot-only badge, 0/absent = no badge.
+ * @param showTip        Whether to show the one-time "new defaults" tutorial tip.
+ * @param onItemClick    Called when the user taps an item. Receives the [NavItem].
+ * @param onTipDismiss   Called when the user dismisses the tutorial tip.
+ */
+@Composable
+fun BottomNavBar(
+    navItems: List<NavItem>,
+    @IdRes selectedItemId: Int,
+    badgeCounts: Map<Int, Int> = emptyMap(),
+    showTip: Boolean = false,
+    onItemClick: (NavItem) -> Unit = {},
+    onTipDismiss: () -> Unit = {},
+) {
+    Column {
+        AnimatedVisibility(
+            visible = showTip,
+            enter = expandVertically(expandFrom = Alignment.Top),
+            exit = shrinkVertically(shrinkTowards = Alignment.Top),
+        ) {
+            NavBarTutorialTip(onDismiss = onTipDismiss)
+        }
+
+        NavigationBar {
+            navItems.forEach { item ->
+                val count = badgeCounts[item.id] ?: 0
+                val selected = item.id == selectedItemId
+                NavigationBarItem(
+                    selected = selected,
+                    onClick = { onItemClick(item) },
+                    icon = {
+                        val iconRes = if (selected) item.iconSelected else item.iconUnselected
+                        BadgedBox(
+                            badge = {
+                                when {
+                                    count > 0 -> Badge { Text(count.toString()) }
+                                    count < 0 -> Badge()
+                                    else -> Unit
+                                }
+                            },
+                        ) {
+                            Icon(
+                                painter = painterResource(iconRes),
+                                contentDescription = stringResource(item.title),
+                            )
+                        }
+                    },
+                    label = { Text(stringResource(item.title)) },
+                )
+            }
+        }
+    }
+}
+
+/**
+ * One-time tutorial tip shown below the top of the nav bar area, informing the user that
+ * Futon has a new set of default navigation items.  Dismissed permanently on tap.
+ */
+@Composable
+private fun NavBarTutorialTip(onDismiss: () -> Unit) {
+    Surface(
+        color = MaterialTheme.colorScheme.secondaryContainer,
+        modifier = Modifier.fillMaxWidth(),
+    ) {
+        Column(
+            modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Text(
+                text = stringResource(R.string.tip_new_nav_default),
+                style = MaterialTheme.typography.bodySmall,
+                color = MaterialTheme.colorScheme.onSecondaryContainer,
+                textAlign = TextAlign.Center,
+                modifier = Modifier.fillMaxWidth(),
+            )
+            TextButton(
+                onClick = onDismiss,
+                colors = ButtonDefaults.textButtonColors(
+                    contentColor = MaterialTheme.colorScheme.onSecondaryContainer,
+                ),
+            ) {
+                Text(stringResource(R.string.got_it))
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun PreviewBottomNavBar() {
+    BottomNavBar(
+        navItems = AppSettings.FUTON_DEFAULT_NAV_ITEMS,
+        selectedItemId = AppSettings.FUTON_DEFAULT_NAV_ITEMS.first().id,
+        badgeCounts = mapOf(AppSettings.FUTON_DEFAULT_NAV_ITEMS[2].id to 3),
+        showTip = false,
+    )
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun PreviewBottomNavBarWithTip() {
+    BottomNavBar(
+        navItems = AppSettings.FUTON_DEFAULT_NAV_ITEMS,
+        selectedItemId = AppSettings.FUTON_DEFAULT_NAV_ITEMS.first().id,
+        showTip = true,
+    )
+}
diff --git a/app/src/main/kotlin/io/github/landwarderer/futon/core/ui/components/BottomNavBarState.kt b/app/src/main/kotlin/io/github/landwarderer/futon/core/ui/components/BottomNavBarState.kt
new file mode 100644
index 0000000000..a56aec4a07
--- /dev/null
+++ b/app/src/main/kotlin/io/github/landwarderer/futon/core/ui/components/BottomNavBarState.kt
@@ -0,0 +1,40 @@
+package io.github.landwarderer.futon.core.ui.components
+
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateMapOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import io.github.landwarderer.futon.core.prefs.AppSettings
+import io.github.landwarderer.futon.core.prefs.NavItem
+
+/**
+ * Compose-observable state for [BottomNavBar].
+ *
+ * MainActivity creates one instance and drives it; the ComposeView reads from it.
+ * All fields are Compose state so the bar recomposes only when something actually changes.
+ */
+@Stable
+class BottomNavBarState(
+    settings: AppSettings,
+    initialItems: List<NavItem> = settings.mainNavItems,
+    initialSelectedId: Int = initialItems.firstOrNull()?.id ?: 0,
+    showTipInitially: Boolean = settings.isTipEnabled(AppSettings.TIP_NEW_NAV_DEFAULT),
+) {
+    var navItems: List<NavItem> by mutableStateOf(initialItems)
+    var selectedItemId: Int by mutableIntStateOf(initialSelectedId)
+    var showTip: Boolean by mutableStateOf(showTipInitially)
+    var isVisible: Boolean by mutableStateOf(true)
+
+    /** Per-item badge counts.  Positive = number, negative = dot-only, absent/0 = none. */
+    val badgeCounts: MutableMap<Int, Int> = mutableStateMapOf()
+
+    fun setBadge(itemId: Int, count: Int) {
+        if (count == 0) {
+            badgeCounts.remove(itemId)
+        } else {
+            badgeCounts[itemId] = count
+        }
+    }
+}
diff --git a/app/src/main/kotlin/io/github/landwarderer/futon/core/ui/util/ReversibleActionObserver.kt b/app/src/main/kotlin/io/github/landwarderer/futon/core/ui/util/ReversibleActionObserver.kt
index b51f92d1fb..8f6b1885d8 100644
--- a/app/src/main/kotlin/io/github/landwarderer/futon/core/ui/util/ReversibleActionObserver.kt
+++ b/app/src/main/kotlin/io/github/landwarderer/futon/core/ui/util/ReversibleActionObserver.kt
@@ -2,11 +2,11 @@ package io.github.landwarderer.futon.core.ui.util
 
 import android.view.View
 import com.google.android.material.snackbar.Snackbar
-import kotlinx.coroutines.flow.FlowCollector
 import io.github.landwarderer.futon.R
 import io.github.landwarderer.futon.core.util.ext.findActivity
 import io.github.landwarderer.futon.main.ui.owners.BottomNavOwner
 import io.github.landwarderer.futon.main.ui.owners.BottomSheetOwner
+import kotlinx.coroutines.flow.FlowCollector
 
 class ReversibleActionObserver(
 	private val snackbarHost: View,
@@ -17,7 +17,7 @@ class ReversibleActionObserver(
 		val length = if (handle == null) Snackbar.LENGTH_SHORT else Snackbar.LENGTH_LONG
 		val snackbar = Snackbar.make(snackbarHost, value.stringResId, length)
 		when (val activity = snackbarHost.context.findActivity()) {
-			is BottomNavOwner -> snackbar.anchorView = activity.bottomNav
+			is BottomNavOwner -> snackbar.anchorView = activity.bottomNavView
 			is BottomSheetOwner -> snackbar.anchorView = activity.bottomSheet
 		}
 		if (handle != null) {
diff --git a/app/src/main/kotlin/io/github/landwarderer/futon/download/ui/dialog/DownloadDialogFragment.kt b/app/src/main/kotlin/io/github/landwarderer/futon/download/ui/dialog/DownloadDialogFragment.kt
index dbe84aba15..e28978f133 100644
--- a/app/src/main/kotlin/io/github/landwarderer/futon/download/ui/dialog/DownloadDialogFragment.kt
+++ b/app/src/main/kotlin/io/github/landwarderer/futon/download/ui/dialog/DownloadDialogFragment.kt
@@ -32,8 +32,8 @@ import io.github.landwarderer.futon.core.util.ext.parentView
 import io.github.landwarderer.futon.core.util.ext.showOrHide
 import io.github.landwarderer.futon.databinding.DialogDownloadBinding
 import io.github.landwarderer.futon.main.ui.owners.BottomNavOwner
-import org.koitharu.kotatsu.parsers.util.format
 import io.github.landwarderer.futon.settings.storage.DirectoryModel
+import org.koitharu.kotatsu.parsers.util.format
 
 @AndroidEntryPoint
 class DownloadDialogFragment : AlertDialogFragment<DialogDownloadBinding>(), View.OnClickListener {
@@ -324,7 +324,7 @@ class DownloadDialogFragment : AlertDialogFragment<DialogDownloadBinding>(), Vie
 				Snackbar.LENGTH_LONG,
 			)
 			(host.context.findActivity() as? BottomNavOwner)?.let {
-				snackbar.anchorView = it.bottomNav
+				snackbar.anchorView = it.bottomNavView
 			}
 			val router = AppRouter.from(host)
 			if (router != null) {
diff --git a/app/src/main/kotlin/io/github/landwarderer/futon/download/ui/worker/DownloadStartedObserver.kt b/app/src/main/kotlin/io/github/landwarderer/futon/download/ui/worker/DownloadStartedObserver.kt
index b7d15e5d22..f2912d5204 100644
--- a/app/src/main/kotlin/io/github/landwarderer/futon/download/ui/worker/DownloadStartedObserver.kt
+++ b/app/src/main/kotlin/io/github/landwarderer/futon/download/ui/worker/DownloadStartedObserver.kt
@@ -2,11 +2,11 @@ package io.github.landwarderer.futon.download.ui.worker
 
 import android.view.View
 import com.google.android.material.snackbar.Snackbar
-import kotlinx.coroutines.flow.FlowCollector
 import io.github.landwarderer.futon.R
 import io.github.landwarderer.futon.core.nav.AppRouter
 import io.github.landwarderer.futon.core.util.ext.findActivity
 import io.github.landwarderer.futon.main.ui.owners.BottomNavOwner
+import kotlinx.coroutines.flow.FlowCollector
 
 class DownloadStartedObserver(
 	private val snackbarHost: View,
@@ -15,7 +15,7 @@ class DownloadStartedObserver(
 	override suspend fun emit(value: Unit) {
 		val snackbar = Snackbar.make(snackbarHost, R.string.download_started, Snackbar.LENGTH_LONG)
 		(snackbarHost.context.findActivity() as? BottomNavOwner)?.let {
-			snackbar.anchorView = it.bottomNav
+			snackbar.anchorView = it.bottomNavView
 		}
 		val router = AppRouter.from(snackbarHost)
 		if (router != null) {
diff --git a/app/src/main/kotlin/io/github/landwarderer/futon/main/ui/ExitCallback.kt b/app/src/main/kotlin/io/github/landwarderer/futon/main/ui/ExitCallback.kt
index 212b3a5b11..45b65521a4 100644
--- a/app/src/main/kotlin/io/github/landwarderer/futon/main/ui/ExitCallback.kt
+++ b/app/src/main/kotlin/io/github/landwarderer/futon/main/ui/ExitCallback.kt
@@ -5,6 +5,10 @@ import androidx.activity.OnBackPressedCallback
 import androidx.lifecycle.lifecycleScope
 import com.google.android.material.search.SearchView
 import com.google.android.material.snackbar.Snackbar
+import io.github.landwarderer.futon.R
+import io.github.landwarderer.futon.core.prefs.AppSettings
+import io.github.landwarderer.futon.core.prefs.observeAsFlow
+import io.github.landwarderer.futon.main.ui.owners.BottomNavOwner
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.Job
 import kotlinx.coroutines.delay
@@ -13,10 +17,6 @@ import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.combine
 import kotlinx.coroutines.flow.flowOn
 import kotlinx.coroutines.launch
-import io.github.landwarderer.futon.R
-import io.github.landwarderer.futon.core.prefs.AppSettings
-import io.github.landwarderer.futon.core.prefs.observeAsFlow
-import io.github.landwarderer.futon.main.ui.owners.BottomNavOwner
 
 class ExitCallback(
 	private val activity: MainActivity,
@@ -59,7 +59,7 @@ class ExitCallback(
 	private suspend fun resetExitConfirmation() {
 		isDisabledByTimeout.value = true
 		val snackbar = Snackbar.make(snackbarHost, R.string.confirm_exit, Snackbar.LENGTH_INDEFINITE)
-		snackbar.anchorView = (activity as? BottomNavOwner)?.bottomNav
+		snackbar.anchorView = (activity as? BottomNavOwner)?.bottomNavView
 		snackbar.show()
 		delay(2000)
 		snackbar.dismiss()
diff --git a/app/src/main/kotlin/io/github/landwarderer/futon/main/ui/MainActionButtonBehavior.kt b/app/src/main/kotlin/io/github/landwarderer/futon/main/ui/MainActionButtonBehavior.kt
index e0d3f650ee..aba7a17c73 100644
--- a/app/src/main/kotlin/io/github/landwarderer/futon/main/ui/MainActionButtonBehavior.kt
+++ b/app/src/main/kotlin/io/github/landwarderer/futon/main/ui/MainActionButtonBehavior.kt
@@ -3,11 +3,11 @@ package io.github.landwarderer.futon.main.ui
 import android.content.Context
 import android.util.AttributeSet
 import android.view.View
+import androidx.compose.ui.platform.ComposeView
 import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.core.view.ViewCompat
 import com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
 import io.github.landwarderer.futon.core.ui.util.ShrinkOnScrollBehavior
-import io.github.landwarderer.futon.core.ui.widgets.SlidingBottomNavigationView
 
 class MainActionButtonBehavior : ShrinkOnScrollBehavior {
 
@@ -17,15 +17,16 @@ class MainActionButtonBehavior : ShrinkOnScrollBehavior {
 	override fun layoutDependsOn(
 		parent: CoordinatorLayout,
 		child: ExtendedFloatingActionButton,
-		dependency: View
+		dependency: View,
 	): Boolean {
-		return dependency is SlidingBottomNavigationView || super.layoutDependsOn(parent, child, dependency)
+		// The bottom nav is now a ComposeView; use it as the FAB anchor dependency
+		return dependency is ComposeView || super.layoutDependsOn(parent, child, dependency)
 	}
 
 	override fun onDependentViewChanged(
 		parent: CoordinatorLayout,
 		child: ExtendedFloatingActionButton,
-		dependency: View
+		dependency: View,
 	): Boolean {
 		val bottom = child.bottom
 		val bottomLine = parent.height
diff --git a/app/src/main/kotlin/io/github/landwarderer/futon/main/ui/MainActivity.kt b/app/src/main/kotlin/io/github/landwarderer/futon/main/ui/MainActivity.kt
index d9f5c20648..9c60a4bb73 100644
--- a/app/src/main/kotlin/io/github/landwarderer/futon/main/ui/MainActivity.kt
+++ b/app/src/main/kotlin/io/github/landwarderer/futon/main/ui/MainActivity.kt
@@ -9,6 +9,7 @@ import android.view.View
 import android.view.ViewGroup.MarginLayoutParams
 import androidx.activity.viewModels
 import androidx.appcompat.view.ActionMode
+import androidx.compose.ui.platform.ComposeView
 import androidx.core.app.ActivityCompat
 import androidx.core.content.ContextCompat
 import androidx.core.view.MenuProvider
@@ -41,9 +42,10 @@ import io.github.landwarderer.futon.core.os.VoiceInputContract
 import io.github.landwarderer.futon.core.prefs.AppSettings
 import io.github.landwarderer.futon.core.prefs.NavItem
 import io.github.landwarderer.futon.core.ui.BaseActivity
+import io.github.landwarderer.futon.core.ui.components.AppTheme
+import io.github.landwarderer.futon.core.ui.components.BottomNavBar
+import io.github.landwarderer.futon.core.ui.components.BottomNavBarState
 import io.github.landwarderer.futon.core.ui.util.FadingAppbarMediator
-import io.github.landwarderer.futon.core.ui.util.MenuInvalidator
-import io.github.landwarderer.futon.core.ui.widgets.SlidingBottomNavigationView
 import io.github.landwarderer.futon.core.util.ext.consume
 import io.github.landwarderer.futon.core.util.ext.end
 import io.github.landwarderer.futon.core.util.ext.observe
@@ -58,7 +60,6 @@ import io.github.landwarderer.futon.local.ui.LocalIndexUpdateService
 import io.github.landwarderer.futon.local.ui.LocalStorageCleanupWorker
 import io.github.landwarderer.futon.main.ui.owners.AppBarOwner
 import io.github.landwarderer.futon.main.ui.owners.BottomNavOwner
-import org.koitharu.kotatsu.parsers.model.Manga
 import io.github.landwarderer.futon.remotelist.ui.MangaSearchMenuProvider
 import io.github.landwarderer.futon.search.ui.suggestion.SearchSuggestionItemCallback
 import io.github.landwarderer.futon.search.ui.suggestion.SearchSuggestionListenerImpl
@@ -75,6 +76,7 @@ import kotlinx.coroutines.flow.flatMapLatest
 import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
+import org.koitharu.kotatsu.parsers.model.Manga
 import javax.inject.Inject
 import com.google.android.material.R as materialR
 
@@ -83,7 +85,6 @@ class MainActivity : BaseActivity<ActivityMainBinding>(), AppBarOwner, BottomNav
 	View.OnClickListener,
 	SearchSuggestionItemCallback.SuggestionItemListener,
 	MainNavigationDelegate.OnFragmentChangedListener,
-	View.OnLayoutChangeListener,
 	SearchView.TransitionListener {
 
 	@Inject
@@ -99,26 +100,67 @@ class MainActivity : BaseActivity<ActivityMainBinding>(), AppBarOwner, BottomNav
 	private lateinit var navigationDelegate: MainNavigationDelegate
 	private lateinit var fadingAppbarMediator: FadingAppbarMediator
 
+	// Track pinned state locally so updateContainerBottomMargin can read it synchronously.
+	// Initialized lazily so it is read after Hilt injects `settings`.
+	private var isNavBarPinned: Boolean = false
+
+	// Compose state for the bottom nav bar (null on wide/landscape layouts that use navRail)
+	private var _bottomNavState: BottomNavBarState? = null
+
 	override val appBar: AppBarLayout
 		get() = viewBinding.appbar
 
-	override val bottomNav: SlidingBottomNavigationView?
+	/** The ComposeView hosting the Compose nav bar, or null on wide layouts. */
+	override val bottomNavView: ComposeView?
 		get() = viewBinding.bottomNav
 
+	/** The Compose state driving the nav bar, or null on wide layouts. */
+	override val bottomNavState: BottomNavBarState?
+		get() = _bottomNavState
+
 	override fun onCreate(savedInstanceState: Bundle?) {
 		super.onCreate(savedInstanceState)
 		setContentView(ActivityMainBinding.inflate(layoutInflater))
 		setSupportActionBar(viewBinding.searchBar)
 
+		// Read settings only after Hilt has injected `settings`
+		isNavBarPinned = settings.isNavBarPinned
+
 		viewBinding.fab?.setOnClickListener(this)
 		viewBinding.navRail?.headerView?.findViewById<View>(R.id.railFab)?.setOnClickListener(this)
 		fadingAppbarMediator =
 			FadingAppbarMediator(viewBinding.appbar, viewBinding.layoutSearch ?: viewBinding.searchBar)
 
+		// Run the one-time migration to Futon nav defaults (also enables the tutorial tip)
+		settings.applyFutonNavDefaultIfNeeded()
+
+		// Build nav state and wire Compose if we are on the phone (bottom nav) layout
+		val navRail = viewBinding.navRail
+		if (navRail == null && viewBinding.bottomNav != null) {
+			val state = BottomNavBarState(settings).also { _bottomNavState = it }
+			viewBinding.bottomNav!!.setContent {
+				AppTheme {
+					BottomNavBar(
+						navItems = state.navItems,
+						selectedItemId = state.selectedItemId,
+						badgeCounts = state.badgeCounts,
+						showTip = state.showTip,
+						onItemClick = { item -> onComposeNavItemClick(item) },
+						onTipDismiss = {
+							settings.closeTip(AppSettings.TIP_NEW_NAV_DEFAULT)
+							state.showTip = false
+						},
+					)
+				}
+			}
+		}
+
 		navigationDelegate = MainNavigationDelegate(
-			navBar = checkNotNull(bottomNav ?: viewBinding.navRail),
+			navBar = viewBinding.navRail,
 			fragmentManager = supportFragmentManager,
 			settings = settings,
+			composeNavState = _bottomNavState,
+			context = this,
 		)
 		navigationDelegate.addOnFragmentChangedListener(this)
 		navigationDelegate.onCreate(this, savedInstanceState)
@@ -142,11 +184,15 @@ class MainActivity : BaseActivity<ActivityMainBinding>(), AppBarOwner, BottomNav
 			onFirstStart()
 		}
 
-		viewBinding.bottomNav?.addOnLayoutChangeListener(this)
 		viewBinding.searchView.addTransitionListener(this)
 		viewBinding.searchView.addTransitionListener(exitCallback)
 
-		// Defer heavy initialization to after window is shown to prevent ANR on slow devices
+		// Observe bottom nav height changes for container margin (Compose layout)
+		viewBinding.bottomNav?.addOnLayoutChangeListener { _, _, top, _, bottom, _, oldTop, _, oldBottom ->
+			if (top != oldTop || bottom != oldBottom) updateContainerBottomMargin()
+		}
+
+		// Defer heavy initialisation to after the window is shown to prevent ANR on slow devices
 		lifecycleScope.launch {
 			lifecycle.withResumed {
 				viewModel.onOpenReader.observeEvent(this@MainActivity, this@MainActivity::onOpenReader)
@@ -178,7 +224,7 @@ class MainActivity : BaseActivity<ActivityMainBinding>(), AppBarOwner, BottomNav
 	}
 
 	override fun addMenuProvider(provider: MenuProvider, owner: LifecycleOwner, state: Lifecycle.State) {
-		if (provider !is MangaSearchMenuProvider) { // do not duplicate search menu item
+		if (provider !is MangaSearchMenuProvider) {
 			super.addMenuProvider(provider, owner, state)
 		}
 	}
@@ -201,10 +247,11 @@ class MainActivity : BaseActivity<ActivityMainBinding>(), AppBarOwner, BottomNav
 				searchBarDefaultMargin + barsInsets.start(v)
 			}
 		}
+		// Pass only horizontal insets to the ComposeView — NavigationBar handles bottom insets
+		// internally via WindowInsets.navigationBars, so adding bottom here causes double padding.
 		viewBinding.bottomNav?.updatePadding(
 			left = barsInsets.left,
 			right = barsInsets.right,
-			bottom = barsInsets.bottom,
 		)
 		viewBinding.navRail?.updateLayoutParams<MarginLayoutParams> {
 			marginStart = barsInsets.start(v)
@@ -217,22 +264,6 @@ class MainActivity : BaseActivity<ActivityMainBinding>(), AppBarOwner, BottomNav
 		}
 	}
 
-	override fun onLayoutChange(
-		v: View?,
-		left: Int,
-		top: Int,
-		right: Int,
-		bottom: Int,
-		oldLeft: Int,
-		oldTop: Int,
-		oldRight: Int,
-		oldBottom: Int
-	) {
-		if (top != oldTop || bottom != oldBottom) {
-			updateContainerBottomMargin()
-		}
-	}
-
 	override fun onStateChanged(
 		searchView: SearchView,
 		previousState: SearchView.TransitionState,
@@ -252,7 +283,7 @@ class MainActivity : BaseActivity<ActivityMainBinding>(), AppBarOwner, BottomNav
 	override fun onSupportActionModeStarted(mode: ActionMode) {
 		super.onSupportActionModeStarted(mode)
 		adjustFabVisibility()
-		bottomNav?.hide()
+		setBottomNavVisible(false)
 		(viewBinding.layoutSearch ?: viewBinding.searchBar).isInvisible = true
 		updateContainerBottomMargin()
 	}
@@ -260,11 +291,36 @@ class MainActivity : BaseActivity<ActivityMainBinding>(), AppBarOwner, BottomNav
 	override fun onSupportActionModeFinished(mode: ActionMode) {
 		super.onSupportActionModeFinished(mode)
 		adjustFabVisibility()
-		bottomNav?.show()
+		setBottomNavVisible(true)
 		(viewBinding.layoutSearch ?: viewBinding.searchBar).isInvisible = false
 		updateContainerBottomMargin()
 	}
 
+	// ---------------------------------------------------------------------------
+	// Compose nav bar item click
+	// ---------------------------------------------------------------------------
+
+	private fun onComposeNavItemClick(item: NavItem) {
+		val state = _bottomNavState ?: return
+		val wasAlreadySelected = item.id == state.selectedItemId
+
+		if (!item.isActivityLauncher) {
+			// Update selection immediately so the bar responds on first tap
+			state.selectedItemId = item.id
+		}
+
+		navigationDelegate.onComposeItemClick(item) { router.openSettings() }
+
+		// Reselect → scroll to top
+		if (wasAlreadySelected && !item.isActivityLauncher) {
+			navigationDelegate.syncSelectedItem()
+		}
+	}
+
+	// ---------------------------------------------------------------------------
+	// Internal helpers
+	// ---------------------------------------------------------------------------
+
 	private fun onOpenReader(manga: Manga) {
 		val fab = viewBinding.fab ?: viewBinding.navRail?.headerView
 		router.openReader(manga, fab)
@@ -295,7 +351,7 @@ class MainActivity : BaseActivity<ActivityMainBinding>(), AppBarOwner, BottomNav
 	}
 
 	private fun onFirstStart() = try {
-		lifecycleScope.launch(Dispatchers.Main) { // not a default `Main.immediate` dispatcher
+		lifecycleScope.launch(Dispatchers.Main) {
 			withContext(Dispatchers.IO) {
 				LocalStorageCleanupWorker.enqueue(applicationContext)
 			}
@@ -331,13 +387,9 @@ class MainActivity : BaseActivity<ActivityMainBinding>(), AppBarOwner, BottomNav
 		navigationDelegate.navRailHeader?.railFab?.isVisible = isResumeEnabled
 		val fab = viewBinding.fab ?: return
 		if (isResumeEnabled && !actionModeDelegate.isActionModeStarted && !isSearchOpened && topFragment is HistoryListFragment) {
-			if (!fab.isVisible) {
-				fab.show()
-			}
+			if (!fab.isVisible) fab.show()
 		} else {
-			if (fab.isVisible) {
-				fab.hide()
-			}
+			if (fab.isVisible) fab.hide()
 		}
 	}
 
@@ -351,10 +403,48 @@ class MainActivity : BaseActivity<ActivityMainBinding>(), AppBarOwner, BottomNav
 			scrollFlags = appBarScrollFlags
 		}
 		adjustFabVisibility(isSearchOpened = isOpened)
-		bottomNav?.showOrHide(!isOpened)
+		setBottomNavVisible(!isOpened)
 		updateContainerBottomMargin()
 	}
 
+	/** Show or hide the bottom nav bar (Compose state or View, whichever is present). */
+	private fun setBottomNavVisible(visible: Boolean) {
+		_bottomNavState?.isVisible = visible
+		// The ComposeView itself needs to be visible/gone so CoordinatorLayout knows the height
+		viewBinding.bottomNav?.let { composeView ->
+			composeView.isVisible = visible
+		}
+	}
+
+	private fun setNavbarPinned(isPinned: Boolean) {
+		isNavBarPinned = isPinned
+		for (view in viewBinding.appbar.children) {
+			val lp = view.layoutParams as? AppBarLayout.LayoutParams ?: continue
+			val scrollFlags = if (isPinned) {
+				lp.scrollFlags and SCROLL_FLAG_SCROLL.inv()
+			} else {
+				lp.scrollFlags or SCROLL_FLAG_SCROLL
+			}
+			if (scrollFlags != lp.scrollFlags) {
+				lp.scrollFlags = scrollFlags
+				view.layoutParams = lp
+			}
+		}
+		updateContainerBottomMargin()
+	}
+
+	private fun updateContainerBottomMargin() {
+		val composeView = viewBinding.bottomNav ?: return
+		val newMargin = if (isNavBarPinned && composeView.isVisible) composeView.height else 0
+		with(viewBinding.container) {
+			val params = layoutParams as MarginLayoutParams
+			if (params.bottomMargin != newMargin) {
+				params.bottomMargin = newMargin
+				layoutParams = params
+			}
+		}
+	}
+
 	private fun requestNotificationsPermission() {
 		if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU && ContextCompat.checkSelfPermission(
 				this,
@@ -389,11 +479,7 @@ class MainActivity : BaseActivity<ActivityMainBinding>(), AppBarOwner, BottomNav
 			.map { it >= SearchView.TransitionState.SHOWING }
 			.distinctUntilChanged()
 			.flatMapLatest { isShowing ->
-				if (isShowing) {
-					searchSuggestionViewModel.suggestion
-				} else {
-					emptyFlow()
-				}
+				if (isShowing) searchSuggestionViewModel.suggestion else emptyFlow()
 			}.observe(this, adapter)
 		searchSuggestionViewModel.onError.observeEvent(
 			this,
@@ -403,36 +489,6 @@ class MainActivity : BaseActivity<ActivityMainBinding>(), AppBarOwner, BottomNav
 			.attachToRecyclerView(viewBinding.recyclerViewSearch)
 	}
 
-	private fun setNavbarPinned(isPinned: Boolean) {
-		val bottomNavBar = viewBinding.bottomNav
-		bottomNavBar?.isPinned = isPinned
-		for (view in viewBinding.appbar.children) {
-			val lp = view.layoutParams as? AppBarLayout.LayoutParams ?: continue
-			val scrollFlags = if (isPinned) {
-				lp.scrollFlags and SCROLL_FLAG_SCROLL.inv()
-			} else {
-				lp.scrollFlags or SCROLL_FLAG_SCROLL
-			}
-			if (scrollFlags != lp.scrollFlags) {
-				lp.scrollFlags = scrollFlags
-				view.layoutParams = lp
-			}
-		}
-		updateContainerBottomMargin()
-	}
-
-	private fun updateContainerBottomMargin() {
-		val bottomNavBar = viewBinding.bottomNav ?: return
-		val newMargin = if (bottomNavBar.isPinned && bottomNavBar.isShownOrShowing) bottomNavBar.height else 0
-		with(viewBinding.container) {
-			val params = layoutParams as MarginLayoutParams
-			if (params.bottomMargin != newMargin) {
-				params.bottomMargin = newMargin
-				layoutParams = params
-			}
-		}
-	}
-
 	private fun SearchView.observeState() = callbackFlow {
 		val listener = SearchView.TransitionListener { _, _, state ->
 			trySendBlocking(state)
diff --git a/app/src/main/kotlin/io/github/landwarderer/futon/main/ui/MainNavigationDelegate.kt b/app/src/main/kotlin/io/github/landwarderer/futon/main/ui/MainNavigationDelegate.kt
index adaa043b16..afd9dbfd07 100644
--- a/app/src/main/kotlin/io/github/landwarderer/futon/main/ui/MainNavigationDelegate.kt
+++ b/app/src/main/kotlin/io/github/landwarderer/futon/main/ui/MainNavigationDelegate.kt
@@ -20,19 +20,13 @@ import androidx.lifecycle.lifecycleScope
 import com.google.android.material.navigation.NavigationBarView
 import com.google.android.material.navigationrail.NavigationRailView
 import com.google.android.material.transition.MaterialFadeThrough
-import kotlinx.coroutines.channels.awaitClose
-import kotlinx.coroutines.channels.trySendBlocking
-import kotlinx.coroutines.flow.callbackFlow
-import kotlinx.coroutines.flow.launchIn
-import kotlinx.coroutines.flow.map
-import kotlinx.coroutines.flow.onEach
 import io.github.landwarderer.futon.R
 import io.github.landwarderer.futon.bookmarks.ui.AllBookmarksFragment
 import io.github.landwarderer.futon.core.nav.AppRouter
 import io.github.landwarderer.futon.core.prefs.AppSettings
 import io.github.landwarderer.futon.core.prefs.NavItem
+import io.github.landwarderer.futon.core.ui.components.BottomNavBarState
 import io.github.landwarderer.futon.core.ui.util.RecyclerViewOwner
-import io.github.landwarderer.futon.core.ui.widgets.SlidingBottomNavigationView
 import io.github.landwarderer.futon.core.util.ext.buildBundle
 import io.github.landwarderer.futon.core.util.ext.setContentDescriptionAndTooltip
 import io.github.landwarderer.futon.core.util.ext.smoothScrollToTop
@@ -44,18 +38,40 @@ import io.github.landwarderer.futon.local.ui.LocalListFragment
 import io.github.landwarderer.futon.suggestions.ui.SuggestionsFragment
 import io.github.landwarderer.futon.tracker.ui.feed.FeedFragment
 import io.github.landwarderer.futon.tracker.ui.updates.UpdatesFragment
+import kotlinx.coroutines.channels.awaitClose
+import kotlinx.coroutines.channels.trySendBlocking
+import kotlinx.coroutines.flow.callbackFlow
+import kotlinx.coroutines.flow.launchIn
+import kotlinx.coroutines.flow.map
+import kotlinx.coroutines.flow.onEach
 import java.util.LinkedList
-import com.google.android.material.R as materialR
 
 private const val TAG_PRIMARY = "primary"
 
+/**
+ * Drives main navigation — fragment switching and (for wide layouts) the [NavigationRailView].
+ *
+ * For phone layouts the bottom bar is now a Compose [BottomNavBar]; pass [composeNavState] and
+ * leave [navBar] as null.  For wide layouts pass [navBar] (the rail) as before.
+ *
+ * Exactly one of [navBar] / [composeNavState] must be non-null.
+ */
 class MainNavigationDelegate(
-	private val navBar: NavigationBarView,
+	private val navBar: NavigationBarView?,
 	private val fragmentManager: FragmentManager,
 	private val settings: AppSettings,
+	private val composeNavState: BottomNavBarState? = null,
+	private val context: android.content.Context,
 ) : OnBackPressedCallback(false),
 	NavigationBarView.OnItemSelectedListener,
-	NavigationBarView.OnItemReselectedListener, View.OnClickListener {
+	NavigationBarView.OnItemReselectedListener,
+	View.OnClickListener {
+
+	init {
+		require((navBar != null) xor (composeNavState != null)) {
+			"Exactly one of navBar or composeNavState must be non-null"
+		}
+	}
 
 	private val listeners = LinkedList<OnFragmentChangedListener>()
 	val navRailHeader = (navBar as? NavigationRailView)?.headerView?.let {
@@ -66,8 +82,8 @@ class MainNavigationDelegate(
 		get() = fragmentManager.findFragmentByTag(TAG_PRIMARY)
 
 	init {
-		navBar.setOnItemSelectedListener(this)
-		navBar.setOnItemReselectedListener(this)
+		navBar?.setOnItemSelectedListener(this)
+		navBar?.setOnItemReselectedListener(this)
 		navRailHeader?.run {
 			root.updateLayoutParams<FrameLayout.LayoutParams> {
 				gravity = Gravity.TOP or Gravity.CENTER
@@ -81,6 +97,10 @@ class MainNavigationDelegate(
 		}
 	}
 
+	// ---------------------------------------------------------------------------
+	// NavigationBarView.OnItemSelectedListener (rail only)
+	// ---------------------------------------------------------------------------
+
 	override fun onNavigationItemSelected(item: MenuItem): Boolean {
 		return if (onNavigationItemSelected(item.itemId)) {
 			item.isChecked = true
@@ -94,6 +114,27 @@ class MainNavigationDelegate(
 		onNavigationItemReselected()
 	}
 
+	// ---------------------------------------------------------------------------
+	// Compose nav bar callback — called from MainActivity when an item is tapped
+	// ---------------------------------------------------------------------------
+
+	/**
+	 * Handle a tap on a Compose [BottomNavBar] item.
+	 * Activity-launcher items (e.g. Settings) are handled here too.
+	 */
+	fun onComposeItemClick(item: NavItem, openSettings: () -> Unit) {
+		if (item.isActivityLauncher) {
+			// e.g. SETTINGS — open the corresponding activity, do not change fragment selection
+			openSettings()
+			return
+		}
+		onNavigationItemSelected(item.id)
+	}
+
+	// ---------------------------------------------------------------------------
+	// View.OnClickListener (nav rail expand button)
+	// ---------------------------------------------------------------------------
+
 	override fun onClick(v: View) {
 		when (v.id) {
 			R.id.button_expand -> {
@@ -105,28 +146,42 @@ class MainNavigationDelegate(
 	}
 
 	override fun handleOnBackPressed() {
-		navBar.selectedItemId = firstItem()?.itemId ?: return
+		val firstId = firstItemId() ?: return
+		navBar?.selectedItemId = firstId
+		composeNavState?.let { state ->
+			onNavigationItemSelected(firstId)
+			state.selectedItemId = firstId
+		}
 	}
 
+	// ---------------------------------------------------------------------------
+	// Lifecycle
+	// ---------------------------------------------------------------------------
+
 	fun onCreate(lifecycleOwner: LifecycleOwner, savedInstanceState: Bundle?) {
-		if (navBar.menu.isEmpty()) {
-			createMenu(settings.mainNavItems, navBar.menu)
+		if (navBar != null && navBar.menu.isEmpty()) {
+			// Wide layout: populate the rail menu from settings (excluding activity-launchers)
+			createMenu(settings.mainNavItems.filter { !it.isActivityLauncher }, navBar.menu)
 		}
 		observeSettings(lifecycleOwner)
 		val fragment = primaryFragment
 		if (fragment != null) {
 			onFragmentChanged(fragment, fromUser = false)
 			val itemId = getItemId(fragment)
-			if (navBar.selectedItemId != itemId) {
-				navBar.selectedItemId = itemId
+			navBar?.let { bar ->
+				if (bar.selectedItemId != itemId) bar.selectedItemId = itemId
+			}
+			composeNavState?.let { state ->
+				if (state.selectedItemId != itemId) state.selectedItemId = itemId
 			}
 		} else {
 			val itemId = if (savedInstanceState == null) {
-				firstItem()?.itemId ?: navBar.selectedItemId
+				firstItemId() ?: (navBar?.selectedItemId ?: composeNavState?.selectedItemId ?: 0)
 			} else {
-				navBar.selectedItemId
+				navBar?.selectedItemId ?: composeNavState?.selectedItemId ?: 0
 			}
 			onNavigationItemSelected(itemId)
+			composeNavState?.selectedItemId = itemId
 		}
 	}
 
@@ -136,8 +191,11 @@ class MainNavigationDelegate(
 		}
 		addOnFragmentChangedListener(listener)
 		awaitClose { removeOnFragmentChangedListener(listener) }
-	}.map {
-		navBar.menu.findItem(it)?.title
+	}.map { id ->
+		// Rail: look up title from menu; Compose: look up from NavItem list
+		navBar?.menu?.findItem(id)?.title
+			?: settings.mainNavItems.firstOrNull { it.id == id }
+				?.let { navBar?.context?.getString(it.title) }
 	}
 
 	fun setCounter(item: NavItem, counter: Int) {
@@ -148,30 +206,30 @@ class MainNavigationDelegate(
 		val fragment = primaryFragment ?: return
 		onFragmentChanged(fragment, fromUser = false)
 		val itemId = getItemId(fragment)
-		if (navBar.selectedItemId != itemId) {
-			navBar.selectedItemId = itemId
-		}
+		navBar?.let { if (it.selectedItemId != itemId) it.selectedItemId = itemId }
+		composeNavState?.let { if (it.selectedItemId != itemId) it.selectedItemId = itemId }
 	}
 
 	private fun setCounter(@IdRes id: Int, counter: Int) {
-		if (counter == 0) {
-			navBar.getBadge(id)?.isVisible = false
-		} else {
-			val badge = navBar.getOrCreateBadge(id)
-			if (counter < 0) {
-				badge.clearNumber()
+		// Rail path
+		if (navBar != null) {
+			if (counter == 0) {
+				navBar.getBadge(id)?.isVisible = false
 			} else {
-				badge.number = counter
+				val badge = navBar.getOrCreateBadge(id)
+				if (counter < 0) badge.clearNumber() else badge.number = counter
+				badge.isVisible = true
 			}
-			badge.isVisible = true
 		}
+		// Compose path
+		composeNavState?.setBadge(id, counter)
 	}
 
 	fun setItemVisibility(@IdRes itemId: Int, isVisible: Boolean) {
-		val item = navBar.menu.findItem(itemId) ?: return
+		val item = navBar?.menu?.findItem(itemId) ?: return
 		item.isVisible = isVisible
 		if (item.isChecked && !isVisible) {
-			navBar.selectedItemId = firstItem()?.itemId ?: return
+			navBar?.selectedItemId = firstItemId() ?: return
 		}
 	}
 
@@ -183,7 +241,13 @@ class MainNavigationDelegate(
 		listeners.remove(listener)
 	}
 
+	// ---------------------------------------------------------------------------
+	// Internal navigation routing
+	// ---------------------------------------------------------------------------
+
 	private fun onNavigationItemSelected(@IdRes itemId: Int): Boolean {
+		if (itemId == R.id.nav_settings) return false // handled by onComposeItemClick
+
 		val newFragment = when (itemId) {
 			R.id.nav_history -> HistoryListFragment::class.java
 			R.id.nav_favorites -> FavouritesContainerFragment::class.java
@@ -196,7 +260,6 @@ class MainNavigationDelegate(
 			else -> return false
 		}
 		if (!setPrimaryFragment(newFragment)) {
-			// probably already selected
 			onNavigationItemReselected()
 		}
 		return true
@@ -237,57 +300,50 @@ class MainNavigationDelegate(
 	}
 
 	private fun onFragmentChanged(fragment: Fragment, fromUser: Boolean) {
-		isEnabled = getItemId(fragment) != firstItem()?.itemId
+		isEnabled = getItemId(fragment) != firstItemId()
 		listeners.forEach { it.onFragmentChanged(fragment, fromUser) }
 	}
 
 	private fun createMenu(items: List<NavItem>, menu: Menu) {
+		val bar = navBar ?: return
 		for (item in items) {
 			menu.add(Menu.NONE, item.id, Menu.NONE, item.title)
 				.setIcon(item.icon)
-			if (menu.size >= navBar.maxItemCount) {
-				break
-			}
+			if (menu.size >= bar.maxItemCount) break
 		}
 	}
 
 	private fun instantiateFragment(fragmentClass: Class<out Fragment>): Fragment {
-		val classLoader = navBar.context.classLoader
-		return fragmentManager.fragmentFactory.instantiate(classLoader, fragmentClass.name)
+		val ctx = navBar?.context ?: context
+		return fragmentManager.fragmentFactory.instantiate(ctx.classLoader, fragmentClass.name)
 	}
 
 	private fun observeSettings(lifecycleOwner: LifecycleOwner) {
 		settings.observe(AppSettings.KEY_TRACKER_ENABLED, AppSettings.KEY_SUGGESTIONS, AppSettings.KEY_NAV_LABELS)
 			.onEach {
+				// Rail only: hide items that are disabled by settings
 				setItemVisibility(R.id.nav_suggestions, settings.isSuggestionsEnabled)
 				setItemVisibility(R.id.nav_feed, settings.isTrackerEnabled)
 				setNavbarIsLabeled(settings.isNavLabelsVisible)
+				// Compose path: update the items list so disabled items disappear
+				composeNavState?.navItems = settings.mainNavItems.filter { it.isAvailable(settings) }
 			}.launchIn(lifecycleOwner.lifecycleScope)
 	}
 
-	private fun firstItem(): MenuItem? {
-		val menu = navBar.menu
-		for (item in menu) {
-			if (item.isVisible) return item
+	private fun firstItemId(): Int? {
+		navBar?.menu?.let { menu ->
+			for (item in menu) {
+				if (item.isVisible) return item.itemId
+			}
 		}
+		composeNavState?.navItems?.firstOrNull { !it.isActivityLauncher }?.let { return it.id }
 		return null
 	}
 
 	private fun setNavbarIsLabeled(value: Boolean) {
-		if (navBar is SlidingBottomNavigationView) {
-			navBar.minimumHeight = navBar.resources.getDimensionPixelSize(
-				if (value) {
-					materialR.dimen.m3_bottom_nav_min_height
-				} else {
-					R.dimen.nav_bar_height_compact
-				},
-			)
-		}
 		navRailHeader?.buttonExpand?.isVisible = value
-		if (!value) {
-			setNavbarIsExpanded(false)
-		}
-		navBar.labelVisibilityMode = if (value) {
+		if (!value) setNavbarIsExpanded(false)
+		navBar?.labelVisibilityMode = if (value) {
 			NavigationBarView.LABEL_VISIBILITY_LABELED
 		} else {
 			NavigationBarView.LABEL_VISIBILITY_UNLABELED
@@ -295,11 +351,9 @@ class MainNavigationDelegate(
 	}
 
 	private fun setNavbarIsExpanded(value: Boolean) {
-		if (navBar !is NavigationRailView) {
-			return
-		}
+		val rail = navBar as? NavigationRailView ?: return
 		if (value) {
-			navBar.expand()
+			rail.expand()
 			navRailHeader?.run {
 				root.updateLayoutParams<FrameLayout.LayoutParams> {
 					gravity = Gravity.TOP or Gravity.START
@@ -307,11 +361,11 @@ class MainNavigationDelegate(
 				railFab.extend()
 				buttonExpand.setImageResource(R.drawable.ic_drawer_menu_open)
 				buttonExpand.setContentDescriptionAndTooltip(R.string.collapse)
-				val horizontalPadding = navBar.itemActiveIndicatorExpandedMarginHorizontal
+				val horizontalPadding = rail.itemActiveIndicatorExpandedMarginHorizontal
 				root.setPadding(horizontalPadding, 0, horizontalPadding, 0)
 			}
 		} else {
-			navBar.collapse()
+			rail.collapse()
 			navRailHeader?.run {
 				root.updateLayoutParams<FrameLayout.LayoutParams> {
 					gravity = Gravity.TOP or Gravity.CENTER
@@ -319,7 +373,7 @@ class MainNavigationDelegate(
 				railFab.shrink()
 				buttonExpand.setImageResource(R.drawable.ic_drawer_menu)
 				buttonExpand.setContentDescriptionAndTooltip(R.string.expand)
-				val horizontalPadding = navBar.itemActiveIndicatorMarginHorizontal
+				val horizontalPadding = rail.itemActiveIndicatorMarginHorizontal
 				root.setPadding(horizontalPadding, 0, horizontalPadding, 0)
 			}
 		}
@@ -331,7 +385,6 @@ class MainNavigationDelegate(
 	}
 
 	companion object {
-
 		const val MAX_ITEM_COUNT = 6
 	}
 }
diff --git a/app/src/main/kotlin/io/github/landwarderer/futon/main/ui/owners/BottomNavOwner.kt b/app/src/main/kotlin/io/github/landwarderer/futon/main/ui/owners/BottomNavOwner.kt
index fef1378969..d92065ff47 100644
--- a/app/src/main/kotlin/io/github/landwarderer/futon/main/ui/owners/BottomNavOwner.kt
+++ b/app/src/main/kotlin/io/github/landwarderer/futon/main/ui/owners/BottomNavOwner.kt
@@ -1,8 +1,13 @@
 package io.github.landwarderer.futon.main.ui.owners
 
-import io.github.landwarderer.futon.core.ui.widgets.SlidingBottomNavigationView
+import androidx.compose.ui.platform.ComposeView
+import io.github.landwarderer.futon.core.ui.components.BottomNavBarState
 
 interface BottomNavOwner {
 
-	val bottomNav: SlidingBottomNavigationView?
+    /** The ComposeView hosting the bottom nav bar, or null on wide-layout screens. */
+    val bottomNavView: ComposeView?
+
+    /** Compose state that drives the bottom nav bar. Null when [bottomNavView] is null. */
+    val bottomNavState: BottomNavBarState?
 }
diff --git a/app/src/main/res/drawable/ic_favorites_filled.xml b/app/src/main/res/drawable/ic_favorites_filled.xml
new file mode 100644
index 0000000000..1e1136d7be
--- /dev/null
+++ b/app/src/main/res/drawable/ic_favorites_filled.xml
@@ -0,0 +1,9 @@
+<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="m480,840 l-58,-52q-101,-91 -167,-157T150,512.5Q111,460 95.5,416T80,326q0,-94 63,-157t157,-63q52,0 99,22t81,62q34,-40 81,-62t99,-22q94,0 157,63t63,157q0,46 -15.5,90T810,512.5Q771,565 705,631T538,788l-58,52Z"
+      android:fillColor="#e3e3e3"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_home.xml b/app/src/main/res/drawable/ic_home.xml
new file mode 100644
index 0000000000..988a92378e
--- /dev/null
+++ b/app/src/main/res/drawable/ic_home.xml
@@ -0,0 +1,9 @@
+<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="M160,840v-480l320,-240 320,240v480L560,840v-280L400,560v280L160,840Z"
+      android:fillColor="#e3e3e3"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_library.xml b/app/src/main/res/drawable/ic_library.xml
new file mode 100644
index 0000000000..5b39e3f0a0
--- /dev/null
+++ b/app/src/main/res/drawable/ic_library.xml
@@ -0,0 +1,9 @@
+<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="M183.5,776.5Q160,753 160,720t23.5,-56.5Q207,640 240,640t56.5,23.5Q320,687 320,720t-23.5,56.5Q273,800 240,800t-56.5,-23.5ZM423.5,776.5Q400,753 400,720t23.5,-56.5Q447,640 480,640t56.5,23.5Q560,687 560,720t-23.5,56.5Q513,800 480,800t-56.5,-23.5ZM663.5,776.5Q640,753 640,720t23.5,-56.5Q687,640 720,640t56.5,23.5Q800,687 800,720t-23.5,56.5Q753,800 720,800t-56.5,-23.5ZM183.5,536.5Q160,513 160,480t23.5,-56.5Q207,400 240,400t56.5,23.5Q320,447 320,480t-23.5,56.5Q273,560 240,560t-56.5,-23.5ZM423.5,536.5Q400,513 400,480t23.5,-56.5Q447,400 480,400t56.5,23.5Q560,447 560,480t-23.5,56.5Q513,560 480,560t-56.5,-23.5ZM663.5,536.5Q640,513 640,480t23.5,-56.5Q687,400 720,400t56.5,23.5Q800,447 800,480t-23.5,56.5Q753,560 720,560t-56.5,-23.5ZM183.5,296.5Q160,273 160,240t23.5,-56.5Q207,160 240,160t56.5,23.5Q320,207 320,240t-23.5,56.5Q273,320 240,320t-56.5,-23.5ZM423.5,296.5Q400,273 400,240t23.5,-56.5Q447,160 480,160t56.5,23.5Q560,207 560,240t-23.5,56.5Q513,320 480,320t-56.5,-23.5ZM663.5,296.5Q640,273 640,240t23.5,-56.5Q687,160 720,160t56.5,23.5Q800,207 800,240t-23.5,56.5Q753,320 720,320t-56.5,-23.5Z"
+      android:fillColor="#e3e3e3"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_settings_filled.xml b/app/src/main/res/drawable/ic_settings_filled.xml
new file mode 100644
index 0000000000..05e2b1bbb8
--- /dev/null
+++ b/app/src/main/res/drawable/ic_settings_filled.xml
@@ -0,0 +1,9 @@
+<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="m370,880 l-16,-128q-13,-5 -24.5,-12T307,725l-119,50L78,585l103,-78q-1,-7 -1,-13.5v-27q0,-6.5 1,-13.5L78,375l110,-190 119,50q11,-8 23,-15t24,-12l16,-128h220l16,128q13,5 24.5,12t22.5,15l119,-50 110,190 -103,78q1,7 1,13.5v27q0,6.5 -2,13.5l103,78 -110,190 -118,-50q-11,8 -23,15t-24,12L590,880L370,880ZM482,620q58,0 99,-41t41,-99q0,-58 -41,-99t-99,-41q-59,0 -99.5,41T342,480q0,58 40.5,99t99.5,41Z"
+      android:fillColor="#e3e3e3"/>
+</vector>
diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
index 3f25679b4f..4a2415f185 100644
--- a/app/src/main/res/layout/activity_main.xml
+++ b/app/src/main/res/layout/activity_main.xml
@@ -79,11 +79,10 @@
 		tools:ignore="InconsistentLayout"
 		tools:visibility="visible" />
 
-	<io.github.landwarderer.futon.core.ui.widgets.SlidingBottomNavigationView
+	<androidx.compose.ui.platform.ComposeView
 		android:id="@+id/bottomNav"
 		android:layout_width="match_parent"
 		android:layout_height="wrap_content"
-		android:layout_gravity="bottom"
-		android:fitsSystemWindows="false" />
+		android:layout_gravity="bottom" />
 
 </androidx.coordinatorlayout.widget.CoordinatorLayout>
diff --git a/app/src/main/res/values/ids.xml b/app/src/main/res/values/ids.xml
index e8504f0926..07b70d8691 100644
--- a/app/src/main/res/values/ids.xml
+++ b/app/src/main/res/values/ids.xml
@@ -16,4 +16,5 @@
 	<item name="nav_updated" type="id" />
 	<item name="nav_suggestions" type="id" />
 	<item name="nav_bookmarks" type="id" />
+	<item name="nav_settings" type="id" />
 </resources>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 8f50829191..3d3f2653ef 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -380,6 +380,7 @@
     <string name="allow_unstable_updates_summary">Check for nightly builds in addition to stable releases</string>
     <string name="download_started">Download started</string>
     <string name="got_it">Got it</string>
+    <string name="tip_new_nav_default">Futon has a new set of default navigation tabs — History, Favourites, Library, Explore and Settings. You can customise them in Settings → Appearance.</string>
     <string name="sources_reorder_tip">Tap and hold on an item to reorder them</string>
     <string name="user_agent">UserAgent header</string>
     <string name="settings_apply_restart_required">Please restart the application to apply these changes</string>
@@ -954,4 +955,6 @@
     <string name="download_only_on_charging_summary">Connect to a power source to start downloads</string>
     <string name="error_quota_too_low">Storage quota cannot be lower than current usage</string>
     <string name="download_quota_reached">Storage quota reached. Downloads paused.</string>
+    <string name="home">Home</string>
+    <string name="library">Library\n</string>
 </resources>