feat: material 3-ise session settings further

Signed-off-by: Infi <infi@infi.sh>

app/src/main/java/chat/revolt/components/settings/sessions/SessionItem.kt

@@ -1,27 +1,18 @@
 package chat.revolt.components.settings.sessions
 
 import android.text.format.DateUtils
-import androidx.compose.foundation.background
+import androidx.compose.material.IconButton
-import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.material3.Icon
-import androidx.compose.foundation.layout.Column
+import androidx.compose.material3.ListItem
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.ElevatedButton
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
-import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableLongStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.dp
 import chat.revolt.R
 import chat.revolt.api.internals.ULID
 import chat.revolt.api.schemas.Session
@@ -33,7 +24,6 @@ fun SessionItem(
     currentSession: Boolean = false,
     onLogout: (Session) -> Unit
 ) {
-    val context = LocalContext.current
     val decodedUlid by remember(session) { mutableLongStateOf(ULID.asTimestamp(session.id)) }
     val formattedTimestamp = remember(decodedUlid) {
         DateUtils.getRelativeTimeSpanString(
@@ -43,45 +33,33 @@ fun SessionItem(
         )
     }
 
-    Row(
+    ListItem(
-        modifier = modifier
+        headlineContent = {
-            .fillMaxWidth()
-            .clip(shape = MaterialTheme.shapes.medium)
-            .background(
-                color = if (currentSession) {
-                    MaterialTheme.colorScheme.surfaceColorAtElevation(4.dp)
-                } else {
-                    MaterialTheme.colorScheme.surfaceColorAtElevation(2.dp)
-                }
-            )
-            .padding(16.dp),
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.SpaceBetween
-    ) {
-        Column(
-            modifier = Modifier
-                .weight(1f)
-                .padding(end = 16.dp)
-        ) {
             Text(
                 text = session.name,
                 maxLines = 1,
-                overflow = TextOverflow.Ellipsis,
+                overflow = TextOverflow.Ellipsis
-                style = MaterialTheme.typography.labelLarge
             )
-
+        },
+        supportingContent = {
             Text(
                 text = stringResource(R.string.settings_sessions_first_seen, formattedTimestamp),
                 maxLines = 1,
-                overflow = TextOverflow.Ellipsis,
+                overflow = TextOverflow.Ellipsis
-                style = MaterialTheme.typography.labelSmall
             )
-        }
+        },
-
+        trailingContent = {
-        if (!currentSession) {
+            if (!currentSession) {
-            ElevatedButton(onClick = { onLogout(session) }) {
+                IconButton(onClick = {
-                Text(stringResource(R.string.logout))
+                    onLogout(session)
+                }) {
+                    Icon(
+                        painter = painterResource(R.drawable.ic_logout_24dp),
+                        contentDescription = stringResource(R.string.logout)
+                    )
+                }
             }
-        }
+        },
-    }
+        modifier = modifier
+    )
 }

app/src/main/java/chat/revolt/screens/settings/SessionSettngsScreen.kt

@@ -199,7 +199,7 @@ fun SessionSettingsScreen(
                 item(key = "logoutOtherSessions") {
                     Row(
                         modifier = Modifier
-                            .padding(8.dp)
+                            .padding(vertical = 8.dp, horizontal = 16.dp)
                             .fillMaxWidth()
                             .clip(shape = MaterialTheme.shapes.medium)
                             .background(

app/src/main/res/drawable/ic_logout_24dp.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:height="24dp"
+    android:width="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="#ffffff"
+        android:pathData="M17 7L15.59 8.41L18.17 11H8V13H18.17L15.59 15.58L17 17L22 12M4 5H12V3H4C2.9 3 2 3.9 2 5V19C2 20.1 2.9 21 4 21H12V19H4V5Z" />
+</vector>