Improve (a bit) the devices list UX/UI

vector/src/main/java/im/vector/riotx/features/settings/devices/DevicesController.kt

@@ -23,12 +23,16 @@ import com.airbnb.mvrx.Success
 import com.airbnb.mvrx.Uninitialized
 import im.vector.matrix.android.api.extensions.sortByLastSeen
 import im.vector.matrix.android.internal.crypto.model.rest.DeviceInfo
+import im.vector.riotx.R
 import im.vector.riotx.core.epoxy.errorWithRetryItem
 import im.vector.riotx.core.epoxy.loadingItem
 import im.vector.riotx.core.error.ErrorFormatter
+import im.vector.riotx.core.resources.StringProvider
+import im.vector.riotx.core.ui.list.genericItemHeader
 import javax.inject.Inject
 
-class DevicesController @Inject constructor(private val errorFormatter: ErrorFormatter) : EpoxyController() {
+class DevicesController @Inject constructor(private val errorFormatter: ErrorFormatter,
+                                            private val stringProvider: StringProvider) : EpoxyController() {
 
     var callback: Callback? = null
     private var viewState: DevicesViewState? = null
@@ -61,21 +65,58 @@ class DevicesController @Inject constructor(private val errorFormatter: ErrorFor
                     listener { callback?.retry() }
                 }
             is Success       ->
-                devices()
-                        // sort before display: most recent first
-                        .sortByLastSeen()
-                        .forEachIndexed { idx, deviceInfo ->
-                            val isCurrentDevice = deviceInfo.deviceId == state.myDeviceId
-                            deviceItem {
-                                id("device$idx")
-                                deviceInfo(deviceInfo)
-                                currentDevice(isCurrentDevice)
-                                buttonsVisible(deviceInfo.deviceId == state.currentExpandedDeviceId)
-                                itemClickAction { callback?.onDeviceClicked(deviceInfo) }
-                                renameClickAction { callback?.onRenameDevice(deviceInfo) }
-                                deleteClickAction { callback?.onDeleteDevice(deviceInfo) }
-                            }
+                buildDevicesList(devices(), state.myDeviceId, state.currentExpandedDeviceId)
+        }
+    }
+
+    private fun buildDevicesList(devices: List<DeviceInfo>, myDeviceId: String, currentExpandedDeviceId: String?) {
+        // Current device
+        genericItemHeader {
+            id("current")
+            text(stringProvider.getString(R.string.devices_current_device))
+        }
+
+        devices
+                .filter {
+                    it.deviceId == myDeviceId
+                }
+                .forEachIndexed { idx, deviceInfo ->
+                    deviceItem {
+                        id("myDevice$idx")
+                        deviceInfo(deviceInfo)
+                        currentDevice(true)
+                        buttonsVisible(deviceInfo.deviceId == currentExpandedDeviceId)
+                        itemClickAction { callback?.onDeviceClicked(deviceInfo) }
+                        renameClickAction { callback?.onRenameDevice(deviceInfo) }
+                        deleteClickAction { callback?.onDeleteDevice(deviceInfo) }
+                    }
+                }
+
+        // Other devices
+        if (devices.size > 1) {
+            genericItemHeader {
+                id("others")
+                text(stringProvider.getString(R.string.devices_other_devices))
+            }
+
+            devices
+                    .filter {
+                        it.deviceId != myDeviceId
+                    }
+                    // sort before display: most recent first
+                    .sortByLastSeen()
+                    .forEachIndexed { idx, deviceInfo ->
+                        val isCurrentDevice = deviceInfo.deviceId == myDeviceId
+                        deviceItem {
+                            id("device$idx")
+                            deviceInfo(deviceInfo)
+                            currentDevice(isCurrentDevice)
+                            buttonsVisible(deviceInfo.deviceId == currentExpandedDeviceId)
+                            itemClickAction { callback?.onDeviceClicked(deviceInfo) }
+                            renameClickAction { callback?.onRenameDevice(deviceInfo) }
+                            deleteClickAction { callback?.onDeleteDevice(deviceInfo) }
                         }
+                    }
         }
     }
 

vector/src/main/java/im/vector/riotx/features/settings/devices/VectorSettingsDevicesFragment.kt

@@ -60,7 +60,7 @@ class VectorSettingsDevicesFragment @Inject constructor(
         waiting_view_status_text.setText(R.string.please_wait)
         waiting_view_status_text.isVisible = true
         devicesController.callback = this
-        recyclerView.configureWith(devicesController)
+        recyclerView.configureWith(devicesController, showDivider = true)
         devicesViewModel.requestErrorLiveData.observeEvent(this) {
             displayErrorDialog(it)
             // Password is maybe not good, for safety measure, reset it here

vector/src/main/res/values/strings_riotX.xml

@@ -15,5 +15,7 @@
     <string name="settings_rageshake_detection_threshold_summary">Shake your phone to test the detection threshold</string>
     <string name="rageshake_detected">Shake detected!</string>
     <string name="settings">Settings</string>
+    <string name="devices_current_device">Current device</string>
+    <string name="devices_other_devices">Other devices</string>
 
 </resources>