Add drag-to-reorder pages and fix page navigation from page list

Drag-to-reorder:
- Added sh.calvin.reorderable library for LazyVerticalGrid drag support
- Long-press and drag page thumbnails to reorder
- Page numbers updated in DB on drop
- Visual feedback: slight scale + transparency while dragging

Page navigation fix:
- Clicking a page in "view all pages" now correctly opens that page
  (key(pid) forces EditorScreen recreation with the selected page)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app/build.gradle.kts

@@ -68,6 +68,7 @@ dependencies {
     ksp(libs.room.compiler)
 
     implementation(libs.coroutines.android)
+    implementation(libs.reorderable)
 
     testImplementation(libs.junit)
     testImplementation(libs.coroutines.test)

app/src/main/kotlin/net/metacircular/engpad/data/db/PageDao.kt

@@ -25,4 +25,7 @@ interface PageDao {
 
     @Query("SELECT * FROM pages WHERE notebook_id = :notebookId ORDER BY page_number ASC")
     suspend fun getByNotebookIdList(notebookId: Long): List<Page>
+
+    @Query("UPDATE pages SET page_number = :pageNumber WHERE id = :id")
+    suspend fun updatePageNumber(id: Long, pageNumber: Int)
 }

app/src/main/kotlin/net/metacircular/engpad/data/repository/PageRepository.kt

@@ -34,6 +34,12 @@ class PageRepository(
 
     suspend fun deletePage(id: Long) = pageDao.deleteById(id)
 
+    suspend fun reorderPages(notebookId: Long, orderedPageIds: List<Long>) {
+        orderedPageIds.forEachIndexed { index, pageId ->
+            pageDao.updatePageNumber(pageId, index + 1)
+        }
+    }
+
     suspend fun getStrokes(pageId: Long): List<Stroke> =
         strokeDao.getByPageId(pageId)
 

app/src/main/kotlin/net/metacircular/engpad/ui/navigation/NavGraph.kt

@@ -4,6 +4,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.key
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
@@ -98,6 +99,8 @@ fun EngPadNavGraph(
             val ps = pageSize
             val pid = initialPageId
             if (ps != null && pid != null) {
+                // key(pid) forces EditorScreen + ViewModel recreation when page changes
+                key(pid) {
                 EditorScreen(
                     notebookId = notebookId,
                     pageSize = ps,
@@ -111,6 +114,7 @@ fun EngPadNavGraph(
                         navController.navigate(Routes.pages(notebookId))
                     },
                 )
+                } // key(pid)
             }
         }
         composable(

app/src/main/kotlin/net/metacircular/engpad/ui/pages/PageListScreen.kt

@@ -15,6 +15,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
+import androidx.compose.foundation.lazy.grid.rememberLazyGridState
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Card
 import androidx.compose.material3.DropdownMenu
@@ -34,9 +35,11 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
+import androidx.compose.runtime.toMutableStateList
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
+import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.nativeCanvas
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
@@ -50,6 +53,8 @@ import net.metacircular.engpad.data.model.PageSize
 import net.metacircular.engpad.data.model.Stroke
 import net.metacircular.engpad.data.repository.PageRepository
 import net.metacircular.engpad.ui.export.PdfExporter
+import sh.calvin.reorderable.ReorderableItem
+import sh.calvin.reorderable.rememberReorderableLazyGridState
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -73,6 +78,23 @@ fun PageListScreen(
 
     var pageToDelete by remember { mutableStateOf<Page?>(null) }
 
+    // Maintain a local mutable list for drag reorder
+    val reorderablePages = remember { mutableListOf<Page>() }
+    LaunchedEffect(pages) {
+        reorderablePages.clear()
+        reorderablePages.addAll(pages)
+    }
+
+    val lazyGridState = rememberLazyGridState()
+    val reorderableLazyGridState = rememberReorderableLazyGridState(lazyGridState) { from, to ->
+        val fromIndex = reorderablePages.indexOfFirst { it.id == from.key as Long }
+        val toIndex = reorderablePages.indexOfFirst { it.id == to.key as Long }
+        if (fromIndex >= 0 && toIndex >= 0) {
+            val item = reorderablePages.removeAt(fromIndex)
+            reorderablePages.add(toIndex, item)
+        }
+    }
+
     Scaffold(
         topBar = {
             TopAppBar(title = { Text(notebookTitle) })
@@ -100,15 +122,18 @@ fun PageListScreen(
                     .fillMaxSize()
                     .padding(padding)
                     .padding(8.dp),
+                state = lazyGridState,
                 horizontalArrangement = Arrangement.spacedBy(8.dp),
                 verticalArrangement = Arrangement.spacedBy(8.dp),
             ) {
-                items(pages, key = { it.id }) { page ->
+                items(reorderablePages.toList(), key = { it.id }) { page ->
+                    ReorderableItem(reorderableLazyGridState, key = page.id) { isDragging ->
                         PageThumbnail(
                             page = page,
                             pageSize = pageSize,
                             aspectRatio = aspectRatio,
                             repository = repository,
+                            isDragging = isDragging,
                             onClick = { onPageClick(page.id, pageSize) },
                             onDelete = { pageToDelete = page },
                             onExportJpg = {
@@ -124,7 +149,17 @@ fun PageListScreen(
                                     PdfExporter.shareFile(context, file, "image/jpeg")
                                 }
                             },
+                            modifier = Modifier.longPressDraggableHandle(
+                                onDragStopped = {
+                                    // Persist the new order
+                                    viewModel.reorderPages(
+                                        notebookId,
+                                        reorderablePages.map { it.id },
                                     )
+                                },
+                            ),
+                        )
+                    }
                 }
             }
         }
@@ -155,9 +190,11 @@ private fun PageThumbnail(
     pageSize: PageSize,
     aspectRatio: Float,
     repository: PageRepository,
+    isDragging: Boolean,
     onClick: () -> Unit,
     onDelete: () -> Unit,
     onExportJpg: () -> Unit,
+    modifier: Modifier = Modifier,
 ) {
     var strokes by remember(page.id) { mutableStateOf<List<Stroke>>(emptyList()) }
     var showMenu by remember { mutableStateOf(false) }
@@ -168,6 +205,15 @@ private fun PageThumbnail(
 
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
+        modifier = Modifier
+            .graphicsLayer {
+                if (isDragging) {
+                    scaleX = 1.05f
+                    scaleY = 1.05f
+                    alpha = 0.8f
+                }
+            }
+            .then(modifier),
     ) {
         Box {
             Card(
@@ -175,7 +221,7 @@ private fun PageThumbnail(
                     .fillMaxWidth()
                     .combinedClickable(
                         onClick = onClick,
-                        onLongClick = { showMenu = true },
+                        onLongClick = { if (!isDragging) showMenu = true },
                     ),
             ) {
                 Canvas(

app/src/main/kotlin/net/metacircular/engpad/ui/pages/PageListViewModel.kt

@@ -31,6 +31,12 @@ class PageListViewModel(
         }
     }
 
+    fun reorderPages(notebookId: Long, orderedPageIds: List<Long>) {
+        viewModelScope.launch {
+            repository.reorderPages(notebookId, orderedPageIds)
+        }
+    }
+
     suspend fun getStrokes(pageId: Long): List<Stroke> =
         repository.getStrokes(pageId)
 

gradle/libs.versions.toml

@@ -10,6 +10,7 @@ coroutines = "1.10.2"
 core-ktx = "1.18.0"
 activity-compose = "1.13.0"
 junit = "4.13.2"
+reorderable = "3.0.0"
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "core-ktx" }
@@ -35,6 +36,7 @@ coroutines-android = { group = "org.jetbrains.kotlinx", name = "kotlinx-coroutin
 coroutines-test = { group = "org.jetbrains.kotlinx", name = "kotlinx-coroutines-test", version.ref = "coroutines" }
 
 junit = { group = "junit", name = "junit", version.ref = "junit" }
+reorderable = { group = "sh.calvin.reorderable", name = "reorderable", version.ref = "reorderable" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }