change toolbar font and profile icon

DatL4g · May 9, 2024 · 94de758 · 94de758
1 parent 8d06deb
commit 94de758
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 9 deletions.
diff --git a/.../commonMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/component/CollapsingToolbar.kt b/.../commonMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/component/CollapsingToolbar.kt
@@ -10,24 +10,28 @@ import androidx.compose.material.icons.automirrored.filled.MenuBook
 import androidx.compose.material.icons.filled.AccountCircle
 import androidx.compose.material.icons.filled.PlayCircleFilled
 import androidx.compose.material3.*
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.derivedStateOf
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.remember
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.vector.rememberVectorPainter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.dp
+import coil3.compose.AsyncImage
+import coil3.compose.rememberAsyncImagePainter
 import dev.chrisbanes.haze.hazeChild
 import dev.chrisbanes.haze.materials.ExperimentalHazeMaterialsApi
 import dev.chrisbanes.haze.materials.HazeMaterials
 import dev.datlag.aniflow.LocalHaze
 import dev.datlag.aniflow.SharedRes
+import dev.datlag.aniflow.anilist.model.User
 import dev.datlag.aniflow.anilist.type.MediaType
 import dev.datlag.tooling.compose.ifFalse
 import dev.datlag.tooling.decompose.lifecycle.collectAsStateWithLifecycle
+import dev.icerock.moko.resources.compose.fontFamilyResource
 import dev.icerock.moko.resources.compose.painterResource
+import dev.icerock.moko.resources.compose.stringResource
 import kotlinx.coroutines.flow.Flow
 import kotlin.math.max
 import kotlin.math.min
@@ -37,6 +41,7 @@ import kotlin.math.min
 fun CollapsingToolbar(
     state: TopAppBarState,
     scrollBehavior: TopAppBarScrollBehavior,
+    userFlow: Flow<User?>,
     viewTypeFlow: Flow<MediaType>,
     onProfileClick: () -> Unit,
     onAnimeClick: () -> Unit,
@@ -78,17 +83,48 @@ fun CollapsingToolbar(
                         onProfileClick()
                     }
                 ) {
-                    Icon(
-                        imageVector = Icons.Filled.AccountCircle,
-                        contentDescription = null
+                    val user by userFlow.collectAsStateWithLifecycle(null)
+                    var colorFilter by remember(user) { mutableStateOf<ColorFilter?>(null) }
+                    val tintColor = LocalContentColor.current
+
+                    AsyncImage(
+                        model = user?.avatar?.large,
+                        contentDescription = null,
+                        contentScale = ContentScale.Crop,
+                        colorFilter = colorFilter,
+                        placeholder = rememberVectorPainter(Icons.Filled.AccountCircle),
+                        error = rememberAsyncImagePainter(
+                            model = user?.avatar?.medium,
+                            contentScale = ContentScale.Crop,
+                            error = rememberVectorPainter(Icons.Filled.AccountCircle),
+                            placeholder = rememberVectorPainter(Icons.Filled.AccountCircle),
+                            onError = {
+                                colorFilter = ColorFilter.tint(tintColor)
+                            },
+                            onSuccess = {
+                                colorFilter = null
+                            },
+                            onLoading = {
+                                colorFilter = ColorFilter.tint(tintColor)
+                            }
+                        ),
+                        onSuccess = {
+                            colorFilter = null
+                        },
+                        onLoading = {
+                            colorFilter = ColorFilter.tint(tintColor)
+                        }
                     )
                 }
             },
             title = {
                 AnimatedVisibility(
                     visible = isCollapsed
                 ) {
-                    Text(text = "AniFlow")
+                    Text(
+                        text = stringResource(SharedRes.strings.app_name),
+                        fontFamily = fontFamilyResource(SharedRes.fonts.marckscript_regular)
+                    )
                 }
             },
             actions = {

diff --git a/...seApp/src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/home/HomeComponent.kt b/...seApp/src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/home/HomeComponent.kt
@@ -3,6 +3,7 @@ package dev.datlag.aniflow.ui.navigation.screen.home
 import dev.datlag.aniflow.anilist.AiringTodayRepository
 import dev.datlag.aniflow.anilist.TrendingRepository
 import dev.datlag.aniflow.anilist.model.Medium
+import dev.datlag.aniflow.anilist.model.User
 import dev.datlag.aniflow.anilist.state.CollectionState
 import dev.datlag.aniflow.anilist.type.MediaType
 import dev.datlag.aniflow.trace.TraceRepository
@@ -11,6 +12,7 @@ import kotlinx.coroutines.flow.Flow
 
 interface HomeComponent : Component {
     val viewing: Flow<MediaType>
+    val user: Flow<User?>
 
     val airing: Flow<AiringTodayRepository.State>
     val trending: Flow<CollectionState>

diff --git a/composeApp/src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/home/HomeScreen.kt b/composeApp/src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/home/HomeScreen.kt
@@ -66,6 +66,7 @@ fun HomeScreen(component: HomeComponent) {
             CollapsingToolbar(
                 state = appBarState,
                 scrollBehavior = scrollBehavior,
+                userFlow = component.user,
                 viewTypeFlow = component.viewing,
                 onProfileClick = component::viewProfile,
                 onAnimeClick = component::viewAnime,

diff --git a/...src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/home/HomeScreenComponent.kt b/...src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/home/HomeScreenComponent.kt
@@ -11,11 +11,13 @@ import dev.datlag.aniflow.anilist.PopularNextSeasonRepository
 import dev.datlag.aniflow.anilist.PopularSeasonRepository
 import dev.datlag.aniflow.anilist.TrendingRepository
 import dev.datlag.aniflow.anilist.model.Medium
+import dev.datlag.aniflow.anilist.model.User
 import dev.datlag.aniflow.anilist.state.CollectionState
 import dev.datlag.aniflow.anilist.type.MediaType
 import dev.datlag.aniflow.common.onRender
 import dev.datlag.aniflow.model.coroutines.Executor
 import dev.datlag.aniflow.other.StateSaver
+import dev.datlag.aniflow.other.UserHelper
 import dev.datlag.aniflow.settings.Settings
 import dev.datlag.aniflow.trace.TraceRepository
 import dev.datlag.tooling.decompose.ioScope
@@ -44,8 +46,11 @@ class HomeScreenComponent(
         }
     }
     private val viewTypeExecutor = Executor()
-    private val stateScope = ioScope()
 
+    private val userHelper by instance<UserHelper>()
+    override val user: Flow<User?> = userHelper.user
+
+    private val stateScope = ioScope()
     private val airingTodayRepository by instance<AiringTodayRepository>()
     override val airing: Flow<AiringTodayRepository.State> = airingTodayRepository.airing.map {
         StateSaver.Home.updateAiring(it)

diff --git a/composeApp/src/commonMain/moko-resources/fonts/MarckScript-regular.ttf b/composeApp/src/commonMain/moko-resources/fonts/MarckScript-regular.ttf