feat: Added basic AboutScreen

app/build.gradle

@@ -78,6 +78,7 @@ android {
     }
     buildFeatures {
         compose true
+        buildConfig = true
     }
     composeOptions {
         kotlinCompilerExtensionVersion '1.5.1'

app/src/main/java/app/myzel394/alibi/ui/Navigation.kt

@@ -27,6 +27,7 @@ import app.myzel394.alibi.dataStore
 import app.myzel394.alibi.db.LastRecording
 import app.myzel394.alibi.ui.enums.Screen
 import app.myzel394.alibi.ui.models.AudioRecorderModel
+import app.myzel394.alibi.ui.screens.AboutScreen
 import app.myzel394.alibi.ui.screens.AudioRecorder
 import app.myzel394.alibi.ui.screens.CustomRecordingNotificationsScreen
 import app.myzel394.alibi.ui.screens.SettingsScreen
@@ -111,5 +112,18 @@ fun Navigation(
                 navController = navController,
             )
         }
+        composable(
+            Screen.About.route,
+            enterTransition = {
+                scaleIn()
+            },
+            exitTransition = {
+                scaleOut() + fadeOut(tween(150))
+            }
+        ) {
+            AboutScreen(
+                navController = navController,
+            )
+        }
     }
 }

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

@@ -39,15 +39,15 @@ fun AboutTile(
         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)
-            },
+            }
+            .clip(MaterialTheme.shapes.medium)
+            .background(MaterialTheme.colorScheme.surfaceVariant)
+            .padding(16.dp),
         horizontalArrangement = Arrangement.SpaceBetween,
     ) {
         Row(

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

@@ -0,0 +1,97 @@
+package app.myzel394.alibi.ui.screens
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.rememberTopAppBarState
+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.input.nestedscroll.nestedScroll
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavController
+import app.myzel394.alibi.R
+import app.myzel394.alibi.BuildConfig
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AboutScreen(
+    navController: NavController,
+) {
+    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(
+        rememberTopAppBarState()
+    )
+
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                title = {
+                    Text(stringResource(R.string.ui_about_title))
+                },
+                navigationIcon = {
+                    IconButton(onClick = navController::popBackStack) {
+                        Icon(
+                            Icons.Default.ArrowBack,
+                            contentDescription = "Back"
+                        )
+                    }
+                },
+                scrollBehavior = scrollBehavior,
+            )
+        },
+        modifier = Modifier
+            .nestedScroll(scrollBehavior.nestedScrollConnection)
+    ) { padding ->
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(padding),
+            verticalArrangement = Arrangement.spacedBy(16.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Box(
+                modifier = Modifier
+                    .clip(CircleShape)
+                    .size(200.dp)
+                    .background(
+                        MaterialTheme.colorScheme.surfaceVariant
+                    ),
+            ) {
+                Image(
+                    painter = painterResource(R.drawable.launcher_foreground),
+                    contentDescription = null,
+                )
+            }
+            Text(
+                text = stringResource(R.string.app_name),
+                style = MaterialTheme.typography.headlineLarge,
+            )
+            Text(
+                text = "Version %s (%s)".format(
+                    BuildConfig.VERSION_NAME,
+                    BuildConfig.VERSION_CODE.toString()
+                ),
+                style = MaterialTheme.typography.bodyMedium,
+            )
+        }
+    }
+}