feat: add Select reorder mode to menu customization (#2290) (#2291)

Adds a third reorder mode alongside Drag and Arrows. Select is a
two-step "pick an item, then pick its destination" flow: tap Move on
any row to pick it up, then tap any other row to insert it there
(or tap "Insert at the end").

Switch-access users could previously only reorder via Arrows, which
takes one tap per position — moving an item from position 1 to 12 took
11 taps and 11 scan passes. Select moves any item to any position in
two scan passes regardless of distance.

UI shell over the existing moveItem(from, to) primitive on the view
model — no database, repository, or data-flow changes.

Closes #2290

Co-authored-by: Owen McGirr <o.a.mcgirr@gmail.com>

Author: enaboapps

app/src/main/java/com/enaboapps/switchify/components/ReorderableList.kt

@@ -1,6 +1,7 @@
 package com.enaboapps.switchify.components
 
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -12,17 +13,24 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowDownward
+import androidx.compose.material.icons.filled.ArrowUpward
+import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.icons.filled.DragHandle
 import androidx.compose.material.icons.filled.KeyboardArrowDown
 import androidx.compose.material.icons.filled.KeyboardArrowUp
+import androidx.compose.material.icons.filled.OpenWith
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.SegmentedButton
 import androidx.compose.material3.SegmentedButtonDefaults
 import androidx.compose.material3.SingleChoiceSegmentedButtonRow
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
+import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -39,21 +47,41 @@ import sh.calvin.reorderable.rememberReorderableLazyListState
 
 /**
  * Reorder mode for the reorderable list.
+ *
+ * SELECT is a switch-access-friendly two-step flow: pick an item, then pick
+ * a destination. It moves any item to any position in two taps regardless of
+ * distance, where ARROWS needs one tap per position.
  */
 enum class ReorderMode {
     DRAG,
-    ARROWS
+    ARROWS,
+    SELECT
 }
 
+/**
+ * Selection state and callbacks for [ReorderMode.SELECT]. Passing null to
+ * [ReorderableList] hides the Select segmented button entirely.
+ */
+class SelectModeState<T>(
+    val selectedKey: Any?,
+    val getLabel: (T) -> String,
+    val onPickUp: (T) -> Unit,
+    val onCancel: () -> Unit,
+    val onInsertBefore: (T) -> Unit,
+    val onInsertAtEnd: () -> Unit
+)
+
 /**
  * A generic reorderable list component that allows users to choose between
- * drag-and-drop or up/down arrow buttons for reordering items.
+ * drag-and-drop, up/down arrow buttons, or a switch-friendly select-then-
+ * insert flow for reordering items.
  *
  * @param T The type of items in the list
  * @param items The list of items to display
  * @param onMove Callback invoked when an item is moved from one position to another
  * @param key Function to extract a unique key from each item
- * @param defaultMode The default reorder mode (DRAG or ARROWS)
+ * @param defaultMode The default reorder mode (DRAG, ARROWS, or SELECT)
+ * @param selectModeState Selection state for SELECT mode. Null hides the Select toggle.
  * @param modifier Modifier for the component
  * @param itemContent Composable function to render each item. Receives the item,
  *                    whether it's being dragged, and the reorder controls composable
@@ -64,6 +92,7 @@ fun <T> ReorderableList(
     onMove: (fromIndex: Int, toIndex: Int) -> Unit,
     key: (T) -> Any,
     defaultMode: ReorderMode = ReorderMode.DRAG,
+    selectModeState: SelectModeState<T>? = null,
     modifier: Modifier = Modifier,
     itemContent: @Composable (item: T, isDragging: Boolean, reorderControls: @Composable () -> Unit) -> Unit
 ) {
@@ -73,7 +102,13 @@ fun <T> ReorderableList(
         // Mode toggle
         ReorderModeToggle(
             currentMode = currentMode,
-            onModeChange = { currentMode = it },
+            showSelect = selectModeState != null,
+            onModeChange = { newMode ->
+                if (currentMode == ReorderMode.SELECT && newMode != ReorderMode.SELECT) {
+                    selectModeState?.onCancel?.invoke()
+                }
+                currentMode = newMode
+            },
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(horizontal = 16.dp, vertical = 8.dp)
@@ -92,6 +127,20 @@ fun <T> ReorderableList(
                 key = key,
                 itemContent = itemContent
             )
+            ReorderMode.SELECT -> {
+                if (selectModeState != null) {
+                    SelectReorderableList(
+                        items = items,
+                        key = key,
+                        selectModeState = selectModeState,
+                        itemContent = itemContent
+                    )
+                } else {
+                    // Defensive: if Select was the default but no state was supplied,
+                    // fall back to drag rather than rendering nothing.
+                    DragReorderableList(items, onMove, key, itemContent)
+                }
+            }
         }
     }
 }
@@ -102,6 +151,7 @@ fun <T> ReorderableList(
 @Composable
 private fun ReorderModeToggle(
     currentMode: ReorderMode,
+    showSelect: Boolean,
     onModeChange: (ReorderMode) -> Unit,
     modifier: Modifier = Modifier
 ) {
@@ -114,23 +164,35 @@ private fun ReorderModeToggle(
         inactiveBorderColor = MaterialTheme.colorScheme.outline
     )
 
+    val totalCount = if (showSelect) 3 else 2
+
     SingleChoiceSegmentedButtonRow(modifier = modifier) {
         SegmentedButton(
             selected = currentMode == ReorderMode.DRAG,
             onClick = { onModeChange(ReorderMode.DRAG) },
-            shape = SegmentedButtonDefaults.itemShape(index = 0, count = 2),
+            shape = SegmentedButtonDefaults.itemShape(index = 0, count = totalCount),
             colors = colors
         ) {
             Text(stringResource(R.string.reorder_mode_drag))
         }
         SegmentedButton(
             selected = currentMode == ReorderMode.ARROWS,
             onClick = { onModeChange(ReorderMode.ARROWS) },
-            shape = SegmentedButtonDefaults.itemShape(index = 1, count = 2),
+            shape = SegmentedButtonDefaults.itemShape(index = 1, count = totalCount),
             colors = colors
         ) {
             Text(stringResource(R.string.reorder_mode_arrows))
         }
+        if (showSelect) {
+            SegmentedButton(
+                selected = currentMode == ReorderMode.SELECT,
+                onClick = { onModeChange(ReorderMode.SELECT) },
+                shape = SegmentedButtonDefaults.itemShape(index = 2, count = totalCount),
+                colors = colors
+            ) {
+                Text(stringResource(R.string.reorder_mode_select))
+            }
+        }
     }
 }
 
@@ -190,6 +252,62 @@ private fun <T> ArrowReorderableList(
     }
 }
 
+/**
+ * Select-then-insert reorderable list implementation. The reorder-controls
+ * slot renders one of three buttons per row depending on selection state:
+ *
+ *  - no selection → Move (picks the item up)
+ *  - this row is selected → Cancel (clears the selection)
+ *  - another row is selected → Insert above (places the selection before this row)
+ *
+ * A pinned "Insert at end" row is appended while a selection is active.
+ */
+@Composable
+private fun <T> SelectReorderableList(
+    items: List<T>,
+    key: (T) -> Any,
+    selectModeState: SelectModeState<T>,
+    itemContent: @Composable (item: T, isDragging: Boolean, reorderControls: @Composable () -> Unit) -> Unit
+) {
+    val lazyListState: LazyListState = rememberLazyListState()
+    val selectedKey = selectModeState.selectedKey
+    val selectedLabel = remember(items, selectedKey) {
+        items.firstOrNull { key(it) == selectedKey }?.let { selectModeState.getLabel(it) }
+    }
+
+    LazyColumn(state = lazyListState) {
+        itemsIndexed(items, key = { _, item -> key(item) }) { _, item ->
+            val isSelected = key(item) == selectedKey
+            val hasSelection = selectedKey != null
+            itemContent(item, false) {
+                when {
+                    isSelected -> SelectControlCancel(
+                        itemLabel = selectModeState.getLabel(item),
+                        onClick = selectModeState.onCancel
+                    )
+                    hasSelection -> SelectControlInsertAbove(
+                        selectedLabel = selectedLabel.orEmpty(),
+                        targetLabel = selectModeState.getLabel(item),
+                        onClick = { selectModeState.onInsertBefore(item) }
+                    )
+                    else -> SelectControlMove(
+                        itemLabel = selectModeState.getLabel(item),
+                        onClick = { selectModeState.onPickUp(item) }
+                    )
+                }
+            }
+        }
+        if (selectedKey != null) {
+            item(key = "__select_insert_at_end__") {
+                InsertAtEndRow(
+                    selectedLabel = selectedLabel.orEmpty(),
+                    onClick = selectModeState.onInsertAtEnd
+                )
+            }
+        }
+    }
+}
+
 /**
  * Drag handle icon for drag mode.
  */
@@ -254,3 +372,86 @@ private fun ArrowControls(
         }
     }
 }
+
+@Composable
+private fun SelectControlMove(itemLabel: String, onClick: () -> Unit) {
+    IconButton(onClick = onClick, modifier = Modifier.size(40.dp)) {
+        Icon(
+            imageVector = Icons.Default.OpenWith,
+            contentDescription = stringResource(
+                R.string.menu_customization_select_move_action,
+                itemLabel
+            ),
+            tint = MaterialTheme.colorScheme.onSurfaceVariant
+        )
+    }
+}
+
+@Composable
+private fun SelectControlCancel(itemLabel: String, onClick: () -> Unit) {
+    IconButton(onClick = onClick, modifier = Modifier.size(40.dp)) {
+        Icon(
+            imageVector = Icons.Default.Close,
+            contentDescription = stringResource(
+                R.string.menu_customization_select_cancel_action,
+                itemLabel
+            ),
+            tint = MaterialTheme.colorScheme.primary
+        )
+    }
+}
+
+@Composable
+private fun SelectControlInsertAbove(
+    selectedLabel: String,
+    targetLabel: String,
+    onClick: () -> Unit
+) {
+    IconButton(onClick = onClick, modifier = Modifier.size(40.dp)) {
+        Icon(
+            imageVector = Icons.Default.ArrowUpward,
+            contentDescription = stringResource(
+                R.string.menu_customization_select_insert_above_action,
+                selectedLabel,
+                targetLabel
+            ),
+            tint = MaterialTheme.colorScheme.primary
+        )
+    }
+}
+
+@Composable
+private fun InsertAtEndRow(selectedLabel: String, onClick: () -> Unit) {
+    Surface(
+        onClick = onClick,
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = 4.dp),
+        color = MaterialTheme.colorScheme.surfaceColorAtElevation(2.dp),
+        shape = RoundedCornerShape(8.dp)
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(12.dp)
+        ) {
+            Icon(
+                imageVector = Icons.Default.ArrowDownward,
+                contentDescription = null,
+                tint = MaterialTheme.colorScheme.primary,
+                modifier = Modifier.size(24.dp)
+            )
+            Text(
+                text = stringResource(
+                    R.string.menu_customization_select_insert_at_end_action,
+                    selectedLabel
+                ),
+                style = MaterialTheme.typography.bodyLarge,
+                color = MaterialTheme.colorScheme.primary,
+                modifier = Modifier.weight(1f)
+            )
+        }
+    }
+}