Show tabs icon in favorite page

Author: paulcoding810

app/src/main/java/com/paulcoding/hviewer/ui/favorite/FavoritePage.kt

@@ -18,9 +18,12 @@ import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -31,12 +34,16 @@ import com.paulcoding.hviewer.ui.component.HBackIcon
 import com.paulcoding.hviewer.ui.component.HEmpty
 import com.paulcoding.hviewer.ui.page.AppViewModel
 import com.paulcoding.hviewer.ui.page.posts.FavoriteCard
+import com.paulcoding.hviewer.ui.page.posts.TabsIcon
+import com.paulcoding.hviewer.ui.page.tabs.AddToCartAnimation
 import kotlinx.coroutines.launch
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun FavoritePage(
     appViewModel: AppViewModel,
+    tabs: List<PostItem>,
+    navToTabs: () -> Unit,
     navToImages: (PostItem) -> Unit,
     navToCustomTag: (PostItem, Tag) -> Unit,
     goBack: () -> Boolean
@@ -45,6 +52,10 @@ fun FavoritePage(
     val snackbarHostState = remember { SnackbarHostState() }
     val scope = rememberCoroutineScope()
     val favoritePosts by appViewModel.favoritePosts.collectAsState(initial = emptyList())
+    var tabsIconPosition by remember { mutableStateOf(Offset.Zero) }
+
+    var startPos by remember { mutableStateOf(Offset.Zero) }
+    var isAnimating by remember { mutableStateOf(false) }
 
     fun onDelete(post: PostItem) {
         appViewModel.deleteFavorite(post)
@@ -72,8 +83,14 @@ fun FavoritePage(
         topBar = {
             TopAppBar(title = { Text(stringResource(R.string.favorite)) }, navigationIcon = {
                 HBackIcon { goBack() }
+            }, actions = {
+                TabsIcon(
+                    onClick = navToTabs,
+                    size = tabs.size,
+                    onGloballyPositioned = { tabsIconPosition = it })
             })
-        }) { paddings ->
+        },
+    ) { paddings ->
         Column(
             modifier = Modifier
                 .padding(paddings)
@@ -85,34 +102,33 @@ fun FavoritePage(
                 verticalArrangement = Arrangement.spacedBy(12.dp)
             ) {
                 items(items = favoritePosts, key = { it.url }) { item ->
-                    FavoriteItem(item, navToImages = { navToImages(item) },
-                        onTagClick = { tag -> navToCustomTag(item, tag) },
-                        deleteFavorite = {
+                    FavoriteCard(
+                        item,
+                        isFavorite = true,
+                        setFavorite = {
                             onDelete(item)
+                        },
+                        onTagClick = { tag -> navToCustomTag(item, tag) },
+                        onAddToTabs = {
+                            startPos = it
+                            isAnimating = true
+                            appViewModel.addTab(item)
+                        },
+                        onClick = {
+                            navToImages(item)
                         })
                 }
             }
             if (favoritePosts.isEmpty())
                 HEmpty()
         }
-    }
 
-}
-
-@Composable
-fun FavoriteItem(
-    post: PostItem,
-    navToImages: () -> Unit,
-    onTagClick: (Tag) -> Unit,
-    deleteFavorite: () -> Unit
-) {
-    FavoriteCard(
-        post, isFavorite = true,
-        setFavorite = {
-            deleteFavorite()
-        },
-        onTagClick = { onTagClick(it) },
-    ) {
-        navToImages()
+        AddToCartAnimation(
+            isAnimating = isAnimating,
+            startPosition = startPos,
+            endPosition = tabsIconPosition.copy(y = tabsIconPosition.y - 100),
+            onAnimationEnd = { isAnimating = false },
+        )
     }
-}
+
+}

app/src/main/java/com/paulcoding/hviewer/ui/page/AppEntry.kt

@@ -50,6 +50,7 @@ fun AppEntry(intent: Intent?, appViewModel: AppViewModel) {
     val navController = rememberNavController()
     val appState by appViewModel.stateFlow.collectAsState()
     val hostsMap by appViewModel.hostsMap.collectAsState()
+    val tabs by appViewModel.tabs.collectAsState(initial = listOf())
 
     val context = LocalContext.current
 
@@ -200,6 +201,8 @@ fun AppEntry(intent: Intent?, appViewModel: AppViewModel) {
                     navToImages = { post: PostItem ->
                         navToImages(post)
                     },
+                    tabs = tabs,
+                    navToTabs = { navController.navigate(Route.TABS) },
                     navToCustomTag = { post, tag ->
                         navToCustomTag(post, tag)
                     },