feat: further split ChatRouterScreen.kt into modules

app/src/main/java/chat/revolt/components/screens/chat/BottomNavigation.kt

@@ -9,6 +9,7 @@ import androidx.compose.material.icons.filled.Settings
 import androidx.compose.material3.BottomAppBar
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
@@ -34,7 +35,9 @@ fun BottomNavigation(
             animationSpec = RevoltTweenIntSize
         ),
     ) {
-        BottomAppBar {
+        BottomAppBar(
+            containerColor = MaterialTheme.colorScheme.background,
+        ) {
             IconButton(
                 modifier = Modifier.weight(1f),
                 onClick = {

app/src/main/java/chat/revolt/components/screens/chat/DrawerServer.kt

@@ -0,0 +1,55 @@
+package chat.revolt.components.screens.chat
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import chat.revolt.api.REVOLT_FILES
+import chat.revolt.components.generic.RemoteImage
+
+@Composable
+fun DrawerServer(
+    iconId: String?,
+    serverName: String,
+    onClick: () -> Unit
+) {
+    if (iconId != null) {
+        RemoteImage(
+            url = "$REVOLT_FILES/icons/${iconId}/server.png?max_side=256",
+            modifier = Modifier
+                .padding(8.dp)
+                .size(48.dp)
+                .clip(CircleShape)
+                .clickable(onClick = onClick),
+            description = serverName
+        )
+    } else {
+        Box(
+            contentAlignment = Alignment.Center,
+            modifier = Modifier
+                .padding(8.dp)
+                .size(48.dp)
+                .clip(CircleShape)
+                .background(MaterialTheme.colorScheme.surfaceVariant)
+                .clickable(onClick = onClick)
+        ) {
+            Text(
+                text = serverName.first().uppercase(),
+                fontSize = 20.sp,
+                fontWeight = FontWeight.SemiBold,
+                color = MaterialTheme.colorScheme.onSurface
+            )
+        }
+    }
+}

app/src/main/java/chat/revolt/components/screens/chat/DrawerServerlikeIcon.kt

@@ -0,0 +1,29 @@
+package chat.revolt.components.screens.chat
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun DrawerServerlikeIcon(
+    onClick: () -> Unit,
+    content: @Composable () -> Unit
+) {
+    IconButton(
+        onClick = onClick,
+        modifier = Modifier
+            .padding(8.dp)
+            .size(48.dp)
+            .clip(CircleShape)
+            .background(MaterialTheme.colorScheme.surfaceVariant)
+    ) {
+        content()
+    }
+}

app/src/main/java/chat/revolt/components/screens/chat/ServerDrawerSeparator.kt

@@ -0,0 +1,26 @@
+package chat.revolt.components.screens.chat
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun ServerDrawerSeparator() {
+    Box(
+        Modifier
+            .padding(horizontal = 8.dp, vertical = 4.dp)
+            .height(1.dp)
+            .width(48.dp)
+            .background(
+                MaterialTheme.colorScheme.onSurfaceVariant.copy(
+                    alpha = 0.1f
+                )
+            )
+    )
+}

app/src/main/java/chat/revolt/screens/chat/ChatRouterScreen.kt

@@ -2,10 +2,8 @@ package chat.revolt.screens.chat
 
 import androidx.compose.animation.*
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Home
@@ -14,9 +12,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.rememberCoroutineScope
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
@@ -29,15 +25,12 @@ import androidx.navigation.compose.composable
 import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import chat.revolt.R
-import chat.revolt.api.REVOLT_FILES
 import chat.revolt.api.RevoltAPI
 import chat.revolt.api.realtime.DisconnectionState
 import chat.revolt.api.realtime.RealtimeSocket
 import chat.revolt.api.schemas.ChannelType
 import chat.revolt.components.chat.DisconnectedNotice
-import chat.revolt.components.generic.RemoteImage
-import chat.revolt.components.screens.chat.BottomNavigation
-import chat.revolt.components.screens.chat.DrawerChannel
+import chat.revolt.components.screens.chat.*
 import chat.revolt.screens.chat.views.ChannelScreen
 import chat.revolt.screens.chat.views.HomeScreen
 import kotlinx.coroutines.launch
@@ -100,13 +93,10 @@ fun ChatRouterScreen(topNav: NavController, viewModel: ChatRouterViewModel = vie
                                     .verticalScroll(rememberScrollState())
                                     .background(MaterialTheme.colorScheme.surface)
                             ) {
-                                IconButton(
+                                DrawerServerlikeIcon(
                                     onClick = {
                                         viewModel.navigateToServer("home", navController)
-                                    },
-                                    modifier = Modifier
-                                        .padding(8.dp)
-                                        .size(48.dp)
+                                    }
                                 ) {
                                     Icon(
                                         Icons.Default.Home,
@@ -115,49 +105,21 @@ fun ChatRouterScreen(topNav: NavController, viewModel: ChatRouterViewModel = vie
                                     )
                                 }
 
+                                ServerDrawerSeparator()
+
                                 RevoltAPI.serverCache.values
                                     .sortedBy { it.id }
                                     .forEach { server ->
                                         if (server.name == null) return@forEach
 
-                                        if (server.icon != null) {
-                                            RemoteImage(
-                                                url = "$REVOLT_FILES/icons/${server.icon.id!!}/server.png?max_side=256",
-                                                modifier = Modifier
-                                                    .padding(8.dp)
-                                                    .size(48.dp)
-                                                    .clip(CircleShape)
-                                                    .clickable {
-                                                        viewModel.navigateToServer(
-                                                            server.id!!,
-                                                            navController
-                                                        )
-                                                    },
-                                                description = "${server.name}"
+                                        DrawerServer(
+                                            iconId = server.icon?.id,
+                                            serverName = server.name
+                                        ) {
+                                            viewModel.navigateToServer(
+                                                server.id!!,
+                                                navController
                                             )
-                                        } else {
-                                            // return a placeholder icon, currently the first letter of the server name in a circle
-                                            Box(
-                                                contentAlignment = Alignment.Center,
-                                                modifier = Modifier
-                                                    .padding(8.dp)
-                                                    .size(48.dp)
-                                                    .clip(CircleShape)
-                                                    .background(MaterialTheme.colorScheme.surfaceVariant)
-                                                    .clickable {
-                                                        viewModel.navigateToServer(
-                                                            server.id!!,
-                                                            navController
-                                                        )
-                                                    }
-                                            ) {
-                                                Text(
-                                                    text = server.name.first().toString(),
-                                                    fontSize = 20.sp,
-                                                    fontWeight = FontWeight.SemiBold,
-                                                    color = MaterialTheme.colorScheme.onSurface
-                                                )
-                                            }
                                         }
                                     }
                             }