Feat: Designing New Jetpack Compose (Preview UI)

.github/release.yml

@@ -2,23 +2,32 @@
 
 changelog:
   categories:
-    - title: Highlights 🌟
+    - title: 🌟 Highlights
       labels:
         - highlights
 
-    - title: New Features 🚀
+    - title: 🚀 New Features
       labels:
         - feature
         - enhancement
 
-    - title: Bug Fixes 🐛
+    - title: 🐛 Bug Fixes
       labels:
         - bug
 
-    - title: Documentation 📚
+    - title: ✏️ Changed (Re-Write)
+      labels:
+        - refactor
+
+    - title: 📚 Documentation
       labels:
         - documentation
 
+    - title: 📦 Dependency Updates
+      labels:
+        - dependencies
+        - dependabot
+
     - title: Other Changes
       labels:
         - "*"

app/build.gradle.kts

@@ -11,7 +11,7 @@ import java.util.Properties
  * Gets the current system time formatted as 'yy-mm-dd : hh-mm-ss'.
  */
 fun getCurrentTimeLabel(): String {
-    val formatter = SimpleDateFormat("yy-MM-dd : HH-mm-ss", Locale.getDefault())
+    val formatter = SimpleDateFormat("yy-MM-dd - HH:mm:ss", Locale.getDefault())
     return formatter.format(Date())
 }
 
@@ -49,9 +49,9 @@ val devRoundIcon = "@mipmap/dev_ic_launcher_round"
 
 plugins {
     alias(libs.plugins.android.application)
-    alias(libs.plugins.kotlin.android)
     alias(libs.plugins.kotlin.compose)
     alias(libs.plugins.ksp)
+    alias(libs.plugins.jetbrains.kotlin.serialization)
     alias(libs.plugins.oss.licenses)
 }
 
@@ -201,6 +201,7 @@ android {
     buildFeatures {
         viewBinding = true
         buildConfig = true
+        resValues = true
         compose = true
     }
 }
@@ -222,6 +223,10 @@ dependencies {
     implementation(libs.bundles.compose)
     debugImplementation(libs.bundles.compose.debug)
 
+    // Navigation 3
+    implementation(libs.bundles.navigation3)
+    implementation(libs.kotlinx.serialization.json)
+
     // Google Play License Services
     implementation(libs.oss.license)
 

app/src/main/AndroidManifest.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
+    xmlns:tools="http://schemas.android.com/tools" >
 
     <uses-permission android:name="android.permission.INTERNET" />
 
@@ -14,11 +14,14 @@
         android:roundIcon="${appRoundIcon}"
         android:supportsRtl="true"
         android:theme="@style/PasscodesTheme.Default"
-        tools:targetApi="33">
+        tools:targetApi="33" >
+
         <activity android:name=".ui.MainActivity" />
+        <activity android:name=".JetpackPreviewLayoutActivity" />
+
         <activity
             android:name=".oldui.MainActivity"
-            android:exported="true">
+            android:exported="true" >
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
 
@@ -32,7 +35,7 @@
         <service
             android:name="androidx.appcompat.app.AppLocalesMetadataHolderService"
             android:enabled="false"
-            android:exported="false">
+            android:exported="false" >
             <meta-data
                 android:name="autoStoreLocales"
                 android:value="true" />

app/src/main/kotlin/com/jeeldobariya/passcodes/JetpackPreviewLayoutActivity.kt

@@ -0,0 +1,103 @@
+package com.jeeldobariya.passcodes
+
+import android.content.Intent
+import android.os.Bundle
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.activity.enableEdgeToEdge
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Button
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.jeeldobariya.passcodes.core.feature_flags.featureFlagsDatastore
+import com.jeeldobariya.passcodes.ui.ui.theme.PasscodesTheme
+import kotlinx.coroutines.launch
+import kotlin.system.exitProcess
+
+class JetpackPreviewLayoutActivity : ComponentActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        enableEdgeToEdge()
+        setContent {
+            PasscodesTheme {
+                val composableScope = rememberCoroutineScope()
+
+                JetpackComposeNewUIRoot(
+                    navigateToNewUi = ::navigateToJetpackComposeNavigation,
+                    navigateToOldUi = {
+                        composableScope.launch {
+                            featureFlagsDatastore.updateData {
+                                it.copy(isPreviewLayoutEnabled = false)
+                            }
+
+                            finishAndRemoveTask()
+                            exitProcess(0)
+                        }
+                    }
+                )
+            }
+        }
+    }
+
+    fun navigateToJetpackComposeNavigation() {
+        Intent(this@JetpackPreviewLayoutActivity, com.jeeldobariya.passcodes.ui.MainActivity::class.java).also {
+            startActivity(it)
+        }
+    }
+}
+
+@Composable
+fun JetpackComposeNewUIRoot(navigateToNewUi: () -> Unit, navigateToOldUi: () -> Unit) {
+    Surface(
+        color = MaterialTheme.colorScheme.surface,
+        modifier = Modifier.fillMaxSize(),
+        tonalElevation = 5.dp
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(24.dp),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Text("Passcodes", fontSize = 40.sp)
+            Text("You are on New Jetpack UI")
+
+            Spacer(Modifier.padding(32.dp))
+
+            Button(onClick = navigateToOldUi) {
+                Text("Back To Old UI", fontSize = 20.sp)
+            }
+
+            OutlinedButton(onClick = navigateToNewUi) {
+                Text("Continue To New UI", fontSize = 20.sp)
+            }
+
+            Spacer(Modifier.padding(12.dp))
+
+            Text("This UI is Under Active Development", fontSize = 12.sp)
+            Text("So, There might be small issues!!", fontSize = 12.sp)
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun BasePreview() {
+    PasscodesTheme {
+        JetpackComposeNewUIRoot(navigateToOldUi = { }, navigateToNewUi = { })
+    }
+}

app/src/main/kotlin/com/jeeldobariya/passcodes/navigation/NavigationRoot.kt

@@ -0,0 +1,60 @@
+package com.jeeldobariya.passcodes.navigation
+
+import androidx.compose.runtime.Composable
+import androidx.lifecycle.viewmodel.navigation3.rememberViewModelStoreNavEntryDecorator
+import androidx.navigation3.runtime.entryProvider
+import androidx.navigation3.runtime.rememberNavBackStack
+import androidx.navigation3.runtime.rememberSaveableStateHolderNavEntryDecorator
+import androidx.navigation3.ui.NavDisplay
+import com.jeeldobariya.passcodes.core.navigation.Route
+import com.jeeldobariya.passcodes.password_manager.ui.PasswordManagerScreen
+import com.jeeldobariya.passcodes.password_manager.ui.SavePasswordScreen
+import com.jeeldobariya.passcodes.password_manager.ui.UpdatePasswordScreen
+import com.jeeldobariya.passcodes.ui.AboutScreen
+import com.jeeldobariya.passcodes.ui.MainScreen
+import com.jeeldobariya.passcodes.ui.SettingsScreen
+
+@Composable
+fun NavigationRoot() {
+    val backStack = rememberNavBackStack(Route.Home)
+
+    fun navigateTo(route: Route): Unit {
+        backStack.add(route)
+    }
+
+    NavDisplay(
+        backStack = backStack,
+        onBack = {
+            backStack.removeLastOrNull()
+        },
+        entryDecorators = mutableListOf(
+            rememberSaveableStateHolderNavEntryDecorator(),
+            rememberViewModelStoreNavEntryDecorator()
+        ),
+        entryProvider = entryProvider {
+            entry<Route.Home> {
+                MainScreen(::navigateTo)
+            }
+
+            entry<Route.Settings> {
+                SettingsScreen()
+            }
+
+            entry<Route.AboutUs> {
+                AboutScreen()
+            }
+
+            entry<Route.PasswordManager> {
+                PasswordManagerScreen(::navigateTo)
+            }
+
+            entry<Route.SavePassword> {
+                SavePasswordScreen()
+            }
+
+            entry<Route.UpdatePassword> {
+                UpdatePasswordScreen(it.id)
+            }
+        }
+    )
+}

app/src/main/kotlin/com/jeeldobariya/passcodes/oldui/MainActivity.kt

@@ -12,6 +12,7 @@ import com.jeeldobariya.passcodes.core.domain.usecases.CheckForUpdateUseCase
 import com.jeeldobariya.passcodes.core.feature_flags.featureFlagsDatastore
 import com.jeeldobariya.passcodes.databinding.ActivityMainBinding
 import com.jeeldobariya.passcodes.password_manager.oldui.PasswordManagerActivity
+import com.jeeldobariya.passcodes.JetpackPreviewLayoutActivity
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.flow.first
 import kotlinx.coroutines.launch
@@ -58,11 +59,9 @@ class MainActivity : AppCompatActivity() {
 
         runBlocking {
             if (featureFlagsDatastore.data.first().isPreviewLayoutEnabled) {
-                val jetpackComposeActivity = Intent(
-                    this@MainActivity,
-                    com.jeeldobariya.passcodes.ui.MainActivity::class.java
-                )
-                startActivity(jetpackComposeActivity)
+                Intent(this@MainActivity, JetpackPreviewLayoutActivity::class.java).also {
+                    startActivity(it)
+                }
             }
         }
     }

app/src/main/kotlin/com/jeeldobariya/passcodes/ui/AboutScreen.kt

@@ -0,0 +1,82 @@
+package com.jeeldobariya.passcodes.ui
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Button
+import androidx.compose.material3.Card
+import androidx.compose.material3.FilledTonalButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import androidx.compose.ui.unit.dp
+import com.jeeldobariya.passcodes.R
+import com.jeeldobariya.passcodes.ui.ui.theme.PasscodesTheme
+
+@Composable
+fun AboutScreen() {
+    Scaffold { padding ->
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(padding)
+                .padding(horizontal = 24.dp, vertical = 64.dp),
+            verticalArrangement = Arrangement.Top,
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Image(
+                painter = painterResource(R.drawable.ic_passcodes),
+                contentDescription = "Passcodes Icon",
+                modifier = Modifier
+                    .size(100.dp)
+                    .padding(10.dp)
+            )
+
+            Text(
+                text = stringResource(R.string.textview_aboutus_headline),
+                style = MaterialTheme.typography.titleLarge
+            )
+
+            Spacer(modifier = Modifier.padding(vertical = 12.dp))
+
+            Text(
+                text = stringResource(R.string.textview_app_description),
+                style = MaterialTheme.typography.bodyLarge
+            )
+
+            Spacer(modifier = Modifier.padding(vertical = 16.dp))
+
+            Text(
+                text = stringResource(R.string.textview_app_warning),
+                style = MaterialTheme.typography.labelSmall,
+                color = Color.Red
+            )
+
+            Spacer(modifier = Modifier.padding(16.dp))
+        }
+    }
+}
+
+
+@Preview(showBackground = true)
+@PreviewLightDark
+@Composable
+fun AboutScreenPreview() {
+    PasscodesTheme {
+        AboutScreen()
+    }
+}