update tablet design for list

DimensionDev · Oct 3, 2024 · 4061e7e · 4061e7e
1 parent 7533684
commit 4061e7e
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 55 deletions.
diff --git a/app/src/main/java/dev/dimension/flare/ui/component/AvatarComponent.kt b/app/src/main/java/dev/dimension/flare/ui/component/AvatarComponent.kt
@@ -15,7 +15,6 @@ import dev.dimension.flare.data.model.LocalAppearanceSettings
 fun AvatarComponent(
     data: String?,
     modifier: Modifier = Modifier,
-    beforeModifier: Modifier = Modifier,
     size: Dp = AvatarComponentDefaults.size,
 ) {
     val appearanceSettings = LocalAppearanceSettings.current
@@ -24,7 +23,6 @@ fun AvatarComponent(
         contentDescription = null,
         modifier =
             Modifier
-                .then(beforeModifier)
                 .size(size)
                 .clip(
                     when (appearanceSettings.avatarShape) {

diff --git a/app/src/main/java/dev/dimension/flare/ui/screen/bluesky/BlueskyFeedScreen.kt b/app/src/main/java/dev/dimension/flare/ui/screen/bluesky/BlueskyFeedScreen.kt
@@ -79,12 +79,12 @@ internal fun BlueskyFeedRoute(
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-private fun BlueskyFeedScreen(
+internal fun BlueskyFeedScreen(
     accountType: AccountType,
     uri: String,
     onBack: () -> Unit,
 ) {
-    val state by producePresenter {
+    val state by producePresenter("BlueskyFeedScreen_$accountType-$uri") {
         presenter(
             accountType = accountType,
             uri = uri,

diff --git a/app/src/main/java/dev/dimension/flare/ui/screen/bluesky/BlueskyFeedsScreen.kt b/app/src/main/java/dev/dimension/flare/ui/screen/bluesky/BlueskyFeedsScreen.kt
@@ -1,5 +1,7 @@
 package dev.dimension.flare.ui.screen.bluesky
 
+import android.os.Parcelable
+import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
@@ -18,6 +20,11 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
+import androidx.compose.material3.adaptive.layout.AnimatedPane
+import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
+import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffoldRole
+import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -33,7 +40,6 @@ import androidx.compose.ui.unit.dp
 import com.eygraber.compose.placeholder.material3.placeholder
 import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.annotation.RootGraph
-import com.ramcosta.composedestinations.generated.destinations.BlueskyFeedRouteDestination
 import com.ramcosta.composedestinations.navigation.DestinationsNavigator
 import compose.icons.FontAwesomeIcons
 import compose.icons.fontawesomeicons.Solid
@@ -59,7 +65,9 @@ import dev.dimension.flare.ui.presenter.invoke
 import dev.dimension.flare.ui.theme.MediumAlpha
 import dev.dimension.flare.ui.theme.screenHorizontalPadding
 import kotlinx.coroutines.launch
+import kotlinx.parcelize.Parcelize
 
+@OptIn(ExperimentalMaterial3AdaptiveApi::class)
 @Destination<RootGraph>(
     wrappers = [ThemeWrapper::class],
 )
@@ -68,14 +76,52 @@ internal fun BlueskyFeedsRoute(
     navigator: DestinationsNavigator,
     accountType: AccountType,
 ) {
-    BlueskyFeedsScreen(
-        accountType = accountType,
-        toFeed = {
-            navigator.navigate(BlueskyFeedRouteDestination(accountType = accountType, uri = it.id))
+    val scaffoldNavigator =
+        rememberListDetailPaneScaffoldNavigator<BlueskyFeedUri>()
+    BackHandler(
+        scaffoldNavigator.canNavigateBack(),
+    ) {
+        scaffoldNavigator.navigateBack()
+    }
+
+    ListDetailPaneScaffold(
+        directive = scaffoldNavigator.scaffoldDirective,
+        value = scaffoldNavigator.scaffoldValue,
+        listPane = {
+            AnimatedPane {
+                BlueskyFeedsScreen(
+                    accountType = accountType,
+                    toFeed = {
+                        scaffoldNavigator.navigateTo(
+                            ListDetailPaneScaffoldRole.Detail,
+                            BlueskyFeedUri(it.id),
+                        )
+                    },
+                )
+            }
+        },
+        detailPane = {
+            AnimatedPane {
+                scaffoldNavigator.currentDestination?.content?.let {
+                    BlueskyFeedScreen(
+                        accountType = accountType,
+                        uri = it.value,
+                        onBack = {
+                            scaffoldNavigator.navigateBack()
+                        },
+                    )
+                }
+            }
         },
     )
 }
 
+@JvmInline
+@Parcelize
+private value class BlueskyFeedUri(
+    val value: String,
+) : Parcelable
+
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun BlueskyFeedsScreen(
@@ -178,7 +224,9 @@ private fun BlueskyFeedsScreen(
                                 },
                                 modifier =
                                     Modifier
-                                        .padding(
+                                        .clickable {
+                                            toFeed.invoke(item)
+                                        }.padding(
                                             horizontal = screenHorizontalPadding,
                                             vertical = 8.dp,
                                         ),

diff --git a/app/src/main/java/dev/dimension/flare/ui/screen/home/HomeScreen.kt b/app/src/main/java/dev/dimension/flare/ui/screen/home/HomeScreen.kt
@@ -228,15 +228,18 @@ internal fun HomeScreen(
                         },
                         railHeader = {
                             accountTypeState.user.onSuccess {
-                                IconButton(
-                                    onClick = {
-                                        scope.launch {
-                                            drawerState.open()
-                                        }
-                                    },
-                                ) {
-                                    AvatarComponent(it.avatar)
-                                }
+                                Spacer(modifier = Modifier.height(4.dp))
+                                AvatarComponent(
+                                    it.avatar,
+                                    size = 56.dp,
+                                    modifier =
+                                        Modifier.clickable {
+                                            scope.launch {
+                                                drawerState.open()
+                                            }
+                                        },
+                                )
+                                Spacer(modifier = Modifier.height(4.dp))
                                 FloatingActionButton(
                                     onClick = {
                                         currentTab?.let {

diff --git a/app/src/main/java/dev/dimension/flare/ui/screen/list/ListScreen.kt b/app/src/main/java/dev/dimension/flare/ui/screen/list/ListScreen.kt
@@ -1,5 +1,7 @@
 package dev.dimension.flare.ui.screen.list
 
+import android.os.Parcelable
+import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
@@ -12,6 +14,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListScope
+import androidx.compose.material3.DrawerState
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -21,6 +24,11 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
+import androidx.compose.material3.adaptive.layout.AnimatedPane
+import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
+import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffoldRole
+import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -38,7 +46,6 @@ import com.ramcosta.composedestinations.annotation.RootGraph
 import com.ramcosta.composedestinations.generated.destinations.CreateListRouteDestination
 import com.ramcosta.composedestinations.generated.destinations.DeleteListRouteDestination
 import com.ramcosta.composedestinations.generated.destinations.EditListRouteDestination
-import com.ramcosta.composedestinations.generated.destinations.TimelineRouteDestination
 import com.ramcosta.composedestinations.navigation.DestinationsNavigator
 import compose.icons.FontAwesomeIcons
 import compose.icons.fontawesomeicons.Solid
@@ -68,58 +75,96 @@ import dev.dimension.flare.ui.component.status.ListComponent
 import dev.dimension.flare.ui.model.UiList
 import dev.dimension.flare.ui.presenter.invoke
 import dev.dimension.flare.ui.presenter.list.AllListPresenter
+import dev.dimension.flare.ui.screen.home.TimelineRoute
 import dev.dimension.flare.ui.theme.MediumAlpha
 import dev.dimension.flare.ui.theme.screenHorizontalPadding
+import kotlinx.parcelize.Parcelize
 
+@OptIn(ExperimentalMaterial3AdaptiveApi::class)
 @Destination<RootGraph>(
     wrappers = [ThemeWrapper::class],
 )
 @Composable
 internal fun ListScreenRoute(
     navigator: DestinationsNavigator,
     accountType: AccountType,
+    drawerState: DrawerState,
 ) {
-    ListScreen(
-        accountType = accountType,
-        toList = { item ->
-            navigator.navigate(
-                TimelineRouteDestination(
-                    tabItem =
-                        ListTimelineTabItem(
-                            account = accountType,
-                            listId = item.id,
-                            metaData =
-                                TabMetaData(
-                                    title = TitleType.Text(item.title),
-                                    icon = IconType.Material(IconType.Material.MaterialIcon.List),
-                                ),
-                        ),
-                ),
-            )
-        },
-        createList = {
-            navigator.navigate(CreateListRouteDestination(accountType = accountType))
-        },
-        editList = {
-            navigator.navigate(
-                EditListRouteDestination(
+    val scaffoldNavigator =
+        rememberListDetailPaneScaffoldNavigator<ListDetailPaneNavArgs>()
+    BackHandler(
+        scaffoldNavigator.canNavigateBack(),
+    ) {
+        scaffoldNavigator.navigateBack()
+    }
+    ListDetailPaneScaffold(
+        directive = scaffoldNavigator.scaffoldDirective,
+        value = scaffoldNavigator.scaffoldValue,
+        listPane = {
+            AnimatedPane {
+                ListScreen(
                     accountType = accountType,
-                    listId = it.id,
-                ),
-            )
+                    toList = { item ->
+                        scaffoldNavigator.navigateTo(
+                            ListDetailPaneScaffoldRole.Detail,
+                            ListDetailPaneNavArgs(
+                                id = item.id,
+                                title = item.title,
+                            ),
+                        )
+                    },
+                    createList = {
+                        navigator.navigate(CreateListRouteDestination(accountType = accountType))
+                    },
+                    editList = {
+                        navigator.navigate(
+                            EditListRouteDestination(
+                                accountType = accountType,
+                                listId = it.id,
+                            ),
+                        )
+                    },
+                    deleteList = {
+                        navigator.navigate(
+                            DeleteListRouteDestination(
+                                accountType = accountType,
+                                listId = it.id,
+                                title = it.title,
+                            ),
+                        )
+                    },
+                )
+            }
         },
-        deleteList = {
-            navigator.navigate(
-                DeleteListRouteDestination(
-                    accountType = accountType,
-                    listId = it.id,
-                    title = it.title,
-                ),
-            )
+        detailPane = {
+            AnimatedPane {
+                scaffoldNavigator.currentDestination?.content?.let { args ->
+                    TimelineRoute(
+                        navigator = navigator,
+                        tabItem =
+                            ListTimelineTabItem(
+                                account = accountType,
+                                listId = args.id,
+                                metaData =
+                                    TabMetaData(
+                                        title = TitleType.Text(args.title),
+                                        icon = IconType.Material(IconType.Material.MaterialIcon.List),
+                                    ),
+                            ),
+                        drawerState = drawerState,
+                    )
+                }
+            }
         },
     )
 }
 
+@Parcelize
+private data class ListDetailPaneNavArgs(
+    val id: String,
+    val title: String,
+) : Parcelable
+
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 private fun ListScreen(