feat: make tabs happen

Signed-off-by: Infi <wingit@geist.ga>

app/src/main/java/chat/revolt/components/generic/PrimaryTabs.kt

@@ -0,0 +1,68 @@
+package chat.revolt.components.generic
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.Tab
+import androidx.compose.material3.TabRow
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.viewinterop.AndroidView
+import chat.revolt.api.settings.GlobalState
+import chat.revolt.ui.theme.Theme
+import com.google.android.material.tabs.TabLayout
+
+@Composable
+fun PrimaryTabs(tabs: List<String>, currentIndex: Int, onTabSelected: (Int) -> Unit) {
+    when (GlobalState.theme) {
+        Theme.M3Dynamic -> AndroidView(
+            factory = {
+                TabLayout(it).apply {
+                    tabMode = TabLayout.MODE_FIXED
+                    tabGravity = TabLayout.GRAVITY_FILL
+
+                    tabs.forEach { tab ->
+                        addTab(newTab().setText(tab))
+                    }
+
+                    addOnTabSelectedListener(object :
+                        TabLayout.OnTabSelectedListener {
+                        override fun onTabSelected(tab: TabLayout.Tab?) {
+                            onTabSelected(tab?.position ?: 0)
+                        }
+
+                        override fun onTabUnselected(tab: TabLayout.Tab?) {
+                        }
+
+                        override fun onTabReselected(tab: TabLayout.Tab?) {
+                        }
+                    })
+                }
+            },
+            update = {
+                it.getTabAt(currentIndex)?.select()
+            },
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        else -> TabRow(selectedTabIndex = currentIndex) {
+            tabs.forEachIndexed { index, tab ->
+                Tab(
+                    selected = index == currentIndex,
+                    onClick = { onTabSelected(index) },
+                    text = { Text(tab) }
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun PrimaryTabsPreview() {
+    PrimaryTabs(
+        tabs = listOf("Tab 1", "Tab 2", "Tab 3"),
+        currentIndex = 0,
+        onTabSelected = {}
+    )
+}

app/src/main/java/chat/revolt/screens/about/AboutScreen.kt

@@ -18,8 +18,6 @@ import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ElevatedButton
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Tab
-import androidx.compose.material3.TabRow
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
@@ -38,9 +36,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.viewinterop.AndroidView
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import androidx.lifecycle.viewmodel.compose.viewModel
@@ -51,9 +47,8 @@ import chat.revolt.api.REVOLT_BASE
 import chat.revolt.api.RevoltJson
 import chat.revolt.api.routes.misc.Root
 import chat.revolt.api.routes.misc.getRootRoute
-import chat.revolt.api.settings.GlobalState
 import chat.revolt.components.generic.PageHeader
-import chat.revolt.ui.theme.Theme
+import chat.revolt.components.generic.PrimaryTabs
 import kotlinx.coroutines.launch
 import kotlinx.serialization.encodeToString
 import java.net.URI
@@ -163,62 +158,13 @@ fun AboutScreen(
             showBackButton = true,
             onBackButtonClicked = { navController.popBackStack() })
 
-        // TODO this should be a reusable "tabs" component
+        PrimaryTabs(
-        when (GlobalState.theme) {
+            tabs = listOf(
-            Theme.M3Dynamic -> AndroidView(
+                stringResource(R.string.about_tab_version),
-                factory = {
+                stringResource(R.string.about_tab_details)
-                    com.google.android.material.tabs.TabLayout(it).apply {
+            ),
-                        tabMode = com.google.android.material.tabs.TabLayout.MODE_FIXED
+            currentIndex = viewModel.selectedTabIndex,
-                        tabGravity = com.google.android.material.tabs.TabLayout.GRAVITY_FILL
+            onTabSelected = { viewModel.selectedTabIndex = it })
-
-                        addTab(newTab().setText(it.getString(R.string.about_tab_version)))
-                        addTab(newTab().setText(it.getString(R.string.about_tab_details)))
-
-                        addOnTabSelectedListener(object :
-                            com.google.android.material.tabs.TabLayout.OnTabSelectedListener {
-                            override fun onTabSelected(tab: com.google.android.material.tabs.TabLayout.Tab?) {
-                                viewModel.selectedTabIndex = tab?.position ?: 0
-                            }
-
-                            override fun onTabUnselected(tab: com.google.android.material.tabs.TabLayout.Tab?) {
-                            }
-
-                            override fun onTabReselected(tab: com.google.android.material.tabs.TabLayout.Tab?) {
-                            }
-                        })
-                    }
-                },
-                update = {
-                    it.getTabAt(viewModel.selectedTabIndex)?.select()
-                },
-                modifier = Modifier.fillMaxWidth()
-            )
-
-            else -> TabRow(selectedTabIndex = viewModel.selectedTabIndex) {
-                Tab(
-                    selected = viewModel.selectedTabIndex == 0,
-                    onClick = { viewModel.selectedTabIndex = 0 },
-                    text = {
-                        Text(
-                            text = stringResource(R.string.about_tab_version),
-                            maxLines = 2,
-                            overflow = TextOverflow.Ellipsis
-                        )
-                    }
-                )
-                Tab(
-                    selected = viewModel.selectedTabIndex == 1,
-                    onClick = { viewModel.selectedTabIndex = 1 },
-                    text = {
-                        Text(
-                            text = stringResource(R.string.about_tab_details),
-                            maxLines = 2,
-                            overflow = TextOverflow.Ellipsis
-                        )
-                    }
-                )
-            }
-        }
 
         Column(
             modifier = Modifier