Start working on supporting thin screens

i18n/src/commonMain/resources/MR/values/base/strings.xml

@@ -49,6 +49,7 @@
     <string name="location_settings">Settings</string>
     <string name="location_categories">Categories</string>
     <string name="location_manga">Manga</string>
+    <string name="location_more">More</string>
 
     <!-- Categories Menu -->
     <string name="categories_delete_confirm">Delete the %1$s category?</string>
@@ -57,6 +58,7 @@
     <string name="downloads_loading">Loading…</string>
     <string name="downloads_remaining">%1$d remaining</string>
     <string name="downloads_stopped">Stopped</string>
+    <string name="downloads_paused">Paused</string>
 
     <!-- Extensions Menu -->
     <string name="enabled_languages">Languages</string>

presentation/src/desktopMain/kotlin/ca/gosyer/ui/base/navigation/DisplayController.kt

@@ -18,10 +18,8 @@ val LocalDisplayController =
 
 class DisplayController(
     private val _sideMenuVisible: MutableState<Boolean> = mutableStateOf(true),
-    private val _isDrawer: MutableState<Boolean> = mutableStateOf(false),
 ) {
     val sideMenuVisible by _sideMenuVisible
-    val isDrawer by _isDrawer
 
     fun openSideMenu() {
         _sideMenuVisible.value = true
@@ -29,12 +27,6 @@ class DisplayController(
     fun closeSideMenu() {
         _sideMenuVisible.value = false
     }
-    fun setAsDrawer() {
-        _isDrawer.value = true
-    }
-    fun setAsNotDrawer() {
-        _isDrawer.value = false
-    }
 }
 
 @Composable

presentation/src/desktopMain/kotlin/ca/gosyer/ui/base/navigation/Toolbar.kt

@@ -39,7 +39,6 @@ import androidx.compose.material.Text
 import androidx.compose.material.contentColorFor
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Close
-import androidx.compose.material.icons.rounded.Menu
 import androidx.compose.material.icons.rounded.Sort
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
@@ -72,7 +71,6 @@ import cafe.adriel.voyager.navigator.Navigator
 @Composable
 fun Toolbar(
     name: String,
-    displayController: DisplayController? = LocalDisplayController.current,
     navigator: Navigator? = LocalNavigator.current,
     closable: Boolean = (navigator?.size ?: 0) > 1,
     onClose: () -> Unit = { navigator?.pop() },
@@ -101,15 +99,12 @@ fun Toolbar(
                 Modifier.fillMaxHeight().animateContentSize(),
                 verticalAlignment = Alignment.CenterVertically
             ) {
+                val displayController = LocalDisplayController.current
                 if (displayController != null) {
-                    if (displayController.isDrawer) {
+                    AnimatedVisibility(
-                        ActionIcon(displayController::openSideMenu, "Open nav", Icons.Rounded.Menu)
+                        !displayController.sideMenuVisible
-                    } else {
+                    ) {
-                        AnimatedVisibility(
+                        ActionIcon(displayController::openSideMenu, "Open nav", Icons.Rounded.Sort)
-                            !displayController.sideMenuVisible
-                        ) {
-                            ActionIcon(displayController::openSideMenu, "Open nav", Icons.Rounded.Sort)
-                        }
                     }
                 }
 

presentation/src/desktopMain/kotlin/ca/gosyer/ui/downloads/components/DownloadsScreenContent.kt

@@ -10,7 +10,6 @@ import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxHeight
@@ -28,6 +27,7 @@ import androidx.compose.material.Icon
 import androidx.compose.material.LinearProgressIndicator
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.ProgressIndicatorDefaults
+import androidx.compose.material.Scaffold
 import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.ClearAll
@@ -69,20 +69,22 @@ fun DownloadsScreenContent(
     stopDownload: (Chapter) -> Unit,
     moveDownloadToBottom: (Chapter) -> Unit
 ) {
-    Column {
+    Scaffold(
-        Toolbar(
+        topBar = {
-            stringResource(MR.strings.location_downloads),
+            Toolbar(
-            closable = false,
+                stringResource(MR.strings.location_downloads),
-            actions = {
+                actions = {
-                if (downloadStatus == DownloaderStatus.Started) {
+                    if (downloadStatus == DownloaderStatus.Started) {
-                    ActionIcon(onClick = pauseDownloading, stringResource(MR.strings.action_pause), Icons.Rounded.Pause)
+                        ActionIcon(onClick = pauseDownloading, stringResource(MR.strings.action_pause), Icons.Rounded.Pause)
-                } else {
+                    } else {
-                    ActionIcon(onClick = startDownloading, stringResource(MR.strings.action_continue), Icons.Rounded.PlayArrow)
+                        ActionIcon(onClick = startDownloading, stringResource(MR.strings.action_continue), Icons.Rounded.PlayArrow)
+                    }
+                    ActionIcon(onClick = clearQueue, stringResource(MR.strings.action_clear_queue), Icons.Rounded.ClearAll)
                 }
-                ActionIcon(onClick = clearQueue, stringResource(MR.strings.action_clear_queue), Icons.Rounded.ClearAll)
+            )
-            }
+        }
-        )
+    ) {
-        Box {
+        Box(Modifier.padding(it)) {
             val state = rememberLazyListState()
             LazyColumn(Modifier.fillMaxSize(), state) {
                 items(downloadQueue) {

presentation/src/desktopMain/kotlin/ca/gosyer/ui/extensions/components/ExtensionsScreenContent.kt

@@ -26,6 +26,7 @@ import androidx.compose.foundation.rememberScrollbarAdapter
 import androidx.compose.material.Button
 import androidx.compose.material.ContentAlpha
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
 import androidx.compose.material.Switch
 import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
@@ -70,8 +71,8 @@ fun ExtensionsScreenContent(
     updateExtension: (Extension) -> Unit,
     uninstallExtension: (Extension) -> Unit
 ) {
-    if (isLoading) {
+    Scaffold(
-        Column {
+        topBar = {
             ExtensionsToolbar(
                 query,
                 setQuery,
@@ -79,47 +80,41 @@ fun ExtensionsScreenContent(
                 getSourceLanguages,
                 setEnabledLanguages
             )
-            LoadingScreen(isLoading)
         }
-    } else {
+    ) {
-        val state = rememberLazyListState()
+        if (isLoading) {
+            LoadingScreen(isLoading)
+        } else {
+            val state = rememberLazyListState()
 
-        Box(Modifier.fillMaxSize()) {
+            Box(Modifier.fillMaxSize().padding(it)) {
-            LazyColumn(Modifier.fillMaxSize(), state) {
+                LazyColumn(Modifier.fillMaxSize(), state) {
-                item {
+                    extensions.forEach { (header, items) ->
-                    ExtensionsToolbar(
+                        item {
-                        query,
+                            Text(
-                        setQuery,
+                                header,
-                        enabledLangs,
+                                style = MaterialTheme.typography.h6,
-                        getSourceLanguages,
+                                modifier = Modifier.padding(16.dp, 16.dp, 16.dp, 4.dp)
-                        setEnabledLanguages
+                            )
-                    )
+                        }
-                }
+                        items(items) { extension ->
-                extensions.forEach { (header, items) ->
+                            ExtensionItem(
-                    item {
+                                extension,
-                        Text(
+                                onInstallClicked = installExtension,
-                            header,
+                                onUpdateClicked = updateExtension,
-                            style = MaterialTheme.typography.h6,
+                                onUninstallClicked = uninstallExtension
-                            modifier = Modifier.padding(16.dp, 16.dp, 16.dp, 4.dp)
+                            )
-                        )
+                            Spacer(Modifier.height(8.dp))
-                    }
+                        }
-                    items(items) { extension ->
-                        ExtensionItem(
-                            extension,
-                            onInstallClicked = installExtension,
-                            onUpdateClicked = updateExtension,
-                            onUninstallClicked = uninstallExtension
-                        )
-                        Spacer(Modifier.height(8.dp))
                     }
                 }
+                VerticalScrollbar(
+                    modifier = Modifier.align(Alignment.CenterEnd)
+                        .fillMaxHeight()
+                        .padding(horizontal = 4.dp, vertical = 8.dp),
+                    adapter = rememberScrollbarAdapter(state)
+                )
             }
-            VerticalScrollbar(
-                modifier = Modifier.align(Alignment.CenterEnd)
-                    .fillMaxHeight()
-                    .padding(horizontal = 4.dp, vertical = 8.dp),
-                adapter = rememberScrollbarAdapter(state)
-            )
         }
     }
 }
@@ -134,7 +129,6 @@ fun ExtensionsToolbar(
 ) {
     Toolbar(
         stringResource(MR.strings.location_extensions),
-        closable = false,
         searchText = searchText,
         search = search,
         actions = {

presentation/src/desktopMain/kotlin/ca/gosyer/ui/library/components/LibraryScreenContent.kt

@@ -60,7 +60,6 @@ fun LibraryScreenContent(
             )*/
             Toolbar(
                 stringResource(MR.strings.location_library),
-                closable = false,
                 searchText = query,
                 search = updateQuery
             )

presentation/src/desktopMain/kotlin/ca/gosyer/ui/main/MainMenu.kt

@@ -6,27 +6,26 @@
 
 package ca.gosyer.ui.main
 
+import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.animation.core.tween
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
-import androidx.compose.material.DrawerValue
+import androidx.compose.material.Scaffold
-import androidx.compose.material.ModalDrawer
 import androidx.compose.material.Surface
-import androidx.compose.material.rememberDrawerState
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.DisposableEffect
-import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import ca.gosyer.ui.base.navigation.DisplayController
 import ca.gosyer.ui.base.navigation.withDisplayController
+import ca.gosyer.ui.main.components.BottomNav
 import ca.gosyer.ui.main.components.SideMenu
 import ca.gosyer.uicore.vm.LocalViewModelFactory
 import cafe.adriel.voyager.navigator.Navigator
@@ -42,11 +41,11 @@ fun MainMenu() {
         Navigator(vm.startScreen.toScreen()) { navigator ->
             val controller = remember { DisplayController() }
             BoxWithConstraints {
-                // if (maxWidth > 720.dp) {
+                if (maxWidth > 720.dp) {
-                WideMainMenu(navigator, controller)
+                    WideMainMenu(navigator, controller)
-                // } else {
+                } else {
-                // SkinnyMainMenu(rootBundle, controller)
+                    SkinnyMainMenu(navigator)
-                // }
+                }
             }
         }
     }
@@ -54,41 +53,20 @@ fun MainMenu() {
 
 @Composable
 fun SkinnyMainMenu(
-    navigator: Navigator,
+    navigator: Navigator
-    controller: DisplayController
 ) {
-    val drawerState = rememberDrawerState(DrawerValue.Closed)
+    Scaffold(
-    LaunchedEffect(controller.sideMenuVisible) {
+        bottomBar = {
-        if (controller.sideMenuVisible) {
+            AnimatedVisibility(
-            drawerState.open()
+                navigator.size <= 1,
-        } else {
+                enter = slideInVertically(initialOffsetY = { it }),
-            drawerState.close()
+                exit = slideOutVertically(targetOffsetY = { it }),
-        }
+            ) {
-    }
+                BottomNav(navigator)
-    DisposableEffect(drawerState.isOpen) {
-        onDispose {
-            if (drawerState.isOpen) {
-                controller.openSideMenu()
-            } else {
-                controller.closeSideMenu()
             }
         }
-    }
-    DisposableEffect(Unit) {
-        controller.setAsDrawer()
-        onDispose {
-            controller.setAsNotDrawer()
-        }
-    }
-
-    ModalDrawer(
-        {
-            SideMenu(Modifier.fillMaxWidth(), controller, navigator)
-        },
-        drawerState = drawerState,
-        gesturesEnabled = drawerState.isOpen
     ) {
-        withDisplayController(controller) {
+        Box(Modifier.padding(it)) {
             MainWindow(navigator, Modifier)
         }
     }

presentation/src/desktopMain/kotlin/ca/gosyer/ui/main/TopLevelMenus.kt

@@ -10,12 +10,14 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Book
 import androidx.compose.material.icons.outlined.Download
 import androidx.compose.material.icons.outlined.Explore
+import androidx.compose.material.icons.outlined.MoreHoriz
 import androidx.compose.material.icons.outlined.NewReleases
 import androidx.compose.material.icons.outlined.Settings
 import androidx.compose.material.icons.outlined.Store
 import androidx.compose.material.icons.rounded.Book
 import androidx.compose.material.icons.rounded.Download
 import androidx.compose.material.icons.rounded.Explore
+import androidx.compose.material.icons.rounded.MoreHoriz
 import androidx.compose.material.icons.rounded.NewReleases
 import androidx.compose.material.icons.rounded.Settings
 import androidx.compose.material.icons.rounded.Store
@@ -28,6 +30,7 @@ import ca.gosyer.ui.extensions.openExtensionsMenu
 import ca.gosyer.ui.library.LibraryScreen
 import ca.gosyer.ui.library.openLibraryMenu
 import ca.gosyer.ui.main.components.DownloadsExtraInfo
+import ca.gosyer.ui.main.more.MoreScreen
 import ca.gosyer.ui.settings.SettingsScreen
 import ca.gosyer.ui.sources.SourcesScreen
 import ca.gosyer.ui.sources.openSourcesMenu
@@ -37,22 +40,43 @@ import cafe.adriel.voyager.navigator.Navigator
 import dev.icerock.moko.resources.StringResource
 import kotlin.reflect.KClass
 
-enum class TopLevelMenus(
+interface Menu {
-    val textKey: StringResource,
+    val textKey: StringResource
-    val unselectedIcon: ImageVector,
+    val unselectedIcon: ImageVector
-    val selectedIcon: ImageVector,
+    val selectedIcon: ImageVector
-    val screen: KClass<*>,
+    val screen: KClass<*>
-    val createScreen: () -> Screen,
+    val createScreen: () -> Screen
-    val top: Boolean,
+    val openInNewWindow: (() -> Unit)?
-    val openInNewWindow: () -> Unit = {},
+    val extraInfo: (@Composable () -> Unit)?
-    val extraInfo: (@Composable () -> Unit)? = null
-) {
-    Library(MR.strings.location_library, Icons.Outlined.Book, Icons.Rounded.Book, LibraryScreen::class, { LibraryScreen() }, true, ::openLibraryMenu),
-    Updates(MR.strings.location_updates, Icons.Outlined.NewReleases, Icons.Rounded.NewReleases, UpdatesScreen::class, { UpdatesScreen() }, true, ::openLibraryMenu),
-    Sources(MR.strings.location_sources, Icons.Outlined.Explore, Icons.Rounded.Explore, SourcesScreen::class, { SourcesScreen() }, true, ::openSourcesMenu),
-    Extensions(MR.strings.location_extensions, Icons.Outlined.Store, Icons.Rounded.Store, ExtensionsScreen::class, { ExtensionsScreen() }, true, ::openExtensionsMenu),
-    Downloads(MR.strings.location_downloads, Icons.Outlined.Download, Icons.Rounded.Download, DownloadsScreen::class, { DownloadsScreen() }, false, extraInfo = { DownloadsExtraInfo() }),
-    Settings(MR.strings.location_settings, Icons.Outlined.Settings, Icons.Rounded.Settings, SettingsScreen::class, { SettingsScreen() }, false);
 
     fun isSelected(navigator: Navigator) = navigator.items.first()::class == screen
 }
+
+enum class TopLevelMenus(
+    override val textKey: StringResource,
+    override val unselectedIcon: ImageVector,
+    override val selectedIcon: ImageVector,
+    override val screen: KClass<*>,
+    override val createScreen: () -> Screen,
+    override val openInNewWindow: (() -> Unit)? = null,
+    override val extraInfo: (@Composable () -> Unit)? = null
+) : Menu {
+    Library(MR.strings.location_library, Icons.Outlined.Book, Icons.Rounded.Book, LibraryScreen::class, { LibraryScreen() }, ::openLibraryMenu),
+    Updates(MR.strings.location_updates, Icons.Outlined.NewReleases, Icons.Rounded.NewReleases, UpdatesScreen::class, { UpdatesScreen() }, ::openLibraryMenu),
+    Sources(MR.strings.location_sources, Icons.Outlined.Explore, Icons.Rounded.Explore, SourcesScreen::class, { SourcesScreen() }, ::openSourcesMenu),
+    Extensions(MR.strings.location_extensions, Icons.Outlined.Store, Icons.Rounded.Store, ExtensionsScreen::class, { ExtensionsScreen() }, ::openExtensionsMenu),
+    More(MR.strings.location_more, Icons.Outlined.MoreHoriz, Icons.Rounded.MoreHoriz, MoreScreen::class, { MoreScreen() });
+}
+
+enum class MoreMenus(
+    override val textKey: StringResource,
+    override val unselectedIcon: ImageVector,
+    override val selectedIcon: ImageVector,
+    override val screen: KClass<*>,
+    override val createScreen: () -> Screen,
+    override val openInNewWindow: (() -> Unit)? = null,
+    override val extraInfo: (@Composable () -> Unit)? = null
+) : Menu {
+    Downloads(MR.strings.location_downloads, Icons.Outlined.Download, Icons.Rounded.Download, DownloadsScreen::class, { DownloadsScreen() }, extraInfo = { DownloadsExtraInfo() }),
+    Settings(MR.strings.location_settings, Icons.Outlined.Settings, Icons.Rounded.Settings, SettingsScreen::class, { SettingsScreen() });
+}

presentation/src/desktopMain/kotlin/ca/gosyer/ui/main/components/BottomNav.kt

@@ -0,0 +1,43 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+package ca.gosyer.ui.main.components
+
+import androidx.compose.material.BottomNavigation
+import androidx.compose.material.BottomNavigationItem
+import androidx.compose.material.Icon
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.util.fastForEach
+import ca.gosyer.ui.main.TopLevelMenus
+import ca.gosyer.uicore.resources.stringResource
+import cafe.adriel.voyager.navigator.Navigator
+
+@Composable
+fun BottomNav(navigator: Navigator) {
+    BottomNavigation {
+        remember { TopLevelMenus.values().asList() }.fastForEach {
+            val isSelected = it.isSelected(navigator)
+            BottomNavigationItem(
+                selected = isSelected,
+                onClick = {
+                    if (navigator.lastItem::class == it.screen) return@BottomNavigationItem
+                    navigator replace it.createScreen()
+                },
+                icon = {
+                    if (isSelected) {
+                        Icon(it.selectedIcon, stringResource(it.textKey))
+                    } else {
+                        Icon(it.unselectedIcon, stringResource(it.textKey))
+                    }
+                },
+                label = { Text(stringResource(it.textKey)) },
+                alwaysShowLabel = true
+            )
+        }
+    }
+}

presentation/src/desktopMain/kotlin/ca/gosyer/ui/main/components/SideMenu.kt

@@ -28,8 +28,10 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.compose.ui.util.fastForEach
 import ca.gosyer.presentation.build.BuildKonfig
 import ca.gosyer.ui.base.navigation.DisplayController
+import ca.gosyer.ui.main.MoreMenus
 import ca.gosyer.ui.main.TopLevelMenus
 import cafe.adriel.voyager.navigator.Navigator
 
@@ -53,7 +55,7 @@ fun SideMenu(modifier: Modifier, controller: DisplayController, navigator: Navig
                     }
                 }
                 Spacer(Modifier.height(20.dp))
-                remember { TopLevelMenus.values().filter(TopLevelMenus::top) }.forEach { topLevelMenu ->
+                remember { TopLevelMenus.values().asList().dropLast(1) }.fastForEach { topLevelMenu ->
                     SideMenuItem(
                         topLevelMenu.isSelected(navigator),
                         topLevelMenu
@@ -61,7 +63,7 @@ fun SideMenu(modifier: Modifier, controller: DisplayController, navigator: Navig
                 }
                 Box(Modifier.fillMaxSize()) {
                     Column(Modifier.align(Alignment.BottomStart).padding(bottom = 8.dp)) {
-                        remember { TopLevelMenus.values().filterNot(TopLevelMenus::top) }.forEach { topLevelMenu ->
+                        remember { MoreMenus.values() }.forEach { topLevelMenu ->
                             SideMenuItem(
                                 topLevelMenu.isSelected(navigator),
                                 topLevelMenu,

presentation/src/desktopMain/kotlin/ca/gosyer/ui/main/more/MoreScreen.kt

@@ -0,0 +1,23 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+package ca.gosyer.ui.main.more
+
+import androidx.compose.runtime.Composable
+import ca.gosyer.ui.main.more.components.MoreContent
+import cafe.adriel.voyager.core.screen.Screen
+import cafe.adriel.voyager.core.screen.ScreenKey
+import cafe.adriel.voyager.core.screen.uniqueScreenKey
+
+class MoreScreen : Screen {
+
+    override val key: ScreenKey = uniqueScreenKey
+
+    @Composable
+    override fun Content() {
+        MoreContent()
+    }
+}

presentation/src/desktopMain/kotlin/ca/gosyer/ui/main/more/components/MoreContent.kt

@@ -0,0 +1,94 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+package ca.gosyer.ui.main.more.components
+
+import androidx.compose.desktop.ui.tooling.preview.Preview
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+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.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.lazy.LazyColumn
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
+import androidx.compose.material.Text
+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.unit.dp
+import androidx.compose.ui.util.fastForEach
+import ca.gosyer.i18n.MR
+import ca.gosyer.ui.base.navigation.Toolbar
+import ca.gosyer.ui.main.MoreMenus
+import ca.gosyer.uicore.resources.stringResource
+import cafe.adriel.voyager.navigator.LocalNavigator
+
+@Composable
+fun MoreContent() {
+    Scaffold(
+        topBar = {
+            Toolbar(stringResource(MR.strings.location_more))
+        }
+    ) {
+        LazyColumn(Modifier.padding(it)) {
+            item {
+                Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
+                    Image(
+                        painter = painterResource("icon.png"),
+                        contentDescription = "icon",
+                        modifier = Modifier.height(140.dp).padding(vertical = 8.dp)
+                    )
+                }
+            }
+            MoreMenus.values().asList().fastForEach {
+                item {
+                    val navigator = LocalNavigator.current
+                    Row(
+                        Modifier
+                            .height(48.dp)
+                            .fillMaxWidth()
+                            .clickable {
+                                navigator ?: return@clickable
+                                navigator push it.createScreen()
+                            }
+                            .padding(horizontal = 16.dp, vertical = 4.dp),
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        Icon(
+                            imageVector = it.unselectedIcon,
+                            contentDescription = stringResource(it.textKey),
+                            modifier = Modifier.size(26.dp),
+                            tint = MaterialTheme.colors.onSurface
+                        )
+                        Spacer(Modifier.width(24.dp))
+                        Column {
+                            Text(stringResource(it.textKey), color = MaterialTheme.colors.onSurface)
+                            if (it.extraInfo != null) {
+                                it.extraInfo?.invoke()
+                            }
+                        }
+                    }
+                }
+
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun MorePreview() {
+    MoreContent()
+}

presentation/src/desktopMain/kotlin/ca/gosyer/ui/manga/components/MangaScreenContent.kt

@@ -9,7 +9,6 @@ package ca.gosyer.ui.manga.components
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -18,6 +17,7 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollbarAdapter
+import androidx.compose.material.Scaffold
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Favorite
 import androidx.compose.material.icons.rounded.FavoriteBorder
@@ -68,8 +68,8 @@ fun MangaScreenContent(
         }
     }
 
-    Box {
+    Scaffold(
-        Column {
+        topBar = {
             Toolbar(
                 stringResource(MR.strings.location_manga),
                 actions = {
@@ -98,7 +98,9 @@ fun MangaScreenContent(
                     )
                 }
             )
-
+        }
+    ) {
+        Box(Modifier.padding(it)) {
             manga.let { manga ->
                 if (manga != null) {
                     Box {
@@ -142,9 +144,9 @@ fun MangaScreenContent(
                     ErrorScreen(stringResource(MR.strings.failed_manga_fetch), retry = loadManga)
                 }
             }
-        }
+            if (isLoading) {
-        if (isLoading) {
+                LoadingScreen()
-            LoadingScreen()
+            }
         }
     }
 }

presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsAdvancedScreen.kt

@@ -8,13 +8,13 @@ package ca.gosyer.ui.settings
 
 import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollbarAdapter
+import androidx.compose.material.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -54,9 +54,12 @@ class SettingsAdvancedViewModel @Inject constructor(
 fun SettingsAdvancedScreenContent(
     updatesEnabled: PreferenceMutableStateFlow<Boolean>
 ) {
-    Column {
+    Scaffold(
-        Toolbar(stringResource(MR.strings.settings_advanced_screen))
+        topBar = {
-        Box {
+            Toolbar(stringResource(MR.strings.settings_advanced_screen))
+        }
+    ) {
+        Box(Modifier.padding(it)) {
             val state = rememberLazyListState()
             LazyColumn(Modifier.fillMaxSize(), state) {
                 item {

presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsAppearanceScreen.kt

@@ -25,6 +25,7 @@ import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.material.Button
 import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
@@ -103,9 +104,12 @@ fun SettingsAppearanceScreenContent(
         themes.filter { it.colors.isLight == isLight }
     }
 
-    Column {
+    Scaffold(
-        Toolbar(stringResource(MR.strings.settings_appearance_screen))
+        topBar = {
-        Box {
+            Toolbar(stringResource(MR.strings.settings_appearance_screen))
+        }
+    ) {
+        Box(Modifier.padding(it)) {
             val state = rememberLazyListState()
             LazyColumn(Modifier.fillMaxSize(), state) {
                 item {

presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsBackupScreen.kt

@@ -8,7 +8,6 @@ package ca.gosyer.ui.settings
 
 import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
@@ -20,6 +19,7 @@ import androidx.compose.foundation.rememberScrollbarAdapter
 import androidx.compose.material.CircularProgressIndicator
 import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
 import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Check
@@ -240,9 +240,12 @@ private fun SettingsBackupScreenContent(
         }
     }
 
-    Column {
+    Scaffold(
-        Toolbar(stringResource(MR.strings.settings_backup_screen))
+        topBar = {
-        Box {
+            Toolbar(stringResource(MR.strings.settings_backup_screen))
+        }
+    ) {
+        Box(Modifier.padding(it)) {
             val state = rememberLazyListState()
             LazyColumn(Modifier.fillMaxSize(), state) {
                 item {

presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsBrowseScreen.kt

@@ -8,13 +8,13 @@ package ca.gosyer.ui.settings
 
 import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollbarAdapter
+import androidx.compose.material.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -37,9 +37,12 @@ class SettingsBrowseScreen : Screen {
 
 @Composable
 fun SettingsBrowseScreenContent() {
-    Column {
+    Scaffold(
-        Toolbar(stringResource(MR.strings.settings_browse_screen))
+        topBar = {
-        Box {
+            Toolbar(stringResource(MR.strings.settings_browse_screen))
+        }
+    ) {
+        Box(Modifier.padding(it)) {
             val state = rememberLazyListState()
             LazyColumn(Modifier.fillMaxSize(), state) {
             }

presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsDownloadsScreen.kt

@@ -8,13 +8,13 @@ package ca.gosyer.ui.settings
 
 import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollbarAdapter
+import androidx.compose.material.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -37,9 +37,12 @@ class SettingsDownloadsScreen : Screen {
 
 @Composable
 fun SettingsDownloadsScreenContent() {
-    Column {
+    Scaffold(
-        Toolbar(stringResource(MR.strings.settings_download_screen))
+        topBar = {
-        Box {
+            Toolbar(stringResource(MR.strings.settings_download_screen))
+        }
+    ) {
+        Box(Modifier.padding(it)) {
             val state = rememberLazyListState()
             LazyColumn(Modifier.fillMaxSize(), state) {
             }

presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsGeneralScreen.kt

@@ -8,7 +8,6 @@ package ca.gosyer.ui.settings
 
 import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
@@ -16,6 +15,7 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollbarAdapter
 import androidx.compose.material.Divider
+import androidx.compose.material.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -127,9 +127,12 @@ fun SettingsGeneralScreenContent(
     dateFormat: PreferenceMutableStateFlow<String>,
     dateFormatChoices: Map<String, String>
 ) {
-    Column {
+    Scaffold(
-        Toolbar(stringResource(MR.strings.settings_general_screen))
+        topBar = {
-        Box {
+            Toolbar(stringResource(MR.strings.settings_general_screen))
+        }
+    ) {
+        Box(Modifier.padding(it)) {
             val state = rememberLazyListState()
             LazyColumn(Modifier.fillMaxSize(), state) {
                 item {

presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsLibraryScreen.kt

@@ -8,13 +8,13 @@ package ca.gosyer.ui.settings
 
 import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollbarAdapter
+import androidx.compose.material.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
@@ -79,9 +79,12 @@ fun SettingsLibraryScreenContent(
     refreshCategoryCount: () -> Unit,
     categoriesSize: Int
 ) {
-    Column {
+    Scaffold(
-        Toolbar(stringResource(MR.strings.settings_library_screen))
+        topBar = {
-        Box {
+            Toolbar(stringResource(MR.strings.settings_library_screen))
+        }
+    ) {
+        Box(Modifier.padding(it)) {
             val state = rememberLazyListState()
             LazyColumn(Modifier.fillMaxSize(), state) {
                 item {

presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsParentalControlsScreen.kt

@@ -8,13 +8,13 @@ package ca.gosyer.ui.settings
 
 import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollbarAdapter
+import androidx.compose.material.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -37,9 +37,12 @@ class SettingsParentalControlsScreen : Screen {
 
 @Composable
 fun SettingsParentalControlsScreenContent() {
-    Column {
+    Scaffold(
-        Toolbar(stringResource(MR.strings.settings_parental_control_screen))
+        topBar = {
-        Box {
+            Toolbar(stringResource(MR.strings.settings_parental_control_screen))
+        }
+    ) {
+        Box(Modifier.padding(it)) {
             val state = rememberLazyListState()
             LazyColumn(Modifier.fillMaxSize(), state) {
             }

presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsReaderScreen.kt

@@ -8,7 +8,6 @@ package ca.gosyer.ui.settings
 
 import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
@@ -16,6 +15,7 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollbarAdapter
 import androidx.compose.material.Divider
+import androidx.compose.material.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
@@ -156,9 +156,12 @@ fun SettingsReaderScreenContent(
     imageScaleChoices: Map<ImageScale, String>,
     navigationModeChoices: Map<NavigationMode, String>
 ) {
-    Column {
+    Scaffold(
-        Toolbar(stringResource(MR.strings.settings_reader))
+        topBar = {
-        Box {
+            Toolbar(stringResource(MR.strings.settings_reader_screen))
+        }
+    ) {
+        Box(Modifier.padding(it)) {
             val state = rememberLazyListState()
             LazyColumn(Modifier.fillMaxSize(), state) {
                 item {

presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsScreen.kt

@@ -8,13 +8,13 @@ package ca.gosyer.ui.settings
 
 import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollbarAdapter
+import androidx.compose.material.Scaffold
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Backup
 import androidx.compose.material.icons.rounded.ChromeReaderMode
@@ -51,9 +51,12 @@ class SettingsScreen : Screen {
 
 @Composable
 fun SettingsScreenContent(navigator: Navigator) {
-    Column {
+    Scaffold(
-        Toolbar(stringResource(MR.strings.location_settings), closable = false)
+        topBar = {
-        Box {
+            Toolbar(stringResource(MR.strings.location_settings))
+        }
+    ) {
+        Box(Modifier.padding(it)) {
             val state = rememberLazyListState()
             LazyColumn(Modifier.fillMaxSize(), state) {
                 item {

presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsSecurityScreen.kt

@@ -8,13 +8,13 @@ package ca.gosyer.ui.settings
 
 import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollbarAdapter
+import androidx.compose.material.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -37,9 +37,12 @@ class SettingsSecurityScreen : Screen {
 
 @Composable
 fun SettingsSecurityScreenContent() {
-    Column {
+    Scaffold(
-        Toolbar(stringResource(MR.strings.settings_security_screen))
+        topBar = {
-        Box {
+            Toolbar(stringResource(MR.strings.settings_security_screen))
+        }
+    ) {
+        Box(Modifier.padding(it)) {
             val state = rememberLazyListState()
             LazyColumn(Modifier.fillMaxSize(), state) {
             }

presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsServerScreen.kt

@@ -8,7 +8,6 @@ package ca.gosyer.ui.settings
 
 import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
@@ -16,6 +15,7 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollbarAdapter
 import androidx.compose.material.Divider
+import androidx.compose.material.Scaffold
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Info
 import androidx.compose.material.icons.rounded.Warning
@@ -219,9 +219,12 @@ fun SettingsServerScreenContent(
             restartServer()
         }
     }
-    Column {
+    Scaffold(
-        Toolbar(stringResource(MR.strings.settings_server_screen))
+        topBar = {
-        Box {
+            Toolbar(stringResource(MR.strings.settings_server_screen))
+        }
+    ) {
+        Box(Modifier.padding(it)) {
             val state = rememberLazyListState()
             LazyColumn(Modifier.fillMaxSize(), state) {
                 item {

presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsTrackingScreen.kt

@@ -8,13 +8,13 @@ package ca.gosyer.ui.settings
 
 import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollbarAdapter
+import androidx.compose.material.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -37,9 +37,12 @@ class SettingsTrackingScreen : Screen {
 
 @Composable
 fun SettingsTrackingScreenContent() {
-    Column {
+    Scaffold(
-        Toolbar(stringResource(MR.strings.settings_tracking_screen))
+        topBar = {
-        Box {
+            Toolbar(stringResource(MR.strings.settings_tracking_screen))
+        }
+    ) {
+        Box(Modifier.padding(it)) {
             val state = rememberLazyListState()
             LazyColumn(Modifier.fillMaxSize(), state) {
             }

presentation/src/desktopMain/kotlin/ca/gosyer/ui/sources/browse/components/SourceScreenContent.kt

@@ -10,7 +10,6 @@ import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.gestures.forEachGesture
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
@@ -19,6 +18,7 @@ import androidx.compose.foundation.lazy.LazyVerticalGrid
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollbarAdapter
+import androidx.compose.material.Scaffold
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.Explore
 import androidx.compose.material.icons.rounded.FilterList
@@ -72,22 +72,25 @@ fun SourceScreenContent(
         enableLatest(source.supportsLatest)
     }
 
-    Column {
+    Scaffold(
-        SourceToolbar(
+        topBar = {
-            source = source,
+            SourceToolbar(
-            onCloseSourceTabClick = onCloseSourceTabClick,
+                source = source,
-            sourceSearchQuery = sourceSearchQuery,
+                onCloseSourceTabClick = onCloseSourceTabClick,
-            onSearch = search,
+                sourceSearchQuery = sourceSearchQuery,
-            onSubmitSearch = submitSearch,
+                onSearch = search,
-            onSourceSettingsClick = onSourceSettingsClick,
+                onSubmitSearch = submitSearch,
-            showFilterButton = showFilterButton,
+                onSourceSettingsClick = onSourceSettingsClick,
-            showLatestButton = showLatestButton,
+                showFilterButton = showFilterButton,
-            isLatest = isLatest,
+                showLatestButton = showLatestButton,
-            showingFilters = showingFilters,
+                isLatest = isLatest,
-            onClickMode = setMode,
+                showingFilters = showingFilters,
-            onToggleFiltersClick = setShowingFilters,
+                onClickMode = setMode,
-        )
+                onToggleFiltersClick = setShowingFilters,
-        Box {
+            )
+        }
+    ) {
+        Box(Modifier.padding(it)) {
             MangaTable(
                 mangas = mangas,
                 isLoading = loading,

presentation/src/desktopMain/kotlin/ca/gosyer/ui/sources/home/components/SourceHomeScreenContent.kt

@@ -27,6 +27,7 @@ import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollbarAdapter
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
@@ -59,16 +60,19 @@ fun SourceHomeScreenContent(
     getSourceLanguages: () -> Set<String>,
     setEnabledLanguages: (Set<String>) -> Unit
 ) {
-    if (sources.isEmpty()) {
+    Scaffold(
-        LoadingScreen(isLoading)
+        topBar = {
-    } else {
-        Column {
             SourceHomeScreenToolbar(
                 languages,
                 getSourceLanguages,
                 setEnabledLanguages
             )
-            Box(Modifier.fillMaxSize(), Alignment.TopCenter) {
+        }
+    ) {
+        if (sources.isEmpty()) {
+            LoadingScreen(isLoading)
+        } else {
+            Box(Modifier.fillMaxSize().padding(it), Alignment.TopCenter) {
                 val state = rememberLazyListState()
                 SourceCategory(sources, onAddSource, state)
                 /*val sourcesByLang = sources.groupBy { it.lang.toLowerCase() }.toList()
@@ -90,8 +94,10 @@ fun SourceHomeScreenContent(
                     adapter = rememberScrollbarAdapter(state)
                 )
             }
+
         }
     }
+
 }
 
 @Composable
@@ -102,7 +108,6 @@ fun SourceHomeScreenToolbar(
 ) {
     Toolbar(
         stringResource(MR.strings.location_sources),
-        closable = false,
         actions = {
             TextActionIcon(
                 {

presentation/src/desktopMain/kotlin/ca/gosyer/ui/sources/settings/components/SourceSettingsScreenContent.kt

@@ -8,7 +8,6 @@ package ca.gosyer.ui.sources.settings.components
 
 import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
@@ -20,6 +19,7 @@ import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollbarAdapter
 import androidx.compose.material.Checkbox
 import androidx.compose.material.OutlinedTextField
+import androidx.compose.material.Scaffold
 import androidx.compose.material.Switch
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
@@ -52,9 +52,12 @@ import kotlin.collections.List as KtList
 fun SourceSettingsScreenContent(
     settings: KtList<SourceSettingsView<*, *>>
 ) {
-    Column {
+    Scaffold(
-        Toolbar(stringResource(MR.strings.location_settings))
+        topBar = {
-        Box {
+            Toolbar(stringResource(MR.strings.location_settings))
+        }
+    ) {
+        Box(Modifier.padding(it)) {
             val state = rememberLazyListState()
             LazyColumn(Modifier.fillMaxSize(), state) {
                 items(settings, { it.props.hashCode() }) {

presentation/src/desktopMain/kotlin/ca/gosyer/ui/updates/components/UpdatesScreenContent.kt

@@ -9,7 +9,6 @@ package ca.gosyer.ui.updates.components
 import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
@@ -21,6 +20,7 @@ import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollbarAdapter
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
@@ -56,12 +56,15 @@ fun UpdatesScreenContent(
     deleteDownloadedChapter: (Chapter) -> Unit,
     stopDownloadingChapter: (Chapter) -> Unit
 ) {
-    Column {
+    Scaffold(
-        Toolbar(stringResource(MR.strings.location_updates), closable = false)
+        topBar = {
+            Toolbar(stringResource(MR.strings.location_updates))
+        }
+    ) {
         if (isLoading || updates.isEmpty()) {
             LoadingScreen(isLoading)
         } else {
-            Box {
+            Box(Modifier.padding(it)) {
                 val state = rememberLazyListState()
                 LazyColumn(Modifier.fillMaxSize(), state) {
                     itemsIndexed(updates) { index, item ->