UI improvements + code cleanup in side panels

src/main/kotlin/app/Constants.kt

@@ -1,3 +0,0 @@
-package app
-
-const val MAX_SIDE_PANEL_ITEMS_HEIGHT = 300

src/main/kotlin/app/SideMenuUtils.kt

@@ -0,0 +1,13 @@
+package app
+
+const val MAX_SIDE_PANEL_ITEMS_HEIGHT = 300
+const val ENTRY_HEIGHT = 40
+
+fun maxSidePanelHeight(itemsCount: Int): Int {
+    val itemsHeight = itemsCount * ENTRY_HEIGHT
+
+    return if (itemsHeight < MAX_SIDE_PANEL_ITEMS_HEIGHT)
+        itemsHeight
+    else
+        MAX_SIDE_PANEL_ITEMS_HEIGHT
+}

src/main/kotlin/app/theme/Color.kt

@@ -19,7 +19,8 @@ val backgroundColorDark = Color(0xFF0E1621)
 val surfaceColorLight = Color(0xFFe9ecf7)
 val surfaceColorDark = Color(0xFF182533)
 val headerBackgroundLight = Color(0xFFF4F6FA)
-val headerBackgroundDark = Color(0xFF303132)
+val graphHeaderBackgroundDark = Color(0xFF303132)
+val headerBackgroundDark = Color(0xFF0a2b4a)
 
 val addFileLight = Color(0xFF32A852)
 val deleteFileLight = errorColor

src/main/kotlin/app/theme/Theme.kt

@@ -53,18 +53,6 @@ val Colors.inversePrimaryTextColor: Color
 val Colors.secondaryTextColor: Color
     get() = if (isLight) secondaryText else secondaryTextDark
 
-@get:Composable
-val Colors.accent: Color
-    get() = primaryLight
-
-@get:Composable
-val Colors.primaryGray: Color
-    get() = primaryGrayLight
-
-@get:Composable
-val Colors.accentGray: Color
-    get() = accentGrayLight
-
 @get:Composable
 val Colors.headerBackground: Color
     get() {
@@ -74,6 +62,15 @@ val Colors.headerBackground: Color
             headerBackgroundDark
     }
 
+@get:Composable
+val Colors.graphHeaderBackground: Color
+    get() {
+        return if (isLight)
+            headerBackgroundLight
+        else
+            graphHeaderBackgroundDark
+    }
+
 @get:Composable
 val Colors.addFile: Color
     get() = addFileLight

src/main/kotlin/app/ui/Branches.kt

@@ -2,7 +2,11 @@ package app.ui
 
 import androidx.compose.foundation.ContextMenuArea
 import androidx.compose.foundation.ExperimentalFoundationApi
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
@@ -10,13 +14,12 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
-import app.MAX_SIDE_PANEL_ITEMS_HEIGHT
 import app.extensions.isLocal
 import app.extensions.simpleName
+import app.maxSidePanelHeight
 import app.ui.components.ScrollableLazyColumn
 import app.ui.components.SideMenuEntry
 import app.ui.components.SideMenuSubentry
-import app.ui.components.entryHeight
 import app.ui.context_menu.branchContextMenuItems
 import app.ui.dialogs.MergeDialog
 import app.ui.dialogs.RebaseDialog
@@ -32,29 +35,27 @@ fun Branches(
     val currentBranch by branchesViewModel.currentBranch.collectAsState()
     val (mergeBranch, setMergeBranch) = remember { mutableStateOf<Ref?>(null) }
     val (rebaseBranch, setRebaseBranch) = remember { mutableStateOf<Ref?>(null) }
+    val maxHeight = remember(branches) { maxSidePanelHeight(branches.count()) }
 
     Column {
         SideMenuEntry("Local branches")
 
-        val branchesHeight = branches.count() * entryHeight
+        ScrollableLazyColumn(
-        val maxHeight = if (branchesHeight < MAX_SIDE_PANEL_ITEMS_HEIGHT)
+            modifier = Modifier
-            branchesHeight
+                .fillMaxWidth()
-        else
+                .heightIn(max = maxHeight.dp)
-            MAX_SIDE_PANEL_ITEMS_HEIGHT
+                .background(MaterialTheme.colors.background)
-
+        ) {
-        Box(modifier = Modifier.heightIn(max = maxHeight.dp)) {
+            itemsIndexed(branches) { _, branch ->
-            ScrollableLazyColumn(modifier = Modifier.fillMaxWidth()) {
+                BranchLineEntry(
-                itemsIndexed(branches) { _, branch ->
+                    branch = branch,
-                    BranchLineEntry(
+                    isCurrentBranch = currentBranch == branch.name,
-                        branch = branch,
+                    onBranchClicked = { onBranchClicked(branch) },
-                        isCurrentBranch = currentBranch == branch.name,
+                    onCheckoutBranch = { branchesViewModel.checkoutRef(branch) },
-                        onBranchClicked = { onBranchClicked(branch) },
+                    onMergeBranch = { setMergeBranch(branch) },
-                        onCheckoutBranch = { branchesViewModel.checkoutRef(branch) },
+                    onRebaseBranch = { branchesViewModel.deleteBranch(branch) },
-                        onMergeBranch = { setMergeBranch(branch) },
+                    onDeleteBranch = { setRebaseBranch(branch) },
-                        onRebaseBranch = { branchesViewModel.deleteBranch(branch) },
+                )
-                        onDeleteBranch = { setRebaseBranch(branch) },
-                    )
-                }
             }
         }
     }

src/main/kotlin/app/ui/Remotes.kt

@@ -1,45 +1,45 @@
 package app.ui
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
-import app.MAX_SIDE_PANEL_ITEMS_HEIGHT
 import app.extensions.simpleVisibleName
 import app.git.RemoteInfo
+import app.maxSidePanelHeight
 import app.ui.components.ScrollableLazyColumn
 import app.ui.components.SideMenuEntry
 import app.ui.components.SideMenuSubentry
-import app.ui.components.entryHeight
 import app.viewmodels.RemotesViewModel
 
 @Composable
 fun Remotes(remotesViewModel: RemotesViewModel) {
     val remotes by remotesViewModel.remotes.collectAsState()
+    val allBranches = remotes.map { it.branchesList }.flatten()
+    val maxHeight = remember(remotes) { maxSidePanelHeight(allBranches.count() + remotes.count()) }
 
     Column {
         SideMenuEntry("Remotes")
 
-        val allBranches = remotes.map { it.branchesList }.flatten()
+        ScrollableLazyColumn(
-        val remotesHeight = (allBranches.count() + remotes.count()) * entryHeight
+            modifier = Modifier
-        val maxHeight = if (remotesHeight < MAX_SIDE_PANEL_ITEMS_HEIGHT)
+                .fillMaxWidth()
-            remotesHeight
+                .heightIn(max = maxHeight.dp)
-        else
+                .background(MaterialTheme.colors.background)
-            MAX_SIDE_PANEL_ITEMS_HEIGHT
+        ) {
-
+            items(remotes) { remote ->
-        Box(modifier = Modifier.heightIn(max = maxHeight.dp)) {
+                RemoteRow(
-            ScrollableLazyColumn(modifier = Modifier.fillMaxWidth()) {
+                    remote = remote,
-                items(remotes) { remote ->
+                )
-                    RemoteRow(
-                        remote = remote,
-                    )
-                }
             }
         }
     }

src/main/kotlin/app/ui/Stashes.kt

@@ -1,11 +1,17 @@
 package app.ui
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import app.maxSidePanelHeight
 import app.ui.components.ScrollableLazyColumn
 import app.ui.components.SideMenuEntry
 import app.ui.components.SideMenuSubentry
@@ -26,13 +32,19 @@ fun Stashes(
     else
         listOf()
 
+    val maxHeight = remember(stashList) { maxSidePanelHeight(stashList.count()) }
 
     Column {
         SideMenuEntry(
             text = "Stashes",
         )
 
-        ScrollableLazyColumn(modifier = Modifier.fillMaxWidth()) {
+        ScrollableLazyColumn(
+            modifier = Modifier
+                .fillMaxWidth()
+                .heightIn(max = maxHeight.dp)
+                .background(MaterialTheme.colors.background)
+        ) {
             items(items = stashList) { stash ->
                 StashRow(
                     stash = stash,

src/main/kotlin/app/ui/Tags.kt

@@ -2,21 +2,22 @@ package app.ui
 
 import androidx.compose.foundation.ContextMenuArea
 import androidx.compose.foundation.ExperimentalFoundationApi
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
-import app.MAX_SIDE_PANEL_ITEMS_HEIGHT
 import app.extensions.simpleName
+import app.maxSidePanelHeight
 import app.ui.components.ScrollableLazyColumn
 import app.ui.components.SideMenuEntry
 import app.ui.components.SideMenuSubentry
-import app.ui.components.entryHeight
 import app.ui.context_menu.tagContextMenuItems
 import app.viewmodels.TagsViewModel
 import org.eclipse.jgit.lib.Ref
@@ -28,30 +29,29 @@ fun Tags(
 ) {
     val tagsState = tagsViewModel.tags.collectAsState()
     val tags = tagsState.value
+    val maxHeight = remember(tags) { maxSidePanelHeight(tags.count()) }
 
     Column {
         SideMenuEntry(
             text = "Tags",
         )
 
-        val tagsHeight = tags.count() * entryHeight
+        ScrollableLazyColumn(
-        val maxHeight = if (tagsHeight < MAX_SIDE_PANEL_ITEMS_HEIGHT)
+            modifier = Modifier
-            tagsHeight
+                .fillMaxWidth()
-        else
+                .heightIn(max = maxHeight.dp)
-            MAX_SIDE_PANEL_ITEMS_HEIGHT
+                .background(MaterialTheme.colors.background)
-
+        ) {
-        Box(modifier = Modifier.heightIn(max = maxHeight.dp)) {
+            items(items = tags) { tag ->
-            ScrollableLazyColumn(modifier = Modifier.fillMaxWidth()) {
+                TagRow(
-                items(items = tags) { tag ->
+                    tag = tag,
-                    TagRow(
+                    onTagClicked = { onTagClicked(tag) },
-                        tag = tag,
+                    onCheckoutTag = { tagsViewModel.checkoutRef(tag) },
-                        onTagClicked = { onTagClicked(tag) },
+                    onDeleteTag = { tagsViewModel.deleteTag(tag) }
-                        onCheckoutTag = { tagsViewModel.checkoutRef(tag) },
+                )
-                        onDeleteTag = { tagsViewModel.deleteTag(tag) }
-                    )
-                }
             }
         }
+
     }
 
 }

src/main/kotlin/app/ui/components/SideMenuEntry.kt

@@ -1,5 +1,6 @@
 package app.ui.components
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -12,6 +13,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import app.theme.headerBackground
+import app.theme.primaryTextColor
 import app.theme.secondaryTextColor
 
 @Composable
@@ -21,17 +24,17 @@ fun SideMenuEntry(
     Row(
         modifier = Modifier
             .height(32.dp)
-            .fillMaxWidth(),
+            .fillMaxWidth()
+            .background(color = MaterialTheme.colors.headerBackground),
         verticalAlignment = Alignment.CenterVertically,
     ) {
-
         Text(
             text = text,
             modifier = Modifier
                 .padding(horizontal = 8.dp),
             maxLines = 1,
             fontSize = 14.sp,
-            color = MaterialTheme.colors.secondaryTextColor,
+            color = MaterialTheme.colors.primaryTextColor,
             overflow = TextOverflow.Ellipsis,
         )
     }

src/main/kotlin/app/ui/components/SideMenuSubentry.kt

@@ -16,10 +16,9 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import app.ENTRY_HEIGHT
 import app.theme.primaryTextColor
 
-const val entryHeight = 40
-
 @Composable
 fun SideMenuSubentry(
     text: String,
@@ -31,7 +30,7 @@ fun SideMenuSubentry(
 ) {
     Row(
         modifier = Modifier
-            .height(entryHeight.dp)
+            .height(ENTRY_HEIGHT.dp)
             .fillMaxWidth()
             .clickable(onClick = onClick)
             .padding(start = extraPadding),

src/main/kotlin/app/ui/log/Log.kt

@@ -236,7 +236,7 @@ fun GraphHeader(
         modifier = Modifier
             .fillMaxWidth()
             .height(32.dp)
-            .background(MaterialTheme.colors.headerBackground),
+            .background(MaterialTheme.colors.graphHeaderBackground),
         verticalAlignment = Alignment.CenterVertically,
     ) {
         Text(
@@ -244,7 +244,6 @@ fun GraphHeader(
                 .width(graphWidth)
                 .padding(start = 8.dp),
             text = "Graph",
-            fontWeight = FontWeight.Bold,
             color = MaterialTheme.colors.headerText,
             fontSize = 14.sp,
             maxLines = 1,
@@ -261,7 +260,6 @@ fun GraphHeader(
                 .padding(start = 8.dp)
                 .width(graphWidth),
             text = "Message",
-            fontWeight = FontWeight.Bold,
             color = MaterialTheme.colors.headerText,
             fontSize = 14.sp,
             maxLines = 1,