feat: Add AboutTile

app/src/main/java/app/myzel394/alibi/ui/components/SettingsScreen/atoms/AboutTile.kt

@@ -0,0 +1,69 @@
+package app.myzel394.alibi.ui.components.SettingsScreen.atoms
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ChevronRight
+import androidx.compose.material.icons.filled.Info
+import androidx.compose.material.icons.filled.Notifications
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavController
+import app.myzel394.alibi.R
+import app.myzel394.alibi.dataStore
+import app.myzel394.alibi.db.AppSettings
+import app.myzel394.alibi.ui.components.atoms.SettingsTile
+import app.myzel394.alibi.ui.enums.Screen
+
+@Composable
+fun AboutTile(
+    navController: NavController,
+) {
+    val label = stringResource(R.string.ui_about_title)
+
+    Row(
+        modifier = Modifier
+            .padding(horizontal = 32.dp, vertical = 48.dp)
+            .fillMaxWidth()
+            .clip(MaterialTheme.shapes.medium)
+            .background(MaterialTheme.colorScheme.surfaceVariant)
+            .padding(16.dp)
+            .semantics {
+                contentDescription = label
+            }
+            .clickable {
+                navController.navigate(Screen.About.route)
+            },
+        horizontalArrangement = Arrangement.SpaceBetween,
+    ) {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(8.dp)
+        ) {
+            Icon(
+                Icons.Default.Info,
+                contentDescription = null,
+            )
+            Text(
+                text = label,
+            )
+        }
+        Icon(
+            Icons.Default.ChevronRight,
+            contentDescription = null,
+        )
+    }
+}

app/src/main/java/app/myzel394/alibi/ui/enums/Screen.kt

@@ -5,6 +5,7 @@ sealed class Screen(val route: String) {
     data object Settings : Screen("settings")
     data object Welcome : Screen("welcome")
     data object CustomRecordingNotifications : Screen("custom-recording-notifications")
+    data object About : Screen("about")
 
     fun withArgs(vararg args: String): String {
         return buildString {

app/src/main/java/app/myzel394/alibi/ui/screens/SettingsScreen.kt

@@ -39,6 +39,7 @@ import app.myzel394.alibi.R
 import app.myzel394.alibi.dataStore
 import app.myzel394.alibi.db.AppSettings
 import app.myzel394.alibi.ui.SUPPORTS_DARK_MODE_NATIVELY
+import app.myzel394.alibi.ui.components.SettingsScreen.atoms.AboutTile
 import app.myzel394.alibi.ui.components.SettingsScreen.atoms.BitrateTile
 import app.myzel394.alibi.ui.components.SettingsScreen.atoms.CustomNotificationTile
 import app.myzel394.alibi.ui.components.SettingsScreen.atoms.EncoderTile
@@ -147,6 +148,7 @@ fun SettingsScreen(
             ForceExactMaxDurationTile()
             InAppLanguagePicker()
             CustomNotificationTile(navController = navController)
+            AboutTile(navController = navController)
             AnimatedVisibility(visible = settings.showAdvancedSettings) {
                 Column(
                     horizontalAlignment = Alignment.CenterHorizontally,

app/src/main/res/values/strings.xml

@@ -88,4 +88,5 @@
     <string name="ui_settings_customNotifications_showOngoing_label">Show Duration</string>
     <string name="ui_settings_customNotifications_save_label">Update notification</string>
     <string name="ui_settings_customNotifications_edit_help">This is a preview for your notification. You can edit the title and the message. At the bottom you can find some presets.</string>
+    <string name="ui_about_title">About Alibi</string>
 </resources>