DROID-2265 Multiplayer | Enhancement | Fix layout + Add MVVM components for request-to-join space screen (#963)

app/src/main/java/com/anytypeio/anytype/di/common/ComponentManager.kt

@@ -62,6 +62,7 @@ import com.anytypeio.anytype.di.feature.auth.DaggerDeletedAccountComponent
 import com.anytypeio.anytype.di.feature.cover.UnsplashModule
 import com.anytypeio.anytype.di.feature.home.DaggerHomeScreenComponent
 import com.anytypeio.anytype.di.feature.library.DaggerLibraryComponent
+import com.anytypeio.anytype.di.feature.multiplayer.DaggerRequestJoinSpaceComponent
 import com.anytypeio.anytype.di.feature.multiplayer.DaggerShareSpaceComponent
 import com.anytypeio.anytype.di.feature.multiplayer.DaggerSpaceJoinRequestComponent
 import com.anytypeio.anytype.di.feature.objects.DaggerSelectObjectTypeComponent
@@ -104,6 +105,7 @@ import com.anytypeio.anytype.di.feature.wallpaper.WallpaperSelectModule
 import com.anytypeio.anytype.di.feature.widgets.SelectWidgetSourceModule
 import com.anytypeio.anytype.di.feature.widgets.SelectWidgetTypeModule
 import com.anytypeio.anytype.di.main.MainComponent
+import com.anytypeio.anytype.presentation.multiplayer.RequestJoinSpaceViewModel
 import com.anytypeio.anytype.presentation.multiplayer.ShareSpaceViewModel
 import com.anytypeio.anytype.presentation.multiplayer.SpaceJoinRequestViewModel
 import com.anytypeio.anytype.presentation.objects.SelectObjectTypeViewModel
@@ -1057,6 +1059,14 @@ class ComponentManager(
             .build()
     }
 
+    val requestToJoinSpaceComponent = ComponentWithParams { params: RequestJoinSpaceViewModel.Params ->
+        DaggerRequestJoinSpaceComponent
+            .builder()
+            .withDependencies(findComponentDependencies())
+            .withParams(params = params)
+            .build()
+    }
+
     class Component<T>(private val builder: () -> T) {
 
         private var instance: T? = null

app/src/main/java/com/anytypeio/anytype/di/feature/multiplayer/RequestJoinSpaceDI.kt

@@ -0,0 +1,54 @@
+package com.anytypeio.anytype.di.feature.multiplayer
+
+import androidx.lifecycle.ViewModelProvider
+import com.anytypeio.anytype.core_utils.di.scope.PerDialog
+import com.anytypeio.anytype.core_utils.di.scope.PerScreen
+import com.anytypeio.anytype.di.common.ComponentDependencies
+import com.anytypeio.anytype.domain.base.AppCoroutineDispatchers
+import com.anytypeio.anytype.domain.block.repo.BlockRepository
+import com.anytypeio.anytype.domain.misc.UrlBuilder
+import com.anytypeio.anytype.domain.workspace.SpaceManager
+import com.anytypeio.anytype.presentation.multiplayer.RequestJoinSpaceViewModel
+import com.anytypeio.anytype.ui.multiplayer.RequestJoinSpaceFragment
+import dagger.Binds
+import dagger.BindsInstance
+import dagger.Component
+import dagger.Module
+
+@Component(
+    dependencies = [RequestJoinSpaceDependencies::class],
+    modules = [
+        RequestJoinSpaceModule::class,
+        RequestJoinSpaceModule.Declarations::class
+    ]
+)
+@PerDialog
+interface RequestJoinSpaceComponent {
+
+    @Component.Builder
+    interface Builder {
+        fun withDependencies(dependencies: RequestJoinSpaceDependencies): Builder
+        @BindsInstance
+        fun withParams(params: RequestJoinSpaceViewModel.Params): Builder
+        fun build(): RequestJoinSpaceComponent
+    }
+
+    fun inject(fragment: RequestJoinSpaceFragment)
+}
+
+@Module
+object RequestJoinSpaceModule {
+    @Module
+    interface Declarations {
+        @PerScreen
+        @Binds
+        fun bindViewModelFactory(factory: RequestJoinSpaceViewModel.Factory): ViewModelProvider.Factory
+    }
+}
+
+interface RequestJoinSpaceDependencies : ComponentDependencies {
+    fun blockRepository(): BlockRepository
+    fun urlBuilder(): UrlBuilder
+    fun dispatchers(): AppCoroutineDispatchers
+    fun spaceManager(): SpaceManager
+}

app/src/main/java/com/anytypeio/anytype/di/main/MainComponent.kt

@@ -1,60 +1,61 @@
 package com.anytypeio.anytype.di.main
 
     import com.anytypeio.anytype.app.AndroidApplication
-import com.anytypeio.anytype.di.common.ComponentDependencies
-import com.anytypeio.anytype.di.common.ComponentDependenciesKey
-import com.anytypeio.anytype.di.feature.AppPreferencesDependencies
-import com.anytypeio.anytype.di.feature.BacklinkOrAddToObjectDependencies
-import com.anytypeio.anytype.di.feature.CreateBookmarkSubComponent
-import com.anytypeio.anytype.di.feature.CreateObjectSubComponent
-import com.anytypeio.anytype.di.feature.DebugSettingsSubComponent
-import com.anytypeio.anytype.di.feature.EditorSubComponent
-import com.anytypeio.anytype.di.feature.KeychainPhraseSubComponent
-import com.anytypeio.anytype.di.feature.LinkToObjectSubComponent
-import com.anytypeio.anytype.di.feature.MainEntrySubComponent
-import com.anytypeio.anytype.di.feature.MoveToSubComponent
-import com.anytypeio.anytype.di.feature.ObjectSearchSubComponent
-import com.anytypeio.anytype.di.feature.ObjectSetSubComponent
-import com.anytypeio.anytype.di.feature.ObjectTypeChangeSubComponent
-import com.anytypeio.anytype.di.feature.PersonalizationSettingsSubComponent
-import com.anytypeio.anytype.di.feature.SplashDependencies
-import com.anytypeio.anytype.di.feature.auth.DeletedAccountDependencies
-import com.anytypeio.anytype.di.feature.home.HomeScreenDependencies
-import com.anytypeio.anytype.di.feature.library.LibraryDependencies
+    import com.anytypeio.anytype.di.common.ComponentDependencies
+    import com.anytypeio.anytype.di.common.ComponentDependenciesKey
+    import com.anytypeio.anytype.di.feature.AppPreferencesDependencies
+    import com.anytypeio.anytype.di.feature.BacklinkOrAddToObjectDependencies
+    import com.anytypeio.anytype.di.feature.CreateBookmarkSubComponent
+    import com.anytypeio.anytype.di.feature.CreateObjectSubComponent
+    import com.anytypeio.anytype.di.feature.DebugSettingsSubComponent
+    import com.anytypeio.anytype.di.feature.EditorSubComponent
+    import com.anytypeio.anytype.di.feature.KeychainPhraseSubComponent
+    import com.anytypeio.anytype.di.feature.LinkToObjectSubComponent
+    import com.anytypeio.anytype.di.feature.MainEntrySubComponent
+    import com.anytypeio.anytype.di.feature.MoveToSubComponent
+    import com.anytypeio.anytype.di.feature.ObjectSearchSubComponent
+    import com.anytypeio.anytype.di.feature.ObjectSetSubComponent
+    import com.anytypeio.anytype.di.feature.ObjectTypeChangeSubComponent
+    import com.anytypeio.anytype.di.feature.PersonalizationSettingsSubComponent
+    import com.anytypeio.anytype.di.feature.SplashDependencies
+    import com.anytypeio.anytype.di.feature.auth.DeletedAccountDependencies
+    import com.anytypeio.anytype.di.feature.home.HomeScreenDependencies
+    import com.anytypeio.anytype.di.feature.library.LibraryDependencies
+    import com.anytypeio.anytype.di.feature.multiplayer.RequestJoinSpaceDependencies
     import com.anytypeio.anytype.di.feature.multiplayer.ShareSpaceDependencies
     import com.anytypeio.anytype.di.feature.multiplayer.SpaceJoinRequestDependencies
     import com.anytypeio.anytype.di.feature.objects.SelectObjectTypeDependencies
-import com.anytypeio.anytype.di.feature.onboarding.OnboardingDependencies
-import com.anytypeio.anytype.di.feature.onboarding.OnboardingStartDependencies
-import com.anytypeio.anytype.di.feature.onboarding.login.OnboardingMnemonicLoginDependencies
-import com.anytypeio.anytype.di.feature.onboarding.signup.OnboardingMnemonicDependencies
-import com.anytypeio.anytype.di.feature.onboarding.signup.OnboardingSoulCreationDependencies
-import com.anytypeio.anytype.di.feature.relations.RelationCreateFromLibraryDependencies
-import com.anytypeio.anytype.di.feature.relations.RelationEditDependencies
-import com.anytypeio.anytype.di.feature.settings.AboutAppDependencies
-import com.anytypeio.anytype.di.feature.settings.AppearanceDependencies
-import com.anytypeio.anytype.di.feature.settings.FilesStorageDependencies
-import com.anytypeio.anytype.di.feature.settings.LogoutWarningSubComponent
-import com.anytypeio.anytype.di.feature.settings.ProfileSubComponent
-import com.anytypeio.anytype.di.feature.settings.SpacesStorageDependencies
-import com.anytypeio.anytype.di.feature.sharing.AddToAnytypeDependencies
-import com.anytypeio.anytype.di.feature.spaces.CreateSpaceDependencies
-import com.anytypeio.anytype.di.feature.spaces.SelectSpaceDependencies
-import com.anytypeio.anytype.di.feature.spaces.SpaceSettingsDependencies
-import com.anytypeio.anytype.di.feature.templates.TemplateBlankDependencies
-import com.anytypeio.anytype.di.feature.templates.TemplateSelectDependencies
-import com.anytypeio.anytype.di.feature.templates.TemplateSubComponent
-import com.anytypeio.anytype.di.feature.types.CreateObjectTypeDependencies
-import com.anytypeio.anytype.di.feature.types.TypeEditDependencies
-import com.anytypeio.anytype.di.feature.types.TypeIconPickDependencies
-import com.anytypeio.anytype.di.feature.update.MigrationErrorDependencies
-import com.anytypeio.anytype.di.feature.wallpaper.WallpaperSelectSubComponent
-import com.anytypeio.anytype.ui.widgets.collection.CollectionDependencies
-import dagger.Binds
-import dagger.Component
-import dagger.Module
-import dagger.multibindings.IntoMap
-import javax.inject.Singleton
+    import com.anytypeio.anytype.di.feature.onboarding.OnboardingDependencies
+    import com.anytypeio.anytype.di.feature.onboarding.OnboardingStartDependencies
+    import com.anytypeio.anytype.di.feature.onboarding.login.OnboardingMnemonicLoginDependencies
+    import com.anytypeio.anytype.di.feature.onboarding.signup.OnboardingMnemonicDependencies
+    import com.anytypeio.anytype.di.feature.onboarding.signup.OnboardingSoulCreationDependencies
+    import com.anytypeio.anytype.di.feature.relations.RelationCreateFromLibraryDependencies
+    import com.anytypeio.anytype.di.feature.relations.RelationEditDependencies
+    import com.anytypeio.anytype.di.feature.settings.AboutAppDependencies
+    import com.anytypeio.anytype.di.feature.settings.AppearanceDependencies
+    import com.anytypeio.anytype.di.feature.settings.FilesStorageDependencies
+    import com.anytypeio.anytype.di.feature.settings.LogoutWarningSubComponent
+    import com.anytypeio.anytype.di.feature.settings.ProfileSubComponent
+    import com.anytypeio.anytype.di.feature.settings.SpacesStorageDependencies
+    import com.anytypeio.anytype.di.feature.sharing.AddToAnytypeDependencies
+    import com.anytypeio.anytype.di.feature.spaces.CreateSpaceDependencies
+    import com.anytypeio.anytype.di.feature.spaces.SelectSpaceDependencies
+    import com.anytypeio.anytype.di.feature.spaces.SpaceSettingsDependencies
+    import com.anytypeio.anytype.di.feature.templates.TemplateBlankDependencies
+    import com.anytypeio.anytype.di.feature.templates.TemplateSelectDependencies
+    import com.anytypeio.anytype.di.feature.templates.TemplateSubComponent
+    import com.anytypeio.anytype.di.feature.types.CreateObjectTypeDependencies
+    import com.anytypeio.anytype.di.feature.types.TypeEditDependencies
+    import com.anytypeio.anytype.di.feature.types.TypeIconPickDependencies
+    import com.anytypeio.anytype.di.feature.update.MigrationErrorDependencies
+    import com.anytypeio.anytype.di.feature.wallpaper.WallpaperSelectSubComponent
+    import com.anytypeio.anytype.ui.widgets.collection.CollectionDependencies
+    import dagger.Binds
+    import dagger.Component
+    import dagger.Module
+    import dagger.multibindings.IntoMap
+    import javax.inject.Singleton
 
 @Singleton
 @Component(
@@ -108,7 +109,8 @@ interface MainComponent :
     AppPreferencesDependencies,
     AddToAnytypeDependencies,
     ShareSpaceDependencies,
-    SpaceJoinRequestDependencies
+    SpaceJoinRequestDependencies,
+    RequestJoinSpaceDependencies
 {
 
     fun inject(app: AndroidApplication)
@@ -294,4 +296,9 @@ private abstract class ComponentDependenciesModule private constructor() {
     @IntoMap
     @ComponentDependenciesKey(SpaceJoinRequestDependencies::class)
     abstract fun provideSpaceJoinRequestDependencies(component: MainComponent): ComponentDependencies
+
+    @Binds
+    @IntoMap
+    @ComponentDependenciesKey(RequestJoinSpaceDependencies::class)
+    abstract fun provideRequestToJoinSpaceDependencies(component: MainComponent): ComponentDependencies
 }

app/src/main/java/com/anytypeio/anytype/ui/multiplayer/RequestJoinSpaceFragment.kt

@@ -0,0 +1,66 @@
+package com.anytypeio.anytype.ui.multiplayer
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.fragment.app.viewModels
+import com.anytypeio.anytype.core_models.Id
+import com.anytypeio.anytype.core_ui.features.multiplayer.JoinSpaceScreen
+import com.anytypeio.anytype.core_utils.ext.arg
+import com.anytypeio.anytype.core_utils.ext.toast
+import com.anytypeio.anytype.core_utils.ui.BaseBottomSheetComposeFragment
+import com.anytypeio.anytype.di.common.componentManager
+import com.anytypeio.anytype.presentation.multiplayer.RequestJoinSpaceViewModel
+import com.anytypeio.anytype.ui.settings.typography
+import javax.inject.Inject
+
+class RequestJoinSpaceFragment : BaseBottomSheetComposeFragment() {
+
+    private val link get() = arg<Id>(ARG_LINK_KEY)
+
+    @Inject
+    lateinit var factory: RequestJoinSpaceViewModel.Factory
+
+    private val vm by viewModels<RequestJoinSpaceViewModel> { factory }
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View {
+        return ComposeView(requireContext()).apply {
+            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+            setContent {
+                MaterialTheme(typography = typography) {
+                    JoinSpaceScreen(
+                        onRequestJoinSpaceClicked = { /*TODO*/ },
+                        spaceName = "TODO",
+                        createdByName = "TODO"
+                    )
+                    LaunchedEffect(Unit) {
+                        vm.toasts.collect { toast(it) }
+                    }
+                }
+            }
+        }
+    }
+
+    override fun injectDependencies() {
+        componentManager().requestToJoinSpaceComponent.get(
+            RequestJoinSpaceViewModel.Params(link = link)
+        ).inject(fragment = this)
+    }
+
+    override fun releaseDependencies() {
+        componentManager().requestToJoinSpaceComponent.release()
+    }
+
+    companion object {
+        const val ARG_LINK_KEY = "arg.request-to-join-space.link"
+    }
+}

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

@@ -1,11 +1,9 @@
 package com.anytypeio.anytype.core_ui.features.multiplayer
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -14,16 +12,11 @@ import androidx.compose.material3.OutlinedTextFieldDefaults
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextField
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.colorResource
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
@@ -31,7 +24,10 @@ import androidx.compose.ui.unit.dp
 import com.anytypeio.anytype.core_ui.ColorTextInputCursor
 import com.anytypeio.anytype.core_ui.R
 import com.anytypeio.anytype.core_ui.extensions.throttledClick
-import com.anytypeio.anytype.core_ui.foundation.noRippleClickable
+import com.anytypeio.anytype.core_ui.foundation.AlertConfig
+import com.anytypeio.anytype.core_ui.foundation.AlertIcon
+import com.anytypeio.anytype.core_ui.foundation.Dragger
+import com.anytypeio.anytype.core_ui.foundation.GRADIENT_TYPE_GREEN
 import com.anytypeio.anytype.core_ui.views.BodyRegular
 import com.anytypeio.anytype.core_ui.views.ButtonPrimary
 import com.anytypeio.anytype.core_ui.views.ButtonSize
@@ -45,7 +41,6 @@ import com.anytypeio.anytype.core_ui.views.PreviewTitle2Regular
 fun JoinSpaceScreenPreview() {
     JoinSpaceScreen(
         onRequestJoinSpaceClicked = {},
-        onCloseClicked = {},
         spaceName = "Anytype Android App",
         createdByName = "Konstantin"
     )
@@ -53,79 +48,58 @@ fun JoinSpaceScreenPreview() {
 
 @Composable
 fun JoinSpaceScreen(
-    onRequestJoinSpaceClicked: (String) -> Unit,
-    onCloseClicked: () -> Unit,
+    onRequestJoinSpaceClicked: () -> Unit,
     spaceName: String,
     createdByName: String
 ) {
     Column(
-        modifier = Modifier.fillMaxSize()
+        modifier = Modifier.fillMaxWidth()
     ) {
-        var commentInputValue by remember { mutableStateOf("") }
-        Header(onCloseClicked = onCloseClicked)
+        Dragger(
+            modifier = Modifier
+                .align(Alignment.CenterHorizontally)
+                .padding(vertical = 6.dp)
+        )
+        Spacer(modifier = Modifier.height(16.dp))
+        AlertIcon(
+            icon = AlertConfig.Icon(
+                gradient = GRADIENT_TYPE_GREEN,
+                icon = R.drawable.ic_alert_message
+            )
+        )
+        Spacer(modifier = Modifier.height(16.dp))
+        Text(
+            text = stringResource(R.string.multiplayer_join_a_space),
+            style = HeadlineHeading,
+            color = colorResource(id = R.color.text_primary),
+            modifier = Modifier.align(Alignment.CenterHorizontally)
+        )
+        Spacer(modifier = Modifier.height(16.dp))
         Text(
             style = BodyRegular,
             color = colorResource(id = R.color.text_primary),
-            modifier = Modifier.padding(horizontal = 20.dp, vertical = 10.dp),
+            modifier = Modifier.padding(horizontal = 48.dp),
             text = stringResource(
-                id = R.string.multiplayer_space_request_to_join_msg, spaceName, createdByName
-            )
+                id = R.string.multiplayer_space_request_to_join_msg,
+                spaceName,
+                createdByName
+            ),
+            textAlign = TextAlign.Center
         )
-        Spacer(modifier = Modifier.height(12.dp))
+        Spacer(modifier = Modifier.height(32.dp))
         Box(
-            modifier = Modifier
-                .height(128.dp)
-                .fillMaxWidth()
-                .padding(horizontal = 20.dp)
-                .border(width = 1.dp, color = colorResource(id = R.color.shape_primary))
-                .clip(RoundedCornerShape(10.dp))
-        ) {
-            Text(
-                text = stringResource(R.string.multiplayer_private_comment_for_a_space_owner),
-                style = Caption1Medium,
-                color = colorResource(id = R.color.text_secondary),
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(start = 16.dp, end = 16.dp, top = 10.dp)
-            )
-            TextField(
-                value = commentInputValue,
-                onValueChange = { commentInputValue = it },
-                textStyle = PreviewTitle2Regular.copy(
-                    color = colorResource(id = R.color.text_primary)
-                ),
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(top = 31.dp),
-                placeholder = {
-                    Text(
-                        text = stringResource(R.string.multiplayer_tap_to_write_request_to_join_comment),
-                        color = colorResource(id = R.color.text_tertiary)
-                    )
-                },
-                colors = OutlinedTextFieldDefaults.colors(
-                    disabledBorderColor = Color.Transparent,
-                    errorBorderColor = Color.Transparent,
-                    focusedBorderColor = Color.Transparent,
-                    unfocusedBorderColor = Color.Transparent,
-                    cursorColor = ColorTextInputCursor
-                )
-            )
-        }
-        Spacer(modifier = Modifier.height(20.dp))
-        Box(
-            modifier = Modifier.padding(top = 10.dp, start = 20.dp, end = 20.dp, bottom = 16.dp)
+            modifier = Modifier.padding(start = 20.dp, end = 20.dp)
         ) {
             ButtonPrimary(
                 onClick = throttledClick(
-                    onClick = { onRequestJoinSpaceClicked(commentInputValue) }
+                    onClick = { onRequestJoinSpaceClicked() }
                 ),
                 size = ButtonSize.Large,
                 text = stringResource(R.string.multiplayer_space_request_to_join),
                 modifier = Modifier.fillMaxWidth()
             )
         }
-        Spacer(modifier = Modifier.height(5.dp))
+        Spacer(modifier = Modifier.height(20.dp))
         Text(
             text = stringResource(R.string.mulitplayer_request_to_join_explanation),
             style = Caption1Regular,
@@ -133,32 +107,52 @@ fun JoinSpaceScreen(
             modifier = Modifier.padding(horizontal = 28.dp),
             textAlign = TextAlign.Center
         )
+        Spacer(modifier = Modifier.height(16.dp))
     }
 }
 
 @Composable
-private fun Header(
-    onCloseClicked: () -> Unit
-) {
+private fun CommentBox(commentInputValue: String): String {
+    var commentInputValue1 = commentInputValue
     Box(
         modifier = Modifier
-            .height(64.dp)
+            .height(128.dp)
             .fillMaxWidth()
             .padding(horizontal = 20.dp)
+            .border(width = 1.dp, color = colorResource(id = R.color.shape_primary))
+            .clip(RoundedCornerShape(10.dp))
     ) {
         Text(
-            text = stringResource(R.string.multiplayer_join_a_space),
-            style = HeadlineHeading,
-            color = colorResource(id = R.color.text_primary),
-            modifier = Modifier.padding(top = 30.dp)
-        )
-        Image(
-            painter = painterResource(id = R.drawable.ic_navigation_close_cross),
-            contentDescription = "Close button",
+            text = stringResource(R.string.multiplayer_private_comment_for_a_space_owner),
+            style = Caption1Medium,
+            color = colorResource(id = R.color.text_secondary),
             modifier = Modifier
-                .align(Alignment.TopEnd)
-                .padding(top = 16.dp)
-                .noRippleClickable { onCloseClicked() }
+                .fillMaxWidth()
+                .padding(start = 16.dp, end = 16.dp, top = 10.dp)
+        )
+        TextField(
+            value = commentInputValue1,
+            onValueChange = { commentInputValue1 = it },
+            textStyle = PreviewTitle2Regular.copy(
+                color = colorResource(id = R.color.text_primary)
+            ),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 31.dp),
+            placeholder = {
+                Text(
+                    text = stringResource(R.string.multiplayer_tap_to_write_request_to_join_comment),
+                    color = colorResource(id = R.color.text_tertiary)
+                )
+            },
+            colors = OutlinedTextFieldDefaults.colors(
+                disabledBorderColor = Color.Transparent,
+                errorBorderColor = Color.Transparent,
+                focusedBorderColor = Color.Transparent,
+                unfocusedBorderColor = Color.Transparent,
+                cursorColor = ColorTextInputCursor
+            )
         )
     }
+    return commentInputValue1
 }

core-ui/src/main/java/com/anytypeio/anytype/core_ui/foundation/Warnings.kt

@@ -106,6 +106,26 @@ fun AlertWithWarningButton() {
     )
 }
 
+@Preview
+@Composable
+fun AlertWithMessageButton() {
+    GenericAlert(
+        onFirstButtonClicked = {},
+        onSecondButtonClicked = {},
+        config = AlertConfig.WithTwoButtons(
+            firstButtonType = BUTTON_SECONDARY,
+            secondButtonType = BUTTON_WARNING,
+            icon = AlertConfig.Icon(
+                icon = R.drawable.ic_alert_message,
+                gradient = GRADIENT_TYPE_BLUE
+            ),
+            firstButtonText = "Later",
+            secondButtonText = "Retry",
+            title = "It's time to update",
+            description = "Some of your data was managed in a newer version of Anytype. Please update the app to work with all your docs and the latest features."
+        )
+    )
+}
 
 @Composable
 fun GenericAlert(
@@ -359,7 +379,10 @@ typealias GradientType = Int
 
 const val GRADIENT_TYPE_GREEN = 0
 const val GRADIENT_TYPE_RED = 1
+const val GRADIENT_TYPE_BLUE = 2
 val GREEN_FROM = Color(0xFFA9F496)
 val GREEN_TO = Color(0xFF00BCF2AF)
 val RED_FROM = Color(0xFFFFBCBC)
-val RED_TO = Color(0xFF00FFE6E6)
+val RED_TO = Color(0xFF00FFE6E6)
+val BLUE_FROM = Color(0xFF80D1FF)
+val BLUE_TO = Color(0xFFBBE7FF)

core-ui/src/main/res/drawable/ic_alert_message.xml

@@ -0,0 +1,249 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="68dp"
+    android:height="72dp"
+    android:viewportWidth="68"
+    android:viewportHeight="72">
+  <path
+      android:pathData="M6,0h54.792v69.326h-54.792z"
+      android:fillColor="@color/background_primary"/>
+  <path
+      android:pathData="M6,0h54.792v69.326h-54.792z"
+      android:fillColor="@color/background_primary"/>
+  <path
+      android:pathData="M6,0h54.792v69.326h-54.792z"
+      android:fillColor="@color/background_primary"/>
+  <path
+      android:pathData="M2,22h64v48h-64z"
+      android:fillColor="@color/background_primary"/>
+  <path
+      android:pathData="M2,22h64v48h-64z"
+      android:fillColor="@color/background_primary"/>
+  <path
+      android:pathData="M2,22h64v48h-64z"
+      android:fillColor="@color/background_primary"/>
+  <path
+      android:pathData="M6,2.004h2v26h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M6,0h56v2h-56z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M60,2h2v26h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M27.996,32l12,-0.016l0.003,2l-12,0.016z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M18,20h2v4h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M22,28.031h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M20,24h2v4h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M24,29.988h4v2h-4z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M50,20l-2,0l-0,4l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M46,28.031l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M48,24l-2,0l-0,4l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M44,29.988l-4,0l-0,2l4,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M25.996,10h2v4h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M40,10h2v4h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M0,70l2,-0l0,-46l-2,-0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M2,72l64,-0l0,-2l-64,-0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M66,70l2,-0l0,-46l-2,-0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M6,28h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M4,26.004h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M2,24.004h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M2,22.004h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M4,20.004h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M12,34.023h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M10,32.031h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M8,30.031h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M18,40.016h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M16,38.023h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M14,36.023h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M24,46.008h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M22,44.016h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M20,42.016h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M62,27.996l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M64,26l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M66,24l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M66,22l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M64,20.008l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M56,34.016l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M58,32.023l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M60,30.023l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M50,40.016l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M52,38.023l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M54,36.023l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M44,46.008l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M46,44.016l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M48,42.016l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M4,68l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M6,66l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M8,64l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M10,62l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M12,60l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M14,58l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M16,56l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M18,54l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M20,52l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M22,50l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M24,48l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M26,46l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M28,44l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M30,42l-2,0l-0,2l2,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M34,40l-4,0l-0,2l4,0z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M46,50h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M44,48h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M42,46h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M40,44h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M38,42h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M34,40h4v2h-4z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M52,56h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M50,54h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M48,52h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M58,62h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M56,60h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M54,58h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M64,68h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M62,66h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+  <path
+      android:pathData="M60,64h2v2h-2z"
+      android:fillColor="@color/text_primary"/>
+</vector>

presentation/src/main/java/com/anytypeio/anytype/presentation/multiplayer/RequestJoinSpaceViewModel.kt

@@ -0,0 +1,20 @@
+package com.anytypeio.anytype.presentation.multiplayer
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.ViewModelProvider
+import com.anytypeio.anytype.presentation.common.BaseViewModel
+import javax.inject.Inject
+
+class RequestJoinSpaceViewModel : BaseViewModel() {
+
+    class Factory @Inject constructor(
+
+    ) : ViewModelProvider.Factory {
+        @Suppress("UNCHECKED_CAST")
+        override fun <T : ViewModel> create(modelClass: Class<T>): T = RequestJoinSpaceViewModel(
+
+        ) as T
+    }
+
+    data class Params(val link: String)
+}