DROID-3435 Primitives | Ui fixes (#2152)

2025-06-08 05:47:05 +09:00 · 2025-03-12 13:01:22 +01:00 · 2025-03-12 13:01:22 +01:00 · 58f64ffd61
commit 58f64ffd61
parent a65f78c8d4
19 changed files with 434 additions and 118 deletions
--- a/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/EditTypePropertiesViewModel.kt
+++ b/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/EditTypePropertiesViewModel.kt
@ -18,9 +18,13 @@ import com.anytypeio.anytype.feature_properties.add.UiEditTypePropertiesEvent
 import com.anytypeio.anytype.feature_properties.add.EditTypePropertiesVmParams
 import com.anytypeio.anytype.feature_properties.add.UiEditTypePropertiesErrorState
 import com.anytypeio.anytype.feature_properties.add.UiEditTypePropertiesItem
+import com.anytypeio.anytype.feature_properties.add.UiEditTypePropertiesItem.*
 import com.anytypeio.anytype.feature_properties.add.UiEditTypePropertiesState
 import com.anytypeio.anytype.feature_properties.add.mapToStateItem
 import com.anytypeio.anytype.feature_properties.edit.UiEditPropertyState
+import com.anytypeio.anytype.feature_properties.edit.UiEditPropertyState.Visible.*
+import com.anytypeio.anytype.feature_properties.edit.UiPropertyFormatsListState
+import com.anytypeio.anytype.feature_properties.edit.UiPropertyFormatsListState.*
 import kotlinx.coroutines.FlowPreview
 import kotlinx.coroutines.flow.MutableSharedFlow
 import kotlinx.coroutines.flow.MutableStateFlow
@ -57,6 +61,9 @@ class EditTypePropertiesViewModel(
    val uiPropertyEditState =
        MutableStateFlow<UiEditPropertyState>(UiEditPropertyState.Hidden)

+    val uiPropertyFormatsListState =
+        MutableStateFlow<UiPropertyFormatsListState>(UiPropertyFormatsListState.Hidden)
+
    private val _commands = MutableSharedFlow<EditTypePropertiesCommand>()
    val commands = _commands.asSharedFlow()

@ -184,10 +191,11 @@ class EditTypePropertiesViewModel(

    //region Ui Events
    fun onEvent(event: UiEditTypePropertiesEvent) {
+        Timber.d("UiEditTypePropertiesEvent: $event")
        when (event) {
            is UiEditTypePropertiesEvent.OnCreate -> {
                val format = event.item.format
-                uiPropertyEditState.value = UiEditPropertyState.Visible.New(
+                uiPropertyEditState.value = New(
                    name = event.item.title,
                    formatName = stringResourceProvider.getPropertiesFormatPrettyString(format),
                    formatIcon = format.simpleIcon(),
@ -212,7 +220,7 @@ class EditTypePropertiesViewModel(

            is UiEditTypePropertiesEvent.OnTypeClicked -> {
                val format = event.item.format
-                uiPropertyEditState.value = UiEditPropertyState.Visible.New(
+                uiPropertyEditState.value = New(
                    name = "",
                    formatName = stringResourceProvider.getPropertiesFormatPrettyString(format),
                    formatIcon = format.simpleIcon(),
@ -235,9 +243,43 @@ class EditTypePropertiesViewModel(
            is UiEditTypePropertiesEvent.OnPropertyNameUpdate -> {
                val state = uiPropertyEditState.value as? UiEditPropertyState.Visible ?: return
                uiPropertyEditState.value = when (state) {
-                    is UiEditPropertyState.Visible.Edit -> state.copy(name = event.name)
-                    is UiEditPropertyState.Visible.New -> state.copy(name = event.name)
-                    is UiEditPropertyState.Visible.View -> state
+                    is Edit -> state.copy(name = event.name)
+                    is New -> state.copy(name = event.name)
+                    is View -> state
+                }
+            }
+
+            UiEditTypePropertiesEvent.OnPropertyFormatClick -> {
+                uiPropertyFormatsListState.value = Visible(
+                    items = UiEditTypePropertiesState.Companion.PROPERTIES_FORMATS.map { format ->
+                        Format(
+                            format = format,
+                            prettyName = stringResourceProvider.getPropertiesFormatPrettyString(format)
+                        )
+                    }
+                )
+            }
+
+            UiEditTypePropertiesEvent.OnPropertyFormatsListDismiss -> {
+                uiPropertyFormatsListState.value = Hidden
+            }
+
+            is UiEditTypePropertiesEvent.OnPropertyFormatSelected -> {
+                uiPropertyFormatsListState.value = Hidden
+                val state = uiPropertyEditState.value as? UiEditPropertyState.Visible ?: return
+                uiPropertyEditState.value = when (state) {
+                    is New -> {
+                        val newFormat = event.format.format
+                        state.copy(
+                            formatName = stringResourceProvider.getPropertiesFormatPrettyString(
+                                newFormat
+                            ),
+                            formatIcon = newFormat.simpleIcon(),
+                            format = newFormat,
+                        )
+                    }
+
+                    else -> state
                }
            }
        }
@ -246,21 +288,20 @@ class EditTypePropertiesViewModel(

    //region Use Cases
    private fun proceedWithUpdatingRelation() {
-        val state = uiPropertyEditState.value as? UiEditPropertyState.Visible.Edit ?: return
+        val state = uiPropertyEditState.value as? Edit ?: return
        viewModelScope.launch {
            val params = SetObjectDetails.Params(
                ctx = state.id,
                details = mapOf(
-                    Relations.NAME to state.name,
-                    Relations.RELATION_FORMAT to state.format
+                    Relations.NAME to state.name
                )
            )
            setObjectDetails.async(params).fold(
-                onSuccess = {
-                    Timber.d("Relation updated: $it")
+                onSuccess = { payload ->
+                    Timber.d("Property updated :[$payload]")
                },
                onFailure = { error ->
-                    Timber.e(error, "Failed to update relation")
+                    Timber.e(error, "Failed to update property")
                    _errorState.value = UiEditTypePropertiesErrorState.Show(
                        UiEditTypePropertiesErrorState.Reason.ErrorUpdatingProperty(error.message ?: "")
                    )
@ -285,19 +326,18 @@ class EditTypePropertiesViewModel(
                prefilled = emptyMap()
            )
            createRelation(params).process(
-                success = { relation ->
-                    Timber.d("Relation created: $relation")
+                success = { property ->
+                    Timber.d("Property created: $property")
                    val objType = storeOfObjectTypes.get(vmParams.objectTypeId)
                    if (objType != null) {
                        proceedWithSetRecommendedProperties(
-                            properties = objType.recommendedRelations + listOf(relation.id)
+                            properties = objType.recommendedRelations + listOf(property.id)
                        )
                    }
                    uiPropertyEditState.value = UiEditPropertyState.Hidden
-                    _commands.emit(EditTypePropertiesCommand.Exit)
                },
                failure = { error ->
-                    Timber.e(error, "Failed to create relation")
+                    Timber.e(error, "Failed to create property")
                    _errorState.value = UiEditTypePropertiesErrorState.Show(
                        UiEditTypePropertiesErrorState.Reason.ErrorCreatingProperty(error.message ?: "")
                    )
--- a/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/add/UiEditTypePropertiesEvent.kt
+++ b/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/add/UiEditTypePropertiesEvent.kt
@ -9,4 +9,8 @@ sealed class UiEditTypePropertiesEvent {
    data object OnSaveButtonClicked : UiEditTypePropertiesEvent()
    data object OnEditPropertyScreenDismissed : UiEditTypePropertiesEvent()
    data class OnPropertyNameUpdate(val name: String) : UiEditTypePropertiesEvent()
+
+    data object OnPropertyFormatClick : UiEditTypePropertiesEvent()
+    data object OnPropertyFormatsListDismiss : UiEditTypePropertiesEvent()
+    data class OnPropertyFormatSelected(val format: UiEditTypePropertiesItem.Format) : UiEditTypePropertiesEvent()
 }
--- a/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/add/UiEditTypePropertiesState.kt
+++ b/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/add/UiEditTypePropertiesState.kt
@ -14,7 +14,7 @@ data class UiEditTypePropertiesState(
    companion object {
        val EMPTY = UiEditTypePropertiesState(emptyList())

-        val DEFAULT_NEW_PROPERTY_FORMAT = RelationFormat.STATUS
+        val DEFAULT_NEW_PROPERTY_FORMAT = RelationFormat.LONG_TEXT

        //This is a list of formats that are available for creating new properties
        val PROPERTIES_FORMATS = listOf<RelationFormat>(
--- a/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/add/ui/AddScreen.kt
+++ b/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/add/ui/AddScreen.kt
@ -177,6 +177,12 @@ fun AddFieldScreen(
            },
            onPropertyNameUpdate = { name ->
                event(UiEditTypePropertiesEvent.OnPropertyNameUpdate(name))
+            },
+            onFormatClick = {
+                event(UiEditTypePropertiesEvent.OnPropertyFormatClick)
+            },
+            onSaveButtonClicked = {
+                event(UiEditTypePropertiesEvent.OnSaveButtonClicked)
            }
        )
    }
@ -201,7 +207,7 @@ private fun Section(
 }

@Composable
-private fun PropertyTypeItem(
+fun PropertyTypeItem(
    modifier: Modifier,
    item: UiEditTypePropertiesItem.Format
 ) {
--- a/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/edit/UiEditPropertyState.kt
+++ b/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/edit/UiEditPropertyState.kt
@ -3,6 +3,7 @@ package com.anytypeio.anytype.feature_properties.edit
 import com.anytypeio.anytype.core_models.Id
 import com.anytypeio.anytype.core_models.Key
 import com.anytypeio.anytype.core_models.RelationFormat
+import com.anytypeio.anytype.feature_properties.add.UiEditTypePropertiesItem
 import com.anytypeio.anytype.presentation.objects.ObjectIcon

 sealed class UiEditPropertyState {
@ -16,7 +17,8 @@ sealed class UiEditPropertyState {
            val formatName: String,
            val formatIcon: Int?,
            val format: RelationFormat,
-            val limitObjectTypes: List<UiPropertyLimitTypeItem> = emptyList()
+            val limitObjectTypes: List<UiPropertyLimitTypeItem> = emptyList(),
+            val isPossibleToUnlinkFromType: Boolean
        ) : Visible()

        data class New(
@ -34,11 +36,20 @@ sealed class UiEditPropertyState {
            val formatName: String,
            val formatIcon: Int?,
            val format: RelationFormat,
-            val limitObjectTypes: List<UiPropertyLimitTypeItem> = emptyList()
+            val limitObjectTypes: List<UiPropertyLimitTypeItem> = emptyList(),
+            val isPossibleToUnlinkFromType: Boolean
        ) : Visible()
    }
 }

 data class UiPropertyLimitTypeItem(
    val id: Id, val key: Key, val title: String, val icon: ObjectIcon
-)
+)
+
+sealed class UiPropertyFormatsListState {
+    data class Visible(
+        val items: List<UiEditTypePropertiesItem.Format>
+    ) : UiPropertyFormatsListState()
+
+    data object Hidden : UiPropertyFormatsListState()
+}
--- a/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/edit/ui/EditPropertyScreen.kt
+++ b/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/edit/ui/EditPropertyScreen.kt
@ -5,11 +5,12 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.DropdownMenu
@ -29,6 +30,7 @@ import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
+import com.anytypeio.anytype.core_models.Id
 import com.anytypeio.anytype.core_models.RelationFormat
 import com.anytypeio.anytype.core_ui.R
 import com.anytypeio.anytype.core_ui.common.DefaultPreviews
@ -47,15 +49,16 @@ fun PropertyEditScreen(
    onFormatClick: () -> Unit,
    onLimitTypesClick: () -> Unit,
    onPropertyNameUpdate: (String) -> Unit,
-    onDeleteButtonClicked: () -> Unit
+    onMenuUnlinkClick: (Id) -> Unit
 ) {

    var innerValue by remember(uiState.name) { mutableStateOf(uiState.name) }
    val focusRequester = remember { FocusRequester() }
    val keyboardController = LocalSoftwareKeyboardController.current
    var isMenuExpanded by remember { mutableStateOf(false) }
+    var isNameChanged by remember { mutableStateOf(false) }

-    Column(modifier = modifier) {
+    Column(modifier = modifier.imePadding()) {
        Spacer(modifier = Modifier.height(20.dp))
        Row(
            modifier = Modifier.fillMaxWidth(),
@ -77,50 +80,52 @@ fun PropertyEditScreen(
                emptyName = stringResource(R.string.untitled),
                onValueChange = {
                    innerValue = it
+                    isNameChanged = true
                    onPropertyNameUpdate(it)
                }
            )
            Spacer(modifier = Modifier.size(4.dp))
-            Box(
-                modifier = Modifier
-                    .padding(end = 21.dp)
-                    .size(40.dp)
-                    .noRippleThrottledClickable {
-                        isMenuExpanded = true
-                    }
-            ) {
-                Image(
+            if (uiState.isPossibleToUnlinkFromType) {
+                Box(
                    modifier = Modifier
-                        //.padding(end = 20.dp)
-                        .wrapContentSize()
-                        .align(Alignment.Center),
-                    painter = painterResource(id = R.drawable.ic_widget_three_dots),
-                    contentDescription = "Property menu icon",
-                    contentScale = ContentScale.None,
-                )
-                DropdownMenu(
-                    modifier = Modifier.width(244.dp),
-                    expanded = isMenuExpanded,
-                    onDismissRequest = { isMenuExpanded = false },
-                    shape = RoundedCornerShape(size = 10.dp),
-                    containerColor = colorResource(id = R.color.background_primary),
-                    shadowElevation = 5.dp,
-                ) {
-                    DropdownMenuItem(
-                        modifier = Modifier.height(44.dp),
-                        onClick = {
-                            onDeleteButtonClicked()
-                            isMenuExpanded = false
-                        },
-                        text = {
-                            Text(
-                                text = stringResource(R.string.delete),
-                                style = BodyRegular,
-                                color = colorResource(id = R.color.palette_system_red),
-                                modifier = Modifier
-                            )
+                        .padding(end = 21.dp)
+                        .size(40.dp)
+                        .noRippleThrottledClickable {
+                            isMenuExpanded = true
                        }
+                ) {
+                    Image(
+                        modifier = Modifier
+                            .wrapContentSize()
+                            .align(Alignment.Center),
+                        painter = painterResource(id = R.drawable.ic_widget_three_dots),
+                        contentDescription = "Property menu icon",
+                        contentScale = ContentScale.None,
                    )
+                    DropdownMenu(
+                        modifier = Modifier.defaultMinSize(minWidth = 244.dp),
+                        expanded = isMenuExpanded,
+                        onDismissRequest = { isMenuExpanded = false },
+                        shape = RoundedCornerShape(size = 10.dp),
+                        containerColor = colorResource(id = R.color.background_primary),
+                        shadowElevation = 5.dp,
+                    ) {
+                        DropdownMenuItem(
+                            modifier = Modifier.height(44.dp),
+                            onClick = {
+                                onMenuUnlinkClick(uiState.id)
+                                isMenuExpanded = false
+                            },
+                            text = {
+                                Text(
+                                    text = stringResource(R.string.property_edit_menu_unlink),
+                                    style = BodyRegular,
+                                    color = colorResource(id = R.color.palette_system_red),
+                                    modifier = Modifier
+                                )
+                            }
+                        )
+                    }
                }
            }
        }
@ -134,7 +139,7 @@ fun PropertyEditScreen(
                .padding(horizontal = 20.dp)
                .noRippleThrottledClickable { onFormatClick() },
            formatName = uiState.formatName,
-            isEditable = true,
+            isEditable = false,
        )
        Divider()

@ -156,8 +161,11 @@ fun PropertyEditScreen(
            onClick = {
                onSaveButtonClicked()
            },
-            size = ButtonSize.Large
+            size = ButtonSize.Large,
+            enabled = innerValue.isNotBlank() && isNameChanged
        )
+
+        Spacer(modifier = Modifier.height(32.dp))
    }
 }

@ -173,12 +181,13 @@ fun EditPropertyPreview() {
            formatName = "Text",
            formatIcon = R.drawable.ic_relation_format_date_small,
            limitObjectTypes = emptyList(),
-            format = RelationFormat.OBJECT
+            format = RelationFormat.OBJECT,
+            isPossibleToUnlinkFromType = true
        ),
        onSaveButtonClicked = {},
        onFormatClick = {},
        onLimitTypesClick = {},
        onPropertyNameUpdate = {},
-        onDeleteButtonClicked = {},
+        onMenuUnlinkClick = {}
    )
 }
--- a/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/edit/ui/NewPropertyScreen.kt
+++ b/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/edit/ui/NewPropertyScreen.kt
@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
@ -41,7 +42,7 @@ fun PropertyNewScreen(
    val focusRequester = remember { FocusRequester() }
    val keyboardController = LocalSoftwareKeyboardController.current

-    Column(modifier = modifier) {
+    Column(modifier = modifier.imePadding()) {
        Spacer(modifier = Modifier.height(20.dp))
        Row(
            modifier = Modifier.fillMaxWidth(),
@ -100,8 +101,11 @@ fun PropertyNewScreen(
            onClick = {
                onCreateNewButtonClicked()
            },
-            size = ButtonSize.Large
+            size = ButtonSize.Large,
+            enabled = innerValue.isNotBlank()
        )
+
+        Spacer(modifier = Modifier.height(32.dp))
    }
 }

--- a/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/edit/ui/PropertyFormatsListScreen.kt
+++ b/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/edit/ui/PropertyFormatsListScreen.kt
@ -0,0 +1,89 @@
+package com.anytypeio.anytype.feature_properties.edit.ui
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.Text
+import androidx.compose.material3.rememberModalBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.anytypeio.anytype.core_ui.foundation.Divider
+import com.anytypeio.anytype.core_ui.views.Title1
+import com.anytypeio.anytype.core_ui.widgets.dv.DragHandle
+import com.anytypeio.anytype.feature_properties.edit.UiPropertyFormatsListState
+import com.anytypeio.anytype.feature_properties.R
+import com.anytypeio.anytype.feature_properties.add.UiEditTypePropertiesItem
+import com.anytypeio.anytype.feature_properties.add.ui.PropertyTypeItem
+import com.anytypeio.anytype.feature_properties.add.ui.commonItemModifier
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun PropertyFormatsListScreen(
+    uiState: UiPropertyFormatsListState.Visible,
+    onDismissRequest: () -> Unit,
+    onFormatClick: (UiEditTypePropertiesItem.Format) -> Unit,
+) {
+    val bottomSheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
+    val lazyListState = rememberLazyListState()
+
+    ModalBottomSheet(
+        modifier = Modifier.fillMaxWidth(),
+        onDismissRequest = onDismissRequest,
+        dragHandle = { DragHandle() },
+        scrimColor = colorResource(id = R.color.modal_screen_outside_background),
+        containerColor = colorResource(id = R.color.background_primary),
+        shape = RoundedCornerShape(16.dp),
+        sheetState = bottomSheetState,
+    ) {
+        Box(
+            modifier = Modifier.fillMaxWidth().height(48.dp),
+            contentAlignment = Alignment.Center
+        ) {
+            Text(
+                text = stringResource(R.string.property_select_format_title),
+                style = Title1,
+                color = colorResource(R.color.text_primary),
+                textAlign = TextAlign.Center
+            )
+        }
+
+        Divider(paddingStart = 0.dp, paddingEnd = 0.dp)
+
+        LazyColumn(
+            modifier = Modifier
+                .background(color = colorResource(id = R.color.background_primary)),
+            state = lazyListState
+        ) {
+            items(
+                count = uiState.items.size,
+                key = { index -> uiState.items[index].id },
+                itemContent = { index ->
+                    val item = uiState.items[index]
+                    PropertyTypeItem(
+                        modifier = commonItemModifier()
+                            .clickable {
+                                onFormatClick(item)
+                            },
+                        item = item
+                    )
+                }
+            )
+            item {
+                Spacer(modifier = Modifier.height(100.dp))
+            }
+        }
+    }
+}
--- a/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/edit/ui/PropertyScreen.kt
+++ b/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/edit/ui/PropertyScreen.kt
@ -53,7 +53,7 @@ fun PropertyScreen(
    onCreateNewButtonClicked: () -> Unit = {},
    onDismissRequest: () -> Unit,
    onPropertyNameUpdate: (String) -> Unit,
-    onDeleteButtonClicked: (Id) -> Unit ={},
+    onMenuUnlinkClick: (Id) -> Unit ={}
 ) {
    val bottomSheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
    ModalBottomSheet(
@ -61,7 +61,7 @@ fun PropertyScreen(
        dragHandle = { DragHandle() },
        scrimColor = colorResource(id = R.color.modal_screen_outside_background),
        containerColor = colorResource(id = R.color.background_primary),
-        shape = RoundedCornerShape(16.dp),
+        shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
        sheetState = bottomSheetState,
        onDismissRequest = onDismissRequest,
    ) {
@ -73,16 +73,15 @@ fun PropertyScreen(
                onFormatClick = onFormatClick,
                onLimitTypesClick = onLimitTypesClick,
                onPropertyNameUpdate = onPropertyNameUpdate,
-                onDeleteButtonClicked = {
-                    onDeleteButtonClicked(uiState.id)
-                }
+                onMenuUnlinkClick = onMenuUnlinkClick
            )

            is UiEditPropertyState.Visible.View -> PropertyViewScreen(
                modifier = Modifier.fillMaxWidth(),
                uiState = uiState,
                onFormatClick = onFormatClick,
-                onLimitTypesClick = onLimitTypesClick
+                onLimitTypesClick = onLimitTypesClick,
+                onMenuUnlinkClick = onMenuUnlinkClick
            )

            is UiEditPropertyState.Visible.New -> PropertyNewScreen(
--- a/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/edit/ui/ViewPropertyScreen.kt
+++ b/feature-properties/src/main/java/com/anytypeio/anytype/feature_properties/edit/ui/ViewPropertyScreen.kt
@ -1,12 +1,20 @@
 package com.anytypeio.anytype.feature_properties.edit.ui

+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@ -15,14 +23,19 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
+import com.anytypeio.anytype.core_models.Id
 import com.anytypeio.anytype.core_models.RelationFormat
 import com.anytypeio.anytype.core_ui.R
 import com.anytypeio.anytype.core_ui.common.DefaultPreviews
 import com.anytypeio.anytype.core_ui.foundation.Divider
 import com.anytypeio.anytype.core_ui.foundation.noRippleThrottledClickable
+import com.anytypeio.anytype.core_ui.views.BodyRegular
 import com.anytypeio.anytype.feature_properties.edit.UiEditPropertyState

@Composable
@ -30,12 +43,14 @@ fun PropertyViewScreen(
    modifier: Modifier,
    uiState: UiEditPropertyState.Visible.View,
    onFormatClick: () -> Unit,
-    onLimitTypesClick: () -> Unit
+    onLimitTypesClick: () -> Unit,
+    onMenuUnlinkClick: (Id) -> Unit
 ) {

    var innerValue by remember(uiState.name) { mutableStateOf(uiState.name) }
    val focusRequester = remember { FocusRequester() }
    val keyboardController = LocalSoftwareKeyboardController.current
+    var isMenuExpanded by remember { mutableStateOf(false) }

    Column(modifier = modifier) {
        Spacer(modifier = Modifier.height(20.dp))
@ -59,7 +74,52 @@ fun PropertyViewScreen(
                emptyName = stringResource(R.string.untitled),
                onValueChange = { innerValue = it }
            )
-            Spacer(modifier = Modifier.size(20.dp))
+            if (uiState.isPossibleToUnlinkFromType) {
+                Spacer(modifier = Modifier.size(4.dp))
+                Box(
+                    modifier = Modifier
+                        .padding(end = 21.dp)
+                        .size(40.dp)
+                        .noRippleThrottledClickable {
+                            isMenuExpanded = true
+                        }
+                ) {
+                    Image(
+                        modifier = Modifier
+                            .wrapContentSize()
+                            .align(Alignment.Center),
+                        painter = painterResource(id = R.drawable.ic_widget_three_dots),
+                        contentDescription = "Property menu icon",
+                        contentScale = ContentScale.None,
+                    )
+                    DropdownMenu(
+                        modifier = Modifier.defaultMinSize(minWidth = 244.dp),
+                        expanded = isMenuExpanded,
+                        onDismissRequest = { isMenuExpanded = false },
+                        shape = RoundedCornerShape(size = 10.dp),
+                        containerColor = colorResource(id = R.color.background_primary),
+                        shadowElevation = 5.dp,
+                    ) {
+                        DropdownMenuItem(
+                            modifier = Modifier.height(44.dp),
+                            onClick = {
+                                onMenuUnlinkClick(uiState.id)
+                                isMenuExpanded = false
+                            },
+                            text = {
+                                Text(
+                                    text = stringResource(R.string.property_edit_menu_unlink),
+                                    style = BodyRegular,
+                                    color = colorResource(id = R.color.palette_system_red),
+                                    modifier = Modifier
+                                )
+                            }
+                        )
+                    }
+                }
+            } else {
+                Spacer(modifier = Modifier.size(20.dp))
+            }
        }

        Spacer(modifier = Modifier.height(8.dp))
@ -83,6 +143,8 @@ fun PropertyViewScreen(
            )
            Divider()
        }
+
+        Spacer(modifier = Modifier.height(32.dp))
    }
 }

@ -97,9 +159,11 @@ fun MyPreviewView() {
            name = "View property",
            formatName = "Text",
            formatIcon = R.drawable.ic_relation_format_date_small,
-            format = RelationFormat.FILE
+            format = RelationFormat.FILE,
+            isPossibleToUnlinkFromType = true
        ),
        onFormatClick = {},
-        onLimitTypesClick = {}
+        onLimitTypesClick = {},
+        onMenuUnlinkClick = {}
    )
 }