Expressive material3 (#43)

* Add shortcut icon preference and update related functionality

* feat: bump libraries

* feat: add material 3 expressive design

* feat: add material 3 expressive design

Author: yogeshpaliyal

app/build.gradle.kts

@@ -102,7 +102,6 @@ dependencies {
     ktlint(libs.ktlint)
     implementation("dev.chrisbanes.haze:haze:1.6.9")
     implementation("dev.chrisbanes.haze:haze-materials:1.6.9")
-
 }
 
 kotlinter {

app/src/main/java/com/yogeshpaliyal/deepr/ui/screens/Home.kt

@@ -26,9 +26,11 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.BottomAppBarDefaults
 import androidx.compose.material3.Button
 import androidx.compose.material3.Card
+import androidx.compose.material3.ContainedLoadingIndicator
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -345,6 +347,7 @@ fun FilterMenu(
     }
 }
 
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
 @Composable
 fun Content(
     hazeState: HazeState,
@@ -353,6 +356,16 @@ fun Content(
     viewModel: AccountViewModel = koinViewModel(),
 ) {
     val accounts by viewModel.accounts.collectAsState()
+
+    if (accounts == null) {
+        Column(
+            modifier = modifier.fillMaxSize(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center,
+        ) { ContainedLoadingIndicator() }
+        return
+    }
+
     Column(modifier.fillMaxSize()) {
         val context = LocalContext.current
         var showShortcutDialog by remember { mutableStateOf<Deepr?>(null) }
@@ -391,7 +404,7 @@ fun Content(
                     .hazeSource(state = hazeState)
                     .padding(8.dp),
             contentPaddingValues = contentPaddingValues,
-            accounts = accounts,
+            accounts = accounts!!,
             onItemClick = {
                 viewModel.incrementOpenedCount(it.id)
                 openDeeplink(context, it.link)

app/src/main/java/com/yogeshpaliyal/deepr/viewmodel/AccountViewModel.kt

@@ -53,7 +53,7 @@ class AccountViewModel(
     val importResultFlow = importResultChannel.receiveAsFlow()
 
     @OptIn(ExperimentalCoroutinesApi::class)
-    val accounts: StateFlow<List<Deepr>> =
+    val accounts: StateFlow<List<Deepr>?> =
         combine(searchQuery, sortOrder) { query, order ->
             Pair(query, order)
         }.flatMapLatest { (query, order) ->
@@ -72,7 +72,7 @@ class AccountViewModel(
                     SortOrder.OPENED_DESC -> deeprQueries.searchDeeprByOpenedCountDesc(query)
                 }.asFlow().mapToList(viewModelScope.coroutineContext)
             }
-        }.stateIn(viewModelScope, SharingStarted.WhileSubscribed(5000), emptyList())
+        }.stateIn(viewModelScope, SharingStarted.WhileSubscribed(5000), null)
 
     fun search(query: String) {
         searchQuery.value = query

gradle/libs.versions.toml

@@ -20,6 +20,7 @@ dataStore = "1.1.7"
 accompanist = "0.37.3"
 opencsv = "5.12.0"
 zxing = "4.3.0"
+material3 = "1.5.0-alpha01"
 
 [libraries]
 android-driver = { module = "app.cash.sqldelight:android-driver", version.ref = "androidDriver" }
@@ -39,7 +40,7 @@ androidx-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" }
 androidx-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
 androidx-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
 androidx-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
-androidx-material3 = { group = "androidx.compose.material3", name = "material3" }
+androidx-material3 = { group = "androidx.compose.material3", name = "material3", version.ref = "material3" }
 koin-bom = { module = "io.insert-koin:koin-bom", version.ref = "koin-bom" }
 koin-core = { module = "io.insert-koin:koin-core" }
 koin-android = { module = "io.insert-koin:koin-android" }