DROID-3187 Spaces | Enhancement | Add empty state for space-list screen in settings (#1954)

app/src/main/java/com/anytypeio/anytype/ui/spaces/SpaceListFragment.kt

@@ -18,6 +18,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import androidx.fragment.app.viewModels
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import androidx.navigation.fragment.findNavController
 import com.anytypeio.anytype.R
 import com.anytypeio.anytype.core_ui.features.multiplayer.SpaceListScreen
 import com.anytypeio.anytype.core_ui.foundation.Warning
@@ -29,6 +30,7 @@ import com.anytypeio.anytype.presentation.spaces.SpaceListViewModel
 import com.anytypeio.anytype.ui.settings.typography
 import javax.inject.Inject
 import kotlinx.coroutines.launch
+import timber.log.Timber
 
 class SpaceListFragment : BaseBottomSheetComposeFragment() {
 
@@ -53,7 +55,16 @@ class SpaceListFragment : BaseBottomSheetComposeFragment() {
                     state = vm.state.collectAsStateWithLifecycle().value,
                     onDeleteSpaceClicked = vm::onDeleteSpaceClicked,
                     onLeaveSpaceClicked = vm::onLeaveSpaceClicked,
-                    onCancelJoinRequestClicked = vm::onCancelJoinSpaceClicked
+                    onCancelJoinRequestClicked = vm::onCancelJoinSpaceClicked,
+                    onCreateSpaceClicked = {
+                        runCatching {
+                            findNavController().navigate(
+                                R.id.actionCreateSpaceFromVault
+                            )
+                        }.onFailure {
+                            Timber.e(it, "Error while opening create-space screen from vault")
+                        }
+                    }
                 )
             }
 

app/src/main/res/navigation/graph.xml

@@ -277,7 +277,11 @@
     <dialog
         android:id="@+id/spaceListScreen"
         android:name="com.anytypeio.anytype.ui.spaces.SpaceListFragment"
-        android:label="SpaceListScreen"/>
+        android:label="SpaceListScreen">
+        <action
+            android:id="@+id/actionCreateSpaceFromVault"
+            app:destination="@id/createSpaceScreen" />
+    </dialog>
 
     <dialog
         android:id="@+id/objectSetIconPickerScreenForSpace"

core-ui/src/main/java/com/anytypeio/anytype/core_ui/features/multiplayer/SpaceListScreen.kt

@@ -39,12 +39,15 @@ import com.anytypeio.anytype.core_models.ext.EMPTY_STRING_VALUE
 import com.anytypeio.anytype.core_models.multiplayer.SpaceMemberPermissions
 import com.anytypeio.anytype.core_models.restrictions.SpaceStatus
 import com.anytypeio.anytype.core_ui.R
+import com.anytypeio.anytype.core_ui.common.DefaultPreviews
 import com.anytypeio.anytype.core_ui.features.SpaceIconView
 import com.anytypeio.anytype.core_ui.foundation.Divider
 import com.anytypeio.anytype.core_ui.foundation.Dragger
 import com.anytypeio.anytype.core_ui.foundation.Header
 import com.anytypeio.anytype.core_ui.foundation.noRippleClickable
 import com.anytypeio.anytype.core_ui.views.BodyRegular
+import com.anytypeio.anytype.core_ui.views.ButtonSecondary
+import com.anytypeio.anytype.core_ui.views.ButtonSize
 import com.anytypeio.anytype.core_ui.views.Relations2
 import com.anytypeio.anytype.core_ui.views.Relations3
 import com.anytypeio.anytype.core_ui.views.Title2
@@ -57,7 +60,8 @@ fun SpaceListScreen(
     state: ViewState<List<SpaceListItemView>>,
     onDeleteSpaceClicked: (SpaceListItemView) -> Unit,
     onLeaveSpaceClicked: (SpaceListItemView) -> Unit,
-    onCancelJoinRequestClicked: (SpaceListItemView) -> Unit
+    onCancelJoinRequestClicked: (SpaceListItemView) -> Unit,
+    onCreateSpaceClicked: () -> Unit,
 ) {
     Column(
         modifier = Modifier
@@ -71,7 +75,9 @@ fun SpaceListScreen(
         )
         Header(text = stringResource(id = R.string.multiplayer_spaces))
         LazyColumn(
-            modifier = Modifier.fillMaxWidth().weight(1.0f)
+            modifier = Modifier
+                .fillMaxWidth()
+                .weight(1.0f)
         ) {
             if (state is ViewState.Success) {
                 itemsIndexed(
@@ -102,11 +108,49 @@ fun SpaceListScreen(
                     },
                     key = { _, item -> "space-list-item-${item.space.id}" }
                 )
+                if (state.data.isEmpty()) {
+                    item {
+                        SpaceListEmptyState(
+                            onCreateSpaceClicked = onCreateSpaceClicked,
+                            modifier = Modifier.fillParentMaxSize()
+                        )
+                    }
+                }
             }
         }
     }
 }
 
+@Composable
+fun SpaceListEmptyState(
+    modifier: Modifier = Modifier,
+    onCreateSpaceClicked: () -> Unit
+) {
+    Box(modifier = modifier) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .align(Alignment.Center),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Text(
+                text = stringResource(R.string.space_list_empty_state_it_is_empty_here),
+                color = colorResource(R.color.text_primary)
+            )
+            Text(
+                text = stringResource(R.string.space_list_empty_state_create_your_first_space_to_get_started),
+                color = colorResource(R.color.text_secondary)
+            )
+            Spacer(modifier = Modifier.height(16.dp))
+            ButtonSecondary(
+                onClick = onCreateSpaceClicked,
+                text = "Create space",
+                size = ButtonSize.SmallSecondary
+            )
+        }
+    }
+}
+
 @Composable
 fun SpaceListCardItem(
     spaceName: String,
@@ -357,7 +401,8 @@ private fun SpaceListScreenPreview() {
         state = ViewState.Loading,
         onCancelJoinRequestClicked = {},
         onDeleteSpaceClicked = {},
-        onLeaveSpaceClicked = {}
+        onLeaveSpaceClicked = {},
+        onCreateSpaceClicked = {}
     )
 }
 
@@ -376,5 +421,12 @@ private fun SpaceCardItemPreview() {
     )
 }
 
+@DefaultPreviews
+@Composable
+private fun SpaceListEmptyStatePreview() {
+    SpaceListEmptyState(
+        onCreateSpaceClicked = {}
+    )
+}
 
 

localization/src/main/res/values/strings.xml

@@ -1848,5 +1848,7 @@ Please provide specific details of your needs here.</string>
     <string name="day_of_week_saturday">Saturday</string>
     <string name="day_of_week_sunday">Sunday</string>
     <string name="file">File</string>
+    <string name="space_list_empty_state_create_your_first_space_to_get_started">Create your first space to get started</string>
+    <string name="space_list_empty_state_it_is_empty_here">It is empty here.</string>
 
 </resources>