Start working on supporting thin screens

2025-12-13 08:12:02 +01:00 · 2022-02-01 22:14:50 -05:00
parent f2a6e64979
commit 53061d95bd
30 changed files with 425 additions and 221 deletions
--- a/i18n/src/commonMain/resources/MR/values/base/strings.xml
+++ b/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>
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/base/navigation/DisplayController.kt
+++ b/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
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/base/navigation/Toolbar.kt
+++ b/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,17 +99,14 @@ fun Toolbar(
                Modifier.fillMaxHeight().animateContentSize(),
                verticalAlignment = Alignment.CenterVertically
            ) {
+                val displayController = LocalDisplayController.current
                if (displayController != null) {
-                    if (displayController.isDrawer) {
-                        ActionIcon(displayController::openSideMenu, "Open nav", Icons.Rounded.Menu)
-                    } else {
                    AnimatedVisibility(
                        !displayController.sideMenuVisible
                    ) {
                        ActionIcon(displayController::openSideMenu, "Open nav", Icons.Rounded.Sort)
                    }
                }
-                }

                Text(name, fontSize = 20.sp)
            }
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/downloads/components/DownloadsScreenContent.kt
+++ b/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,10 +69,10 @@ fun DownloadsScreenContent(
    stopDownload: (Chapter) -> Unit,
    moveDownloadToBottom: (Chapter) -> Unit
 ) {
-    Column {
+    Scaffold(
+        topBar = {
            Toolbar(
                stringResource(MR.strings.location_downloads),
-            closable = false,
                actions = {
                    if (downloadStatus == DownloaderStatus.Started) {
                        ActionIcon(onClick = pauseDownloading, stringResource(MR.strings.action_pause), Icons.Rounded.Pause)
@@ -82,7 +82,9 @@ fun DownloadsScreenContent(
                    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) {
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/extensions/components/ExtensionsScreenContent.kt
+++ b/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) {
-        Column {
+    Scaffold(
+        topBar = {
            ExtensionsToolbar(
                query,
                setQuery,
@@ -79,22 +80,15 @@ fun ExtensionsScreenContent(
                getSourceLanguages,
                setEnabledLanguages
            )
-            LoadingScreen(isLoading)
        }
+    ) {
+        if (isLoading) {
+            LoadingScreen(isLoading)
        } else {
            val state = rememberLazyListState()

-        Box(Modifier.fillMaxSize()) {
+            Box(Modifier.fillMaxSize().padding(it)) {
                LazyColumn(Modifier.fillMaxSize(), state) {
-                item {
-                    ExtensionsToolbar(
-                        query,
-                        setQuery,
-                        enabledLangs,
-                        getSourceLanguages,
-                        setEnabledLanguages
-                    )
-                }
                    extensions.forEach { (header, items) ->
                        item {
                            Text(
@@ -122,6 +116,7 @@ fun ExtensionsScreenContent(
                )
            }
        }
+    }
 }

@Composable
@@ -134,7 +129,6 @@ fun ExtensionsToolbar(
 ) {
    Toolbar(
        stringResource(MR.strings.location_extensions),
-        closable = false,
        searchText = searchText,
        search = search,
        actions = {
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/library/components/LibraryScreenContent.kt
+++ b/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
            )
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/main/MainMenu.kt
+++ b/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.ModalDrawer
+import androidx.compose.material.Scaffold
 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)
-                // } else {
-                // SkinnyMainMenu(rootBundle, controller)
-                // }
+                } else {
+                    SkinnyMainMenu(navigator)
+                }
            }
        }
    }
@@ -54,41 +53,20 @@ fun MainMenu() {

@Composable
 fun SkinnyMainMenu(
-    navigator: Navigator,
-    controller: DisplayController
+    navigator: Navigator
 ) {
-    val drawerState = rememberDrawerState(DrawerValue.Closed)
-    LaunchedEffect(controller.sideMenuVisible) {
-        if (controller.sideMenuVisible) {
-            drawerState.open()
-        } else {
-            drawerState.close()
-        }
-    }
-    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
+    Scaffold(
+        bottomBar = {
+            AnimatedVisibility(
+                navigator.size <= 1,
+                enter = slideInVertically(initialOffsetY = { it }),
+                exit = slideOutVertically(targetOffsetY = { it }),
            ) {
-        withDisplayController(controller) {
+                BottomNav(navigator)
+            }
+        }
+    ) {
+        Box(Modifier.padding(it)) {
            MainWindow(navigator, Modifier)
        }
    }
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/main/TopLevelMenus.kt
+++ b/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(
-    val textKey: StringResource,
-    val unselectedIcon: ImageVector,
-    val selectedIcon: ImageVector,
-    val screen: KClass<*>,
-    val createScreen: () -> Screen,
-    val top: Boolean,
-    val openInNewWindow: () -> 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);
+interface Menu {
+    val textKey: StringResource
+    val unselectedIcon: ImageVector
+    val selectedIcon: ImageVector
+    val screen: KClass<*>
+    val createScreen: () -> Screen
+    val openInNewWindow: (() -> Unit)?
+    val extraInfo: (@Composable () -> Unit)?

    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() });
+}
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/main/components/BottomNav.kt
+++ b/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
+            )
+        }
+    }
+}
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/main/components/SideMenu.kt
+++ b/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,
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/main/more/MoreScreen.kt
+++ b/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()
+    }
+}
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/main/more/components/MoreContent.kt
+++ b/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()
+}
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/manga/components/MangaScreenContent.kt
+++ b/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 {
-        Column {
+    Scaffold(
+        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) {
                LoadingScreen()
            }
        }
+    }
 }
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsAdvancedScreen.kt
+++ b/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(
+        topBar = {
            Toolbar(stringResource(MR.strings.settings_advanced_screen))
-        Box {
+        }
+    ) {
+        Box(Modifier.padding(it)) {
            val state = rememberLazyListState()
            LazyColumn(Modifier.fillMaxSize(), state) {
                item {
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsAppearanceScreen.kt
+++ b/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(
+        topBar = {
            Toolbar(stringResource(MR.strings.settings_appearance_screen))
-        Box {
+        }
+    ) {
+        Box(Modifier.padding(it)) {
            val state = rememberLazyListState()
            LazyColumn(Modifier.fillMaxSize(), state) {
                item {
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsBackupScreen.kt
+++ b/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(
+        topBar = {
            Toolbar(stringResource(MR.strings.settings_backup_screen))
-        Box {
+        }
+    ) {
+        Box(Modifier.padding(it)) {
            val state = rememberLazyListState()
            LazyColumn(Modifier.fillMaxSize(), state) {
                item {
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsBrowseScreen.kt
+++ b/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(
+        topBar = {
            Toolbar(stringResource(MR.strings.settings_browse_screen))
-        Box {
+        }
+    ) {
+        Box(Modifier.padding(it)) {
            val state = rememberLazyListState()
            LazyColumn(Modifier.fillMaxSize(), state) {
            }
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsDownloadsScreen.kt
+++ b/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(
+        topBar = {
            Toolbar(stringResource(MR.strings.settings_download_screen))
-        Box {
+        }
+    ) {
+        Box(Modifier.padding(it)) {
            val state = rememberLazyListState()
            LazyColumn(Modifier.fillMaxSize(), state) {
            }
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsGeneralScreen.kt
+++ b/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(
+        topBar = {
            Toolbar(stringResource(MR.strings.settings_general_screen))
-        Box {
+        }
+    ) {
+        Box(Modifier.padding(it)) {
            val state = rememberLazyListState()
            LazyColumn(Modifier.fillMaxSize(), state) {
                item {
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsLibraryScreen.kt
+++ b/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(
+        topBar = {
            Toolbar(stringResource(MR.strings.settings_library_screen))
-        Box {
+        }
+    ) {
+        Box(Modifier.padding(it)) {
            val state = rememberLazyListState()
            LazyColumn(Modifier.fillMaxSize(), state) {
                item {
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsParentalControlsScreen.kt
+++ b/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(
+        topBar = {
            Toolbar(stringResource(MR.strings.settings_parental_control_screen))
-        Box {
+        }
+    ) {
+        Box(Modifier.padding(it)) {
            val state = rememberLazyListState()
            LazyColumn(Modifier.fillMaxSize(), state) {
            }
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsReaderScreen.kt
+++ b/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 {
-        Toolbar(stringResource(MR.strings.settings_reader))
-        Box {
+    Scaffold(
+        topBar = {
+            Toolbar(stringResource(MR.strings.settings_reader_screen))
+        }
+    ) {
+        Box(Modifier.padding(it)) {
            val state = rememberLazyListState()
            LazyColumn(Modifier.fillMaxSize(), state) {
                item {
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsScreen.kt
+++ b/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 {
-        Toolbar(stringResource(MR.strings.location_settings), closable = false)
-        Box {
+    Scaffold(
+        topBar = {
+            Toolbar(stringResource(MR.strings.location_settings))
+        }
+    ) {
+        Box(Modifier.padding(it)) {
            val state = rememberLazyListState()
            LazyColumn(Modifier.fillMaxSize(), state) {
                item {
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsSecurityScreen.kt
+++ b/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(
+        topBar = {
            Toolbar(stringResource(MR.strings.settings_security_screen))
-        Box {
+        }
+    ) {
+        Box(Modifier.padding(it)) {
            val state = rememberLazyListState()
            LazyColumn(Modifier.fillMaxSize(), state) {
            }
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsServerScreen.kt
+++ b/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(
+        topBar = {
            Toolbar(stringResource(MR.strings.settings_server_screen))
-        Box {
+        }
+    ) {
+        Box(Modifier.padding(it)) {
            val state = rememberLazyListState()
            LazyColumn(Modifier.fillMaxSize(), state) {
                item {
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/settings/SettingsTrackingScreen.kt
+++ b/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(
+        topBar = {
            Toolbar(stringResource(MR.strings.settings_tracking_screen))
-        Box {
+        }
+    ) {
+        Box(Modifier.padding(it)) {
            val state = rememberLazyListState()
            LazyColumn(Modifier.fillMaxSize(), state) {
            }
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/sources/browse/components/SourceScreenContent.kt
+++ b/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,7 +72,8 @@ fun SourceScreenContent(
        enableLatest(source.supportsLatest)
    }

-    Column {
+    Scaffold(
+        topBar = {
            SourceToolbar(
                source = source,
                onCloseSourceTabClick = onCloseSourceTabClick,
@@ -87,7 +88,9 @@ fun SourceScreenContent(
                onClickMode = setMode,
                onToggleFiltersClick = setShowingFilters,
            )
-        Box {
+        }
+    ) {
+        Box(Modifier.padding(it)) {
            MangaTable(
                mangas = mangas,
                isLoading = loading,
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/sources/home/components/SourceHomeScreenContent.kt
+++ b/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()) {
-        LoadingScreen(isLoading)
-    } else {
-        Column {
+    Scaffold(
+        topBar = {
            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(
                {
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/sources/settings/components/SourceSettingsScreenContent.kt
+++ b/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(
+        topBar = {
            Toolbar(stringResource(MR.strings.location_settings))
-        Box {
+        }
+    ) {
+        Box(Modifier.padding(it)) {
            val state = rememberLazyListState()
            LazyColumn(Modifier.fillMaxSize(), state) {
                items(settings, { it.props.hashCode() }) {
--- a/presentation/src/desktopMain/kotlin/ca/gosyer/ui/updates/components/UpdatesScreenContent.kt
+++ b/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 {
-        Toolbar(stringResource(MR.strings.location_updates), closable = false)
+    Scaffold(
+        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 ->